/* ========================================================================== GroomCaptain shared component layer -------------------------------------------------------------------------- Loaded last so it can settle the differences between Bootstrap, the Yzen admin template and Telerik without page-level one-offs. Everything here is presentational: no layout rule changes what the product does. Sections 01 App shell 02 Page header 03 Panels and sections 04 Toolbars and filters 05 Buttons and action menus 06 Tables and data grids 07 Status chips 08 Forms 09 Tabs and segmented controls 10 Metrics 11 Callouts, guidance, alerts 12 Empty states 13 Dialogs and drawers 14 Schedule workspace 15 Settings 16 Accessibility and focus ========================================================================== */ /* ========================================================================== 01 App shell ========================================================================== */ body { font-family: var(--gc-font); font-size: var(--gc-font-size-body); line-height: var(--gc-line-body); color: var(--gc-text); background-color: var(--gc-surface-page); -webkit-font-smoothing: antialiased; } .main-content.app-content { background-color: var(--gc-surface-page); /* Belt and braces: a stray wide child must never make the whole page scroll sideways on a phone. */ overflow-x: clip; } /* Give the working area the full window instead of a narrow centre column. The production build stranded ~55% of a 1440px viewport. */ .main-content.app-content > .container-fluid { max-width: var(--gc-page-max); margin-inline: auto; padding-inline: var(--gc-page-padding-x); } /* --------------------------------------------------------------------------- Scope note Telerik renders windows, dialogs and dropdown popups at the end of , outside `.main-content.app-content`. Component rules below therefore target a shared scope list so the same button, field, table, chip and tab treatments apply inside dialogs as on the page. Without this, dialogs fall back to Bootstrap/Yzen defaults and the product looks like two design systems bolted together. ------------------------------------------------------------------------- */ /* Sidebar visuals live in Components/AppSidebar.razor.css (component-scoped), because component-scoped rules outrank this file. */ /* ---- Header -------------------------------------------------------------- */ .app-header { min-height: 3.75rem; background: var(--gc-surface); border-block-end: 1px solid var(--gc-border); box-shadow: none; } .app-header .main-header-container { min-height: 3.75rem; gap: var(--gc-space-3); } .app-header .header-search-bar { height: var(--gc-control-height); border-radius: var(--gc-radius); border: 1px solid var(--gc-border); background: var(--gc-surface-subtle); font-size: var(--gc-font-size-body); } .app-header .header-search-bar:focus { background: var(--gc-surface); border-color: var(--gc-primary); box-shadow: none; } .app-header .header-link { color: var(--gc-text-secondary); border-radius: var(--gc-radius-sm); } .app-header .header-link:hover { background: var(--gc-surface-sunken); color: var(--gc-text); } /* ========================================================================== 02 Page header — one pattern for every screen ========================================================================== */ .gc-page-header { display: flex; flex-direction: column; gap: var(--gc-space-4); padding-block: var(--gc-space-5) var(--gc-space-4); margin-block-end: var(--gc-section-gap); border-block-end: 1px solid var(--gc-border); } .gc-page-header__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gc-space-4); flex-wrap: wrap; } .gc-page-header__identity { min-width: 0; display: flex; flex-direction: column; gap: var(--gc-space-1); } .gc-page-header__eyebrow { display: flex; align-items: center; gap: var(--gc-space-2); color: var(--gc-text-muted); font-size: var(--gc-font-size-eyebrow); font-weight: var(--gc-weight-semibold); letter-spacing: 0.09em; text-transform: uppercase; } .gc-page-header__title { margin: 0; color: var(--gc-text); font-size: var(--gc-font-size-page-title); font-weight: var(--gc-weight-bold); letter-spacing: -0.01em; line-height: var(--gc-line-tight); } .gc-page-header__lede { margin: 0; max-width: 68ch; color: var(--gc-text-secondary); font-size: var(--gc-font-size-body); } .gc-page-header__actions { display: flex; align-items: center; gap: var(--gc-space-2); flex-wrap: wrap; } /* Scope chip: which slice of the business this page is showing. */ .gc-scope { display: inline-flex; align-items: center; gap: var(--gc-space-2); height: var(--gc-control-height-sm); padding-inline: var(--gc-space-3); border: 1px solid var(--gc-border); border-radius: var(--gc-radius-pill); background: var(--gc-surface); color: var(--gc-text-secondary); font-size: var(--gc-font-size-helper); font-weight: var(--gc-weight-medium); white-space: nowrap; } .gc-scope__value { color: var(--gc-text); font-weight: var(--gc-weight-semibold); } .gc-page-header__toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--gc-space-3); flex-wrap: wrap; } /* ========================================================================== 03 Panels and sections — flat first, elevation only for overlays ========================================================================== */ .gc-section { margin-block-end: var(--gc-section-gap); } .gc-section__heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gc-space-3); flex-wrap: wrap; margin-block-end: var(--gc-space-3); } .gc-section__title { margin: 0; color: var(--gc-text); font-size: var(--gc-font-size-section); font-weight: var(--gc-weight-semibold); letter-spacing: -0.005em; } .gc-section__hint { margin: 0; color: var(--gc-text-muted); font-size: var(--gc-font-size-helper); } .gc-panel { background: var(--gc-surface); border: 1px solid var(--gc-border); border-radius: var(--gc-radius); box-shadow: var(--gc-shadow-none); } .gc-panel--quiet { background: var(--gc-surface-subtle); } .gc-panel--flush { border-inline: 0; border-radius: 0; } .gc-panel__header { display: flex; align-items: center; justify-content: space-between; gap: var(--gc-space-3); flex-wrap: wrap; padding: var(--gc-space-3) var(--gc-panel-padding); border-block-end: 1px solid var(--gc-border-subtle); } .gc-panel__title { margin: 0; font-size: var(--gc-font-size-card-title); font-weight: var(--gc-weight-semibold); color: var(--gc-text); } .gc-panel__body { padding: var(--gc-panel-padding); } /* Grids and wide tables scroll within the panel, never the page. */ .gc-panel__body--flush { padding: 0; overflow-x: auto; } /* Tame the template's card so untouched pages inherit the calmer surface. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .card.custom-card { border: 1px solid var(--gc-border); border-radius: var(--gc-radius); box-shadow: var(--gc-shadow-none); background: var(--gc-surface); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .card.custom-card > .card-header { padding: var(--gc-space-3) var(--gc-panel-padding); border-block-end: 1px solid var(--gc-border-subtle); background: transparent; } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .card.custom-card .card-title { font-size: var(--gc-font-size-card-title); font-weight: var(--gc-weight-semibold); color: var(--gc-text); margin-block-end: 0; } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .card.custom-card > .card-body { padding: var(--gc-panel-padding); } /* A stack of rows reads better than a stack of cards. */ .gc-list { display: flex; flex-direction: column; } .gc-list__row { display: flex; align-items: center; gap: var(--gc-space-3); padding: var(--gc-space-3) var(--gc-panel-padding); border-block-start: 1px solid var(--gc-border-subtle); text-decoration: none; color: inherit; transition: background-color var(--gc-transition); } .gc-list__row:first-child { border-block-start: 0; } .gc-list__row:hover { background: var(--gc-surface-subtle); } .gc-list__main { min-width: 0; flex: 1 1 auto; } .gc-list__title { display: block; color: var(--gc-text); font-size: var(--gc-font-size-body); font-weight: var(--gc-weight-semibold); } .gc-list__meta { display: block; color: var(--gc-text-muted); font-size: var(--gc-font-size-helper); } /* ========================================================================== 04 Toolbars and filters ========================================================================== */ .gc-toolbar { display: flex; align-items: center; gap: var(--gc-space-2); flex-wrap: wrap; } .gc-toolbar__group { display: flex; align-items: center; gap: var(--gc-space-2); } .gc-toolbar__spacer { flex: 1 1 auto; } /* Collapsible filter drawer: closed by default, summarised by chips. */ .gc-filters { border: 1px solid var(--gc-border); border-radius: var(--gc-radius); background: var(--gc-surface); } .gc-filters__summary { display: flex; align-items: center; gap: var(--gc-space-2); flex-wrap: wrap; padding: var(--gc-space-2) var(--gc-space-3); } .gc-filters__body { padding: var(--gc-space-4) var(--gc-panel-padding) var(--gc-panel-padding); border-block-start: 1px solid var(--gc-border-subtle); } .gc-filter-chip { display: inline-flex; align-items: center; gap: var(--gc-space-2); height: 1.75rem; padding-inline: var(--gc-space-3); border: 1px solid var(--gc-primary-border); border-radius: var(--gc-radius-pill); background: var(--gc-primary-surface); color: var(--gc-primary); font-size: var(--gc-font-size-helper); font-weight: var(--gc-weight-semibold); } /* ========================================================================== 05 Buttons and action menus ========================================================================== */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn, .gc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--gc-space-2); min-height: var(--gc-control-height); padding-inline: var(--gc-space-4); border-radius: var(--gc-radius-sm); font-size: var(--gc-font-size-button); font-weight: var(--gc-weight-semibold); line-height: 1.2; white-space: nowrap; transition: background-color var(--gc-transition), border-color var(--gc-transition), color var(--gc-transition); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-sm { min-height: var(--gc-control-height-sm); padding-inline: var(--gc-space-3); font-size: var(--gc-font-size-helper); } /* Exactly one filled button per decision point. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-primary, .gc-btn--primary { background-color: var(--gc-primary); border-color: var(--gc-primary); color: var(--gc-primary-on); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-primary:hover, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-primary:focus-visible, .gc-btn--primary:hover { background-color: var(--gc-primary-hover); border-color: var(--gc-primary-hover); color: var(--gc-primary-on); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-primary:active { background-color: var(--gc-primary-active); border-color: var(--gc-primary-active); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-primary:disabled, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-primary.disabled { background-color: var(--gc-primary); border-color: var(--gc-primary); opacity: 0.45; } /* Everything secondary shares one quiet outline treatment. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-outline-secondary, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-outline-primary, .gc-btn--secondary { background-color: var(--gc-surface); border-color: var(--gc-border-strong); color: var(--gc-text); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-outline-secondary:hover, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-outline-primary:hover, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-outline-secondary:focus-visible, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-outline-primary:focus-visible, .gc-btn--secondary:hover { background-color: var(--gc-surface-sunken); border-color: var(--gc-border-strong); color: var(--gc-text); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-outline-danger, .gc-btn--danger { background-color: var(--gc-surface); border-color: var(--gc-danger-border); color: var(--gc-danger); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-outline-danger:hover { background-color: var(--gc-danger-surface); border-color: var(--gc-danger); color: var(--gc-danger); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-link { min-height: auto; padding-inline: 0; color: var(--gc-primary); font-weight: var(--gc-weight-semibold); text-decoration: none; } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-link:hover { color: var(--gc-primary-hover); text-decoration: underline; } /* Icon-only button with a real touch target. */ .gc-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--gc-control-height); height: var(--gc-control-height); padding: 0; border: 1px solid transparent; border-radius: var(--gc-radius-sm); background: transparent; color: var(--gc-text-secondary); transition: background-color var(--gc-transition), color var(--gc-transition); } .gc-icon-btn:hover { background: var(--gc-surface-sunken); color: var(--gc-text); } .gc-icon-btn--danger:hover { background: var(--gc-danger-surface); color: var(--gc-danger); } .gc-icon-btn i { font-size: 1.05rem; } /* Overflow menu: the home for rare actions. */ .gc-menu { position: relative; } .gc-menu > summary { list-style: none; cursor: pointer; } .gc-menu > summary::-webkit-details-marker { display: none; } .gc-menu__panel { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--gc-space-1)); z-index: 60; min-width: 13rem; padding: var(--gc-space-1); border: 1px solid var(--gc-border); border-radius: var(--gc-radius); background: var(--gc-surface); box-shadow: var(--gc-shadow-popover); } .gc-menu__item { display: flex; align-items: center; gap: var(--gc-space-2); width: 100%; padding: var(--gc-space-2) var(--gc-space-3); border: 0; border-radius: var(--gc-radius-sm); background: transparent; color: var(--gc-text); font-size: var(--gc-font-size-body); text-align: start; text-decoration: none; } .gc-menu__item:hover { background: var(--gc-surface-sunken); } .gc-menu__item--danger { color: var(--gc-danger); } .gc-menu__separator { height: 1px; margin: var(--gc-space-1) 0; background: var(--gc-border-subtle); } /* ---- Nested containers ---------------------------------------------------- Grouped form sections and info blocks were drawn as a bordered, rounded box inside an already-bordered panel or dialog — two containers saying the same thing. One layer of separation is enough: the subtle-surface variant loses its border entirely, and the plain variant keeps a hairline but adopts the token border colour and radius instead of Bootstrap's. Containers that communicate real state or interaction (choice cards, pet cards, metric tiles, menus) have their own classes and are untouched. -------------------------------------------------------------------------- */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .border.rounded, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .border.rounded-2, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .border.rounded-3 { border-color: var(--gc-border-subtle) !important; border-radius: var(--gc-radius) !important; } /* The subtle-surface group is a section, not a card: drop the box entirely. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .border.rounded.bg-light-subtle { border: 0 !important; border-radius: var(--gc-radius-sm) !important; background: var(--gc-surface-subtle) !important; } /* Bootstrap's alert-light box inside a panel is the same redundancy. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .alert-light.border { border-color: var(--gc-border-subtle) !important; border-radius: var(--gc-radius) !important; background: var(--gc-surface-subtle); color: var(--gc-text); } /* Helper text: one treatment wherever it appears. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .text-muted.fs-12, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .form-text { color: var(--gc-text-muted) !important; font-size: var(--gc-font-size-helper) !important; line-height: var(--gc-line-body); } /* ---- Legacy neutralisation ----------------------------------------------- Bootstrap and the Yzen template both ship saturated semantic buttons that predate this design system. Rather than patch each call site, the variants are folded into the two treatments the system actually has: one filled primary, and one quiet outline. Destructive keeps its own outline so it can never be mistaken for the primary action. `!important` is required only because the template declares these with `!important` itself. -------------------------------------------------------------------------- */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-success { background-color: var(--gc-primary) !important; border-color: var(--gc-primary) !important; color: var(--gc-primary-on) !important; } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-success:hover, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-success:focus-visible { background-color: var(--gc-primary-hover) !important; border-color: var(--gc-primary-hover) !important; } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-outline-success { background-color: var(--gc-surface) !important; border-color: var(--gc-border-strong) !important; color: var(--gc-text) !important; } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-outline-success:hover { background-color: var(--gc-surface-sunken) !important; border-color: var(--gc-border-strong) !important; color: var(--gc-text) !important; } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-danger { background-color: var(--gc-danger) !important; border-color: var(--gc-danger) !important; color: #fff !important; } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-info, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-warning, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-secondary, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-light, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .btn-dark { background-color: var(--gc-surface) !important; border-color: var(--gc-border-strong) !important; color: var(--gc-text) !important; } /* Telerik buttons inside our surfaces: same two treatments, same radius. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-button { border-radius: var(--gc-radius-sm); font-family: var(--gc-font); font-size: var(--gc-font-size-button); font-weight: var(--gc-weight-semibold); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-button-solid-primary { background-color: var(--gc-primary); border-color: var(--gc-primary); background-image: none; color: var(--gc-primary-on); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-button-solid-primary:hover { background-color: var(--gc-primary-hover); border-color: var(--gc-primary-hover); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-button-solid-base { background-color: var(--gc-surface); background-image: none; border-color: var(--gc-border-strong); color: var(--gc-text); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-button-solid-base:hover { background-color: var(--gc-surface-sunken); border-color: var(--gc-border-strong); } /* Telerik inputs, pickers and dropdowns share the field treatment. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-input, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-picker { border-radius: var(--gc-radius-sm); border-color: var(--gc-border-strong); background-color: var(--gc-surface); color: var(--gc-text); font-family: var(--gc-font); font-size: var(--gc-font-size-body); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-input:focus-within, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-picker:focus-within { border-color: var(--gc-primary); box-shadow: 0 0 0 3px rgba(15, 95, 88, 0.14); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-input-solid, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-picker-solid { background-image: none; } /* Combobox/picker toggles matched the old theme's grey fill, which made them read as disabled next to the native selects. Make them part of the field. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-input-button, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-select, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-picker .k-input-button { border: 0; background: transparent; background-image: none; color: var(--gc-text-secondary); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-input-button:hover, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-select:hover { background: transparent; color: var(--gc-text); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-input-inner { padding-inline: var(--gc-space-3); color: var(--gc-text); font-size: var(--gc-font-size-body); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-input-inner::placeholder { color: var(--gc-text-muted); } /* Telerik fields should stand the same height as native controls beside them. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-input, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-picker { min-height: var(--gc-control-height); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-list-item.k-selected { background-color: var(--gc-primary-surface); color: var(--gc-primary); } /* Row-action buttons on pages not yet migrated to `gc-icon-btn` used a filled purple/red pair, which made routine edit and delete the loudest things on the page. Fold them into the quiet icon-button treatment. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .bos-grid-actions { gap: var(--gc-space-1); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .bos-grid-action-button, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .bos-grid-action-button.k-button, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .bos-grid-action-button.btn { width: var(--gc-control-height); height: var(--gc-control-height); min-width: var(--gc-control-height); border-radius: var(--gc-radius-sm); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .bos-grid-action-button.bos-grid-action-primary, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .bos-grid-action-button.bos-grid-action-primary.k-button { background: transparent; background-image: none; border-color: transparent; color: var(--gc-text-secondary); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .bos-grid-action-button.bos-grid-action-primary:hover, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .bos-grid-action-button.bos-grid-action-primary.k-hover { background: var(--gc-surface-sunken); border-color: transparent; color: var(--gc-text); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .bos-grid-action-button.bos-grid-action-danger, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .bos-grid-action-button.bos-grid-action-danger.k-button { background: transparent; background-image: none; border-color: transparent; color: var(--gc-text-secondary); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .bos-grid-action-button.bos-grid-action-danger:hover, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .bos-grid-action-button.bos-grid-action-danger.k-hover { background: var(--gc-danger-surface); border-color: transparent; color: var(--gc-danger); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .bos-grid-action-button i { font-size: 1.05rem; } /* Legacy rounded-pill/heavy-radius leftovers inside migrated surfaces. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .card.custom-card, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .card.custom-card > .card-header, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .card.custom-card > .card-body { border-radius: inherit; } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .shadow-sm, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .shadow, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .shadow-lg { box-shadow: var(--gc-shadow-raised) !important; } /* ========================================================================== 06 Tables and data grids ========================================================================== */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .table, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid { font-size: var(--gc-font-size-table); color: var(--gc-text); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid { border: 1px solid var(--gc-border); border-radius: var(--gc-radius); background: var(--gc-surface); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .table thead th, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-table-th, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-header { padding-block: var(--gc-space-3); background: var(--gc-surface-subtle); color: var(--gc-text-secondary); font-size: var(--gc-font-size-helper); font-weight: var(--gc-weight-semibold); letter-spacing: 0.03em; text-transform: uppercase; border-color: var(--gc-border); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .table th, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .table td, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-table-td, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid td { padding: var(--gc-space-3) var(--gc-space-4); border-color: var(--gc-border-subtle); vertical-align: middle; } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-table-row:hover, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid tr:hover, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .table tbody tr:hover { background: var(--gc-surface-subtle); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-pager { padding: var(--gc-space-2) var(--gc-space-3); background: var(--gc-surface-subtle); border-block-start: 1px solid var(--gc-border); color: var(--gc-text-secondary); font-size: var(--gc-font-size-helper); } /* Identity cell: primary line + supporting lines, instead of one column each. */ .gc-cell-identity { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .gc-cell-identity__name { color: var(--gc-text); font-size: var(--gc-font-size-body); font-weight: var(--gc-weight-semibold); line-height: var(--gc-line-tight); } .gc-cell-identity__meta { display: flex; align-items: center; gap: var(--gc-space-2); flex-wrap: wrap; color: var(--gc-text-muted); font-size: var(--gc-font-size-helper); } .gc-cell-identity__meta > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gc-cell-secondary { color: var(--gc-text-secondary); font-size: var(--gc-font-size-table); line-height: var(--gc-line-tight); } .gc-cell-numeric { font-variant-numeric: tabular-nums; text-align: end; } .gc-cell-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--gc-space-1); } /* ---- Dense-data behaviour ------------------------------------------------- QA data is sparse; production rows are not. These rules target the dense case: long emails and addresses truncate instead of wrapping a row to three lines, and row actions stay pinned and reachable while columns compress. -------------------------------------------------------------------------- */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-table-td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The identity cell is the one place allowed to stack. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-table-td:has(.gc-cell-identity) { white-space: normal; } .gc-cell-identity__meta > * { max-width: 22ch; } .gc-cell-secondary { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Zebra banding earns its keep once rows are dense. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-table-row:nth-child(even) { background: var(--gc-surface-subtle); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-table-row:hover, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-table-row:nth-child(even):hover { background: var(--gc-primary-surface); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-table-row.k-selected, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-table-row.k-selected:hover { background: var(--gc-selected-surface); box-shadow: inset 3px 0 0 var(--gc-primary); } /* Keyboard focus must be visible on a row, not just on the control inside it. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-table-td:focus-within { outline: 2px solid var(--gc-primary); outline-offset: -2px; } /* Header filter/menu affordances: quiet until hovered. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-grid-header-menu, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-grid-filter { color: var(--gc-text-muted); border-radius: var(--gc-radius-sm); opacity: 0.65; } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-table-th:hover .k-grid-header-menu, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-table-th:hover .k-grid-filter, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-grid-header-menu.k-active { color: var(--gc-primary); opacity: 1; } /* Grid toolbar sits on the panel surface, not as a second card. Kept compact so it reads as an action strip rather than an empty band above the rows — the actions are right-aligned and there is no row-count content to fill the left side. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-toolbar, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-grid-toolbar { align-items: center; min-height: 0; padding: var(--gc-space-2) var(--gc-space-3); border-block-end: 1px solid var(--gc-border); background: var(--gc-surface); gap: var(--gc-space-2); } /* Action columns need room for a chip or an icon pair without clipping. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-table-td .gc-cell-actions, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-table-td .bos-grid-actions { flex-wrap: nowrap; } /* Chips must never be clipped by a column that was sized for a glyph. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-table-td .gc-chip { max-width: none; } /* Pager: quiet strip, comfortable but not tall, and allowed to wrap so the page-size selector never pushes the grid wider than the viewport. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-pager { min-height: 0; padding: var(--gc-space-2) var(--gc-space-3); flex-wrap: wrap; gap: var(--gc-space-2); } /* Status cells size to their chip rather than clipping it. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-table-td:has(> .gc-chip) { overflow: visible; white-space: nowrap; } /* ---- Row overflow menus must escape the grid ------------------------------- The cell truncation above (`overflow: hidden` for ellipsis), the panel's horizontal scroller, and the grid's own `overflow: hidden` all clip an open row menu — it gets cut off at the row boundary and reads as if it opened behind the next row. While a row menu is open, the clipping ancestors release their overflow and the owning row is lifted, so the panel paints over the rows beneath it. Everything returns to normal, including truncation, once the menu closes. -------------------------------------------------------------------------- */ .gc-panel__body--flush:has(.gc-menu[open]), :is(.main-content.app-content, .k-window, .k-dialog) .k-grid:has(.gc-menu[open]), :is(.main-content.app-content, .k-window, .k-dialog) .k-grid:has(.gc-menu[open]) .k-grid-container, :is(.main-content.app-content, .k-window, .k-dialog) .k-grid:has(.gc-menu[open]) .k-grid-content, :is(.main-content.app-content, .k-window, .k-dialog) .k-grid:has(.gc-menu[open]) .k-table-tbody, :is(.main-content.app-content, .k-window, .k-dialog) .k-grid .k-table-td:has(.gc-menu[open]) { overflow: visible !important; } /* Lift the owning row above the rows that follow it. */ :is(.main-content.app-content, .k-window, .k-dialog) .k-grid .k-table-row:has(.gc-menu[open]) { position: relative; z-index: 40; } /* The panel itself sits above sibling cells and the grid's sticky chrome. */ :is(.main-content.app-content, .k-window, .k-dialog) .k-grid .gc-menu[open] > .gc-menu__panel { z-index: 1200; } /* Near the bottom of a list, open upward so the menu stays on screen. */ :is(.main-content.app-content, .k-window, .k-dialog) .k-grid .k-table-tbody > tr:nth-last-child(-n + 2) .gc-menu__panel { inset-block-start: auto; inset-block-end: calc(100% + var(--gc-space-1)); } @media (max-width: 767.98px) { /* The rows-per-page selector is the widest pager part and the least useful on a phone; the page links stay. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-pager-sizes { display: none; } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-pager { justify-content: space-between; } } /* Selection checkboxes align with the row text. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-checkbox { border-color: var(--gc-border-strong); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-checkbox:checked { background-color: var(--gc-primary); border-color: var(--gc-primary); } /* Pagination reads as a quiet footer strip. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-pager .k-pager-numbers .k-button.k-selected { background: var(--gc-primary-surface); color: var(--gc-primary); font-weight: var(--gc-weight-semibold); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .k-grid .k-pager .k-button { border-radius: var(--gc-radius-sm); } /* ---- Pet records --------------------------------------------------------- Care information is what staff actually scan before a visit, so temperament and handling get labelled lines rather than a shared table cell. -------------------------------------------------------------------------- */ .gc-pet-list { display: flex; flex-direction: column; gap: var(--gc-space-2); } .gc-pet-card { display: flex; align-items: flex-start; gap: var(--gc-space-3); padding: var(--gc-space-4); border: 1px solid var(--gc-border); border-radius: var(--gc-radius); background: var(--gc-surface); } .gc-pet-card.is-inactive { background: var(--gc-surface-subtle); } .gc-pet-card.is-inactive .gc-pet-card__avatar, .gc-pet-card.is-inactive .gc-pet-card__profile { opacity: 0.7; } .gc-pet-card__avatar { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; flex: 0 0 3rem; overflow: hidden; border: 1px solid var(--gc-border); border-radius: var(--gc-radius); background: var(--gc-primary-surface); color: var(--gc-primary); font-size: 1.1rem; font-weight: var(--gc-weight-bold); } .gc-pet-card__avatar img { width: 100%; height: 100%; object-fit: cover; } .gc-pet-card__main { flex: 1 1 auto; min-width: 0; } .gc-pet-card__identity { display: flex; align-items: center; gap: var(--gc-space-2); flex-wrap: wrap; } .gc-pet-card__name { color: var(--gc-text); font-size: var(--gc-font-size-card-title); font-weight: var(--gc-weight-bold); } .gc-pet-card__profile { margin-block-start: 2px; color: var(--gc-text-secondary); font-size: var(--gc-font-size-helper); } .gc-pet-card__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--gc-space-2) var(--gc-space-4); margin: var(--gc-space-3) 0 0; } .gc-pet-card__facts > div { min-width: 0; } .gc-pet-card__facts dt { color: var(--gc-text-muted); font-size: var(--gc-font-size-eyebrow); font-weight: var(--gc-weight-semibold); letter-spacing: 0.07em; text-transform: uppercase; } .gc-pet-card__facts dd { margin: 0; color: var(--gc-text); font-size: var(--gc-font-size-helper); line-height: var(--gc-line-body); } .gc-pet-card__actions { display: flex; align-items: center; gap: var(--gc-space-2); flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 767.98px) { .gc-pet-card { flex-wrap: wrap; } .gc-pet-card__actions { width: 100%; justify-content: stretch; } .gc-pet-card__actions .btn { flex: 1 1 auto; } } /* ========================================================================== 07 Status chips — always icon or shape plus text, never colour alone ========================================================================== */ .gc-chip { display: inline-flex; align-items: center; gap: var(--gc-space-1); max-width: 100%; padding: 0.15rem 0.5rem; border: 1px solid transparent; border-radius: var(--gc-radius-sm); font-size: var(--gc-font-size-helper); font-weight: var(--gc-weight-semibold); line-height: 1.35; white-space: nowrap; } .gc-chip i { font-size: 0.85rem; } .gc-chip--neutral { background: var(--gc-surface-sunken); border-color: var(--gc-border); color: var(--gc-text-secondary); } .gc-chip--success { background: var(--gc-success-surface); border-color: var(--gc-success-border); color: var(--gc-success); } .gc-chip--warning { background: var(--gc-warning-surface); border-color: var(--gc-warning-border); color: var(--gc-warning); } .gc-chip--danger { background: var(--gc-danger-surface); border-color: var(--gc-danger-border); color: var(--gc-danger); } .gc-chip--info { background: var(--gc-info-surface); border-color: var(--gc-info-border); color: var(--gc-info); } .gc-chip--brand { background: var(--gc-primary-surface); border-color: var(--gc-primary-border); color: var(--gc-primary); } /* Re-map the template's transparent badges onto the same palette so pages we have not migrated yet still look like one product. */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .badge { padding: 0.2rem 0.5rem; border-radius: var(--gc-radius-sm); font-size: var(--gc-font-size-helper); font-weight: var(--gc-weight-semibold); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .bg-success-transparent { background: var(--gc-success-surface) !important; color: var(--gc-success) !important; } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .bg-warning-transparent { background: var(--gc-warning-surface) !important; color: var(--gc-warning) !important; } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .bg-danger-transparent { background: var(--gc-danger-surface) !important; color: var(--gc-danger) !important; } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .bg-info-transparent { background: var(--gc-info-surface) !important; color: var(--gc-info) !important; } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .bg-primary-transparent { background: var(--gc-primary-surface) !important; color: var(--gc-primary) !important; } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .bg-secondary-transparent { background: var(--gc-surface-sunken) !important; color: var(--gc-text-secondary) !important; } /* ========================================================================== 08 Forms ========================================================================== */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .form-label { margin-block-end: var(--gc-space-1); color: var(--gc-text-secondary); font-size: var(--gc-font-size-label); font-weight: var(--gc-weight-semibold); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .form-control, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .form-select { min-height: var(--gc-control-height); padding: 0.375rem var(--gc-space-3); border: 1px solid var(--gc-border-strong); border-radius: var(--gc-radius-sm); background-color: var(--gc-surface); color: var(--gc-text); font-size: var(--gc-font-size-body); transition: border-color var(--gc-transition), box-shadow var(--gc-transition); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .form-control:focus, :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .form-select:focus { border-color: var(--gc-primary); box-shadow: 0 0 0 3px rgba(15, 95, 88, 0.14); outline: none; } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .form-control::placeholder { color: var(--gc-text-muted); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .form-check-input:checked { background-color: var(--gc-primary); border-color: var(--gc-primary); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .form-text, .gc-help { display: block; margin-block-start: var(--gc-space-1); color: var(--gc-text-muted); font-size: var(--gc-font-size-helper); } /* Field grid used by the redesigned editors. */ .gc-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--gc-field-gap); } .gc-field-grid--single { grid-template-columns: 1fr; } .gc-fieldset { padding-block: var(--gc-space-4); border-block-start: 1px solid var(--gc-border-subtle); } .gc-fieldset:first-child { padding-block-start: 0; border-block-start: 0; } .gc-fieldset__legend { display: flex; align-items: center; gap: var(--gc-space-2); margin-block-end: var(--gc-space-3); color: var(--gc-text-muted); font-size: var(--gc-font-size-eyebrow); font-weight: var(--gc-weight-semibold); letter-spacing: 0.09em; text-transform: uppercase; } /* Radio/checkbox choice card: the selected option must be obvious before a consequential action is confirmed. */ .gc-choice-card { display: flex; align-items: flex-start; gap: var(--gc-space-3); padding: var(--gc-space-3); border: 1px solid var(--gc-border); border-radius: var(--gc-radius-sm); background: var(--gc-surface); cursor: pointer; transition: border-color var(--gc-transition), background-color var(--gc-transition); } .gc-choice-card:hover { border-color: var(--gc-border-strong); background: var(--gc-surface-subtle); } .gc-choice-card:has(input:checked) { border-color: var(--gc-primary); background: var(--gc-primary-surface); } .gc-choice-card:has(input:focus-visible) { outline: 2px solid var(--gc-primary); outline-offset: 2px; } .gc-choice-card .form-check-input { margin-block-start: 0.15rem; flex: 0 0 auto; } .gc-choice-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex: 0 0 2rem; border-radius: var(--gc-radius-sm); background: var(--gc-surface-sunken); color: var(--gc-text-secondary); font-size: 1.05rem; } .gc-choice-card__copy { min-width: 0; } .gc-choice-card__title { display: block; color: var(--gc-text); font-size: var(--gc-font-size-body); font-weight: var(--gc-weight-semibold); } .gc-choice-card__body { display: block; color: var(--gc-text-muted); font-size: var(--gc-font-size-helper); line-height: var(--gc-line-body); } .gc-choice-card:has(input:checked) .gc-choice-card__icon { background: var(--gc-primary); color: var(--gc-primary-on); } /* A destructive choice is tinted before selection and unmistakable after, so it can never be mistaken for the safe options beside it. */ .gc-choice-card--danger .gc-choice-card__icon { background: var(--gc-danger-surface); color: var(--gc-danger); } .gc-choice-card--danger:has(input:checked) { border-color: var(--gc-danger); background: var(--gc-danger-surface); } .gc-choice-card--danger:has(input:checked) .gc-choice-card__icon { background: var(--gc-danger); color: #fff; } .gc-choice-card--danger:has(input:checked) .gc-choice-card__title { color: var(--gc-danger); } /* Consequence line beside the submit button. */ .gc-dialog-footer__note { flex: 0 1 auto; min-width: 0; margin: 0; } @media (max-width: 767.98px) { .gc-dialog-footer__note { flex: 1 1 100%; order: -1; margin-block-end: var(--gc-space-2); } } /* Progressive disclosure for rarely-changed controls. */ .gc-advanced { margin-block-start: var(--gc-space-4); border: 1px solid var(--gc-border); border-radius: var(--gc-radius); background: var(--gc-surface-subtle); } .gc-advanced > summary { display: flex; align-items: center; gap: var(--gc-space-2); padding: var(--gc-space-3) var(--gc-space-4); color: var(--gc-text-secondary); font-size: var(--gc-font-size-body); font-weight: var(--gc-weight-semibold); cursor: pointer; list-style: none; } .gc-advanced > summary::-webkit-details-marker { display: none; } .gc-advanced > summary::before { content: "\002B"; display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; border-radius: var(--gc-radius-sm); background: var(--gc-surface-sunken); font-weight: var(--gc-weight-bold); } .gc-advanced[open] > summary::before { content: "\2212"; } .gc-advanced__body { padding: 0 var(--gc-space-4) var(--gc-space-4); } /* ========================================================================== 09 Tabs and segmented controls ========================================================================== */ :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .nav-tabs { gap: var(--gc-space-1); border-block-end: 1px solid var(--gc-border); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .nav-tabs .nav-link { padding: var(--gc-space-2) var(--gc-space-3); border: 0; border-block-end: 2px solid transparent; border-radius: 0; background: transparent; color: var(--gc-text-secondary); font-size: var(--gc-font-size-body); font-weight: var(--gc-weight-semibold); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .nav-tabs .nav-link:hover { color: var(--gc-text); border-block-end-color: var(--gc-border-strong); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .nav-tabs .nav-link.active { color: var(--gc-primary); border-block-end-color: var(--gc-primary); background: transparent; } /* Segmented control — mutually exclusive views (Day/Week/Month, queue tabs). */ .gc-segmented { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--gc-border); border-radius: var(--gc-radius-sm); background: var(--gc-surface-sunken); } .gc-segmented__item { display: inline-flex; align-items: center; gap: var(--gc-space-2); min-height: 1.875rem; padding-inline: var(--gc-space-3); border: 0; border-radius: calc(var(--gc-radius-sm) - 2px); background: transparent; color: var(--gc-text-secondary); font-size: var(--gc-font-size-button); font-weight: var(--gc-weight-semibold); white-space: nowrap; transition: background-color var(--gc-transition), color var(--gc-transition); } .gc-segmented__item:hover { color: var(--gc-text); } .gc-segmented__item.is-active { background: var(--gc-surface); color: var(--gc-primary); box-shadow: var(--gc-shadow-raised); } .gc-segmented__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.2rem; height: 1.2rem; padding-inline: 0.3rem; border-radius: var(--gc-radius-pill); background: var(--gc-accent-surface); color: var(--gc-accent-strong); font-size: 0.6875rem; font-weight: var(--gc-weight-bold); } .gc-segmented__item.is-active .gc-segmented__count { background: var(--gc-primary-surface); color: var(--gc-primary); } /* ========================================================================== 10 Metrics ========================================================================== */ .gc-metrics { display: grid; /* 11.5rem lets six tiles share one row at laptop width instead of wrapping a single orphan onto a second line. */ grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: var(--gc-space-3); } .gc-metric { display: flex; flex-direction: column; gap: var(--gc-space-1); padding: var(--gc-space-4); border: 1px solid var(--gc-border); border-radius: var(--gc-radius); background: var(--gc-surface); color: inherit; text-align: start; text-decoration: none; transition: border-color var(--gc-transition), background-color var(--gc-transition); } a.gc-metric:hover, button.gc-metric:hover { border-color: var(--gc-border-strong); background: var(--gc-surface-subtle); } .gc-metric__label { display: flex; align-items: center; gap: var(--gc-space-2); color: var(--gc-text-secondary); font-size: var(--gc-font-size-helper); font-weight: var(--gc-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; } .gc-metric__value { color: var(--gc-text); font-size: var(--gc-font-size-metric); font-weight: var(--gc-weight-bold); font-variant-numeric: tabular-nums; line-height: 1.1; } .gc-metric__value-unit { margin-inline-start: var(--gc-space-1); color: var(--gc-text-muted); font-size: var(--gc-font-size-body); font-weight: var(--gc-weight-medium); } .gc-metric__hint { color: var(--gc-text-muted); font-size: var(--gc-font-size-helper); } /* Something is waiting on a person: warm edge, never a full colour wash. */ .gc-metric.is-attention { border-color: var(--gc-accent-border); background: var(--gc-accent-surface); } .gc-metric.is-attention .gc-metric__label { color: var(--gc-accent-strong); } /* ========================================================================== 11 Callouts, guidance, alerts ========================================================================== */ /* "How this works" becomes a quiet aside, not a banner above the work. */ .how-this-works, .gc-callout { display: flex; align-items: flex-start; gap: var(--gc-space-3); padding: var(--gc-space-3) var(--gc-space-4); border: 1px solid var(--gc-border); border-inline-start: 3px solid var(--gc-primary-bright); border-radius: var(--gc-radius-sm); background: var(--gc-surface-subtle); color: var(--gc-text-secondary); font-size: var(--gc-font-size-helper); } .how-this-works__content, .gc-callout__content { flex: 1 1 auto; min-width: 0; } .how-this-works__title, .gc-callout__title { margin-block-end: 2px; color: var(--gc-text); font-size: var(--gc-font-size-helper); font-weight: var(--gc-weight-semibold); } .how-this-works__body p, .gc-callout__content p { margin-block-end: 0; line-height: var(--gc-line-body); } .how-this-works__body p + p { margin-block-start: var(--gc-space-2); } .how-this-works__dismiss { flex: 0 0 auto; } .gc-callout--warning { border-inline-start-color: var(--gc-warning); background: var(--gc-warning-surface); border-color: var(--gc-warning-border); color: var(--gc-text); } .gc-callout--danger { border-inline-start-color: var(--gc-danger); background: var(--gc-danger-surface); border-color: var(--gc-danger-border); color: var(--gc-text); } .gc-callout--success { border-inline-start-color: var(--gc-success); background: var(--gc-success-surface); border-color: var(--gc-success-border); color: var(--gc-text); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .alert { padding: var(--gc-space-3) var(--gc-space-4); border-radius: var(--gc-radius-sm); border-width: 1px; font-size: var(--gc-font-size-body); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .alert-danger { background: var(--gc-danger-surface); border-color: var(--gc-danger-border); color: var(--gc-text); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .alert-warning { background: var(--gc-warning-surface); border-color: var(--gc-warning-border); color: var(--gc-text); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .alert-success { background: var(--gc-success-surface); border-color: var(--gc-success-border); color: var(--gc-text); } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) .alert-info { background: var(--gc-info-surface); border-color: var(--gc-info-border); color: var(--gc-text); } /* ========================================================================== 12 Empty states ========================================================================== */ .gc-empty { display: flex; flex-direction: column; align-items: center; gap: var(--gc-space-2); padding: var(--gc-space-10) var(--gc-space-6); text-align: center; } .gc-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-block-end: var(--gc-space-1); border-radius: var(--gc-radius); background: var(--gc-primary-surface); color: var(--gc-primary); font-size: 1.25rem; } .gc-empty__title { color: var(--gc-text); font-size: var(--gc-font-size-card-title); font-weight: var(--gc-weight-semibold); } .gc-empty__body { max-width: 44ch; color: var(--gc-text-muted); font-size: var(--gc-font-size-body); } .gc-empty__action { margin-block-start: var(--gc-space-3); } /* "All clear": a healthy zero state that reassures in one line and keeps its controls reachable, instead of a full-height empty container. */ .gc-allclear { display: flex; align-items: center; gap: var(--gc-space-3); flex-wrap: wrap; padding: var(--gc-space-4) var(--gc-panel-padding); } .gc-allclear__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border-radius: var(--gc-radius-sm); background: var(--gc-success-surface); color: var(--gc-success); font-size: 1.15rem; } .gc-allclear__copy { flex: 1 1 18rem; min-width: 0; } .gc-allclear__title { color: var(--gc-text); font-size: var(--gc-font-size-body); font-weight: var(--gc-weight-semibold); } .gc-allclear__body { margin: 0; color: var(--gc-text-muted); font-size: var(--gc-font-size-helper); } .gc-allclear__actions { display: flex; align-items: center; gap: var(--gc-space-2); flex-wrap: wrap; margin-inline-start: auto; } /* Inline zero state for a panel that should stay short. */ .gc-empty--inline { padding: var(--gc-space-6) var(--gc-space-4); } .gc-empty--inline .gc-empty__icon { width: 2.25rem; height: 2.25rem; font-size: 1.05rem; } /* Skeleton placeholders replace spinner-only panels. */ .gc-skeleton { display: block; height: 0.75rem; border-radius: var(--gc-radius-sm); background: linear-gradient(90deg, var(--gc-surface-sunken) 25%, var(--gc-surface-subtle) 37%, var(--gc-surface-sunken) 63%); background-size: 400% 100%; animation: gc-skeleton-shimmer 1.4s ease infinite; } .gc-skeleton + .gc-skeleton { margin-block-start: var(--gc-space-3); } .gc-skeleton--title { height: 1.1rem; width: 40%; } .gc-skeleton--row { height: 2.5rem; } @keyframes gc-skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { .gc-skeleton { animation: none; } } /* ========================================================================== 13 Dialogs and drawers ========================================================================== */ /* One dialog system for all 50+ Telerik windows and grid popup editors. Structure: header (title + optional help + close) / body / footer, with the footer reading cancel → destructive → primary from the leading edge. */ .k-window, .bos-admin-window.k-window { border: 1px solid var(--gc-border); border-radius: var(--gc-radius-lg); box-shadow: var(--gc-shadow-overlay); background: var(--gc-surface); font-family: var(--gc-font); overflow: hidden; } .k-overlay { background: rgba(10, 22, 34, 0.45); } /* ---- Header -------------------------------------------------------------- */ .k-window .k-window-titlebar { align-items: flex-start; gap: var(--gc-space-3); padding: var(--gc-space-4) var(--gc-space-5); border-block-end: 1px solid var(--gc-border); background: var(--gc-surface); color: var(--gc-text); font-size: var(--gc-font-size-card-title); font-weight: var(--gc-weight-semibold); line-height: var(--gc-line-tight); } .k-window .k-window-title { min-width: 0; padding: 0; font-size: 1.0625rem; font-weight: var(--gc-weight-bold); letter-spacing: -0.005em; color: var(--gc-text); } .gc-window-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gc-space-3); width: 100%; } /* Eyebrow + title + optional supporting line inside a dialog header. */ .gc-dialog-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .gc-dialog-title__eyebrow { color: var(--gc-text-muted); font-size: var(--gc-font-size-eyebrow); font-weight: var(--gc-weight-semibold); letter-spacing: 0.09em; text-transform: uppercase; } .gc-dialog-title__text { color: var(--gc-text); font-size: 1.0625rem; font-weight: var(--gc-weight-bold); letter-spacing: -0.005em; line-height: var(--gc-line-tight); } .gc-dialog-title__meta { color: var(--gc-text-muted); font-size: var(--gc-font-size-helper); font-weight: var(--gc-weight-regular); } /* Header controls sit on the trailing edge at a consistent size. */ .gc-dialog-header-actions { display: flex; align-items: center; gap: var(--gc-space-2); flex: 0 0 auto; margin-inline-start: auto; } .k-window .k-window-titlebar .k-window-actions .k-button, .k-window .k-window-titlebar .btn-close, .gc-dialog-close { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid transparent; border-radius: var(--gc-radius-sm); background: transparent; color: var(--gc-text-secondary); opacity: 1; transition: background-color var(--gc-transition), color var(--gc-transition); } .k-window .k-window-titlebar .k-window-actions .k-button:hover, .k-window .k-window-titlebar .btn-close:hover, .gc-dialog-close:hover { background: var(--gc-surface-sunken); color: var(--gc-text); } /* ---- Body ---------------------------------------------------------------- */ .k-window .k-window-content { padding: var(--gc-space-5); background: var(--gc-surface); color: var(--gc-text); font-size: var(--gc-font-size-body); } /* Secondary navigation inside a dialog reads as a rail, not stacked chips. */ .k-window .k-tabstrip, .k-window .nav-tabs { margin-block-end: var(--gc-space-4); } .k-window .k-tabstrip-items-wrapper { border-color: var(--gc-border); } .k-window .k-tabstrip-items .k-item, .k-window .k-tabstrip-items .k-link { border: 0; background: transparent; color: var(--gc-text-secondary); font-size: var(--gc-font-size-body); font-weight: var(--gc-weight-semibold); } .k-window .k-tabstrip-items .k-item { border-block-end: 2px solid transparent; border-radius: 0; } .k-window .k-tabstrip-items .k-item:hover { color: var(--gc-text); border-block-end-color: var(--gc-border-strong); } .k-window .k-tabstrip-items .k-item.k-active { color: var(--gc-primary); border-block-end-color: var(--gc-primary); background: transparent; } .k-window .k-tabstrip-content, .k-window .k-tabstrip > .k-content { padding: var(--gc-space-4) 0 0; border: 0; background: transparent; } /* ---- Footer -------------------------------------------------------------- */ .k-window .k-window-actions, .k-window .k-actions, .gc-dialog-footer { display: flex; align-items: center; gap: var(--gc-space-2); padding: var(--gc-space-3) var(--gc-space-5); border-block-start: 1px solid var(--gc-border); background: var(--gc-surface-subtle); margin: 0; } /* The titlebar's own action cluster must not inherit footer chrome. */ .k-window .k-window-titlebar .k-window-actions { padding: 0; border: 0; background: transparent; } .gc-dialog-footer__spacer { flex: 1 1 auto; } /* Used when the footer lives inside the dialog body (Telerik grid popup editors put their buttons in the form), so it still reads as a footer. */ .gc-dialog-footer--inline { margin-inline: calc(var(--gc-space-5) * -1); margin-block-end: calc(var(--gc-space-5) * -1); margin-block-start: var(--gc-space-5); border-block-start: 1px solid var(--gc-border); border-radius: 0 0 var(--gc-radius-lg) var(--gc-radius-lg); } @media (max-width: 767.98px) { .gc-dialog-footer--inline { margin-inline: calc(var(--gc-space-4) * -1); margin-block-end: calc(var(--gc-space-4) * -1); } } /* Destructive lives on the leading edge, far from the primary action. */ .gc-dialog-footer__destructive { margin-inline-end: auto; } /* ---- Telerik popups, menus, filter/column menus, tooltips ---------------- These render in their own roots outside the page, so they need the tokens applied directly or they fall back to the stock Bootstrap theme. This is the same escape route that left dialogs unstyled before. -------------------------------------------------------------------------- */ .k-popup, .k-menu-popup, .k-column-menu, .k-filter-menu, .k-actionsheet { border: 1px solid var(--gc-border); border-radius: var(--gc-radius); background: var(--gc-surface); box-shadow: var(--gc-shadow-popover); color: var(--gc-text); font-family: var(--gc-font); font-size: var(--gc-font-size-body); } .k-popup .k-item, .k-menu-popup .k-item, .k-column-menu .k-item { border-radius: var(--gc-radius-sm); color: var(--gc-text); } .k-popup .k-item:hover, .k-menu-popup .k-item:hover, .k-column-menu .k-item:hover { background: var(--gc-surface-sunken); } .k-popup .k-selected, .k-popup .k-item.k-selected { background: var(--gc-primary-surface); color: var(--gc-primary); } .k-filter-menu .k-actions, .k-column-menu .k-actions { padding: var(--gc-space-3); border-block-start: 1px solid var(--gc-border); background: var(--gc-surface-subtle); } .k-tooltip { border-radius: var(--gc-radius-sm); background: var(--gc-ink-800); color: var(--gc-text-on-dark); font-family: var(--gc-font); font-size: var(--gc-font-size-helper); } /* Confirm/alert dialogs (grid delete confirmation) share the dialog system. */ .k-dialog .k-dialog-titlebar { padding: var(--gc-space-4) var(--gc-space-5); border-block-end: 1px solid var(--gc-border); background: var(--gc-surface); color: var(--gc-text); font-size: var(--gc-font-size-card-title); font-weight: var(--gc-weight-semibold); } .k-dialog .k-dialog-content { padding: var(--gc-space-5); color: var(--gc-text); font-size: var(--gc-font-size-body); } /* A delete confirmation is destructive: its primary must read as destructive. */ .k-dialog .k-dialog-actions .k-button-solid-primary { background-color: var(--gc-danger); border-color: var(--gc-danger); color: #fff; } .k-dialog .k-dialog-actions .k-button-solid-primary:hover { background-color: #971f18; border-color: #971f18; } /* ---- Mobile: full-height sheet ------------------------------------------- */ @media (max-width: 767.98px) { .k-window { border-radius: var(--gc-radius-lg) var(--gc-radius-lg) 0 0; border-inline: 0; border-block-end: 0; } .k-window .k-window-titlebar { padding: var(--gc-space-4); } .k-window .k-window-content { padding: var(--gc-space-4); } .k-window .k-window-actions, .k-window .k-actions, .gc-dialog-footer { padding: var(--gc-space-3) var(--gc-space-4); padding-block-end: calc(var(--gc-space-3) + env(safe-area-inset-bottom, 0px)); } /* Primary action reachable and unmistakable on a phone. */ .k-window .k-actions .btn, .gc-dialog-footer .btn { flex: 1 1 auto; min-height: var(--gc-touch-target); } .gc-dialog-footer__destructive { flex: 0 0 auto; } } /* Sticky status strip at the top of a record dialog. */ .gc-record-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gc-space-4); flex-wrap: wrap; padding: var(--gc-space-3) var(--gc-space-4); margin-block-end: var(--gc-space-4); border: 1px solid var(--gc-border); border-radius: var(--gc-radius); background: var(--gc-surface-subtle); } .gc-record-summary__primary { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .gc-record-summary__headline { color: var(--gc-text); font-size: var(--gc-font-size-card-title); font-weight: var(--gc-weight-semibold); font-variant-numeric: tabular-nums; } .gc-record-summary__meta { color: var(--gc-text-muted); font-size: var(--gc-font-size-helper); } .gc-record-summary__chips { display: flex; align-items: center; gap: var(--gc-space-2); flex-wrap: wrap; } /* ========================================================================== 14 Schedule workspace ========================================================================== */ .gc-schedule { display: flex; flex-direction: column; border: 1px solid var(--gc-border); border-radius: var(--gc-radius); background: var(--gc-surface); overflow: hidden; } .gc-schedule__toolbar { position: sticky; inset-block-start: 3.75rem; z-index: 20; display: flex; align-items: center; gap: var(--gc-space-3); flex-wrap: wrap; padding: var(--gc-space-3) var(--gc-panel-padding); border-block-end: 1px solid var(--gc-border); background: var(--gc-surface); } .gc-schedule__datenav { display: flex; align-items: center; gap: var(--gc-space-2); } .gc-schedule__date { color: var(--gc-text); font-size: var(--gc-font-size-card-title); font-weight: var(--gc-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Wide schedule content scrolls inside its own container. Without this the page itself scrolls sideways on a phone. */ .gc-schedule__body { position: relative; padding: 0; overflow-x: auto; } .gc-schedule__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--gc-space-3); flex-wrap: wrap; padding: var(--gc-space-2) var(--gc-panel-padding); border-block-start: 1px solid var(--gc-border-subtle); background: var(--gc-surface-subtle); color: var(--gc-text-muted); font-size: var(--gc-font-size-helper); } /* Telerik scheduler polish */ .gc-schedule .k-scheduler { border: 0; border-radius: 0; font-family: var(--gc-font); font-size: var(--gc-font-size-table); color: var(--gc-text); } .gc-schedule .k-scheduler .k-scheduler-toolbar { display: none; } .gc-schedule .k-scheduler .k-scheduler-header, .gc-schedule .k-scheduler th { background: var(--gc-surface-subtle); color: var(--gc-text-secondary); font-size: var(--gc-font-size-helper); font-weight: var(--gc-weight-semibold); letter-spacing: 0.03em; text-transform: uppercase; } .gc-schedule .k-scheduler .k-nonwork-hour { background: var(--gc-surface-sunken); } .gc-schedule .k-event { border: 0; border-inline-start: 3px solid rgba(255, 255, 255, 0.55); border-radius: var(--gc-radius-sm); font-size: var(--gc-font-size-helper); font-weight: var(--gc-weight-medium); } /* ========================================================================== 15 Settings ========================================================================== */ .gc-settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--gc-space-3); } .gc-settings-card { display: flex; flex-direction: column; gap: var(--gc-space-2); height: 100%; padding: var(--gc-space-4); border: 1px solid var(--gc-border); border-radius: var(--gc-radius); background: var(--gc-surface); color: inherit; text-decoration: none; transition: border-color var(--gc-transition), background-color var(--gc-transition); } .gc-settings-card:hover { border-color: var(--gc-primary-border); background: var(--gc-surface-subtle); } .gc-settings-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--gc-radius-sm); background: var(--gc-primary-surface); color: var(--gc-primary); font-size: 1.1rem; } .gc-settings-card__title { display: flex; align-items: center; gap: var(--gc-space-2); flex-wrap: wrap; color: var(--gc-text); font-size: var(--gc-font-size-card-title); font-weight: var(--gc-weight-semibold); } .gc-settings-card__body { color: var(--gc-text-muted); font-size: var(--gc-font-size-helper); line-height: var(--gc-line-body); } .gc-settings-card__links { display: flex; flex-wrap: wrap; gap: var(--gc-space-1) var(--gc-space-3); margin-block-start: auto; padding-block-start: var(--gc-space-2); color: var(--gc-text-secondary); font-size: var(--gc-font-size-helper); } /* Settings section rail used inside the long Business settings page. */ .gc-settings-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gc-space-5); } @media (min-width: 992px) { .gc-settings-shell { grid-template-columns: 14rem minmax(0, 1fr); align-items: start; } } .gc-settings-rail { display: flex; flex-direction: column; gap: 2px; } @media (max-width: 991.98px) { .gc-settings-rail { flex-direction: row; overflow-x: auto; padding-block-end: var(--gc-space-2); border-block-end: 1px solid var(--gc-border); scrollbar-width: thin; } } @media (min-width: 992px) { .gc-settings-rail { position: sticky; inset-block-start: 4.75rem; } } .gc-settings-rail__item { display: flex; align-items: center; gap: var(--gc-space-2); padding: var(--gc-space-2) var(--gc-space-3); border: 0; border-radius: var(--gc-radius-sm); background: transparent; color: var(--gc-text-secondary); font-size: var(--gc-font-size-body); font-weight: var(--gc-weight-medium); text-align: start; white-space: nowrap; transition: background-color var(--gc-transition), color var(--gc-transition); } .gc-settings-rail__item:hover { background: var(--gc-surface-sunken); color: var(--gc-text); } .gc-settings-rail__item.is-active { background: var(--gc-primary-surface); color: var(--gc-primary); font-weight: var(--gc-weight-semibold); } .gc-settings-rail__item i { font-size: 1rem; opacity: 0.85; } /* Horizontal variant used on the long Business settings page, where the content blocks are page-width and a side rail would strand them. */ .gc-settings-rail--horizontal { flex-direction: row; gap: var(--gc-space-1); overflow-x: auto; padding-block-end: var(--gc-space-2); border-block-end: 1px solid var(--gc-border); scrollbar-width: thin; } @media (min-width: 992px) { .gc-settings-rail--horizontal { position: static; } } /* Inherited / override indicator, shared by org → region → location settings. */ .gc-inheritance { display: inline-flex; align-items: center; gap: var(--gc-space-1); padding: 0.1rem 0.45rem; border: 1px dashed var(--gc-border-strong); border-radius: var(--gc-radius-sm); color: var(--gc-text-muted); font-size: var(--gc-font-size-helper); font-weight: var(--gc-weight-medium); } /* ========================================================================== Bridge: existing dashboard / checklist classes -------------------------------------------------------------------------- The dashboard sections that were not restructured in this pass still use their original class names. Re-pointing those classes at the tokens keeps one visual language across the page without rewriting working markup. ========================================================================== */ .dashboard-section-heading { align-items: baseline; margin-block-end: var(--gc-space-3); } .dashboard-section-heading h2 { font-size: var(--gc-font-size-section); font-weight: var(--gc-weight-semibold); letter-spacing: -0.005em; color: var(--gc-text); } .dashboard-section-eyebrow { color: var(--gc-text-muted); font-size: var(--gc-font-size-eyebrow); font-weight: var(--gc-weight-semibold); letter-spacing: 0.09em; } .dashboard-metric-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--gc-space-3); } .dashboard-metric { min-height: auto; padding: var(--gc-space-4); border: 1px solid var(--gc-border); border-radius: var(--gc-radius); background: var(--gc-surface); } .dashboard-metric > .text-muted { color: var(--gc-text-secondary) !important; font-size: var(--gc-font-size-helper) !important; font-weight: var(--gc-weight-semibold); letter-spacing: 0.05em; text-transform: uppercase; } .dashboard-metric-link:hover { border-color: var(--gc-border-strong); background: var(--gc-surface-subtle); } .dashboard-metric-link:focus-visible { outline: 2px solid var(--gc-primary); outline-offset: 2px; } .dashboard-metric-value { margin-top: var(--gc-space-1); color: var(--gc-text); font-size: var(--gc-font-size-metric); font-weight: var(--gc-weight-bold); font-variant-numeric: tabular-nums; } .dashboard-metric-value-sm { font-size: var(--gc-font-size-card-title); } /* Route protection: status carried by an icon-bearing chip, plus a coloured edge — never the colour alone. */ .dashboard-route-protection-card { border-left: 3px solid var(--gc-danger); } .dashboard-route-protection-card.is-active { border-left-color: var(--gc-success); } .dashboard-route-protection-card.is-disabled { border-left-color: var(--gc-danger); } .dashboard-route-protection-status { padding: var(--gc-space-2) var(--gc-space-3); border: 1px solid var(--gc-danger-border); border-radius: var(--gc-radius-sm); background: var(--gc-danger-surface); color: var(--gc-danger); font-size: var(--gc-font-size-body); font-weight: var(--gc-weight-semibold); } .dashboard-route-protection-card.is-active .dashboard-route-protection-status { border-color: var(--gc-success-border); background: var(--gc-success-surface); color: var(--gc-success); } /* Setup checklist reads as a task list, not a stack of cards. */ .setup-checklist-items { gap: 0; } .setup-checklist-item { gap: var(--gc-space-3); padding: var(--gc-space-3) var(--gc-space-1); border: 0; border-block-start: 1px solid var(--gc-border-subtle); border-radius: 0; background: transparent; } .setup-checklist-item:first-child { border-block-start: 0; } .setup-checklist-item:hover { background: var(--gc-surface-subtle); } .setup-checklist-status { width: 1.5rem; height: 1.5rem; border-radius: var(--gc-radius-pill); background: var(--gc-surface-sunken); color: var(--gc-text-secondary); } .setup-checklist-item.is-complete .setup-checklist-status { background: var(--gc-success-surface); color: var(--gc-success); } .setup-checklist-item.is-complete .setup-checklist-copy { opacity: 0.7; } /* Attention section leads the page, so its heading carries a little weight. */ .gc-section--attention .gc-section__title { display: flex; align-items: center; gap: var(--gc-space-2); } .gc-section--attention .gc-section__title::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--gc-radius-pill); background: var(--gc-accent); } /* The attention list rows are buttons; strip the default button chrome. */ button.gc-list__row { width: 100%; border-inline: 0; border-block-end: 0; background: transparent; text-align: start; font: inherit; } /* ========================================================================== Customer-facing surfaces (public booking, portal, sign-in) -------------------------------------------------------------------------- These render outside the app shell and must stay simpler than the admin product: more air, larger type, one obvious action per step. They share the brand tokens but not the operational density. ========================================================================== */ .portal-shell, .login-shell { --gc-font-size-body: 1rem; background: var(--gc-surface-page); color: var(--gc-text); font-family: var(--gc-font); } .portal-header { background: var(--gc-surface); border-block-end: 1px solid var(--gc-border); } .portal-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gc-space-4); max-width: 64rem; min-height: 4rem; margin-inline: auto; padding-inline: var(--gc-space-5); } .portal-brand { display: inline-flex; align-items: center; gap: var(--gc-space-2); color: var(--gc-text); font-size: 1.0625rem; font-weight: var(--gc-weight-bold); letter-spacing: -0.01em; text-decoration: none; } .portal-brand__logo { width: auto; height: 2rem; object-fit: contain; } .portal-nav { display: flex; align-items: center; gap: var(--gc-space-3); } .portal-nav a, .portal-nav__button { border: 0; background: transparent; color: var(--gc-text-secondary); font-size: var(--gc-font-size-helper); font-weight: var(--gc-weight-semibold); text-decoration: none; } .portal-nav a:hover, .portal-nav__button:hover { color: var(--gc-primary); } .portal-main { max-width: 64rem; margin-inline: auto; padding: var(--gc-space-8) var(--gc-space-5) var(--gc-space-12); } /* Customer-facing cards get more air and a softer edge than admin panels. */ .portal-shell .card.custom-card, .login-shell .card.custom-card { border: 1px solid var(--gc-border); border-radius: var(--gc-radius-lg); box-shadow: var(--gc-shadow-raised); background: var(--gc-surface); } .portal-shell .card.custom-card > .card-body { padding: var(--gc-space-6); } .portal-shell .card.custom-card > .card-header { padding: var(--gc-space-4) var(--gc-space-6); border-block-end: 1px solid var(--gc-border-subtle); background: transparent; } .portal-shell .card-title { font-size: var(--gc-font-size-card-title); font-weight: var(--gc-weight-semibold); color: var(--gc-text); margin: 0; } /* Typography: one clear step down from headline to supporting copy. */ .portal-shell h1, .portal-shell .h3, .login-shell .h4 { color: var(--gc-text); font-weight: var(--gc-weight-bold); letter-spacing: -0.015em; line-height: 1.2; } .portal-shell h1, .portal-shell .h3 { font-size: 1.625rem; } .portal-shell .text-muted, .login-shell .text-muted { color: var(--gc-text-secondary) !important; } /* Fields are larger and calmer than the admin app's. */ .portal-shell .form-control, .portal-shell .form-select, .login-shell .form-control, .login-shell .form-select { min-height: 3rem; padding: 0.625rem var(--gc-space-4); border: 1px solid var(--gc-border-strong); border-radius: var(--gc-radius); background-color: var(--gc-surface); color: var(--gc-text); font-size: 1rem; } .portal-shell .form-control:focus, .portal-shell .form-select:focus, .login-shell .form-control:focus, .login-shell .form-select:focus { border-color: var(--gc-primary); box-shadow: 0 0 0 3px rgba(15, 95, 88, 0.16); outline: none; } .portal-shell .form-label, .login-shell .form-label { margin-block-end: var(--gc-space-2); color: var(--gc-text); font-size: var(--gc-font-size-label); font-weight: var(--gc-weight-semibold); } /* One prominent action per step, comfortably sized for a thumb. */ .portal-shell .btn, .login-shell .btn { min-height: 3rem; padding-inline: var(--gc-space-5); border-radius: var(--gc-radius); font-size: 0.9375rem; font-weight: var(--gc-weight-semibold); } .portal-shell .btn-primary, .login-shell .btn-primary { background-color: var(--gc-primary); border-color: var(--gc-primary); color: var(--gc-primary-on); } .portal-shell .btn-primary:hover, .login-shell .btn-primary:hover { background-color: var(--gc-primary-hover); border-color: var(--gc-primary-hover); } .portal-shell .btn-outline-primary, .portal-shell .btn-outline-secondary, .login-shell .btn-outline-primary, .login-shell .btn-outline-secondary { background-color: var(--gc-surface); border-color: var(--gc-border-strong); color: var(--gc-text); } .portal-organization-actions .btn { min-width: 12rem; } /* Service cards in the public list. */ .portal-shell .portal-service-card, .portal-shell .card .card { border: 1px solid var(--gc-border); border-radius: var(--gc-radius); box-shadow: none; overflow: hidden; } .portal-shell .gc-segmented { width: 100%; padding: 4px; border-radius: var(--gc-radius); } .portal-shell .gc-segmented__item, .login-shell .gc-segmented__item { flex: 1 1 0; justify-content: center; min-height: 2.5rem; font-size: 0.875rem; } @media (max-width: 767.98px) { .portal-header__inner { min-height: 3.5rem; padding-inline: var(--gc-space-4); gap: var(--gc-space-2); } .portal-brand { font-size: 0.9375rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .portal-main { padding: var(--gc-space-5) var(--gc-space-4) var(--gc-space-8); } .portal-shell h1, .portal-shell .h3 { font-size: 1.375rem; } .portal-shell .card.custom-card > .card-body { padding: var(--gc-space-5); } .portal-organization-actions, .portal-organization-actions .btn { width: 100%; } } /* ========================================================================== Guided help and tours -------------------------------------------------------------------------- Instructional chrome renders outside the app shell, so it needs the tokens applied directly. It should read as part of the product, and never outweigh the operational work it sits over. ========================================================================== */ .guided-tour-menu-button { gap: var(--gc-space-2); min-height: var(--gc-control-height); padding-inline: var(--gc-space-4); border: 0; border-radius: var(--gc-radius-pill); background: var(--gc-ink-800); color: var(--gc-text-on-dark); font-family: var(--gc-font); font-size: var(--gc-font-size-button); font-weight: var(--gc-weight-semibold); box-shadow: var(--gc-shadow-popover); } .guided-tour-menu-button:hover { background: var(--gc-ink-700); color: var(--gc-text-on-dark); } .guided-tour-menu, .guided-tour-panel, .guided-tour-popover { font-family: var(--gc-font); border: 1px solid var(--gc-border); border-radius: var(--gc-radius-lg); background: var(--gc-surface); color: var(--gc-text); box-shadow: var(--gc-shadow-overlay); } .guided-tour-menu, .guided-tour-panel { padding: var(--gc-space-4); } .guided-tour-backdrop { background: rgba(10, 22, 34, 0.35); } .guided-tour-popover { width: min(26rem, calc(100vw - 1.5rem)); background: var(--gc-surface) !important; font-size: var(--gc-font-size-body); } .guided-tour-popover::before { background: var(--gc-surface); border-left-color: var(--gc-border); border-top-color: var(--gc-border); } .guided-tour-popover-header { padding: var(--gc-space-4) 2.75rem var(--gc-space-3) var(--gc-space-4); border-block-end: 1px solid var(--gc-border); background: var(--gc-surface-subtle); } /* Tour name reads as an eyebrow; the step title carries the weight. */ .guided-tour-popover-header .text-muted { color: var(--gc-text-muted) !important; font-size: var(--gc-font-size-eyebrow) !important; font-weight: var(--gc-weight-semibold); letter-spacing: 0.09em; text-transform: uppercase; } .guided-tour-popover-header h2, .guided-tour-popover-header .fw-semibold, .guided-tour-popover-header strong { color: var(--gc-text); font-size: var(--gc-font-size-card-title); font-weight: var(--gc-weight-bold); letter-spacing: -0.005em; } .guided-tour-popover .guided-tour-copy { padding: var(--gc-space-4); color: var(--gc-text-secondary); line-height: var(--gc-line-body); } .guided-tour-popover-footer { padding: var(--gc-space-3) var(--gc-space-4); border-block-start: 1px solid var(--gc-border); background: var(--gc-surface-subtle); } /* Step counter uses tabular numerals so it does not jitter between steps. */ .guided-tour-popover-footer .text-muted { color: var(--gc-text-muted) !important; font-size: var(--gc-font-size-helper) !important; font-variant-numeric: tabular-nums; } .guided-tour-popover-close { top: var(--gc-space-3); right: var(--gc-space-3); display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: var(--gc-radius-sm); background: transparent; color: var(--gc-text-secondary); opacity: 1; } .guided-tour-popover-close:hover { background: var(--gc-surface-sunken); color: var(--gc-text); } .guided-tour-list { display: flex; flex-direction: column; gap: var(--gc-space-1); } .guided-tour-list-item { display: flex; align-items: center; gap: var(--gc-space-2); width: 100%; padding: var(--gc-space-2) var(--gc-space-3); border: 1px solid transparent; border-radius: var(--gc-radius-sm); background: transparent; color: var(--gc-text); font-size: var(--gc-font-size-body); font-weight: var(--gc-weight-medium); text-align: start; } .guided-tour-list-item:hover { background: var(--gc-surface-sunken); } /* Spotlight ring: brand teal instead of the template's indigo. Same specificity as the app.css rule, but this file loads later. */ .bos-guided-tour-highlight { outline: 2px solid var(--gc-primary); outline-offset: 3px; border-radius: var(--gc-radius-sm); box-shadow: 0 0 0 0.375rem rgba(15, 95, 88, 0.16); } /* ========================================================================== Services -------------------------------------------------------------------------- The service identity cell answers, in order: what is this, what does it cost, how long does it take, can customers book it, which pets. These class names existed in the markup but had no styles at all. ========================================================================== */ .bos-service-card-summary { display: flex; flex-direction: column; gap: var(--gc-space-1); min-width: 0; } .bos-service-card-title-row { display: flex; align-items: center; gap: var(--gc-space-2); flex-wrap: wrap; min-width: 0; } .bos-service-color-dot { flex-shrink: 0; width: 0.625rem; height: 0.625rem; border-radius: var(--gc-radius-pill); background: var(--service-color, var(--gc-border-strong)); box-shadow: inset 0 0 0 1px rgba(16, 32, 51, 0.14); } .bos-service-card-title { color: var(--gc-text); font-size: var(--gc-font-size-body); font-weight: var(--gc-weight-semibold); line-height: var(--gc-line-tight); } .bos-service-card-description { color: var(--gc-text-muted); font-size: var(--gc-font-size-helper); line-height: var(--gc-line-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* The facts block exists for the mobile card layout, where column headers are hidden. On desktop the grid already has Price, Duration, Description and Public columns, so repeating them here only crowds the name. Hidden, not removed: every value stays available in both layouts. */ .bos-service-card-facts, .bos-service-card-description { display: none; } @media (max-width: 767.98px) { .bos-service-card-description { display: -webkit-box; } .bos-service-card-facts { display: flex; flex-wrap: wrap; gap: var(--gc-space-1) var(--gc-space-4); margin-block-start: var(--gc-space-1); } } .bos-service-card-fact { display: flex; align-items: baseline; gap: var(--gc-space-1); min-width: 0; } .bos-service-card-label { color: var(--gc-text-muted); font-size: var(--gc-font-size-eyebrow); font-weight: var(--gc-weight-semibold); letter-spacing: 0.07em; text-transform: uppercase; } .bos-service-card-value { color: var(--gc-text); font-size: var(--gc-font-size-helper); font-weight: var(--gc-weight-semibold); font-variant-numeric: tabular-nums; } /* ========================================================================== Locations / service areas -------------------------------------------------------------------------- The map now lives inside a panel, so its own container drops its border and the legend reads as a list beneath the map rather than competing with the section heading. ========================================================================== */ .gc-panel > .service-area-map-shell { padding: var(--gc-panel-padding); border: 0; border-radius: var(--gc-radius); background: transparent; } .service-area-map { min-height: 300px; border: 1px solid var(--gc-border); border-radius: var(--gc-radius-sm); background: linear-gradient(rgba(15, 95, 88, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 95, 88, 0.07) 1px, transparent 1px), var(--gc-surface-subtle); background-size: 48px 48px; } .service-area-map-area:hover, .service-area-map-area:focus-visible, .service-area-map-area.is-selected { box-shadow: 0 0 0 3px rgba(15, 95, 88, 0.2), var(--gc-shadow-popover); } .service-area-map-legend { display: flex; flex-wrap: wrap; gap: var(--gc-space-2); margin-block-start: var(--gc-space-3); } .service-area-map-legend-item { display: inline-flex; align-items: center; gap: var(--gc-space-2); min-width: 0; padding: 0.2rem 0.55rem; border: 1px solid var(--gc-border); border-radius: var(--gc-radius-pill); background: var(--gc-surface); font-size: var(--gc-font-size-helper); } .service-area-map-legend-name { color: var(--gc-text); font-weight: var(--gc-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .service-area-map-legend-radius { color: var(--gc-text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; } .service-area-color-dot { flex-shrink: 0; width: 0.6rem; height: 0.6rem; border-radius: var(--gc-radius-pill); } /* ========================================================================== 16 Accessibility and focus ========================================================================== */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--gc-primary); outline-offset: 2px; border-radius: var(--gc-radius-sm); } .app-sidebar :where(a, button):focus-visible { outline-color: var(--gc-accent); } .gc-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 991.98px) { :root { --gc-page-padding-x: 1rem; } .gc-metric__value { font-size: 1.5rem; } } @media (max-width: 767.98px) { :root { /* 16px body on phones so field staff are not squinting or zooming. */ --gc-font-size-body: 1rem; --gc-font-size-table: 0.875rem; --gc-page-padding-x: 0.75rem; --gc-panel-padding: 1rem; --gc-control-height: 2.75rem; --gc-control-height-sm: 2.375rem; } :is(.main-content.app-content, .k-window, .k-dialog, .k-animation-container, .mobile-assistant-shell) > .container-fluid { padding-inline: var(--gc-page-padding-x); } /* Compress the header block so the actual work starts on screen one. */ .gc-page-header { gap: var(--gc-space-3); padding-block: var(--gc-space-4) var(--gc-space-3); margin-block-end: var(--gc-space-4); } .gc-page-header__title { font-size: 1.25rem; } .gc-page-header__lede { display: none; } .gc-page-header__actions { width: 100%; } .gc-page-header__actions .btn, .gc-page-header__actions .gc-btn { flex: 1 1 auto; } /* Horizontal scroll beats a squeezed grid for view/queue switchers. */ .gc-segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .gc-segmented::-webkit-scrollbar { display: none; } .gc-metrics { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--gc-space-2); } .gc-metric { padding: var(--gc-space-3); } .gc-schedule__toolbar { position: static; padding: var(--gc-space-3); } .gc-schedule { margin-inline: calc(var(--gc-page-padding-x) * -1); border-inline: 0; border-radius: 0; } /* The card-grid toolbar previously forced every button to its own row. The overflow menu and the primary action share one row instead. */ .bos-mobile-card-grid .k-grid-toolbar .gc-toolbar { flex-wrap: nowrap; gap: var(--gc-space-2); } .bos-mobile-card-grid .k-grid-toolbar .gc-toolbar > .gc-menu, .bos-mobile-card-grid .k-grid-toolbar .gc-toolbar > .gc-menu > summary { flex: 0 0 auto; width: auto; min-width: 0; } .bos-mobile-card-grid .k-grid-toolbar .gc-toolbar > span[data-tour], .bos-mobile-card-grid .k-grid-toolbar .gc-toolbar > .btn, .bos-mobile-card-grid .k-grid-toolbar .gc-toolbar > span[data-tour] .k-button { flex: 1 1 auto; width: auto; min-width: 0; } /* Tables become record rows rather than a horizontal scroll trap. */ .gc-table-cards thead { display: none; } .gc-table-cards tbody tr { display: grid; grid-template-columns: 1fr auto; gap: var(--gc-space-1) var(--gc-space-3); padding: var(--gc-space-3) var(--gc-space-4); border-block-end: 1px solid var(--gc-border-subtle); } .gc-table-cards tbody td { padding: 0; border: 0; } .gc-icon-btn { width: var(--gc-touch-target); height: var(--gc-touch-target); } .gc-empty { padding: var(--gc-space-8) var(--gc-space-4); } .k-window .k-window-content { padding: var(--gc-space-4); } .k-window .k-window-titlebar, .k-window .k-window-actions, .k-window .k-actions { padding-inline: var(--gc-space-4); } } /* The floating Help launcher must not sit on top of primary page actions. */ @media (max-width: 767.98px) { .guided-tour-menu-button { inset-block-end: calc(env(safe-area-inset-bottom, 0px) + 0.75rem); } } /* ========================================================================== Guided tour — instructional treatment -------------------------------------------------------------------------- The tour previously read as a tooltip library bolted onto the product: a flat grey scrim over everything, a hard rectangular outline on the target, and a three-band Bootstrap card floating away from what it described. This layer changes presentation only. Step definitions, counts, targets, navigation and completion behaviour are untouched. ========================================================================== */ /* ---- Card --------------------------------------------------------------- One surface, not three stacked bands. Eyebrow, title and body share a single padded column; only the footer is separated, and by a hairline rather than a filled bar. */ .guided-tour-popover { width: min(24rem, calc(100vw - 1.5rem)); border: 1px solid var(--gc-border) !important; border-radius: var(--gc-radius-lg) !important; box-shadow: 0 1.5rem 3rem -1rem rgba(10, 22, 34, 0.34), 0 0 0 1px rgba(10, 22, 34, 0.04) !important; overflow: hidden; } .guided-tour-popover .guided-tour-popover-header { padding: 1.25rem 2.75rem 0 1.25rem !important; border-block-end: 0 !important; background: var(--gc-surface) !important; } .guided-tour-popover .guided-tour-popover-header .text-muted { display: inline-flex; align-items: center; gap: .375rem; margin-bottom: .375rem; color: var(--gc-primary) !important; font-size: .6875rem !important; letter-spacing: .1em; } .guided-tour-popover .guided-tour-popover-header .fw-semibold { font-size: 1.0625rem !important; line-height: 1.3; letter-spacing: -0.01em; } .guided-tour-popover .guided-tour-copy { padding: .5rem 1.25rem 1rem !important; font-size: .9375rem; line-height: 1.55; } /* ---- Progress ------------------------------------------------------------ */ .guided-tour-progress { display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem 1rem; } .guided-tour-progress-track { flex: 1 1 auto; height: 4px; border-radius: 999px; background: var(--gc-surface-sunken); overflow: hidden; } .guided-tour-progress-fill { display: block; height: 100%; border-radius: inherit; background: var(--gc-primary); } @media (prefers-reduced-motion: no-preference) { .guided-tour-progress-fill { transition: width .28s ease; } } .guided-tour-progress-count { flex: 0 0 auto; font-size: .75rem; font-weight: 600; color: var(--gc-text-muted); font-variant-numeric: tabular-nums; } /* ---- Actions ------------------------------------------------------------- Next is unmistakably the primary. Back is quiet. Exit is quietest but still a real, labelled control rather than only an icon. */ .guided-tour-popover .guided-tour-popover-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .875rem 1.25rem !important; border-block-start: 1px solid var(--gc-border-subtle) !important; background: var(--gc-surface-subtle) !important; } .guided-tour-nav { display: flex; align-items: center; gap: .5rem; } .guided-tour-exit, .guided-tour-back, .guided-tour-next { min-height: 2.25rem; padding: .4375rem .875rem; border-radius: var(--gc-radius-sm); font-family: var(--gc-font); font-size: .875rem; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .guided-tour-exit { padding-inline: .25rem; border: 0; background: transparent; color: var(--gc-text-muted); } .guided-tour-exit:hover { color: var(--gc-text); text-decoration: underline; } .guided-tour-back { border: 1px solid var(--gc-border-strong); background: var(--gc-surface); color: var(--gc-ink-800); } .guided-tour-back:hover:not(:disabled) { border-color: var(--gc-primary); color: var(--gc-primary); } .guided-tour-back:disabled { opacity: .45; cursor: default; } .guided-tour-next { padding-inline: 1.25rem; border: 1px solid var(--gc-primary); background: var(--gc-primary); color: var(--gc-primary-on); } .guided-tour-next:hover { background: var(--gc-primary-hover); border-color: var(--gc-primary-hover); } .guided-tour-exit:focus-visible, .guided-tour-back:focus-visible, .guided-tour-next:focus-visible { outline: 3px solid var(--gc-primary-bright); outline-offset: 2px; } /* ---- Off-page step panel ------------------------------------------------- */ .guided-tour-panel { border-radius: var(--gc-radius-lg); box-shadow: 0 1.5rem 3rem -1rem rgba(10, 22, 34, 0.34); } /* ---- Mobile -------------------------------------------------------------- Not a shrunken desktop tooltip: the card docks to the bottom as a sheet so the spotlit target stays visible above it, and the actions sit inside the safe area where a thumb can reach them. */ /* Sheet up to the coach-rail breakpoint: at 768 a 23rem rail would leave the product too narrow to teach, so tablet uses the same sheet as mobile. */ @media (max-width: 61.99rem) { .guided-tour-popover { position: fixed !important; inset-block-start: auto !important; inset-block-end: 0 !important; inset-inline: 0 !important; width: 100% !important; max-width: 100% !important; border-inline: 0 !important; border-block-end: 0 !important; border-start-start-radius: var(--gc-radius-lg) !important; border-start-end-radius: var(--gc-radius-lg) !important; border-end-start-radius: 0 !important; border-end-end-radius: 0 !important; box-shadow: 0 -1rem 2.5rem -0.75rem rgba(10, 22, 34, 0.38) !important; padding-block-end: env(safe-area-inset-bottom, 0px); } /* The desktop notch points at a target the sheet no longer sits beside. */ .guided-tour-popover::before { display: none !important; } .guided-tour-popover .guided-tour-popover-footer { padding: .875rem 1rem !important; } .guided-tour-next { flex: 1 1 auto; min-height: var(--gc-touch-target); } .guided-tour-back { min-height: var(--gc-touch-target); } .guided-tour-nav { flex: 1 1 auto; justify-content: flex-end; } } /* ========================================================================== Guided tour v2 — coach mode -------------------------------------------------------------------------- Version 1 was still "dim the app, outline a box, float a tooltip". This is a different interaction model on desktop: a stable coach rail docked to the right of the viewport that does not move between steps, while the product itself stays lit and the current area is gently raised. Presentation only. Step definitions, count, targets, navigation, prompts and completion behaviour are untouched. ========================================================================== */ @media (min-width: 62rem) { /* ---- The coach rail -------------------------------------------------- Pinned to the viewport, not to the target, so it never jumps between steps. The inline style the component writes for tooltip positioning is overridden here. */ .guided-tour-popover { position: fixed !important; inset-block-start: 50% !important; inset-block-end: auto !important; inset-inline-end: 1.5rem !important; inset-inline-start: auto !important; transform: translateY(-50%) !important; width: 23rem !important; max-width: 23rem !important; max-height: calc(100vh - 3rem); display: flex !important; flex-direction: column; border-radius: var(--gc-radius-lg) !important; box-shadow: 0 2rem 4rem -1.5rem rgba(10, 22, 34, 0.42), 0 0 0 1px rgba(10, 22, 34, 0.05) !important; } /* A tooltip notch makes no sense on a docked rail. */ .guided-tour-popover::before { display: none !important; } /* The rail is a coaching surface, so it earns a header band rather than floating text: ink, not white, which also separates it from the ordinary dialogs in the product. */ .guided-tour-popover .guided-tour-popover-header { padding: 1.25rem 2.75rem 1rem 1.25rem !important; background: linear-gradient(160deg, #0a1622 0%, #123a3d 100%) !important; border-block-end: 0 !important; } .guided-tour-popover .guided-tour-popover-header .text-muted { color: var(--gc-accent) !important; } .guided-tour-popover .guided-tour-popover-header .fw-semibold { color: #ffffff !important; font-size: 1.125rem !important; } .guided-tour-popover .guided-tour-popover-close { color: rgba(255, 255, 255, .72); } .guided-tour-popover .guided-tour-popover-close:hover { background: rgba(255, 255, 255, .12); color: #ffffff; } /* Long explanations are readable in a rail, so let the body breathe and scroll rather than clipping. */ .guided-tour-popover .guided-tour-copy { flex: 1 1 auto; overflow-y: auto; padding: 1.125rem 1.25rem 1rem !important; font-size: .9375rem; line-height: 1.6; } /* ---- App inset ------------------------------------------------------- The rail is an overlay, but a full-bleed target would still slide under it. While a tour card exists, the application content is inset by the rail's width so nothing being explained is ever covered. Pure CSS, so it reverts the moment the tour closes; no layout state is stored. */ body:has(.guided-tour-popover) .main-content.app-content { padding-inline-end: 25.5rem; transition: padding-inline-end .24s ease; } } @media (min-width: 62rem) and (prefers-reduced-motion: reduce) { body:has(.guided-tour-popover) .main-content.app-content { transition: none; } } /* ========================================================================== Target treatment — raised, not outlined -------------------------------------------------------------------------- A thick ring around a large region just draws the bounding box. This lifts the area instead: a hairline teal edge, a soft elevation shadow and a faint local glow, so it reads as the active part of the page. ========================================================================== */ .bos-guided-tour-highlight { outline: none !important; outline-offset: 0 !important; /* No border-radius override: the shadow ring follows the target's own corner shape, so square content is not framed with unrelated rounding. No background override either: forcing a surface colour would white out dark targets such as sidebar navigation items. Elevation does the work. */ box-shadow: 0 0 0 1px rgba(15, 95, 88, 0.38), 0 0.75rem 2rem -0.5rem rgba(10, 22, 34, 0.22), 0 0 3rem 0.75rem rgba(22, 137, 126, 0.13) !important; } @media (prefers-reduced-motion: no-preference) { .bos-guided-tour-highlight { transition: box-shadow .22s ease; } } /* ========================================================================== Scrim — keep the product recognisable -------------------------------------------------------------------------- The page is no longer "disabled". A very light neutral wash establishes focus; the raised target above it does the rest. ========================================================================== */ .guided-tour-backdrop { background: rgba(10, 22, 34, 0.14) !important; } /* ========================================================================== Progress — part of the rail, not an afterthought ========================================================================== */ .guided-tour-progress-count::before { content: "Step "; } /* ========================================================================== Welcome step -------------------------------------------------------------------------- The first screen is an introduction rather than a pointer, so on desktop it sits centred and slightly wider. Every later step uses the rail. ========================================================================== */ @media (min-width: 62rem) { .guided-tour-popover.is-welcome { inset-block-start: 50% !important; inset-inline-end: 50% !important; width: 27rem !important; max-width: 27rem !important; transform: translate(50%, -50%) !important; } .guided-tour-popover.is-welcome .guided-tour-popover-header { padding-block: 1.5rem 1.125rem !important; } .guided-tour-popover.is-welcome .guided-tour-popover-header .fw-semibold { font-size: 1.375rem !important; } /* The welcome step explains the tour, not a region, so the app is not inset behind it. */ body:has(.guided-tour-popover.is-welcome) .main-content.app-content { padding-inline-end: 0; } } /* ========================================================================== Guided tour — cross-page handoff panel -------------------------------------------------------------------------- The handoff state ("Go to Locations and resume the tour there") kept the pre-v2 markup and styling: Bootstrap button classes, a bare close glyph, no progress, and a single padded box. Beside the v2 coach card it read as a different product. It now shares the coach card's structure exactly — ink header band, padded body, progress row, padded footer with the same action hierarchy. Only presentation changes; the handoff behaviour is untouched. ========================================================================== */ .guided-tour-panel { /* The header/body/footer bands own the spacing, so the shell must not add its own padding on top of them. */ padding: 0 !important; width: min(24rem, calc(100vw - 1.5rem)); overflow: hidden; border: 1px solid var(--gc-border); border-radius: var(--gc-radius-lg); background: var(--gc-surface); } .guided-tour-panel .guided-tour-popover-header { padding: 1.25rem 1.25rem 1rem !important; background: linear-gradient(160deg, #0a1622 0%, #123a3d 100%) !important; border-block-end: 0 !important; } .guided-tour-panel .guided-tour-popover-header .text-muted { color: var(--gc-accent) !important; font-size: .6875rem !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .guided-tour-panel .guided-tour-popover-header .fw-semibold { color: #ffffff !important; font-size: 1.125rem !important; line-height: 1.3; letter-spacing: -0.01em; } .guided-tour-panel .guided-tour-copy { padding: 1.125rem 1.25rem 1rem !important; margin: 0; color: var(--gc-text-secondary); font-size: .9375rem; line-height: 1.6; } .guided-tour-panel .guided-tour-progress { padding: 0 1.25rem .875rem; } .guided-tour-panel .guided-tour-popover-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .875rem 1.25rem !important; border-block-start: 1px solid var(--gc-border-subtle) !important; background: var(--gc-surface-subtle) !important; } /* "Go to Calendar" is longer than "Next", so let it wrap rather than force the footer wider than the card. */ .guided-tour-panel .guided-tour-next { text-align: center; line-height: 1.25; } @media (max-width: 61.99rem) { /* Matches the coach card's docked-sheet behaviour at the same breakpoint. */ .guided-tour-panel { position: fixed !important; inset-block-start: auto !important; inset-block-end: 0 !important; inset-inline: 0 !important; width: 100% !important; max-width: 100% !important; border-inline: 0 !important; border-block-end: 0 !important; border-start-start-radius: var(--gc-radius-lg) !important; border-start-end-radius: var(--gc-radius-lg) !important; border-end-start-radius: 0 !important; border-end-end-radius: 0 !important; box-shadow: 0 -1rem 2.5rem -0.75rem rgba(10, 22, 34, 0.38) !important; padding-block-end: env(safe-area-inset-bottom, 0px) !important; } .guided-tour-panel .guided-tour-nav { flex: 1 1 auto; justify-content: flex-end; } .guided-tour-panel .guided-tour-next { flex: 1 1 auto; min-height: var(--gc-touch-target); } .guided-tour-panel .guided-tour-back { min-height: var(--gc-touch-target); } } /* The panel header is two stacked lines (eyebrow, then title), not a row. Some ancestor rules make the shared header class flex; force block flow so the panel matches the coach card. */ .guided-tour-panel .guided-tour-popover-header { display: block !important; } .guided-tour-panel .guided-tour-popover-header .text-muted { display: block; margin-bottom: .375rem; } /* At sheet widths the collapsed sidebar (.app-sidebar, z-index 1045) is still on screen and painted over the docked sheet's left edge, clipping the eyebrow, title and the Exit tour action. The shell sits at 1040, so it only needs to clear the sidebar by one. Scoped to the sheet breakpoint so desktop rail stacking is untouched, and still far below the target highlight (z-index 11010) that has to stay above the scrim. */ @media (max-width: 61.99rem) { .guided-tour-shell { z-index: 1046; } } /* ========================================================================== Guided tour - desktop handoff stays on the rail -------------------------------------------------------------------------- The handoff panel had no desktop geometry of its own, so it fell back to the shell's bottom-right corner: crossing a route made the instructional surface jump out of the rail and land on top of the application, and the app-content inset - keyed to the coach card - collapsed for the duration, reflowing the product twice per route change. The panel now takes the same fixed rail box as an ordinary desktop step and holds the inset open, so a route transition changes only the words in the card. Behaviour is untouched; this is geometry. ========================================================================== */ @media (min-width: 62rem) { .guided-tour-panel { position: fixed !important; inset-block-start: 50% !important; inset-block-end: auto !important; inset-inline-end: 1.5rem !important; inset-inline-start: auto !important; transform: translateY(-50%) !important; width: 23rem !important; max-width: 23rem !important; max-height: calc(100vh - 3rem); display: flex !important; flex-direction: column; border-radius: var(--gc-radius-lg) !important; box-shadow: 0 2rem 4rem -1.5rem rgba(10, 22, 34, 0.42), 0 0 0 1px rgba(10, 22, 34, 0.05) !important; } /* Same body behaviour as the rail: long copy scrolls rather than clipping. */ .guided-tour-panel .guided-tour-copy { flex: 1 1 auto; overflow-y: auto; } body:has(.guided-tour-panel) .main-content.app-content { padding-inline-end: 25.5rem; transition: padding-inline-end .24s ease; } } @media (min-width: 62rem) and (prefers-reduced-motion: reduce) { body:has(.guided-tour-panel) .main-content.app-content { transition: none; } } /* Exit tour, Back and the destination action share one line. The destination names are business-facing now ("Business Info", not "the Organization tab in Profile"), so the longest label fits the rail without shrinking the text. */ .guided-tour-panel .guided-tour-popover-footer { flex-wrap: nowrap; } .guided-tour-panel .guided-tour-next { white-space: nowrap; } /* ========================================================================== Guided tour - navigation drawer opened mid-tour -------------------------------------------------------------------------- Below 768 the navigation drawer is a modal surface of its own: the sidebar work puts it at z-index 11250 over an 11240 backdrop, both far above the tour shell, and already drops `.bos-guided-tour-highlight` to `auto` behind it. Left alone that also buries the tour sheet - including Exit tour - with no way back to the tour. While the drawer is open the sheet is lifted above it, and the tour's own scrim is retired: the drawer's backdrop is already dimming the page, and without this the raised shell would drag the scrim over the target. Closing the drawer restores the ordinary sheet stacking. Scoped to the drawer's own breakpoint, and none of the sidebar rules are altered. ========================================================================== */ @media (max-width: 767.98px) { body:has(.bos-shell.sidebar-open) .guided-tour-shell { z-index: 11260; } body:has(.bos-shell.sidebar-open) .guided-tour-backdrop { display: none; } }