/* LifeMuse Corporate Portal — Avo overrides * * Verified against: Avo 3.30.4 / Tailwind (compiled by Avo, no @layer) * Avo layout: — no #app wrapper. * Selectors use body.bg-application for specificity over Avo's Tailwind utilities. * * UPGRADE NOTE: Badge selectors target Avo's BadgeViewerComponent output * (span.rounded-md.uppercase.bg-COLOR-500.text-white). If Avo changes its * badge markup or Tailwind class names, these selectors will silently break. * Run a visual check of status badges after any Avo gem upgrade. * * Design spec palette: * Black: #333333 * Gray: #757D8A * White: #ffffff * Background: #F6F6F7 * Dark Blue: #216EA5 * Vibrant Blue: #007AFF * Light Blue: #3797DC * Green: #24965D * Error Red: #EF4444 * Error Red (light): #F45D6A * Accent Gold: #fcd45a (sidebar active text) */ /* ======================================== * Typography — Inter (self-hosted) * * Avo pages do not include the app Tailwind build, so we declare * @font-face here. Propshaft rewrites the relative url() at serve time. * ======================================== */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/InterVariable-884c49a1.woff2") format("woff2-variations"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/assets/InterVariable-Italic-0aa7a4b3.woff2") format("woff2-variations"); } body.bg-application { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; } .avo-sidebar.application-sidebar { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; } /* ======================================== * Sidebar — textured background * ======================================== */ .avo-sidebar.application-sidebar { background: linear-gradient( to bottom, rgba(51, 51, 51, 0.78) 0%, rgba(51, 51, 51, 0.9) 40%, rgba(51, 51, 51, 0.96) 100% ), url("/avo-assets/lifemuse-sidebar-texture.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; } .avo-sidebar.application-sidebar .mac-styled-scrollbar { background: transparent !important; } .application-sidebar a, .application-sidebar .text-gray-500, .application-sidebar .text-gray-700, .application-sidebar .text-black { color: #ffffff !important; } .application-sidebar a svg, .application-sidebar .text-gray-500 svg, .application-sidebar .text-gray-700 svg, .application-sidebar .text-black svg { color: #ffffff !important; } /* Active sidebar item — gold text only, no background */ .application-sidebar .active, .application-sidebar .active:hover { color: #fcd45a !important; background-color: transparent !important; box-shadow: none !important; text-shadow: 0 0 10px rgba(252, 212, 90, 0.6), 0 0 20px rgba(252, 212, 90, 0.3); } .application-sidebar .active svg, .application-sidebar .active:hover svg { color: #fcd45a !important; filter: drop-shadow(0 0 6px rgba(252, 212, 90, 0.5)); } .application-sidebar a:hover:not(.active) { background-color: rgba(255, 255, 255, 0.06) !important; border-radius: 8px; } .application-sidebar a:focus-visible { outline: 2px solid #fcd45a !important; outline-offset: 2px; border-radius: 8px; } /* Section headers in sidebar */ .application-sidebar .uppercase { color: rgba(255, 255, 255, 0.50) !important; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.06em; } /* ======================================== * Logo container — white bg, dark logo * ======================================== */ .logo-placeholder { align-items: center; background-color: #ffffff; border-radius: 8px; display: inline-flex !important; height: 100%; justify-content: center; max-width: fit-content; padding: 0.4rem 0.65rem; } .logo-placeholder img { height: 0.9rem; } /* ======================================== * Main content area — background * ======================================== */ .main-content-area, .content { background-color: #F6F6F7; } /* ======================================== * LifeMuse dashboard work queue * ======================================== */ .lifemuse-dashboard { color: #070707; margin-left: auto; margin-right: auto; max-width: 1024px; padding-bottom: 2rem; width: 100%; } body.bg-application:has(.lifemuse-dashboard) [data-target="panel-header"] { display: none; } body.bg-application:has(.lifemuse-dashboard) .grid:has(.lifemuse-dashboard) { display: block; } body.bg-application:has(.lifemuse-dashboard) .grid:has(.lifemuse-dashboard) > .relative { background: transparent !important; box-shadow: none !important; overflow: visible !important; } .lifemuse-dashboard__breadcrumb { align-items: center; color: #070707; display: flex; font-size: 16px; gap: 8px; line-height: 24px; margin-bottom: 18px; } .lifemuse-dashboard__breadcrumb-link { color: #007AFF; text-decoration: none; } .lifemuse-dashboard__breadcrumb-icon { border: 2px solid #1c1b1f; display: inline-block; height: 14px; margin-right: 6px; position: relative; width: 12px; } .lifemuse-dashboard__breadcrumb-icon::before { background: #1c1b1f; content: ""; height: 14px; left: 4px; position: absolute; top: -2px; width: 2px; } .lifemuse-dashboard__breadcrumb-chevron { border-right: 1px solid #b2b2b2; border-top: 1px solid #b2b2b2; display: inline-block; height: 7px; margin-inline: 2px; transform: rotate(45deg); width: 7px; } .lifemuse-dashboard__header h1 { color: #070707; font-size: 32px; font-weight: 700; line-height: 1.2; margin: 0; } .lifemuse-dashboard__header p { color: #666666; font-size: 16px; line-height: 24px; margin: 8px 0 0; max-width: 625px; } .lifemuse-dashboard__section { margin-top: 24px; } .lifemuse-dashboard__section--attention { margin-top: 22px; } .lifemuse-dashboard__section h2 { color: #070707; font-size: 22px; font-weight: 700; line-height: 27px; margin: 0 0 16px; } .lifemuse-dashboard__table-panel { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 10px; overflow: hidden; width: 100%; } .lifemuse-dashboard__table-panel--reminders { min-height: 244px; } .lifemuse-dashboard__table-panel--attention { min-height: 391px; } .lifemuse-dashboard__table-scroll { -ms-overflow-style: none; overflow-x: auto; scrollbar-width: none; } .lifemuse-dashboard__table-scroll::-webkit-scrollbar { display: none; } .lifemuse-dashboard__table { border-collapse: collapse; table-layout: fixed; text-align: left; width: 100%; } .lifemuse-dashboard__table--reminders { min-width: 1020px; } .lifemuse-dashboard__table--attention { min-width: 900px; } .lifemuse-dashboard__table thead th, body.bg-application .lifemuse-dashboard__table thead th { border-bottom: 1px solid #e0e0e0; color: #b2b2b2 !important; font-size: 14px !important; font-weight: 400 !important; height: 52px; letter-spacing: 0 !important; line-height: 20px; padding: 0 16px; text-transform: none !important; white-space: nowrap; } .lifemuse-dashboard__table tbody tr { border-bottom: 1px solid #e0e0e0; } .lifemuse-dashboard__table tbody tr:last-child { border-bottom: 0; } .lifemuse-dashboard__table tbody td { color: #000000; font-size: 14px; font-weight: 400; height: 48px; line-height: 20px; overflow: hidden; padding: 0 16px; text-overflow: ellipsis; white-space: nowrap; } .lifemuse-dashboard__table tbody td:first-child, .lifemuse-dashboard__table thead th:first-child { padding-left: 24px; } .lifemuse-dashboard__table tbody td:last-child, .lifemuse-dashboard__table thead th:last-child { overflow: visible; padding-left: 8px; padding-right: 16px; text-align: right; text-overflow: clip; } .lifemuse-dashboard__table tbody a { color: #000000; font-weight: 400; text-decoration: none; } .lifemuse-dashboard__table tbody a:hover { color: #007AFF; } .lifemuse-dashboard__breadcrumb-link:focus-visible, .lifemuse-dashboard__table tbody a:focus-visible, .lifemuse-dashboard__pagination-button:focus-visible { border-radius: 6px; outline: 2px solid #007AFF; outline-offset: 2px; } .lifemuse-dashboard__col-id { width: 76px; } .lifemuse-dashboard__col-date { width: 168px; } .lifemuse-dashboard__col-from { width: 174px; } .lifemuse-dashboard__col-importance { width: 156px; } .lifemuse-dashboard__col-title { width: 176px; } .lifemuse-dashboard__col-description { width: auto; } .lifemuse-dashboard__col-attention-date { width: 160px; } .lifemuse-dashboard__col-member { width: 170px; } .lifemuse-dashboard__col-task { width: 155px; } .lifemuse-dashboard__col-attention-description { width: auto; } .lifemuse-dashboard__col-status { width: 182px; } .lifemuse-dashboard__col-open { width: 48px; } .lifemuse-dashboard__sort { display: inline-flex; height: 12px; margin-left: 40px; position: relative; top: 1px; width: 8px; } .lifemuse-dashboard__sort::before, .lifemuse-dashboard__sort::after { border-left: 4px solid transparent; border-right: 4px solid transparent; content: ""; left: 0; position: absolute; } .lifemuse-dashboard__sort::before { border-bottom: 4px solid #b2b2b2; top: 1px; } .lifemuse-dashboard__sort::after { border-top: 4px solid #b2b2b2; bottom: 1px; } .lifemuse-dashboard__status { background: rgba(255, 204, 0, 0.1); border-radius: 10px; color: #8B4F00; display: inline-flex; font-size: 14px; font-weight: 700; line-height: 20px; padding: 6px 8px; white-space: nowrap; } /* Importance pill colors mirror the Avo badge mapping: low=success, medium=warning, high=danger. */ .lifemuse-dashboard__importance { border-radius: 10px; display: inline-flex; font-size: 14px; font-weight: 700; line-height: 20px; padding: 6px 8px; white-space: nowrap; } .lifemuse-dashboard__importance--low { background: rgba(52, 199, 89, 0.1); color: #1F7A38; } .lifemuse-dashboard__importance--medium { background: rgba(255, 204, 0, 0.1); color: #8B4F00; } .lifemuse-dashboard__importance--high { background: rgba(255, 59, 48, 0.1); color: #B3261E; } .lifemuse-dashboard__open-link { align-items: center; border-radius: 6px; display: inline-flex; height: 44px; justify-content: center; vertical-align: middle; width: 44px; } .lifemuse-dashboard__open-link span { border-right: 2px solid #000000; border-top: 2px solid #000000; display: block; height: 8px; transform: rotate(45deg); width: 8px; } .lifemuse-dashboard__open-link:hover { background: #f4f4f5; } .lifemuse-dashboard__empty-cell { height: 198px !important; padding: 0 !important; text-align: center !important; vertical-align: middle !important; white-space: normal !important; } .lifemuse-dashboard__table-panel--attention .lifemuse-dashboard__empty-cell { height: 337px !important; } .lifemuse-dashboard__empty-state { align-items: center; color: #757d8a; display: flex; flex-direction: column; font-size: 16px; justify-content: center; line-height: 24px; min-height: 198px; left: 0; position: sticky; text-align: center; width: min(100%, calc(100vw - 64px)); } .lifemuse-dashboard__table-panel--attention .lifemuse-dashboard__empty-state { min-height: 337px; } .lifemuse-dashboard__empty-state p { margin: 5px 0 0; } .lifemuse-dashboard__empty-icon { display: block; height: 91px; width: 96px; } .lifemuse-dashboard__pagination { align-items: center; border-top: 1px solid #e0e0e0; display: flex; font-size: 12px; justify-content: flex-end; line-height: 18px; min-height: 52px; padding: 12px 24px; } .lifemuse-dashboard__pagination-controls { align-items: center; display: flex; gap: 8px; justify-content: flex-end; } .lifemuse-dashboard__pagination-button { align-items: center; border-radius: 8px; color: #2d2926; display: inline-flex; font-size: 12px; font-weight: 400; height: 28px; justify-content: center; line-height: 18px; min-width: 28px; padding: 4px 8px; text-align: center; text-decoration: none; } .lifemuse-dashboard__pagination-button:hover { background: #f4f4f5; } .lifemuse-dashboard__pagination-button--active { background: #000000; color: #ffffff; } .lifemuse-dashboard__pagination-button--active:hover { background: #000000; } .lifemuse-dashboard__pagination-button--disabled { opacity: 0.35; } .lifemuse-dashboard__pagination-button--icon { padding: 4px; width: 28px; } .lifemuse-dashboard__pagination-arrow { border-color: #2d2926; border-style: solid; display: block; height: 9px; width: 9px; } .lifemuse-dashboard__pagination-arrow--previous { border-width: 0 0 1.5px 1.5px; transform: translateX(2px) rotate(45deg); } .lifemuse-dashboard__pagination-arrow--next { border-width: 1.5px 1.5px 0 0; transform: translateX(-2px) rotate(45deg); } @media (max-width: 900px) { .lifemuse-dashboard { padding-left: 16px; padding-right: 16px; } } /* ======================================== * Catalog Program builder inside Avo * ======================================== */ .catalog-program-builder-shell { color: #1a1d2b; } .catalog-program-builder-container { margin-left: auto; margin-right: auto; max-width: 64rem; padding-left: 1rem; padding-right: 1rem; width: 100%; } @media (min-width: 640px) { .catalog-program-builder-container { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .catalog-program-builder-container { padding-left: 2rem; padding-right: 2rem; } } .catalog-program-builder-header { background: transparent; border-bottom: 0 !important; position: relative; z-index: 1; } .catalog-program-breadcrumbs { align-items: center; color: #070707; display: flex; flex-wrap: wrap; font-size: 1rem; gap: 0.75rem; line-height: 1.2; margin-bottom: 0.875rem; } .catalog-program-breadcrumbs a { color: #333333; text-decoration: none; } .catalog-program-breadcrumbs a:hover { color: #216EA5; } .catalog-program-breadcrumb-icon { border: 2px solid #1C1B1F; border-radius: 2px; display: inline-block; height: 1.25rem; position: relative; width: 1.25rem; } .catalog-program-breadcrumb-icon::after { background: #1C1B1F; content: ""; height: 1rem; left: 0.45rem; position: absolute; top: 0; width: 2px; } .catalog-program-titlebar { align-items: center; display: flex; gap: 1rem; justify-content: space-between; } .catalog-program-title { color: #333333; font-size: 2rem; font-weight: 700; letter-spacing: 0; line-height: 1.2; margin: 0; } .catalog-program-back-button { align-items: center; border-radius: 6px; color: #1C1B1F; display: inline-flex; flex: 0 0 auto; font-size: 0; height: 1.75rem; justify-content: center; text-decoration: none; width: 1.75rem; } .catalog-program-back-button::before { content: "\2190"; font-size: 1.75rem; line-height: 1; } .catalog-program-back-button:hover { background: #eeeeee; } .catalog-program-back-button:focus-visible, .catalog-program-primary-button:focus-visible, .catalog-program-neutral-button:focus-visible, .catalog-program-search-submit:focus-visible { outline: 2px solid #333333; outline-offset: 2px; } .catalog-program-subtitle { align-items: center; color: #757D8A; display: flex; flex-wrap: wrap; font-size: 0.75rem; gap: 0.375rem; margin-top: 0.35rem; } .catalog-program-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; } .catalog-program-pill { border: 1px solid transparent; border-radius: 999px; display: inline-flex; font-size: 0.6875rem; font-weight: 600; padding: 0.125rem 0.5rem; } .catalog-program-details-card, .catalog-program-items-card { background: #ffffff; border: 1px solid #d8d8d8; border-radius: 10px; overflow: hidden; } .catalog-program-details-card { margin-top: 1.125rem; } .catalog-program-field-row { align-items: center; border-bottom: 1px solid #e0e0e0; display: grid; gap: 1.5rem; grid-template-columns: 16rem minmax(0, 1fr); min-height: 3.5625rem; padding: 0.625rem 1.5rem; } .catalog-program-field-row:last-child { border-bottom: 0; } .catalog-program-field-row-top { align-items: start; } .catalog-program-label { color: #000000; display: block; font-size: 0.875rem; font-weight: 700; line-height: 1.4; } .catalog-program-input { background: #f8f9fc; border: 1px solid #dde1ec; border-radius: 6px; color: #333333; display: block; font-size: 0.875rem; line-height: 1.4; min-height: 2.5rem; padding: 0.55rem 0.75rem; width: 100%; } .catalog-program-input:focus { border-color: #333333; box-shadow: 0 0 0 1px rgba(51, 51, 51, 0.18); outline: none; } .catalog-program-input-disabled { background: #eef1f7; color: #757D8A; cursor: not-allowed; } .catalog-program-select { max-width: 16rem; } .catalog-program-textarea { min-height: 6rem; resize: vertical; } .catalog-program-field-help { color: #757D8A; font-size: 0.75rem; margin-top: 0.375rem; } .catalog-program-checkbox-label { align-items: center; color: #333333; display: inline-flex; font-size: 0.875rem; font-weight: 600; gap: 0.5rem; } .catalog-program-checkbox { accent-color: #666666; border-radius: 4px; height: 1.25rem; width: 1.25rem; } .catalog-program-section-heading { margin: 1.75rem 0 1rem; } .catalog-program-section-heading h2 { color: #000000; font-size: 0.875rem; font-weight: 700; line-height: 1.4; margin: 0; } .catalog-program-section-heading p { color: #757D8A; font-size: 0.75rem; margin: 0.2rem 0 0; } .catalog-program-items-card { padding-top: 1.5rem; } .catalog-program-items-search { align-items: center; display: flex; gap: 0.5rem; margin: 0 1.5rem 1.5rem; position: relative; width: min(100%, 430px); } .catalog-program-auto-search-enabled .catalog-program-items-search { display: block; width: min(100%, 342px); } .catalog-program-items-search::after { color: #bababa; content: "\2315"; display: none; font-size: 1.4rem; line-height: 1; position: absolute; right: 1rem; top: 0.55rem; } .catalog-program-auto-search-enabled .catalog-program-items-search::after { display: block; } .catalog-program-search-input { background: #ffffff; border-color: #d8d8d8; border-radius: 10px; flex: 1 1 auto; min-width: 0; min-height: 2.625rem; padding-right: 3rem; } .catalog-program-search-submit { align-items: center; background: #ffffff; border: 1px solid #d8d8d8; border-radius: 8px; color: #333333; display: inline-flex; flex: 0 0 auto; font-size: 0.875rem; font-weight: 600; justify-content: center; min-height: 2.625rem; padding: 0.5rem 0.85rem; } .catalog-program-auto-search-enabled .catalog-program-search-submit { display: none; } .catalog-program-table-wrap { overflow-x: auto; } .catalog-program-items-table { border-collapse: collapse; font-size: 0.875rem; min-width: 100%; table-layout: fixed; } .catalog-program-items-table th { border-bottom: 1px solid #e0e0e0; color: #b2b2b2; font-weight: 400; height: 3rem; padding: 0 1.5rem; text-align: left; } .catalog-program-items-table td { border-bottom: 1px solid #e0e0e0; color: #000000; height: 3.0625rem; padding: 0 1.5rem; } .catalog-program-items-table tbody tr:last-child td { border-bottom: 0; } .catalog-program-id-column { width: 7rem; } .catalog-program-selected-column { text-align: right !important; width: 7rem; } .catalog-program-id-cell { color: #0886de !important; font-weight: 700; text-decoration: underline; } .catalog-program-item-name { color: #000000; cursor: pointer; display: block; font-weight: 400; } .catalog-program-selected-cell { text-align: right; } .catalog-program-empty-state { color: #757D8A !important; height: 7rem !important; text-align: center; } .catalog-program-pagination { align-items: center; color: #333333; display: flex; font-size: 0.875rem; gap: 1rem; justify-content: center; min-height: 4.5rem; padding: 1rem 1.5rem 1.25rem; } .catalog-program-pagination-actions { display: flex; gap: 0.5rem; } .catalog-program-primary-button { align-items: center; background: #333333; border: 1px solid #333333; border-radius: 10px; color: #ffffff !important; display: inline-flex; font-size: 1rem; font-weight: 700; justify-content: center; min-height: 2.625rem; min-width: 6.125rem; padding: 0.5rem 1.25rem; } .catalog-program-primary-button:hover { background: #111111; border-color: #111111; } .catalog-program-neutral-button { align-items: center; background: #ffffff; border: 1px solid #d8d8d8; border-radius: 8px; color: #333333 !important; display: inline-flex; font-size: 0.875rem; font-weight: 600; justify-content: center; min-height: 2.25rem; padding: 0.4rem 0.85rem; text-decoration: none; } .catalog-program-neutral-button:hover { background: #f8f9fc; } .sr-only { clip: rect(0, 0, 0, 0); border: 0; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } @media (max-width: 767px) { .catalog-program-titlebar, .catalog-program-actions, .catalog-program-pagination { align-items: stretch; flex-direction: column; } .catalog-program-field-row { gap: 0.5rem; grid-template-columns: 1fr; } .catalog-program-selected-column, .catalog-program-selected-cell { width: 5rem; } } /* ======================================== * Membership entitlement coverage builder inside Avo * ======================================== */ .coverage-builder-shell { color: #1a1d2b; } .coverage-builder-container { margin-left: auto; margin-right: auto; max-width: 64rem; padding-left: 1rem; padding-right: 1rem; width: 100%; } @media (min-width: 640px) { .coverage-builder-container { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .coverage-builder-container { padding-left: 2rem; padding-right: 2rem; } } .coverage-builder-header { background: transparent; border-bottom: 0 !important; position: relative; z-index: 1; } .coverage-builder-breadcrumbs { align-items: center; color: #070707; display: flex; flex-wrap: wrap; font-size: 1rem; gap: 0.75rem; line-height: 1.2; margin-bottom: 0.875rem; } .coverage-builder-breadcrumbs a { color: #333333; text-decoration: none; } .coverage-builder-breadcrumbs a:hover { color: #216EA5; } .coverage-builder-breadcrumb-icon { border: 2px solid #1C1B1F; border-radius: 2px; display: inline-block; height: 1.25rem; position: relative; width: 1.25rem; } .coverage-builder-breadcrumb-icon::after { background: #1C1B1F; content: ""; height: 1rem; left: 0.45rem; position: absolute; top: 0; width: 2px; } .coverage-builder-titlebar { align-items: center; display: flex; gap: 1rem; justify-content: space-between; } .coverage-builder-title { color: #333333; font-size: 2rem; font-weight: 700; letter-spacing: 0; line-height: 1.2; margin: 0; } .coverage-builder-back-button { align-items: center; border-radius: 6px; color: #1C1B1F; display: inline-flex; flex: 0 0 auto; font-size: 0; height: 1.75rem; justify-content: center; text-decoration: none; width: 1.75rem; } .coverage-builder-back-button::before { content: "\2190"; font-size: 1.75rem; line-height: 1; } .coverage-builder-back-button:hover { background: #eeeeee; } .coverage-builder-back-button:focus-visible, .coverage-builder-primary-button:focus-visible, .coverage-builder-neutral-button:focus-visible, .coverage-builder-search-submit:focus-visible { outline: 2px solid #333333; outline-offset: 2px; } .coverage-builder-subtitle { align-items: center; color: #757D8A; display: flex; flex-wrap: wrap; font-size: 0.75rem; gap: 0.375rem; margin-top: 0.35rem; } .coverage-builder-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; } .coverage-builder-status { background: #eef1f7; border-radius: 6px; color: #5a5f7a; font-size: 0.875rem; padding: 0.5rem 0.75rem; } .coverage-builder-pill { background: #eef1f7; border: 1px solid #dde1ec; border-radius: 999px; color: #5a5f7a; display: inline-flex; font-size: 0.6875rem; font-weight: 600; padding: 0.125rem 0.5rem; } .coverage-builder-error { background: #fef0f0; border: 1px solid #f5c2c2; border-radius: 8px; color: #8a0008; font-size: 0.875rem; padding: 0.75rem 1rem; } .coverage-builder-card { background: #ffffff; border: 1px solid #d8d8d8; border-radius: 10px; overflow: hidden; } .coverage-builder-details-card { margin-top: 1.125rem; } .coverage-builder-field-row { align-items: center; display: grid; gap: 1.5rem; grid-template-columns: 16rem minmax(0, 1fr); min-height: 3.5625rem; padding: 0.625rem 1.5rem; } .coverage-builder-label { color: #000000; display: block; font-size: 0.875rem; font-weight: 700; line-height: 1.4; } .coverage-builder-input { background: #f8f9fc; border: 1px solid #dde1ec; border-radius: 6px; color: #333333; display: block; font-size: 0.875rem; line-height: 1.4; min-height: 2.5rem; padding: 0.55rem 0.75rem; width: 100%; } .coverage-builder-input:focus { border-color: #333333; box-shadow: 0 0 0 1px rgba(51, 51, 51, 0.18); outline: none; } .coverage-builder-input-disabled { background: #eef1f7; color: #757D8A; cursor: not-allowed; } .coverage-builder-select { max-width: 24rem; } .coverage-builder-field-help { color: #757D8A; font-size: 0.75rem; margin-top: 0.375rem; } .coverage-builder-section-heading { margin: 1.75rem 0 1rem; } .coverage-builder-section-heading h2 { color: #000000; font-size: 0.875rem; font-weight: 700; line-height: 1.4; margin: 0; } .coverage-builder-section-heading p { color: #757D8A; font-size: 0.75rem; margin: 0.2rem 0 0; } .coverage-builder-services-card { padding-top: 1.5rem; } .coverage-builder-search { align-items: center; display: flex; gap: 0.5rem; margin: 0 1.5rem 1.5rem; position: relative; width: min(100%, 430px); } .coverage-builder-search-input { background: #ffffff; border-color: #d8d8d8; border-radius: 10px; flex: 1 1 auto; min-width: 0; min-height: 2.625rem; } .coverage-builder-search-submit { align-items: center; background: #ffffff; border: 1px solid #d8d8d8; border-radius: 8px; color: #333333; display: inline-flex; flex: 0 0 auto; font-size: 0.875rem; font-weight: 600; justify-content: center; min-height: 2.625rem; padding: 0.5rem 0.85rem; } .coverage-builder-table-wrap { overflow-x: auto; } .coverage-builder-table { border-collapse: collapse; font-size: 0.875rem; min-width: 100%; table-layout: fixed; } .coverage-builder-table th { border-bottom: 1px solid #e0e0e0; color: #b2b2b2; font-weight: 400; height: 3rem; padding: 0 1.5rem; text-align: left; } .coverage-builder-table td { border-bottom: 1px solid #e0e0e0; color: #000000; height: 3.0625rem; padding: 0 1.5rem; } .coverage-builder-table tbody tr:last-child td { border-bottom: 0; } .coverage-builder-id-column { width: 6rem; } .coverage-builder-selected-column { text-align: right !important; width: 7rem; } .coverage-builder-id-cell { color: #0886de !important; font-weight: 700; } .coverage-builder-service-name { color: #000000; cursor: pointer; display: block; font-weight: 400; } .coverage-builder-selected-cell { text-align: right; } .coverage-builder-empty-state { color: #757D8A !important; height: 7rem !important; text-align: center; } .coverage-builder-checkbox { accent-color: #666666; border-radius: 4px; height: 1.25rem; width: 1.25rem; } .coverage-builder-pagination { align-items: center; color: #333333; display: flex; font-size: 0.875rem; gap: 1rem; justify-content: center; min-height: 4.5rem; padding: 1rem 1.5rem 1.25rem; } .coverage-builder-pagination-actions { display: flex; gap: 0.5rem; } .coverage-builder-primary-button { align-items: center; background: #333333; border: 1px solid #333333; border-radius: 10px; color: #ffffff !important; display: inline-flex; font-size: 1rem; font-weight: 700; justify-content: center; min-height: 2.625rem; min-width: 6.125rem; padding: 0.5rem 1.25rem; } .coverage-builder-primary-button:hover { background: #111111; border-color: #111111; } .coverage-builder-neutral-button { align-items: center; background: #ffffff; border: 1px solid #d8d8d8; border-radius: 8px; color: #333333 !important; display: inline-flex; font-size: 0.875rem; font-weight: 600; justify-content: center; min-height: 2.25rem; padding: 0.4rem 0.85rem; text-decoration: none; } .coverage-builder-neutral-button:hover { background: #f8f9fc; } @media (max-width: 767px) { .coverage-builder-titlebar, .coverage-builder-actions, .coverage-builder-pagination { align-items: stretch; flex-direction: column; } .coverage-builder-field-row { gap: 0.5rem; grid-template-columns: 1fr; } .coverage-builder-selected-column, .coverage-builder-selected-cell { width: 5rem; } } /* ======================================== * Catalog Category builder inside Avo * ======================================== */ .catalog-category-builder-shell { background-color: #F6F6F7; color: #1a1d2b; } .catalog-category-builder-container { margin-left: auto; margin-right: auto; max-width: 64rem; padding-left: 1rem; padding-right: 1rem; width: 100%; } @media (min-width: 640px) { .catalog-category-builder-container { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .catalog-category-builder-container { padding-left: 2rem; padding-right: 2rem; } } .catalog-category-builder-header { background: transparent; border-bottom: 0 !important; position: relative; z-index: 1; } .catalog-category-breadcrumbs { align-items: center; color: #070707; display: flex; flex-wrap: wrap; font-size: 1rem; gap: 0.75rem; line-height: 1.2; margin-bottom: 0.875rem; } .catalog-category-breadcrumbs a { color: #333333; text-decoration: none; } .catalog-category-breadcrumbs a:hover { color: #216EA5; } .catalog-category-breadcrumb-icon { border: 2px solid #1C1B1F; border-radius: 2px; display: inline-block; height: 1.25rem; position: relative; width: 1.25rem; } .catalog-category-breadcrumb-icon::after { background: #1C1B1F; content: ""; height: 1rem; left: 0.45rem; position: absolute; top: 0; width: 2px; } .catalog-category-titlebar { align-items: center; display: flex; gap: 1rem; justify-content: space-between; } .catalog-category-title { color: #333333; font-size: 2rem; font-weight: 700; letter-spacing: 0; line-height: 1.2; margin: 0; } .catalog-category-back-button { align-items: center; border-radius: 6px; color: #1C1B1F; display: inline-flex; flex: 0 0 auto; font-size: 0; height: 1.75rem; justify-content: center; text-decoration: none; width: 1.75rem; } .catalog-category-back-button::before { content: "\2190"; font-size: 1.75rem; line-height: 1; } .catalog-category-back-button:hover { background: #eeeeee; } .catalog-category-back-button:focus-visible, .catalog-category-primary-button:focus-visible, .catalog-category-neutral-button:focus-visible, .catalog-category-search-submit:focus-visible { outline: 2px solid #333333; outline-offset: 2px; } .catalog-category-subtitle { align-items: center; color: #757D8A; display: flex; flex-wrap: wrap; font-size: 0.75rem; gap: 0.375rem; margin-top: 0.35rem; } .catalog-category-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; } .catalog-category-pill { border: 1px solid transparent; border-radius: 999px; display: inline-flex; font-size: 0.6875rem; font-weight: 600; padding: 0.125rem 0.5rem; } .catalog-category-details-card, .catalog-category-items-card { background: #ffffff; border: 1px solid #d8d8d8; border-radius: 10px; overflow: hidden; } .catalog-category-details-card { margin-top: 1.125rem; } .catalog-category-field-row, .catalog-category-replacement-panel { align-items: center; border-bottom: 1px solid #e0e0e0; display: grid; gap: 1.5rem; grid-template-columns: 16rem minmax(0, 1fr); min-height: 3.5625rem; padding: 0.625rem 1.5rem; } .catalog-category-field-row:last-child { border-bottom: 0; } .catalog-category-field-row-top { align-items: start; } .catalog-category-label { color: #000000; display: block; font-size: 0.875rem; font-weight: 700; line-height: 1.4; } .catalog-category-input { background: #f8f9fc; border: 1px solid #dde1ec; border-radius: 6px; color: #333333; display: block; font-size: 0.875rem; line-height: 1.4; min-height: 2.5rem; padding: 0.55rem 0.75rem; width: 100%; } .catalog-category-input:focus { border-color: #333333; box-shadow: 0 0 0 1px rgba(51, 51, 51, 0.18); outline: none; } .catalog-category-input-disabled { background: #eef1f7; color: #757D8A; cursor: not-allowed; } .catalog-category-select { max-width: 20rem; } .catalog-category-number-input { max-width: 10rem; } .catalog-category-textarea { min-height: 6rem; resize: vertical; } .catalog-category-field-help { color: #757D8A; font-size: 0.75rem; margin: 0.375rem 0 0; } .catalog-category-checkbox-label { align-items: center; color: #333333; display: inline-flex; font-size: 0.875rem; font-weight: 600; gap: 0.5rem; } .catalog-category-checkbox { accent-color: #666666; border-radius: 4px; height: 1.25rem; width: 1.25rem; } .catalog-category-section-heading { margin: 1.75rem 0 1rem; } .catalog-category-section-heading h2 { color: #000000; font-size: 0.875rem; font-weight: 700; line-height: 1.4; margin: 0; } .catalog-category-section-heading p { color: #757D8A; font-size: 0.75rem; margin: 0.2rem 0 0; } .catalog-category-items-card { padding-top: 1.5rem; } .catalog-category-items-search { align-items: center; display: flex; gap: 0.5rem; margin: 0 1.5rem 1.5rem; position: relative; width: min(100%, 430px); } .catalog-category-auto-search-enabled .catalog-category-items-search { display: block; width: min(100%, 342px); } .catalog-category-items-search::after { color: #bababa; content: "\2315"; display: none; font-size: 1.4rem; line-height: 1; position: absolute; right: 1rem; top: 0.55rem; } .catalog-category-auto-search-enabled .catalog-category-items-search::after { display: block; } .catalog-category-search-input { background: #ffffff; border-color: #d8d8d8; border-radius: 10px; flex: 1 1 auto; min-width: 0; min-height: 2.625rem; padding-right: 3rem; } .catalog-category-search-submit { align-items: center; background: #ffffff; border: 1px solid #d8d8d8; border-radius: 8px; color: #333333; display: inline-flex; flex: 0 0 auto; font-size: 0.875rem; font-weight: 600; justify-content: center; min-height: 2.625rem; padding: 0.5rem 0.85rem; } .catalog-category-auto-search-enabled .catalog-category-search-submit { display: none; } .catalog-category-replacement-panel { background: #fff8e1; border-top: 1px solid #f1da91; color: #333333; } .catalog-category-replacement-panel[hidden] { display: none; } .catalog-category-table-wrap { overflow-x: auto; } .catalog-category-items-table { border-collapse: collapse; font-size: 0.875rem; min-width: 100%; table-layout: fixed; } .catalog-category-items-table th { border-bottom: 1px solid #e0e0e0; color: #8c92a3; font-weight: 600; height: 3rem; padding: 0 1.5rem; text-align: left; } .catalog-category-items-table td { border-bottom: 1px solid #e0e0e0; color: #000000; height: 3.0625rem; padding: 0 1.5rem; } .catalog-category-items-table tbody tr:last-child td { border-bottom: 0; } .catalog-category-id-column { width: 7rem; } .catalog-category-selected-column { text-align: right !important; width: 7rem; } .catalog-category-id-cell { color: #0886de !important; font-weight: 700; text-decoration: underline; } .catalog-category-item-name { color: #000000; cursor: pointer; display: block; font-weight: 400; } .catalog-category-current-category-cell { color: #5d6677 !important; } .catalog-category-selected-cell { text-align: right; } .catalog-category-empty-state { color: #757D8A !important; height: 7rem !important; text-align: center; } .catalog-category-pagination { align-items: center; color: #333333; display: flex; font-size: 0.875rem; gap: 1rem; justify-content: center; min-height: 4.5rem; padding: 1rem 1.5rem 1.25rem; } .catalog-category-pagination-actions { display: flex; gap: 0.5rem; } .catalog-category-primary-button { align-items: center; background: #333333; border: 1px solid #333333; border-radius: 10px; color: #ffffff !important; display: inline-flex; font-size: 1rem; font-weight: 700; justify-content: center; min-height: 2.625rem; min-width: 6.125rem; padding: 0.5rem 1.25rem; } .catalog-category-primary-button:hover { background: #111111; border-color: #111111; } .catalog-category-neutral-button { align-items: center; background: #ffffff; border: 1px solid #d8d8d8; border-radius: 8px; color: #333333 !important; display: inline-flex; font-size: 0.875rem; font-weight: 600; justify-content: center; min-height: 2.25rem; padding: 0.4rem 0.85rem; text-decoration: none; } .catalog-category-neutral-button:hover { background: #f8f9fc; } @media (max-width: 767px) { .catalog-category-titlebar, .catalog-category-actions, .catalog-category-pagination { align-items: stretch; flex-direction: column; } .catalog-category-field-row, .catalog-category-replacement-panel { gap: 0.5rem; grid-template-columns: 1fr; } .catalog-category-selected-column, .catalog-category-selected-cell { width: 5rem; } } .bg-builder-page, .catalog-program-builder-shell { background-color: #F6F6F7; } .bg-builder-surface { background-color: #f8f9fc; } .bg-builder-surface-muted { background-color: #eef1f7; } .border-builder-border { border-color: #dde1ec; } .border-builder-primary { border-color: #333333; } .text-builder-text { color: #1a1d2b; } .text-builder-muted { color: #5a5f7a; } .text-builder-subtle { color: #9298b0; } .text-builder-primary { color: #333333; } a.text-builder-primary:hover { color: #1a1a1a; } .bg-builder-primary { background-color: #333333; } .bg-builder-primary\/10 { background-color: rgba(51, 51, 51, 0.1); } .hover\:bg-builder-primary\/15:hover { background-color: rgba(51, 51, 51, 0.15); } .border-builder-primary\/20 { border-color: rgba(51, 51, 51, 0.2); } .border-builder-primary\/30 { border-color: rgba(51, 51, 51, 0.3); } .text-builder-status-active { color: #137a4a; } .bg-builder-status-active { background-color: #137a4a; } .border-builder-status-active { border-color: #137a4a; } .bg-builder-status-active\/10 { background-color: rgba(19, 122, 74, 0.1); } .border-builder-status-active\/20 { border-color: rgba(19, 122, 74, 0.2); } .bg-pillar-supplements\/20, .bg-pillar-nutrition\/20 { background-color: rgba(20, 122, 95, 0.2); } .text-pillar-supplements, .text-pillar-nutrition { color: #147a5f; } .bg-pillar-training\/10 { background-color: rgba(168, 67, 25, 0.1); } .text-pillar-training { color: #a84319; } .bg-pillar-regeneration\/10 { background-color: rgba(31, 108, 180, 0.1); } .text-pillar-regeneration { color: #1f6cb4; } .bg-pillar-recovery\/10 { background-color: rgba(173, 46, 93, 0.1); } .text-pillar-recovery { color: #ad2e5d; } .bg-pillar-diagnostics\/10 { background-color: rgba(176, 0, 11, 0.1); } .text-pillar-diagnostics { color: #b0000b; } /* Day-type badge (NutritionPlanDay): Non-Training keeps the Avo info-badge * palette. Training reuses the .bg-pillar-training\/10 / .text-pillar-training * selectors above. */ .bg-day-type-non-training\/10 { background-color: rgba(55, 151, 220, 0.1); } .text-day-type-non-training { color: #216EA5; } .hover\:bg-builder-surface:hover { background-color: #f8f9fc; } .hover\:text-builder-text:hover { color: #1a1d2b; } .focus\:border-builder-primary:focus { border-color: #333333; } .focus\:ring-builder-primary:focus, .focus-visible\:ring-builder-primary:focus-visible { --tw-ring-color: #333333; } /* ======================================== * Diagnostics add form — matches the Figma * diagnostics sheet while staying inside Avo. * ======================================== */ .diagnostic-design-page { color: #333333; max-width: 998px; } .diagnostic-design-header { margin-bottom: 20px; } .diagnostic-design-breadcrumb { align-items: center; color: #070707; display: flex; flex-wrap: wrap; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 16px; gap: 10px; line-height: 1.25; margin-bottom: 12px; } .diagnostic-design-breadcrumb a { color: #333333; font-weight: 400; text-decoration: none; } .diagnostic-design-breadcrumb a:hover { color: #005ec2; } .diagnostic-design-breadcrumb span[aria-hidden="true"] { color: #b8b8b8; font-size: 18px; line-height: 1; } .diagnostic-design-title { align-items: center; display: flex; gap: 10px; } .diagnostic-design-title h1 { color: #333333; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; margin: 0; } .diagnostic-design-back-link { align-items: center; border: 2px solid #333333; color: #333333; display: inline-flex; font-size: 22px; font-weight: 700; height: 24px; justify-content: center; line-height: 1; text-decoration: none; width: 24px; } .diagnostic-design-back-link:hover { background-color: rgba(51, 51, 51, 0.08); color: #005ec2; } .diagnostic-design-form { max-width: 998px; } .diagnostic-design-alert { background-color: #fff1f2; border: 1px solid #fecdd3; border-radius: 10px; color: #991b1b; font-size: 14px; margin-bottom: 16px; padding: 12px 16px; } .diagnostic-design-sheet { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 10px; overflow: hidden; } .diagnostic-design-row { align-items: start; border-bottom: 1px solid #e0e0e0; display: grid; gap: 18px; grid-template-columns: 207px minmax(0, 1fr); min-height: 49px; padding: 8px 30px 8px 24px; } .diagnostic-design-row--values { padding-bottom: 32px; padding-top: 20px; } .diagnostic-design-row--upload { border-bottom: 0; min-height: 212px; padding-bottom: 24px; padding-top: 20px; } .diagnostic-design-label { color: #000000; font-family: "Open Sans", "Open Sans Hebrew", Inter, ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.28px; line-height: 1.4; padding-top: 8px; } .diagnostic-design-control { background: #ffffff; border: 1px solid rgba(102, 102, 102, 0.3); border-radius: 10px; color: #333333; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 14px; height: 40px; max-width: 717px; padding: 0 14px; width: 100%; } .diagnostic-design-control:focus { border-color: #333333; box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.32); outline: 2px solid transparent; outline-offset: 2px; } .diagnostic-design-notes { line-height: 20px; min-height: 40px; padding-bottom: 9px; padding-top: 9px; resize: vertical; } .diagnostic-design-values { max-width: 717px; padding-top: 0; } .diagnostic-design-sheet .diagnostic-values-grid { column-gap: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; row-gap: 34px; } .diagnostic-design-sheet .diagnostic-values-heading { color: #757d8a; font-family: "Open Sans", "Open Sans Hebrew", Inter, ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0; line-height: 1.4; margin: 0 0 18px; text-transform: uppercase; } .diagnostic-design-sheet .diagnostic-values-rows { display: grid; gap: 8px; } .diagnostic-design-sheet .diagnostic-values-row { align-items: center; display: grid; gap: 12px; grid-template-columns: minmax(94px, 1fr) 82px 120px; min-height: 36px; } .diagnostic-design-sheet .diagnostic-values-label { color: #000000; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; text-transform: none; } .diagnostic-design-sheet .diagnostic-values-reference { color: #757d8a; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.3; text-align: right; } .diagnostic-design-sheet .diagnostic-values-input { background: #ffffff; border: 1px solid rgba(102, 102, 102, 0.3); border-radius: 10px; box-shadow: none; color: #333333; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 14px; height: 36px; padding: 0 12px; width: 120px; } .diagnostic-design-sheet .diagnostic-values-input:focus { border-color: #333333; box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.32); outline: 2px solid transparent; outline-offset: 2px; } .diagnostic-design-upload { max-width: 717px; position: relative; } .diagnostic-design-dropzone { align-items: center; background: #f0f0f0; border: 1px dashed rgba(102, 102, 102, 0.3); border-radius: 10px; color: #000000; cursor: pointer; display: flex; flex-direction: column; font-family: "Open Sans", "Open Sans Hebrew", Inter, ui-sans-serif, system-ui, sans-serif; justify-content: center; min-height: 166px; text-align: center; } .diagnostic-design-dropzone:hover { background: #ebebeb; } .diagnostic-design-upload-icon { align-items: center; background: #ffffff; border-radius: 10px; color: #333333; display: inline-flex; height: 48px; justify-content: center; margin-bottom: 14px; width: 48px; } .diagnostic-design-upload-icon svg { height: 24px; width: 24px; } .diagnostic-design-upload-title { font-size: 14px; font-weight: 700; letter-spacing: 0.28px; line-height: 1.4; } .diagnostic-design-upload-help { font-size: 14px; font-weight: 400; letter-spacing: 0.28px; line-height: 1.4; margin-top: 10px; } .diagnostic-design-file-input { height: 1px; opacity: 0; overflow: hidden; position: absolute; width: 1px; } .diagnostic-design-file-list { display: grid; gap: 8px; list-style: none; margin: 14px 0 0; padding: 0; } .diagnostic-design-existing-file { align-items: center; background: #ffffff; border: 1px solid rgba(102, 102, 102, 0.2); border-radius: 10px; display: flex; gap: 10px; min-height: 42px; padding: 8px 12px; } .diagnostic-design-file-badge { align-items: center; background: #f0f0f0; border-radius: 8px; color: #333333; display: inline-flex; flex: 0 0 auto; height: 28px; justify-content: center; width: 28px; } .diagnostic-design-file-badge svg { height: 18px; width: 18px; } .diagnostic-design-file-name { color: #333333; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; } .diagnostic-design-file-name:hover { color: #333333; } .diagnostic-design-actions { display: flex; justify-content: flex-end; margin-top: 16px; } .diagnostic-design-submit { align-items: center; background: #333333; border: 0; border-radius: 10px; color: #ffffff; display: inline-flex; font-family: "Open Sans", Inter, ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 700; justify-content: center; min-height: 40px; padding: 10px 30px; } .diagnostic-design-submit:hover { background: #1f1f1f; } .diagnostic-design-submit:focus-visible { outline: 2px solid #333333; outline-offset: 2px; } @media (max-width: 1300px) { .diagnostic-design-row { grid-template-columns: 180px minmax(0, 1fr); padding-left: 18px; padding-right: 18px; } .diagnostic-design-sheet .diagnostic-values-grid { grid-template-columns: 1fr; } .diagnostic-design-sheet .diagnostic-values-row { max-width: 320px; } } @media (max-width: 700px) { .diagnostic-design-title h1 { font-size: 26px; } .diagnostic-design-row { gap: 8px; grid-template-columns: 1fr; } .diagnostic-design-label { padding-top: 0; } .diagnostic-design-sheet .diagnostic-values-row { grid-template-columns: minmax(0, 1fr) minmax(72px, 100px); } .diagnostic-design-sheet .diagnostic-values-reference { text-align: left; } .diagnostic-design-sheet .diagnostic-values-input { grid-column: 1 / -1; width: 100%; } } /* ======================================== * Diagnostics comparison — show page table. * ======================================== */ .diagnostic-compare-page { color: #333333; max-width: 1040px; } .diagnostic-compare-panel { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 10px; overflow: hidden; } .diagnostic-compare-toolbar { align-items: center; border-bottom: 1px solid #e0e0e0; display: flex; gap: 18px; justify-content: space-between; padding: 18px 22px; } .diagnostic-compare-search { align-items: center; background: #ffffff; border: 1px solid rgba(102, 102, 102, 0.35); border-radius: 10px; color: #757d8a; display: inline-flex; gap: 10px; height: 42px; max-width: 360px; padding: 0 14px; width: min(100%, 360px); } .diagnostic-compare-search-icon { display: inline-flex; flex: 0 0 auto; } .diagnostic-compare-search-icon svg { height: 22px; width: 22px; } .diagnostic-compare-search input { border: 0; color: #333333; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 16px; min-width: 0; outline: 0; width: 100%; } .diagnostic-compare-search input::placeholder { color: #9ca3af; } .diagnostic-compare-legend { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } .diagnostic-compare-legend-item { align-items: center; border-radius: 999px; display: inline-flex; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 700; min-height: 28px; padding: 6px 11px; } .diagnostic-compare-legend-item.is-low { background: #fff1bf; color: #966608; } .diagnostic-compare-legend-item.is-balance { background: #dff4e9; color: #107342; } .diagnostic-compare-legend-item.is-high { background: #ffe5e7; color: #d40511; } .diagnostic-compare-table-wrap { overflow-x: auto; } .diagnostic-compare-table { border-collapse: collapse; font-family: Inter, ui-sans-serif, system-ui, sans-serif; min-width: 760px; table-layout: fixed; width: 100%; } .diagnostic-compare-table th, .diagnostic-compare-table td { border-bottom: 1px solid #eeeeee; padding: 14px 18px; vertical-align: middle; } .diagnostic-compare-table thead th { color: #333333; font-size: 14px; font-weight: 700; text-align: center; } .diagnostic-compare-marker-heading { text-align: left !important; width: 28%; } .diagnostic-compare-date { display: inline-flex; white-space: nowrap; } .diagnostic-compare-section-row th { background: #f7f7f7; color: #757d8a; font-family: "Open Sans", Inter, ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 700; padding-bottom: 11px; padding-top: 18px; text-align: left; text-transform: uppercase; } .diagnostic-compare-marker { color: #000000; font-size: 14px; font-weight: 700; text-align: left; } .diagnostic-compare-result { color: #333333; font-size: 14px; font-weight: 700; text-align: center; } .diagnostic-status-pill { align-items: center; border-radius: 999px; display: inline-flex; font-size: 12px; font-weight: 800; height: 26px; justify-content: center; margin-right: 8px; min-width: 26px; padding: 0 8px; } .diagnostic-status-pill.is-low { background: #fff1bf; color: #966608; } .diagnostic-status-pill.is-balance { background: #dff4e9; color: #107342; } .diagnostic-status-pill.is-high { background: #ffe5e7; color: #d40511; } .diagnostic-compare-value { display: inline-flex; min-width: 34px; } .diagnostic-compare-empty { color: rgba(0, 0, 0, 0.3); font-weight: 400; } @media (max-width: 820px) { .diagnostic-compare-toolbar { align-items: stretch; flex-direction: column; } .diagnostic-compare-search { max-width: none; width: 100%; } .diagnostic-compare-legend { justify-content: flex-start; } } /* ======================================== * Buttons — #333 primary, inverts on hover * * Avo buttons have .button-component + Tailwind utilities. * Tailwind hover:bg-primary-600 generates a :hover rule. * body.bg-application gives us enough specificity to win. * ======================================== */ body.bg-application .button-component[class*="bg-primary"] { background-color: #333333 !important; border-color: #333333 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; fill: #ffffff !important; border-radius: 8px; font-weight: 600; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, fill 0.15s ease; } /* Scoped to span/svg descendants so colored child content (e.g. badges inside * a dropdown button) is not clobbered by a universal selector. */ body.bg-application .button-component[class*="bg-primary"] > span, body.bg-application .button-component[class*="bg-primary"] svg, body.bg-application .button-component[class*="bg-primary"] svg * { background-color: transparent !important; border-color: transparent !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; fill: #ffffff !important; } body.bg-application .button-component[class*="bg-primary"]:hover { background-color: #ffffff !important; border-color: #333333 !important; color: #333333 !important; -webkit-text-fill-color: #333333 !important; fill: #333333 !important; } body.bg-application .button-component[class*="bg-primary"]:hover > span, body.bg-application .button-component[class*="bg-primary"]:hover svg, body.bg-application .button-component[class*="bg-primary"]:hover svg * { color: #333333 !important; -webkit-text-fill-color: #333333 !important; fill: #333333 !important; } body.bg-application .button-component[class*="bg-primary"]:active { background-color: #F6F6F7 !important; border-color: #333333 !important; color: #333333 !important; -webkit-text-fill-color: #333333 !important; } body.bg-application .button-component[class*="bg-primary"]:active > span, body.bg-application .button-component[class*="bg-primary"]:active svg, body.bg-application .button-component[class*="bg-primary"]:active svg * { color: #333333 !important; -webkit-text-fill-color: #333333 !important; } body.bg-application .button-component[class*="bg-primary"]:disabled, body.bg-application .button-component[class*="bg-primary"][disabled] { background-color: #757D8A !important; border-color: #757D8A !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 0.5; cursor: not-allowed; } /* Outline / secondary buttons */ body.bg-application .button-component[class*="border-primary"], body.bg-application .button-component[class*="text-primary"]:not([class*="bg-primary"]) { border-color: #333333 !important; color: #333333 !important; border-radius: 8px; font-weight: 600; } body.bg-application .button-component[class*="border-primary"] span, body.bg-application .button-component[class*="border-primary"] svg, body.bg-application .button-component[class*="text-primary"]:not([class*="bg-primary"]) span, body.bg-application .button-component[class*="text-primary"]:not([class*="bg-primary"]) svg { color: #333333 !important; } body.bg-application .button-component[class*="border-primary"]:hover, body.bg-application .button-component[class*="text-primary"]:not([class*="bg-primary"]):hover { background-color: rgba(51, 51, 51, 0.04) !important; } /* ======================================== * Breadcrumbs — blue links * ======================================== */ .breadcrumbs a { color: #333333 !important; } .breadcrumbs a:hover { color: #216EA5 !important; text-decoration: underline; } .breadcrumbs svg { color: #c7c7cc !important; } /* ======================================== * Date/time fields - visual meridiem casing * ======================================== */ /* Avo currently renders only timestamp text in this wrapper. Revisit this * selector if Avo adds adjacent labels inside the same element. */ .lifemuse-avo-datetime { text-transform: lowercase; } /* ======================================== * Care plan current published revision card * ======================================== */ .lifemuse-current-published-revision { background: #ffffff; border: 1px solid #d8dee8; border-radius: 8px; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); margin-bottom: 1.5rem; padding: 1.25rem; } .lifemuse-current-published-revision__header { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; } .lifemuse-current-published-revision__eyebrow { color: #6b7280; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; margin: 0; text-transform: uppercase; } .lifemuse-current-published-revision__title-row { align-items: center; display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 0.375rem; } .lifemuse-current-published-revision__title { color: #1f2937; font-size: 1.375rem; font-weight: 700; letter-spacing: 0; line-height: 1.25; margin: 0; } .lifemuse-current-published-revision__badge { background: rgba(36, 150, 93, 0.1); border-radius: 9999px; color: #107342; display: inline-flex; font-size: 0.75rem; font-weight: 700; line-height: 1; padding: 0.4rem 0.75rem; text-transform: uppercase; } .lifemuse-current-published-revision__button { align-items: center; background: #333333; border-radius: 8px; color: #ffffff !important; display: inline-flex; font-size: 0.875rem; font-weight: 700; justify-content: center; line-height: 1.2; min-height: 2.5rem; padding: 0.625rem 0.875rem; text-decoration: none; white-space: nowrap; } .lifemuse-current-published-revision__button:hover { background: #1a1a1a; color: #ffffff !important; } .lifemuse-current-published-revision__button:focus-visible { outline: 2px solid #333333; outline-offset: 2px; } .lifemuse-current-published-revision__metadata { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 1.25rem 0 0; } .lifemuse-current-published-revision__metadata-item { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.875rem; } .lifemuse-current-published-revision__metadata-item dt { color: #6b7280; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .lifemuse-current-published-revision__metadata-item dd { color: #1f2937; font-size: 1rem; font-weight: 650; margin: 0.35rem 0 0; } .lifemuse-current-published-revision__empty { border: 1px dashed #cbd5e1; border-radius: 8px; padding: 1rem; } .lifemuse-current-published-revision__empty-copy { color: #6b7280; font-size: 0.95rem; margin: 0.5rem 0 0; } @media (max-width: 640px) { .lifemuse-current-published-revision__header { align-items: stretch; flex-direction: column; } .lifemuse-current-published-revision__button { width: 100%; } } /* ======================================== * Pagination — transparent bg, dark selected * * Avo's pagination.css applies to every : * bg-white shadow-md border border-gray-300 * We override all of these to get the clean design. * ======================================== */ .pagy-gem-version-8-or-more .pagy.nav a:not(.gap) { color: #333333 !important; background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; border-radius: 4px; } .pagy-gem-version-8-or-more .pagy.nav a:not(.gap):hover { background-color: rgba(51, 51, 51, 0.08) !important; color: #333333 !important; } .pagy-gem-version-8-or-more .pagy.nav a.current, .pagy-gem-version-8-or-more .pagy.nav a.current:hover { color: #ffffff !important; background-color: #333333 !important; border-color: #333333 !important; border-radius: 4px; } /* ======================================== * Status badges — tinted bg + colored text * * Avo renders badges as: * * Tailwind sets background-color via bg-* utility. * body.bg-application gives us enough specificity to win. * ======================================== */ /* Success: active, published, completed */ body.bg-application span.rounded-md.uppercase.bg-green-500.text-white { background-color: rgba(36, 150, 93, 0.1) !important; color: #107342 !important; } /* Warning: pending, draft, paused */ body.bg-application span.rounded-md.uppercase.bg-yellow-500.text-white { background-color: rgba(252, 198, 90, 0.2) !important; color: #966608 !important; } /* Danger: cancelled, expired, exhausted, missed */ body.bg-application span.rounded-md.uppercase.bg-red-500.text-white { background-color: rgba(212, 5, 17, 0.1) !important; color: #D40511 !important; } /* Info: skipped */ body.bg-application span.rounded-md.uppercase.bg-blue-500.text-white { background-color: rgba(55, 151, 220, 0.1) !important; color: #216EA5 !important; } /* Neutral: fallback for unmapped values (Avo default badge type) */ body.bg-application span.rounded-md.uppercase.bg-gray-500.text-white { background-color: rgba(102, 102, 102, 0.2) !important; color: #333333 !important; } /* All badges: pill shape override. * Tight selector matches Avo's BadgeViewerComponent signature (whitespace-nowrap + * rounded-md + uppercase + text-xs + font-bold) to avoid hitting unrelated spans * that happen to share a subset of these utilities. */ body.bg-application span.whitespace-nowrap.rounded-md.uppercase.text-xs.font-bold { border-radius: 9999px !important; padding: 0.2rem 0.75rem !important; font-size: 0.75rem !important; } /* ======================================== * Avo flash / alert overrides * ======================================== */ .avo-alert { border-radius: 8px !important; font-weight: 500; } /* ======================================== * Select / search dropdown — black hover * ======================================== */ body.bg-application [role="option"]:hover, body.bg-application [role="option"][aria-selected="true"], body.bg-application [role="option"].is-active, body.bg-application .aa-Item[aria-selected="true"], body.bg-application [data-selected="true"] { background-color: #333333 !important; color: #ffffff !important; } /* ======================================== * Form inputs — rounded, subtle focus ring * ======================================== */ body.bg-application input[type="text"], body.bg-application input[type="email"], body.bg-application input[type="password"], body.bg-application input[type="number"], body.bg-application input[type="url"], body.bg-application input[type="tel"], body.bg-application input[type="search"], body.bg-application input[type="date"], body.bg-application input[type="datetime-local"], body.bg-application textarea, body.bg-application select { border-radius: 8px !important; border-color: #D1D5DB !important; transition: border-color 0.15s ease, box-shadow 0.15s ease; } body.bg-application input[type="text"]:focus, body.bg-application input[type="email"]:focus, body.bg-application input[type="password"]:focus, body.bg-application input[type="number"]:focus, body.bg-application input[type="url"]:focus, body.bg-application input[type="tel"]:focus, body.bg-application input[type="search"]:focus, body.bg-application input[type="date"]:focus, body.bg-application input[type="datetime-local"]:focus, body.bg-application textarea:focus, body.bg-application select:focus { border-color: #333333 !important; box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.25) !important; outline: 2px solid transparent !important; } /* Error state on inputs */ body.bg-application input.border-red-500, body.bg-application input.border-red-600, body.bg-application textarea.border-red-500, body.bg-application select.border-red-500, body.bg-application .field-wrapper .text-red-600 ~ input, body.bg-application [data-slot="error"] input { border-color: #EF4444 !important; } body.bg-application input.border-red-500:focus, body.bg-application textarea.border-red-500:focus, body.bg-application select.border-red-500:focus { border-color: #EF4444 !important; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15) !important; } /* Error text */ body.bg-application .text-red-600, body.bg-application [data-slot="error"] { color: #EF4444 !important; } /* Form labels */ body.bg-application label { font-weight: 500; color: #333333; } /* ======================================== * Links — vibrant blue accent * Only target actual anchor links, exclude buttons * ======================================== */ body.bg-application a.text-primary-500:not(.button-component), body.bg-application a[class*="text-primary"]:not(.button-component):not([class*="bg-primary"]):not([class*="border-primary"]) { color: #007AFF !important; } body.bg-application a.text-primary-500:not(.button-component):hover, body.bg-application a[class*="text-primary"]:not(.button-component):not([class*="bg-primary"]):not([class*="border-primary"]):hover { color: #216EA5 !important; } /* ======================================== * Table refinements * ======================================== */ body.bg-application table thead th { font-weight: 600; color: #333333; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em; } body.bg-application table tbody tr:hover { background-color: rgba(51, 51, 51, 0.02) !important; } /* ======================================== * Trix link visibility * ======================================== */ body.bg-application trix-editor a:not(.attachment__name), body.bg-application .trix-content a:not(.attachment__name) { color: #007AFF; text-decoration: underline; } body.bg-application trix-editor a:not(.attachment__name):hover, body.bg-application .trix-content a:not(.attachment__name):hover { color: #216EA5; } /* * Permissions matrix (Avo::PermissionsMatrixComponent). * * Avo loads only avo.base.css from its gem, plus this file — the main * app's Tailwind build is not linked on admin pages. These rules fill * in utility classes the component uses that Avo's compiled CSS * doesn't already include. */ .permissions-matrix .text-emerald-600 { color: #059669; } .permissions-matrix .text-green-800 { color: #166534; } .permissions-matrix .text-green-700 { color: #15803d; } .permissions-matrix .border-green-200 { border-color: #bbf7d0; } .permissions-matrix .text-red-800 { color: #991b1b; } .permissions-matrix .border-red-200 { border-color: #fecaca; } .permissions-matrix .border-separate { border-collapse: separate; } .permissions-matrix .border-spacing-0 { border-spacing: 0; } .permissions-matrix .h-3\.5 { height: 0.875rem; } .permissions-matrix .w-3\.5 { width: 0.875rem; } .permissions-matrix .w-6 { width: 1.5rem; } .permissions-matrix .flex-none { flex: none; } .permissions-matrix .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .permissions-matrix tbody tr:nth-child(even) { background-color: rgba(249, 250, 251, 0.4); } /* WCAG 2.4.7 — keyboard focus ring for checkboxes in edit mode. */ .permissions-matrix input[type="checkbox"]:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; } .permissions-matrix label:focus-within { background-color: #f3f4f6; transition: background-color 150ms; } /* ======================================== * Reminder builder inside Avo * Mirrors the .catalog-program-* vocabulary; scoped to .reminder-* so it never * touches Avo's sidebar/navbar. Matches the "Create Reminder" Figma content * area (two-column card, 48px rounded inputs, weekday toggles, dark Create). * ======================================== */ .reminder-builder-shell { color: #1a1d2b; } .reminder-builder-container { margin-left: auto; margin-right: auto; max-width: 64rem; padding-left: 1rem; padding-right: 1rem; width: 100%; } @media (min-width: 640px) { .reminder-builder-container { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .reminder-builder-container { padding-left: 2rem; padding-right: 2rem; } } .reminder-builder-header { background: transparent; border-bottom: 0 !important; position: relative; z-index: 1; } .reminder-breadcrumbs { align-items: center; color: #070707; display: flex; flex-wrap: wrap; font-size: 1rem; gap: 0.75rem; line-height: 1.2; margin-bottom: 0.5rem; } .reminder-breadcrumbs a { color: #333333; text-decoration: none; } .reminder-breadcrumbs a:hover { color: #216EA5; } .reminder-breadcrumb-icon { border: 2px solid #1C1B1F; border-radius: 2px; display: inline-block; height: 1.25rem; position: relative; width: 1.25rem; } .reminder-breadcrumb-icon::after { background: #1C1B1F; content: ""; height: 1rem; left: 0.45rem; position: absolute; top: 0; width: 2px; } .reminder-title { color: #333333; font-size: 2rem; font-weight: 700; letter-spacing: 0; line-height: 1.2; margin: 0.75rem 0 0; } .reminder-subtitle { color: #666666; font-size: 1rem; line-height: 1.4; margin: 0.5rem 0 0; max-width: 36rem; } .reminder-card { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 10px; margin-top: 1.5rem; overflow: hidden; } .reminder-card-grid { display: grid; gap: 1.5rem 2rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 1.5rem; } .reminder-card-column { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; } .reminder-field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } /* The recurrence panels toggle via the [hidden] attribute; this beats the .reminder-field display rule above so weekday/cycle/end-date stay hidden until their recurrence type is selected. */ .reminder-field[hidden] { display: none; } .reminder-field-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .reminder-label { color: #000000; display: block; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; } .reminder-input { background: #ffffff; border: 1px solid rgba(102, 102, 102, 0.3); border-radius: 10px; color: #333333; display: block; font-size: 1rem; line-height: 1.4; min-height: 3rem; padding: 0.625rem 0.875rem; width: 100%; } .reminder-input::placeholder { color: #9aa0ac; } .reminder-input:focus, .reminder-input:focus-visible { border-color: #333333; box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.25); outline: none; } .reminder-input:disabled { background: #f1f2f5; color: #9aa0ac; cursor: not-allowed; } .reminder-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23333'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.17l3.71-3.94a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-position: right 0.75rem center; background-repeat: no-repeat; background-size: 1.1rem; padding-right: 2.5rem; } .reminder-textarea { min-height: 14.5rem; resize: vertical; } .reminder-errors { border: 1px solid #fecaca; background: #fef2f2; border-radius: 10px; color: #991b1b; font-size: 0.875rem; margin: 1.5rem 1.5rem 0; padding: 0.75rem 1rem; } /* Amber sibling of .reminder-errors for the soft entitlement-overage warning (violation lines + the "Save anyway" acknowledge checkbox, not a hard failure). Hand-maintained, like .reminder-errors. */ .reminder-capacity-warning { border: 1px solid #fde68a; background: #fffbeb; border-radius: 10px; color: #78350f; font-size: 0.875rem; margin: 1.5rem 1.5rem 0; padding: 0.75rem 1rem; } .reminder-capacity-warning p { margin: 0 0 0.375rem; } .reminder-capacity-acknowledge { align-items: center; cursor: pointer; display: flex; font-weight: 600; gap: 0.5rem; margin-top: 0.5rem; } /* Weekday toggle buttons: dark/indigo fill when selected, outline when not, muted when disabled. */ .reminder-weekdays { display: grid; gap: 0.375rem; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 0.25rem; } .reminder-weekday-button { background: #ffffff; border: 1px solid rgba(102, 102, 102, 0.3); border-radius: 8px; color: #555555; cursor: pointer; font-size: 0.8125rem; font-weight: 600; min-height: 2.5rem; padding: 0.25rem; transition: background-color 120ms, border-color 120ms, color 120ms; } .reminder-weekday-button:hover:not(:disabled) { border-color: rgba(67, 56, 202, 0.5); color: #1a1d2b; } .reminder-weekday-button.is-selected { background: #4338ca; border-color: #4338ca; color: #ffffff; } .reminder-weekday-button:disabled { background: #f1f2f5; border-color: rgba(102, 102, 102, 0.2); color: #b6bac3; cursor: not-allowed; } .reminder-weekday-button:focus-visible, .reminder-input:focus-visible, .reminder-primary-button:focus-visible, .reminder-neutral-button:focus-visible { outline: 2px solid #333333; outline-offset: 2px; } .reminder-cycle-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .reminder-cycle-label { color: #555555; display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.25rem; } .reminder-divider { background: #d9d9d9; border: 0; height: 1px; margin: 0; } .reminder-actions { align-items: center; display: flex; gap: 1rem; justify-content: flex-end; padding: 1.25rem 1.5rem; } .reminder-primary-button { align-items: center; background: #333333; border: 1px solid #333333; border-radius: 10px; color: #ffffff !important; cursor: pointer; display: inline-flex; font-size: 1rem; font-weight: 700; justify-content: center; min-height: 2.75rem; min-width: 6.125rem; padding: 0.625rem 1.25rem; } .reminder-primary-button:hover { background: #1a1a1a; border-color: #1a1a1a; } .reminder-neutral-button { align-items: center; background: #ffffff; border: 1px solid #000000; border-radius: 10px; color: #000000 !important; display: inline-flex; font-size: 1rem; font-weight: 700; justify-content: center; min-height: 2.75rem; padding: 0.625rem 1.25rem; text-decoration: none; } .reminder-neutral-button:hover { background: #f6f6f7; } /* Show-page panels (upcoming notifications + metadata). */ .reminder-show-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); margin-top: 1.5rem; } .reminder-panel { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 10px; overflow: hidden; } .reminder-panel-heading { border-bottom: 1px solid #e0e0e0; color: #000000; font-size: 0.9375rem; font-weight: 700; margin: 0; padding: 1rem 1.25rem; } .reminder-notifications-table { border-collapse: collapse; font-size: 0.875rem; width: 100%; } .reminder-notifications-table th { border-bottom: 1px solid #e0e0e0; color: #757D8A; font-weight: 600; padding: 0.625rem 1.25rem; text-align: left; } .reminder-notifications-table td { border-bottom: 1px solid #f0f0f0; color: #1a1d2b; padding: 0.625rem 1.25rem; } .reminder-notifications-table tbody tr:last-child td { border-bottom: 0; } .reminder-empty-state { color: #757D8A; padding: 1.5rem 1.25rem; text-align: center; } .reminder-state-badge { border-radius: 999px; display: inline-flex; font-size: 0.6875rem; font-weight: 600; padding: 0.125rem 0.5rem; text-transform: capitalize; } .reminder-state-badge--scheduled { background: #e0edff; color: #1d4ed8; } .reminder-state-badge--completed { background: #dcfce7; color: #166534; } .reminder-state-badge--dismissed { background: #f3f4f6; color: #4b5563; } .reminder-state-badge--cancelled { background: #fee2e2; color: #991b1b; } .reminder-meta-list { display: flex; flex-direction: column; gap: 0.875rem; margin: 0; padding: 1.25rem; } .reminder-meta-term { color: #757D8A; display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .reminder-meta-value { color: #1a1d2b; display: block; font-size: 0.875rem; margin-top: 0.125rem; } @media (max-width: 767px) { .reminder-card-grid, .reminder-field-grid, .reminder-cycle-grid, .reminder-show-grid { grid-template-columns: 1fr; } .reminder-actions { flex-direction: column-reverse; align-items: stretch; } .reminder-textarea { min-height: 8rem; } } /* ======================================== * Corporate::SelectComponent + CustomRecurrenceModalComponent on the Avo * reminder builder. * * These ViewComponents are shared with the care-plan builder surfaces, which * run inside the corporate application layout (compiled Tailwind). The reminder * builder runs inside the Avo shell, which does NOT load the app Tailwind build, * so the components' utility classes (bg-vibrant-blue, border-builder-border, * the .hidden/.flex toggles the registered Stimulus controllers flip, etc.) would be * unstyled here. These scoped rules restore that styling without pulling in the * whole Tailwind build. Keep in sync with the component class lists if they * change. * ======================================== */ /* Tooltips are exempt from the !important guard: TooltipIconComponent hides via `hidden` and reveals via group-hover/group-focus utilities, which the guard would otherwise beat unconditionally (no class-toggle reveal could ever win). With the exemption the normal scoped cascade governs them: .corporate-embedded-surface .group-hover\:block (0,3,0) beats .corporate-embedded-surface .hidden (0,2,0). */ .reminder-builder-shell .hidden:not([role="tooltip"]) { display: none !important; } .reminder-builder-shell [data-controller~="corporate--select"] { position: relative; } .reminder-builder-shell [data-corporate--select-target="button"] { align-items: center; background: #ffffff; border: 1px solid rgba(102, 102, 102, 0.3); border-radius: 10px; color: #333333; cursor: pointer; display: flex; font-size: 1rem; gap: 0.5rem; justify-content: space-between; min-height: 3rem; padding: 0.625rem 0.875rem; text-align: left; width: 100%; } .reminder-builder-shell [data-corporate--select-target="button"]:focus-visible { border-color: #333333; box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.25); outline: none; } .reminder-builder-shell [data-corporate--select-target="button"]:disabled { background: #f1f2f5; color: #9aa0ac; cursor: not-allowed; } .reminder-builder-shell [data-corporate--select-target="button"] svg { height: 1rem; width: 1rem; } .reminder-builder-shell [data-corporate--select-target="menu"] { background: #ffffff; border: 1px solid rgba(102, 102, 102, 0.3); border-radius: 10px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); left: 0; margin-top: 0.25rem; max-height: 16rem; overflow: auto; padding: 0.25rem 0; position: absolute; right: 0; z-index: 30; } .reminder-builder-shell [data-corporate--select-target="option"] { align-items: center; background: #ffffff; border: 0; color: #333333; cursor: pointer; display: flex; font-size: 0.9375rem; padding: 0.5rem 0.875rem; text-align: left; width: 100%; } /* `!important` + the body.bg-application prefix are both needed to out-specify the global "Select / search dropdown — black hover" rule above (body.bg-application [role="option"]...), which is !important too. Both now resolve to the corporate primary (#333333); the override is kept explicit so selected/hovered rows stay correct regardless of rule ordering. */ body.bg-application .reminder-builder-shell [data-corporate--select-target="option"]:hover, body.bg-application .reminder-builder-shell [data-corporate--select-target="option"]:focus, body.bg-application .reminder-builder-shell [data-corporate--select-target="option"][aria-selected="true"] { background-color: #333333 !important; color: #ffffff !important; outline: none; } /* Avo's compiled Tailwind covers generic utilities (bg-white, px-4, ...) but not the app-only vibrant-blue token classes the shared components use, so replicate them here (e.g. the modal's Done button). vibrant-blue is now an alias of the corporate primary (#333333). */ .reminder-builder-shell .bg-vibrant-blue { background-color: #333333; } .reminder-builder-shell .border-vibrant-blue { border-color: #333333; } .reminder-builder-shell [data-custom-recurrence-target="done"]:hover:not(:disabled) { background-color: #1a1a1a; } .reminder-builder-shell [data-custom-recurrence-target="done"]:focus-visible { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(51, 51, 51, 0.6); outline: none; } .reminder-builder-shell [data-custom-recurrence-target="done"]:disabled { cursor: not-allowed; opacity: 0.5; } /* Custom recurrence modal. */ .reminder-builder-shell [data-custom-recurrence-target="overlay"] { align-items: center; background: rgba(15, 23, 42, 0.5); inset: 0; justify-content: center; padding: 1rem; position: fixed; z-index: 50; } .reminder-builder-shell [data-custom-recurrence-target="overlay"]:not(.hidden) { display: flex; } .reminder-builder-shell [data-custom-recurrence-target="dialog"] { background: #ffffff; border-radius: 14px; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); max-width: 28rem; padding: 1.5rem; width: 100%; } .reminder-builder-shell [data-custom-recurrence-target="interval"] { background: #ffffff; border: 1px solid rgba(102, 102, 102, 0.3); border-radius: 8px; color: #333333; height: 2.5rem; padding: 0 0.75rem; width: 5rem; } .reminder-builder-shell [data-custom-recurrence-target="weekday"] { background: #ffffff; border: 1px solid rgba(102, 102, 102, 0.3); border-radius: 8px; color: #555555; cursor: pointer; font-size: 0.8125rem; font-weight: 600; min-height: 2.5rem; padding: 0.25rem; } .reminder-builder-shell [data-custom-recurrence-target="weekday"][aria-pressed="true"] { background: #333333; border-color: #333333; color: #ffffff; } .reminder-builder-shell [data-custom-recurrence-target="error"] { color: #dc2626; font-size: 0.75rem; font-weight: 500; margin-top: 0.5rem; } /* The modal's Repeat On row toggles hidden/block; its weekday grid is a 7-col grid the component renders with grid-cols-7. */ .reminder-builder-shell [data-custom-recurrence-target="repeatOn"] .grid { display: grid; gap: 0.25rem; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 0.375rem; } .reminder-builder-shell [data-custom-recurrence-target="dialog"] h2 { color: #333333; font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .reminder-builder-shell .reminder-recurrence-summary { color: #5a5f7a; font-size: 0.75rem; font-weight: 500; margin-top: 0.375rem; } /* The six BEM-shell builder views (reminders / catalog programs / catalog item categories, show + new) wrap flash + form in `space-y-4`. They sit OUTSIDE .corporate-embedded-surface and the app Tailwind build is not loaded on Avo pages, so until now that gap came solely from Avo's own bundled legacy utility (PR review finding: an undocumented fragility — an Avo upgrade that drops its legacy utilities would silently remove the spacing). This rule pins it locally; the value matches Tailwind's space-y-4 (1rem), so it is a no-op today. */ body.bg-application .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; } /* Corporate flash banners — the .flash-notice/.flash-alert background colors live only in the app Tailwind @layer components build (see app/assets/tailwind/application.css), which Avo pages do not load; Avo's bundled utilities cover the banner's structure (flex/px-4/text-white/...) but ship no flash-* rules, so the shared corporate/shared/flash partial rendered white-on-white (invisible) on every Avo-embedded builder. Pinned here (like the space-y-4 rule above) so the banner is visible on all six builders plus the deny_access / flash_frame turbo-stream paths. Values mirror the app source literals. */ body.bg-application .flash-notice { background-color: #24965D; } body.bg-application .flash-alert { background-color: #EF4444; } /* ==== Catalog item builder (shell convergence, Commit 6) — generated from the app Tailwind theme; keep in sync with the component class lists ==== */ /* * The catalog item builder is the FIRST corporate builder to render raw Tailwind * utility classes (not BEM aliases) inside the Avo shell, which does NOT load the * app Tailwind build. These rules reproduce exactly the utilities the builder * and the shared library components it renders emit, generated from the app * Tailwind theme (app/assets/tailwind/application.css) and scoped under * .corporate-embedded-surface. * * NOTE ON DUPLICATION (PR review finding): the scoped token block below DOES * redefine the builder/pillar custom properties as CSS variables for the * generated var()-based utilities — the handwritten sections above carry the * same palette as resolved literals for the BEM shells. Both copies are * load-bearing today; a palette tweak must currently be applied to BOTH (and * to app/assets/tailwind/application.css @theme). Consolidation is ticketed * for when the BEM shells converge onto the generated vocabulary. * * Generation: `bundle exec tailwindcss -i -o `, then every selector prefixed * with `.corporate-embedded-surface ` and the &-nesting flattened to plain rules. */ /* Theme tokens the generated utilities reference (scoped to the builder shell) */ .corporate-embedded-surface { --color-builder-border: #dde1ec; --color-builder-danger: #b0000b; --color-builder-danger-hover: #fde7e7; --color-builder-danger-hover-text: #8a0008; --color-builder-danger-surface: #fef0f0; --color-builder-muted: #5a5f7a; --color-builder-overlay: rgba(15, 23, 42, 0.5); --color-builder-page: #f4f6fa; --color-builder-primary: #333333; --color-builder-primary-hover: #1a1a1a; --color-builder-subtle: #9298b0; --color-builder-surface: #f8f9fc; --color-builder-surface-muted: #eef1f7; --color-builder-text: #1a1d2b; --color-red-200: oklch(88.5% 0.062 18.334); --color-red-50: oklch(97.1% 0.013 17.38); --color-red-600: oklch(57.7% 0.245 27.325); --color-red-800: oklch(44.4% 0.177 26.899); --color-vibrant-blue: #333333; /* retired alias of the corporate primary (#333333); kept for the Avo-embedded selection plumbing — prefer builder-primary in new code */ --color-white: #fff; --container-2xl: 42rem; --container-md: 28rem; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --font-weight-bold: 700; --font-weight-medium: 500; --font-weight-normal: 400; --font-weight-semibold: 600; --radius-lg: 0.5rem; --radius-md: 0.375rem; --radius-xl: 0.75rem; --spacing: 0.25rem; --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --tracking-normal: 0em; --tracking-wide: 0.025em; } /* Tailwind --tw-* property registrations + @supports fallback (composition defaults) */ @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-leading { syntax: "*"; inherits: false; } @property --tw-font-weight { syntax: "*"; inherits: false; } @property --tw-tracking { syntax: "*"; inherits: false; } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false; } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false; } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false; } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false; } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false; } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0px; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-backdrop-blur { syntax: "*"; inherits: false; } @property --tw-backdrop-brightness { syntax: "*"; inherits: false; } @property --tw-backdrop-contrast { syntax: "*"; inherits: false; } @property --tw-backdrop-grayscale { syntax: "*"; inherits: false; } @property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; } @property --tw-backdrop-invert { syntax: "*"; inherits: false; } @property --tw-backdrop-opacity { syntax: "*"; inherits: false; } @property --tw-backdrop-saturate { syntax: "*"; inherits: false; } @property --tw-backdrop-sepia { syntax: "*"; inherits: false; } @property --tw-duration { syntax: "*"; inherits: false; } @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-space-y-reverse: 0; --tw-border-style: solid; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-duration: initial; } } } /* Utilities (flat) */ .corporate-embedded-surface .pointer-events-auto { pointer-events: auto; } .corporate-embedded-surface .pointer-events-none { pointer-events: none; } .corporate-embedded-surface .absolute { position: absolute; } .corporate-embedded-surface .fixed { position: fixed; } /* The catalog / exercise picker modal overlay must stack ABOVE the fixed Avo * navbar (z-index: 100). The embedded Tailwind build only compiles standard * z utilities (max z-50), so the element's .z-50 leaves a tall modal's header * (title + close button) hidden behind the navbar. Pin a higher z-index here; * this also lets the dimming backdrop cover the navbar. Uses body.bg-application * for specificity over the .corporate-embedded-surface .z-50 utility (defined * later in this file with equal specificity). */ body.bg-application .modal-overlay { z-index: 110; } .corporate-embedded-surface .static { position: static; } .corporate-embedded-surface .sticky { position: sticky; } .corporate-embedded-surface .inset-0 { inset: calc(var(--spacing) * 0); } .corporate-embedded-surface .end { inset-inline-end: var(--spacing); } .corporate-embedded-surface .top-0 { top: calc(var(--spacing) * 0); } .corporate-embedded-surface .top-1\/2 { top: calc(1 / 2 * 100%); } .corporate-embedded-surface .top-6 { top: calc(var(--spacing) * 6); } /* Sticky builder headers pin below Avo's fixed h-16 navbar (HeaderComponent :sticky — see sticky_header_classes). */ .corporate-embedded-surface .top-16 { top: calc(var(--spacing) * 16); } .corporate-embedded-surface .right-0 { right: calc(var(--spacing) * 0); } .corporate-embedded-surface .right-2 { right: calc(var(--spacing) * 2); } .corporate-embedded-surface .bottom-6 { bottom: calc(var(--spacing) * 6); } .corporate-embedded-surface .left-0 { left: calc(var(--spacing) * 0); } .corporate-embedded-surface .z-20 { z-index: 20; } .corporate-embedded-surface .z-50 { z-index: 50; } .corporate-embedded-surface .container { width: 100%; } .corporate-embedded-surface .mx-auto { margin-inline: auto; } .corporate-embedded-surface .mt-0\.5 { margin-top: calc(var(--spacing) * 0.5); } .corporate-embedded-surface .mt-1 { margin-top: calc(var(--spacing) * 1); } .corporate-embedded-surface .mt-1\.5 { margin-top: calc(var(--spacing) * 1.5); } .corporate-embedded-surface .mt-2 { margin-top: calc(var(--spacing) * 2); } .corporate-embedded-surface .mt-3 { margin-top: calc(var(--spacing) * 3); } .corporate-embedded-surface .mt-5 { margin-top: calc(var(--spacing) * 5); } .corporate-embedded-surface .mt-6 { margin-top: calc(var(--spacing) * 6); } .corporate-embedded-surface .mb-2 { margin-bottom: calc(var(--spacing) * 2); } .corporate-embedded-surface .mb-3 { margin-bottom: calc(var(--spacing) * 3); } .corporate-embedded-surface .mb-6 { margin-bottom: calc(var(--spacing) * 6); } .corporate-embedded-surface .block { display: block; } .corporate-embedded-surface .flex { display: flex; } .corporate-embedded-surface .inline-flex { display: inline-flex; } .corporate-embedded-surface .aspect-square { aspect-ratio: 1 / 1; } .corporate-embedded-surface .h-4 { height: calc(var(--spacing) * 4); } .corporate-embedded-surface .h-6 { height: calc(var(--spacing) * 6); } .corporate-embedded-surface .h-8 { height: calc(var(--spacing) * 8); } .corporate-embedded-surface .h-9 { height: calc(var(--spacing) * 9); } .corporate-embedded-surface .h-10 { height: calc(var(--spacing) * 10); } .corporate-embedded-surface .h-11 { height: calc(var(--spacing) * 11); } .corporate-embedded-surface .h-14 { height: calc(var(--spacing) * 14); } .corporate-embedded-surface .max-h-64 { max-height: calc(var(--spacing) * 64); } .corporate-embedded-surface .max-h-\[calc\(100dvh-2rem\)\] { max-height: calc(100dvh - 2rem); } .corporate-embedded-surface .min-h-0 { min-height: calc(var(--spacing) * 0); } .corporate-embedded-surface .min-h-10 { min-height: calc(var(--spacing) * 10); } .corporate-embedded-surface .min-h-16 { min-height: calc(var(--spacing) * 16); } .corporate-embedded-surface .min-h-20 { min-height: calc(var(--spacing) * 20); } .corporate-embedded-surface .min-h-24 { min-height: calc(var(--spacing) * 24); } .corporate-embedded-surface .min-h-\[96px\] { min-height: 96px; } .corporate-embedded-surface .min-h-screen { min-height: 100vh; } .corporate-embedded-surface .w-4 { width: calc(var(--spacing) * 4); } .corporate-embedded-surface .w-8 { width: calc(var(--spacing) * 8); } .corporate-embedded-surface .w-9 { width: calc(var(--spacing) * 9); } .corporate-embedded-surface .w-10 { width: calc(var(--spacing) * 10); } .corporate-embedded-surface .w-11 { width: calc(var(--spacing) * 11); } .corporate-embedded-surface .w-14 { width: calc(var(--spacing) * 14); } .corporate-embedded-surface .w-20 { width: calc(var(--spacing) * 20); } .corporate-embedded-surface .w-72 { width: calc(var(--spacing) * 72); } .corporate-embedded-surface .w-full { width: 100%; } .corporate-embedded-surface .max-w-2xl { max-width: var(--container-2xl); } .corporate-embedded-surface .max-w-\[10rem\] { max-width: 10rem; } .corporate-embedded-surface .max-w-\[944px\] { max-width: 944px; } .corporate-embedded-surface .max-w-\[calc\(100vw-2rem\)\] { max-width: calc(100vw - 2rem); } .corporate-embedded-surface .max-w-md { max-width: var(--container-md); } .corporate-embedded-surface .min-w-0 { min-width: calc(var(--spacing) * 0); } .corporate-embedded-surface .min-w-\[760px\] { min-width: 760px; } .corporate-embedded-surface .flex-1 { flex: 1; } .corporate-embedded-surface .shrink-0 { flex-shrink: 0; } .corporate-embedded-surface .-translate-y-1\/2 { --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .corporate-embedded-surface .cursor-not-allowed { cursor: not-allowed; } .corporate-embedded-surface .cursor-pointer { cursor: pointer; } .corporate-embedded-surface .list-decimal { list-style-type: decimal; } .corporate-embedded-surface .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .corporate-embedded-surface .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .corporate-embedded-surface .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .corporate-embedded-surface .grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .corporate-embedded-surface .flex-col { flex-direction: column; } .corporate-embedded-surface .flex-wrap { flex-wrap: wrap; } .corporate-embedded-surface .items-center { align-items: center; } .corporate-embedded-surface .items-end { align-items: flex-end; } .corporate-embedded-surface .items-start { align-items: flex-start; } .corporate-embedded-surface .justify-between { justify-content: space-between; } .corporate-embedded-surface .justify-center { justify-content: center; } .corporate-embedded-surface .justify-end { justify-content: flex-end; } .corporate-embedded-surface .gap-1 { gap: calc(var(--spacing) * 1); } .corporate-embedded-surface .gap-1\.5 { gap: calc(var(--spacing) * 1.5); } .corporate-embedded-surface .gap-2 { gap: calc(var(--spacing) * 2); } .corporate-embedded-surface .gap-3 { gap: calc(var(--spacing) * 3); } .corporate-embedded-surface .gap-4 { gap: calc(var(--spacing) * 4); } .corporate-embedded-surface :where(.space-y-2 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); } .corporate-embedded-surface :where(.space-y-3 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); } .corporate-embedded-surface :where(.space-y-4 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); } .corporate-embedded-surface :where(.space-y-5 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse))); } .corporate-embedded-surface .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .corporate-embedded-surface .overflow-auto { overflow: auto; } .corporate-embedded-surface .overflow-hidden { overflow: hidden; } .corporate-embedded-surface .overflow-x-auto { overflow-x: auto; } .corporate-embedded-surface .overflow-y-auto { overflow-y: auto; } .corporate-embedded-surface .rounded { border-radius: 0.25rem; } .corporate-embedded-surface .rounded-\[10px\] { border-radius: 10px; } .corporate-embedded-surface .rounded-full { border-radius: calc(infinity * 1px); } .corporate-embedded-surface .rounded-lg { border-radius: var(--radius-lg); } .corporate-embedded-surface .rounded-md { border-radius: var(--radius-md); } .corporate-embedded-surface .rounded-xl { border-radius: var(--radius-xl); } .corporate-embedded-surface .border { border-style: var(--tw-border-style); border-width: 1px; } .corporate-embedded-surface .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } .corporate-embedded-surface .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .corporate-embedded-surface .border-builder-danger\/20 { border-color: color-mix(in srgb, #b0000b 20%, transparent); } .corporate-embedded-surface .border-builder-danger\/20 @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-builder-danger) 20%, transparent); } .corporate-embedded-surface .border-transparent { border-color: transparent; } .corporate-embedded-surface .bg-builder-danger-surface { background-color: var(--color-builder-danger-surface); } .corporate-embedded-surface .bg-builder-overlay { background-color: var(--color-builder-overlay); } .corporate-embedded-surface .bg-red-50 { background-color: var(--color-red-50); } .corporate-embedded-surface .bg-white { background-color: var(--color-white); } .corporate-embedded-surface .bg-white\/95 { background-color: color-mix(in srgb, #fff 95%, transparent); } .corporate-embedded-surface .bg-white\/95 @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 95%, transparent); } .corporate-embedded-surface .p-1 { padding: calc(var(--spacing) * 1); } .corporate-embedded-surface .p-2 { padding: calc(var(--spacing) * 2); } .corporate-embedded-surface .p-3 { padding: calc(var(--spacing) * 3); } .corporate-embedded-surface .p-4 { padding: calc(var(--spacing) * 4); } .corporate-embedded-surface .p-5 { padding: calc(var(--spacing) * 5); } .corporate-embedded-surface .p-6 { padding: calc(var(--spacing) * 6); } .corporate-embedded-surface .px-2 { padding-inline: calc(var(--spacing) * 2); } .corporate-embedded-surface .px-2\.5 { padding-inline: calc(var(--spacing) * 2.5); } .corporate-embedded-surface .px-3 { padding-inline: calc(var(--spacing) * 3); } .corporate-embedded-surface .px-4 { padding-inline: calc(var(--spacing) * 4); } .corporate-embedded-surface .px-5 { padding-inline: calc(var(--spacing) * 5); } .corporate-embedded-surface .py-0\.5 { padding-block: calc(var(--spacing) * 0.5); } .corporate-embedded-surface .py-1 { padding-block: calc(var(--spacing) * 1); } .corporate-embedded-surface .py-2 { padding-block: calc(var(--spacing) * 2); } .corporate-embedded-surface .py-3 { padding-block: calc(var(--spacing) * 3); } .corporate-embedded-surface .py-6 { padding-block: calc(var(--spacing) * 6); } .corporate-embedded-surface .pt-3 { padding-top: calc(var(--spacing) * 3); } .corporate-embedded-surface .pr-44 { padding-right: calc(var(--spacing) * 44); } .corporate-embedded-surface .pb-0 { padding-bottom: calc(var(--spacing) * 0); } .corporate-embedded-surface .pb-4 { padding-bottom: calc(var(--spacing) * 4); } .corporate-embedded-surface .pl-5 { padding-left: calc(var(--spacing) * 5); } .corporate-embedded-surface .text-center { text-align: center; } .corporate-embedded-surface .text-left { text-align: left; } .corporate-embedded-surface .text-right { text-align: right; } .corporate-embedded-surface .align-middle { vertical-align: middle; } .corporate-embedded-surface .font-mono { font-family: var(--font-mono); } .corporate-embedded-surface .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .corporate-embedded-surface .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .corporate-embedded-surface .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .corporate-embedded-surface .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .corporate-embedded-surface .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } .corporate-embedded-surface .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .corporate-embedded-surface .text-\[11px\] { font-size: 11px; } .corporate-embedded-surface .leading-5 { --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); } .corporate-embedded-surface .leading-6 { --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); } .corporate-embedded-surface .leading-none { --tw-leading: 1; line-height: 1; } .corporate-embedded-surface .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .corporate-embedded-surface .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .corporate-embedded-surface .font-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .corporate-embedded-surface .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .corporate-embedded-surface .tracking-\[0\.04em\] { --tw-tracking: 0.04em; letter-spacing: 0.04em; } .corporate-embedded-surface .tracking-\[0\.06em\] { --tw-tracking: 0.06em; letter-spacing: 0.06em; } .corporate-embedded-surface .tracking-normal { --tw-tracking: var(--tracking-normal); letter-spacing: var(--tracking-normal); } .corporate-embedded-surface .tracking-wide { --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); } .corporate-embedded-surface .text-builder-danger { color: var(--color-builder-danger); } .corporate-embedded-surface .text-white { color: var(--color-white); } .corporate-embedded-surface .normal-case { text-transform: none; } .corporate-embedded-surface .shadow { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .corporate-embedded-surface .shadow-2xl { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .corporate-embedded-surface .shadow-lg { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .corporate-embedded-surface .shadow-none { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .corporate-embedded-surface .shadow-sm { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .corporate-embedded-surface .shadow-xl { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .corporate-embedded-surface .backdrop-blur { --tw-backdrop-blur: blur(8px); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .corporate-embedded-surface .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .corporate-embedded-surface .transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .corporate-embedded-surface .duration-200 { --tw-duration: 200ms; transition-duration: 200ms; } .corporate-embedded-surface .group-focus\:block:is(:where(.group):focus *) { display: block; } .corporate-embedded-surface .group-focus\:border-builder-primary:is(:where(.group):focus *) { border-color: var(--color-builder-primary); } .corporate-embedded-surface .group-focus\:text-builder-primary:is(:where(.group):focus *) { color: var(--color-builder-primary); } .corporate-embedded-surface .group-focus-visible\:block:is(:where(.group):focus-visible *) { display: block; } .corporate-embedded-surface .placeholder\:text-builder-subtle::placeholder { color: var(--color-builder-subtle); } .corporate-embedded-surface .last\:mb-0:last-child { margin-bottom: calc(var(--spacing) * 0); } .corporate-embedded-surface .read-only\:bg-builder-surface-muted:read-only { background-color: var(--color-builder-surface-muted); } .corporate-embedded-surface .read-only\:text-builder-subtle:read-only { color: var(--color-builder-subtle); } .corporate-embedded-surface .focus\:border-builder-primary:focus { border-color: var(--color-builder-primary); } .corporate-embedded-surface .focus\:bg-vibrant-blue:focus { background-color: var(--color-vibrant-blue); } .corporate-embedded-surface .focus\:text-white:focus { color: var(--color-white); } .corporate-embedded-surface .focus\:ring-0:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .corporate-embedded-surface .focus\:ring-1:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .corporate-embedded-surface .focus\:ring-2:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .corporate-embedded-surface .focus\:ring-builder-primary:focus { --tw-ring-color: var(--color-builder-primary); } .corporate-embedded-surface .focus\:ring-vibrant-blue:focus { --tw-ring-color: var(--color-vibrant-blue); } .corporate-embedded-surface .focus\:ring-offset-1:focus { --tw-ring-offset-width: 1px; --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .corporate-embedded-surface .focus\:outline-none:focus { --tw-outline-style: none; outline-style: none; } .corporate-embedded-surface .focus-visible\:ring-2:focus-visible { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .corporate-embedded-surface .focus-visible\:ring-builder-danger:focus-visible { --tw-ring-color: var(--color-builder-danger); } .corporate-embedded-surface .focus-visible\:ring-builder-primary:focus-visible { --tw-ring-color: var(--color-builder-primary); } .corporate-embedded-surface .focus-visible\:ring-offset-2:focus-visible { --tw-ring-offset-width: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .corporate-embedded-surface .focus-visible\:outline-none:focus-visible { --tw-outline-style: none; outline-style: none; } .corporate-embedded-surface .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; } .corporate-embedded-surface .disabled\:bg-builder-surface-muted:disabled { background-color: var(--color-builder-surface-muted); } .corporate-embedded-surface .disabled\:text-builder-subtle:disabled { color: var(--color-builder-subtle); } .corporate-embedded-surface .disabled\:opacity-60:disabled { opacity: 60%; } .corporate-embedded-surface .data-\[selected\=true\]\:border-builder-primary[data-selected="true"] { border-color: var(--color-builder-primary); } .corporate-embedded-surface .data-\[selected\=true\]\:bg-builder-surface[data-selected="true"] { background-color: var(--color-builder-surface); } /* Utilities (responsive / interaction media queries) */ @media (min-width: 40rem) { .corporate-embedded-surface .container { max-width: 40rem; } .corporate-embedded-surface .sm\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .corporate-embedded-surface .sm\:flex-row { flex-direction: row; } .corporate-embedded-surface .sm\:items-center { align-items: center; } .corporate-embedded-surface .sm\:gap-3 { gap: calc(var(--spacing) * 3); } .corporate-embedded-surface .sm\:px-6 { padding-inline: calc(var(--spacing) * 6); } } @media (min-width: 48rem) { .corporate-embedded-surface .container { max-width: 48rem; } .corporate-embedded-surface .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .corporate-embedded-surface .md\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .corporate-embedded-surface .md\:grid-cols-\[1fr_120px_90px\] { grid-template-columns: 1fr 120px 90px; } .corporate-embedded-surface .md\:flex-row { flex-direction: row; } .corporate-embedded-surface .md\:items-center { align-items: center; } .corporate-embedded-surface .md\:justify-between { justify-content: space-between; } } @media (min-width: 64rem) { .corporate-embedded-surface .container { max-width: 64rem; } .corporate-embedded-surface .lg\:col-span-2 { grid-column: span 2 / span 2; } .corporate-embedded-surface .lg\:col-span-3 { grid-column: span 3 / span 3; } .corporate-embedded-surface .lg\:col-span-4 { grid-column: span 4 / span 4; } .corporate-embedded-surface .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .corporate-embedded-surface .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .corporate-embedded-surface .lg\:grid-cols-\[1fr_1fr_120px_1fr\] { grid-template-columns: 1fr 1fr 120px 1fr; } .corporate-embedded-surface .lg\:grid-cols-\[1fr_120px\] { grid-template-columns: 1fr 120px; } .corporate-embedded-surface .lg\:grid-cols-\[140px_1fr\] { grid-template-columns: 140px 1fr; } .corporate-embedded-surface .lg\:px-8 { padding-inline: calc(var(--spacing) * 8); } } @media (min-width: 80rem) { .corporate-embedded-surface .container { max-width: 80rem; } } @media (min-width: 96rem) { .corporate-embedded-surface .container { max-width: 96rem; } } @media (hover: hover) { .corporate-embedded-surface .group-hover\:block:is(:where(.group):hover *) { display: block; } .corporate-embedded-surface .group-hover\:border-builder-primary:is(:where(.group):hover *) { border-color: var(--color-builder-primary); } .corporate-embedded-surface .group-hover\:text-builder-primary:is(:where(.group):hover *) { color: var(--color-builder-primary); } .corporate-embedded-surface .hover\:border-builder-border:hover { border-color: var(--color-builder-border); } .corporate-embedded-surface .hover\:border-builder-primary\/40:hover { border-color: color-mix(in srgb, #333333 40%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-builder-primary) 40%, transparent); } } .corporate-embedded-surface .hover\:bg-builder-danger-hover:hover { background-color: var(--color-builder-danger-hover); } .corporate-embedded-surface .hover\:bg-builder-primary-hover:hover { background-color: var(--color-builder-primary-hover); } .corporate-embedded-surface .hover\:bg-builder-primary\/15:hover { background-color: color-mix(in srgb, #333333 15%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-builder-primary) 15%, transparent); } } .corporate-embedded-surface .hover\:bg-builder-surface:hover { background-color: var(--color-builder-surface); } .corporate-embedded-surface .hover\:bg-builder-surface-muted:hover { background-color: var(--color-builder-surface-muted); } .corporate-embedded-surface .hover\:bg-vibrant-blue:hover { background-color: var(--color-vibrant-blue); } .corporate-embedded-surface .hover\:text-builder-danger-hover-text:hover { color: var(--color-builder-danger-hover-text); } .corporate-embedded-surface .hover\:text-builder-text:hover { color: var(--color-builder-text); } .corporate-embedded-surface .hover\:text-white:hover { color: var(--color-white); } .corporate-embedded-surface .hover\:opacity-90:hover { opacity: 90%; } } /* ==== Protocol template builder + picker (shell convergence, Commit 7) — generated from the app Tailwind theme; keep in sync with the component class lists ==== */ /* * The protocol template builder and its #new template-picker page converge into * the Avo shell (Commit 7), joining the catalog item builder (Commit 6) as raw- * Tailwind-utility corporate pages rendered where the Avo shell does NOT load the * app Tailwind build. These rules add ONLY the utilities this surface emits that * the Commit 6 section above does not already cover: the pillar-bordered section * cards (pillar pill bg/border + left-border treatment), the protocol-template * status badge (builder-draft / builder-status-retired tokens), the amber * stale-alert, the catalog/template picker-frame slate vocabulary, and a handful * of layout/spacing utilities. Selectors already defined above (the shared * builder/schedule/header vocabulary, the pillar text colors, the standard * spacing/typography scale) are intentionally NOT redefined here. * * Generation: app @theme + @source narrowed to the converged protocol_templates * render tree (components + views + the shared library components they render), * diffed against this file INCLUDING the Commit 6 section; only still-missing * selectors emitted, &-nesting flattened to plain rules, width queries rewritten * to min-width, every selector scoped under .corporate-embedded-surface. */ /* Theme tokens the generated utilities reference, not yet defined above (scoped to the builder shell) */ .corporate-embedded-surface { --color-amber-100: oklch(96.2% 0.059 95.617); --color-amber-200: oklch(92.4% 0.12 95.746); --color-amber-300: oklch(87.9% 0.169 91.605); --color-amber-50: oklch(98.7% 0.022 95.277); --color-amber-900: oklch(41.4% 0.112 45.904); --color-amber-950: oklch(27.9% 0.077 45.635); --color-builder-draft: #8a560f; --color-builder-status-retired: #64748b; --color-pillar-diagnostics: #b0000b; --color-pillar-nutrition: #147a5f; --color-pillar-recovery: #ad2e5d; --color-pillar-regeneration: #1f6cb4; --color-pillar-supplements-border: #439f33; --color-pillar-supplements: #147a5f; --color-pillar-training: #a84319; --color-slate-100: oklch(96.8% 0.007 247.896); --color-slate-200: oklch(92.9% 0.013 255.508); --color-slate-400: oklch(70.4% 0.04 256.788); --color-slate-500: oklch(55.4% 0.046 257.417); --color-slate-600: oklch(44.6% 0.043 257.281); --color-slate-800: oklch(27.9% 0.041 260.031); --color-slate-950: oklch(12.9% 0.042 264.695); --container-xl: 36rem; --tracking-widest: 0.1em; } /* Utilities */ .corporate-embedded-surface .mt-4 { margin-top: calc(var(--spacing) * 4); } .corporate-embedded-surface .mb-1 { margin-bottom: calc(var(--spacing) * 1); } .corporate-embedded-surface .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .corporate-embedded-surface .mb-5 { margin-bottom: calc(var(--spacing) * 5); } .corporate-embedded-surface .ml-2 { margin-left: calc(var(--spacing) * 2); } .corporate-embedded-surface .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .corporate-embedded-surface .max-w-xl { max-width: var(--container-xl); } .corporate-embedded-surface .min-w-max { min-width: max-content; } .corporate-embedded-surface .gap-6 { gap: calc(var(--spacing) * 6); } .corporate-embedded-surface .self-center { align-self: center; } .corporate-embedded-surface .border-y { border-block-style: var(--tw-border-style); border-block-width: 1px; } .corporate-embedded-surface .border-amber-200 { border-color: var(--color-amber-200); } .corporate-embedded-surface .border-amber-300 { border-color: var(--color-amber-300); } .corporate-embedded-surface .border-builder-draft\/20 { border-color: color-mix(in srgb, #8a560f 20%, transparent); } .corporate-embedded-surface .border-builder-draft\/20 @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-builder-draft) 20%, transparent); } .corporate-embedded-surface .border-builder-status-retired\/20 { border-color: color-mix(in srgb, #64748b 20%, transparent); } .corporate-embedded-surface .border-builder-status-retired\/20 @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-builder-status-retired) 20%, transparent); } .corporate-embedded-surface .border-pillar-diagnostics\/30 { border-color: color-mix(in srgb, #b0000b 30%, transparent); } .corporate-embedded-surface .border-pillar-diagnostics\/30 @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-pillar-diagnostics) 30%, transparent); } .corporate-embedded-surface .border-pillar-nutrition\/30 { border-color: color-mix(in srgb, #147a5f 30%, transparent); } .corporate-embedded-surface .border-pillar-nutrition\/30 @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-pillar-nutrition) 30%, transparent); } .corporate-embedded-surface .border-pillar-recovery\/30 { border-color: color-mix(in srgb, #ad2e5d 30%, transparent); } .corporate-embedded-surface .border-pillar-recovery\/30 @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-pillar-recovery) 30%, transparent); } .corporate-embedded-surface .border-pillar-regeneration\/30 { border-color: color-mix(in srgb, #1f6cb4 30%, transparent); } .corporate-embedded-surface .border-pillar-regeneration\/30 @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-pillar-regeneration) 30%, transparent); } .corporate-embedded-surface .border-pillar-supplements\/30 { border-color: color-mix(in srgb, #147a5f 30%, transparent); } .corporate-embedded-surface .border-pillar-supplements\/30 @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-pillar-supplements) 30%, transparent); } .corporate-embedded-surface .border-pillar-training\/30 { border-color: color-mix(in srgb, #a84319 30%, transparent); } .corporate-embedded-surface .border-pillar-training\/30 @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-pillar-training) 30%, transparent); } .corporate-embedded-surface .border-slate-200 { border-color: var(--color-slate-200); } .corporate-embedded-surface .border-l-builder-border { border-left-color: var(--color-builder-border); } .corporate-embedded-surface .border-l-pillar-diagnostics { border-left-color: var(--color-pillar-diagnostics); } .corporate-embedded-surface .border-l-pillar-nutrition { border-left-color: var(--color-pillar-nutrition); } .corporate-embedded-surface .border-l-pillar-recovery { border-left-color: var(--color-pillar-recovery); } .corporate-embedded-surface .border-l-pillar-regeneration { border-left-color: var(--color-pillar-regeneration); } .corporate-embedded-surface .border-l-pillar-supplements-border { border-left-color: var(--color-pillar-supplements-border); } .corporate-embedded-surface .border-l-pillar-training { border-left-color: var(--color-pillar-training); } .corporate-embedded-surface .bg-amber-50 { background-color: var(--color-amber-50); } .corporate-embedded-surface .bg-amber-100 { background-color: var(--color-amber-100); } .corporate-embedded-surface .bg-builder-draft\/10 { background-color: color-mix(in srgb, #8a560f 10%, transparent); } .corporate-embedded-surface .bg-builder-draft\/10 @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-builder-draft) 10%, transparent); } .corporate-embedded-surface .bg-builder-status-retired\/10 { background-color: color-mix(in srgb, #64748b 10%, transparent); } .corporate-embedded-surface .bg-builder-status-retired\/10 @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-builder-status-retired) 10%, transparent); } .corporate-embedded-surface .bg-pillar-nutrition\/10 { background-color: color-mix(in srgb, #147a5f 10%, transparent); } .corporate-embedded-surface .bg-pillar-nutrition\/10 @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-pillar-nutrition) 10%, transparent); } .corporate-embedded-surface .bg-pillar-supplements\/10 { background-color: color-mix(in srgb, #147a5f 10%, transparent); } .corporate-embedded-surface .bg-pillar-supplements\/10 @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-pillar-supplements) 10%, transparent); } .corporate-embedded-surface .bg-slate-100 { background-color: var(--color-slate-100); } .corporate-embedded-surface .bg-slate-950\/50 { background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 50%, transparent); } .corporate-embedded-surface .bg-slate-950\/50 @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-slate-950) 50%, transparent); } .corporate-embedded-surface .py-1\.5 { padding-block: calc(var(--spacing) * 1.5); } .corporate-embedded-surface .py-4 { padding-block: calc(var(--spacing) * 4); } .corporate-embedded-surface .pb-3 { padding-bottom: calc(var(--spacing) * 3); } .corporate-embedded-surface .text-\[13px\] { font-size: 13px; } .corporate-embedded-surface .tracking-widest { --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest); } .corporate-embedded-surface .text-amber-900 { color: var(--color-amber-900); } .corporate-embedded-surface .text-amber-950 { color: var(--color-amber-950); } .corporate-embedded-surface .text-builder-draft { color: var(--color-builder-draft); } .corporate-embedded-surface .text-builder-status-retired { color: var(--color-builder-status-retired); } .corporate-embedded-surface .text-slate-400 { color: var(--color-slate-400); } .corporate-embedded-surface .text-slate-500 { color: var(--color-slate-500); } .corporate-embedded-surface .text-slate-600 { color: var(--color-slate-600); } .corporate-embedded-surface .text-slate-800 { color: var(--color-slate-800); } .corporate-embedded-surface .text-slate-950 { color: var(--color-slate-950); } .corporate-embedded-surface .underline { text-decoration-line: underline; } .corporate-embedded-surface .hover\:bg-amber-100:hover { background-color: var(--color-amber-100); } .corporate-embedded-surface .hover\:bg-amber-200:hover { background-color: var(--color-amber-200); } .corporate-embedded-surface .hover\:bg-pillar-diagnostics\/10:hover { background-color: color-mix(in srgb, #b0000b 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-pillar-diagnostics) 10%, transparent); } } .corporate-embedded-surface .hover\:bg-pillar-nutrition\/10:hover { background-color: color-mix(in srgb, #147a5f 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-pillar-nutrition) 10%, transparent); } } .corporate-embedded-surface .hover\:bg-pillar-recovery\/10:hover { background-color: color-mix(in srgb, #ad2e5d 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-pillar-recovery) 10%, transparent); } } .corporate-embedded-surface .hover\:bg-pillar-regeneration\/10:hover { background-color: color-mix(in srgb, #1f6cb4 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-pillar-regeneration) 10%, transparent); } } .corporate-embedded-surface .hover\:bg-pillar-supplements\/10:hover { background-color: color-mix(in srgb, #147a5f 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-pillar-supplements) 10%, transparent); } } .corporate-embedded-surface .hover\:bg-pillar-training\/10:hover { background-color: color-mix(in srgb, #a84319 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-pillar-training) 10%, transparent); } } @media (min-width: 48rem) { .corporate-embedded-surface .md\:grid-cols-\[1fr_120px\] { grid-template-columns: 1fr 120px; } .corporate-embedded-surface .md\:items-start { align-items: flex-start; } } @media (min-width: 64rem) { .corporate-embedded-surface .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .corporate-embedded-surface .lg\:grid-cols-\[160px_140px_1fr\] { grid-template-columns: 160px 140px 1fr; } .corporate-embedded-surface .lg\:flex-row { flex-direction: row; } .corporate-embedded-surface .lg\:items-center { align-items: center; } .corporate-embedded-surface .lg\:justify-between { justify-content: space-between; } } /* ==== Protocol builder (shell convergence, Commit 8) — generated from the app Tailwind theme; keep in sync with the component class lists ==== */ /* * The protocol builder (the richest builder) converges into the Avo shell * (Commit 8), joining the catalog item builder (Commit 6) and the protocol * template builder (Commit 7) as raw-Tailwind-utility corporate pages rendered * where the Avo shell does NOT load the app Tailwind build. The header chrome * converges onto the shared Corporate::Builders::HeaderComponent :sticky tokens * (the builder-* vocabulary already emitted by Commit 6), so the only NEW * selectors here are the ones the protocol surface emits that neither the * Commit 6 nor Commit 7 sections already cover: the care-plan lifecycle button * colors (emerald approve / green publish), the in-review summary banner + the * lazy review-timeline/comments/audit/version-history frames' blue/slate/amber/ * red vocabulary, the focus: (not focus-visible:) ring family the comments form * uses, and a handful of layout utilities (the five-column schedule-rule grid, * the 7xl/lg containers the header footer + submit modal use, the 3px pillar * left border, min-h-32). * * Generation: app @theme + @source narrowed to the converged protocols render * tree (components + views + the shared library components they render), diffed * against this file INCLUDING the Commit 6 and Commit 7 sections; only * still-missing selectors emitted, &-nesting flattened to plain rules, width * queries rewritten to min-width, every selector scoped under .corporate-embedded-surface. */ /* Theme tokens the generated utilities reference, not yet defined above (scoped to the builder shell) */ .corporate-embedded-surface { --color-amber-500: oklch(76.9% 0.188 70.08); --color-amber-700: oklch(55.5% 0.163 48.998); --color-amber-800: oklch(47.3% 0.137 46.201); --color-blue-50: oklch(97% 0.014 254.604); --color-blue-200: oklch(88.2% 0.059 254.128); --color-blue-500: oklch(62.3% 0.214 259.815); --color-blue-600: oklch(54.6% 0.245 262.881); --color-blue-700: oklch(48.8% 0.243 264.376); --color-blue-900: oklch(37.9% 0.146 265.522); --color-blue-950: oklch(28.2% 0.091 267.935); --color-emerald-600: oklch(59.6% 0.145 163.225); --color-emerald-700: oklch(50.8% 0.118 165.612); --color-green-50: oklch(98.2% 0.018 155.826); --color-green-600: oklch(62.7% 0.194 149.214); --color-green-700: oklch(52.7% 0.154 150.069); --color-red-700: oklch(50.5% 0.213 27.518); --color-slate-50: oklch(98.4% 0.003 247.858); --color-slate-300: oklch(86.9% 0.022 252.894); --color-slate-700: oklch(37.2% 0.044 257.287); --container-7xl: 80rem; --container-lg: 32rem; } /* Background colors */ .corporate-embedded-surface .bg-amber-500 { background-color: var(--color-amber-500); } .corporate-embedded-surface .bg-blue-50 { background-color: var(--color-blue-50); } .corporate-embedded-surface .bg-blue-600 { background-color: var(--color-blue-600); } .corporate-embedded-surface .bg-emerald-600 { background-color: var(--color-emerald-600); } .corporate-embedded-surface .bg-green-50 { background-color: var(--color-green-50); } .corporate-embedded-surface .bg-green-600 { background-color: var(--color-green-600); } .corporate-embedded-surface .bg-slate-50 { background-color: var(--color-slate-50); } .corporate-embedded-surface .bg-slate-950\/50 { background-color: #02061880; } @supports (color: color-mix(in lab, red, red)) { .corporate-embedded-surface .bg-slate-950\/50 { background-color: color-mix(in oklab, var(--color-slate-950) 50%, transparent); } } /* Border colors */ .corporate-embedded-surface .border-blue-200 { border-color: var(--color-blue-200); } .corporate-embedded-surface .border-slate-300 { border-color: var(--color-slate-300); } /* Text colors */ .corporate-embedded-surface .text-amber-700 { color: var(--color-amber-700); } .corporate-embedded-surface .text-amber-800 { color: var(--color-amber-800); } .corporate-embedded-surface .text-blue-700 { color: var(--color-blue-700); } .corporate-embedded-surface .text-blue-900 { color: var(--color-blue-900); } .corporate-embedded-surface .text-blue-950 { color: var(--color-blue-950); } .corporate-embedded-surface .text-red-700 { color: var(--color-red-700); } .corporate-embedded-surface .text-slate-700 { color: var(--color-slate-700); } /* Hover background colors */ .corporate-embedded-surface .hover\:bg-blue-700:hover { background-color: var(--color-blue-700); } .corporate-embedded-surface .hover\:bg-emerald-700:hover { background-color: var(--color-emerald-700); } .corporate-embedded-surface .hover\:bg-green-700:hover { background-color: var(--color-green-700); } .corporate-embedded-surface .hover\:bg-slate-50:hover { background-color: var(--color-slate-50); } .corporate-embedded-surface .hover\:bg-white\/60:hover { background-color: #fff9; } @supports (color: color-mix(in lab, red, red)) { .corporate-embedded-surface .hover\:bg-white\/60:hover { background-color: color-mix(in oklab, var(--color-white) 60%, transparent); } } /* focus: ring family (the comments post form uses focus:, not focus-visible:) */ .corporate-embedded-surface .focus\:outline-none:focus { --tw-outline-style: none; outline-style: none; } .corporate-embedded-surface .focus\:ring-2:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .corporate-embedded-surface .focus\:ring-offset-2:focus { --tw-ring-offset-width: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .corporate-embedded-surface .focus\:ring-blue-500:focus { --tw-ring-color: var(--color-blue-500); } /* Layout utilities */ .corporate-embedded-surface .min-h-32 { min-height: calc(var(--spacing) * 32); } .corporate-embedded-surface .max-w-7xl { max-width: var(--container-7xl); } .corporate-embedded-surface .max-w-lg { max-width: var(--container-lg); } .corporate-embedded-surface .border-l-\[3px\] { border-left-style: var(--tw-border-style); border-left-width: 3px; } @media (min-width: 64rem) { .corporate-embedded-surface .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* * Collapsible panel (Corporate::Builders::CollapsiblePanelComponent — now shared * by both the protocol and catalog builders — plus the protocol section/schedule * collapsibles). The grid-rows 1fr -> 0fr collapse is an app component-layer * rule (app/assets/tailwind/application.css), not a generated utility, so it is * absent from this file; the protocol builder is the first converged surface to * render it. Copied verbatim, scoped under .corporate-embedded-surface. Without these * rules the Schedule-rules panels render expanded in the Avo shell. */ .corporate-embedded-surface { --duration-normal: 200ms; } .corporate-embedded-surface .collapsible-content { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--duration-normal) ease-out; } .corporate-embedded-surface [data-controller~="collapsible"][data-collapsible-open-value="false"] > .collapsible-content, .corporate-embedded-surface .collapsible-content.collapsible-collapsed { grid-template-rows: 0fr; } .corporate-embedded-surface .collapsible-content > * { overflow: hidden; min-height: 0; } /* * Tooltip-escape for fully-expanded panels (mirror of the app application.css * .collapsible-expanded rules). The collapsible controller adds this class once * the open animation settles and removes it the instant a collapse begins, so * the overflow:hidden above keeps clipping while collapsed/animating while an * open panel stops clipping its absolutely-positioned field-help tooltips. The * attribute + class selector outranks the scoped .overflow-hidden utility on the * panel
and the scoped .collapsible-content > * rule above. */ .corporate-embedded-surface [data-controller~="collapsible"].collapsible-expanded { overflow: visible; } .corporate-embedded-surface [data-controller~="collapsible"].collapsible-expanded > .collapsible-content > * { overflow: visible; } /* ==== Start-building empty state + builder polish — generated from the app Tailwind theme; keep in sync with the component class lists ==== */ /* * StartBuildingCardComponent (the "Start building your protocol" empty state * shared by the protocol and protocol template builders) and the collapsible * section chevron emit utilities that postdate the Commit 6-8 convergence * sweeps, so they were never captured into the scoped sections above: the * dashed builder-primary border painted as Avo's solid gray, py-10 collapsed * to zero vertical padding, the 15px/22px title fell back to Avo's 30px h2, * the button row lost its gaps, and the chevron never rotated when sections * collapsed. min-h-[60px] backs the protocol builder's compact textareas. */ .corporate-embedded-surface .border-dashed { --tw-border-style: dashed; border-style: dashed; } .corporate-embedded-surface .border-builder-primary\/25 { border-color: color-mix(in srgb, #333333 25%, transparent); } .corporate-embedded-surface .py-10 { padding-block: calc(var(--spacing) * 10); } .corporate-embedded-surface .gap-x-2 { column-gap: calc(var(--spacing) * 2); } .corporate-embedded-surface .gap-y-3 { row-gap: calc(var(--spacing) * 3); } .corporate-embedded-surface .rotate-180 { rotate: 180deg; } .corporate-embedded-surface .text-\[15px\] { font-size: 15px; } .corporate-embedded-surface .leading-\[18px\] { --tw-leading: 18px; line-height: 18px; } .corporate-embedded-surface .leading-\[22px\] { --tw-leading: 22px; line-height: 22px; } .corporate-embedded-surface .min-h-\[60px\] { min-height: 60px; } /* Hand-maintained (not part of the generated sections — survives regeneration): Vibrant Blue token utilities for the converged embedded surfaces. The generated sections above only captured the focus:/hover: modifier forms, so the plain bg/border utilities the shared SelectComponent and CustomRecurrenceModalComponent emit (selected option rows, selected weekday tiles, the modal's Done button) went unpainted inside the Avo shell; the vibrant-blue token now resolves to the charcoal primary (#333333). Mirrors the .reminder-builder-shell equivalents. Placed after the generated utilities so they out-order .bg-white at equal specificity; keep BEFORE the toggle guards below. */ .corporate-embedded-surface .bg-vibrant-blue { background-color: var(--color-vibrant-blue); } .corporate-embedded-surface .border-vibrant-blue { border-color: var(--color-vibrant-blue); } /* `!important` + the body.bg-application prefix are both needed: the global "Select / search dropdown — black hover" rule (body.bg-application [role="option"]…, written for Avo's own autocomplete) is !important too, so this must out-specify it or the embedded select rows paint #333333 instead of Vibrant Blue. Mirrors the .reminder-builder-shell rule above. */ body.bg-application .corporate-embedded-surface [data-corporate--select-target="option"]:hover, body.bg-application .corporate-embedded-surface [data-corporate--select-target="option"]:focus, body.bg-application .corporate-embedded-surface [data-corporate--select-target="option"][aria-selected="true"] { background-color: var(--color-vibrant-blue) !important; color: #ffffff !important; outline: none; } /* Hand-maintained: brief "Added ✓" confirmation state the add-feedback Stimulus controller applies to a catalog picker Add button after a successful Turbo submission (the flash banner renders BEHIND the open picker modal, so the button itself is the only visible feedback surface). Green matches the .flash-notice banner. The :hover form is required because the button's resting hover:bg-builder-primary/15 rule carries an extra pseudo-class of specificity and would otherwise repaint the indigo tint mid-confirmation. */ .corporate-embedded-surface .add-feedback-confirmed, .corporate-embedded-surface .add-feedback-confirmed:hover { background-color: #24965D; border-color: #24965D; color: #ffffff; } /* ==== Custom care item builder — composition pills + guided sections (catalog/custom compositions) — generated from the app Tailwind theme; keep in sync with the component class lists ==== */ /* Missing theme token: the context-fields collapsible panel body emits bg-builder-primary/5 (catalog ContextDefaults parity); generated from --color-builder-primary #333333 at 5% alpha. */ .corporate-embedded-surface .bg-builder-primary\/5 { background-color: rgba(51, 51, 51, 0.05); } /* Missing plain utility: the icon picker's locked bolt tile and disabled trigger dim with opacity-70, which neither Avo's bundle nor the sections above ever generated — without it the "locked" affordance reads at full opacity. Keep BEFORE the toggle guards below. */ .corporate-embedded-surface .opacity-70 { opacity: 0.7; } /* The create-only "Start from" composition control. The fieldset reset keeps UA/preflight differences out of the reminder card; visibility toggling on the guided sections uses the [hidden] ATTRIBUTE only (never the .hidden class) so the guards below always win. */ .corporate-embedded-surface fieldset.reminder-field { border: 0; margin: 0; min-width: 0; padding: 0; } .corporate-embedded-surface .reminder-composition-block { padding: 1.5rem 1.5rem 0; } .corporate-embedded-surface .reminder-composition-pills { display: flex; flex-wrap: wrap; gap: 0.75rem; } .corporate-embedded-surface .reminder-composition-pill { background: #ffffff; border: 1px solid rgba(102, 102, 102, 0.3); border-radius: 10px; cursor: pointer; display: flex; flex: 1 1 200px; gap: 0.625rem; padding: 0.75rem 0.875rem; transition: border-color 120ms, box-shadow 120ms; } .corporate-embedded-surface .reminder-composition-pill:hover { border-color: rgba(51, 51, 51, 0.5); } .corporate-embedded-surface .reminder-composition-pill:has(input:checked) { border-color: #333333; box-shadow: 0 0 0 1px #333333; } .corporate-embedded-surface .reminder-composition-pill:has(input:focus-visible) { outline: 2px solid #333333; outline-offset: 2px; } .corporate-embedded-surface .reminder-composition-pill-input { accent-color: #333333; flex-shrink: 0; margin-top: 0.125rem; } .corporate-embedded-surface .reminder-composition-pill-title { color: #000000; display: block; font-size: 0.9375rem; font-weight: 700; line-height: 1.3; } .corporate-embedded-surface .reminder-composition-pill-description { color: #555555; display: block; font-size: 0.8125rem; line-height: 1.35; margin-top: 0.125rem; } /* Layout-only wrapper for the guided pillar sections below the card grid; the section wrappers inside carry no display classes, so their [hidden] attribute (UA display:none + the guard below) is the only display control. */ .corporate-embedded-surface .reminder-guided-sections { display: flex; flex-direction: column; gap: 1.25rem; padding: 0 1.5rem 1.5rem; } /* Toggle guards: the display utilities above (.block / .flex / .inline-flex) share the same (0,2,0) specificity as a scoped .hidden rule, so they would otherwise win on source order and keep JS-toggled menus, modals, and overlays visible. Declaring the hide semantics LAST inside the embedded surface restores Tailwind's canonical ordering for corporate--select / modal / custom-recurrence (.hidden class) and reminder-fields / icon-picker emptyState / schedule-weekday-selector ([hidden] attribute) inside the wrapper. No responsive hidden variants (lg:hidden / md:hidden …) are emitted by the converged views or shared components, so no media-query equivalents are required. */ .corporate-embedded-surface .hidden { display: none; } .corporate-embedded-surface [hidden]:where(:not([hidden="until-found"])) { display: none !important; } /* ==== Booking calendar (Scheduling Engine, Step 8) — generated from the app Tailwind theme; keep in sync with the component class lists ==== */ /* Source of truth: app/components/corporate/bookings/*.{html.erb,rb} + app/views/corporate/service_sessions/bookings/**. The booking surface is a Figma-styled shell that lives INSIDE the Avo chrome, so it cannot reach the app Tailwind build — its look is expressed here as scoped semantic component classes (booking-*) rather than raw utilities. Every selector below is scoped under .corporate-embedded-surface (the booking shell carries the wrapper); the trailing .hidden / [hidden] guards stay LAST so JS-toggled hide semantics keep their last-wins ordering (e.g. the overlap-confirm modal overlay). The data-driven balance progress-bar width stays an inline style (the one allowed inline-style exception). */ /* Figma design tokens for the booking surface. Re-uses the green-600/white tokens already declared above via var(); adds the surface-specific values. */ .corporate-embedded-surface .booking-shell { --booking-page-bg: #f4f6fa; --booking-ink: #333; --booking-cell: #f2f2f2; --booking-card-border: rgba(0, 0, 0, 0.15); --booking-card-radius: 10px; --booking-card-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); --booking-tag-bg: rgba(186, 117, 23, 0.1); --booking-tag-border: rgba(186, 117, 23, 0.14); --booking-tag-ink: #ba7517; --booking-indigo: #5b5fed; --booking-danger: #d40511; --booking-danger-bg: rgba(212, 5, 17, 0.1); --booking-divider: #d9d9d9; } /* ---- Shell layout ---- */ .corporate-embedded-surface .booking-shell { max-width: 80rem; margin-inline: auto; padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 1.5rem; color: var(--booking-ink); } .corporate-embedded-surface .booking-shell__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .corporate-embedded-surface .booking-shell__heading { display: flex; align-items: flex-start; gap: 0.75rem; } .corporate-embedded-surface .booking-shell__back { font-size: 1.125rem; line-height: 1.6; color: var(--booking-ink); } .corporate-embedded-surface .booking-shell__title { font-size: 1.25rem; font-weight: 700; color: var(--booking-ink); } .corporate-embedded-surface .booking-shell__subtitle { font-size: 0.8125rem; color: var(--color-gray-500); } .corporate-embedded-surface .booking-shell__actions { display: flex; align-items: center; gap: 0.75rem; } .corporate-embedded-surface .booking-shell__panels { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 1024px) { .corporate-embedded-surface .booking-shell__panels { grid-template-columns: 1fr 1fr; } } /* ---- Cards ---- */ .corporate-embedded-surface .booking-card { background-color: var(--color-white); border: 1px solid var(--booking-card-border); border-radius: var(--booking-card-radius); padding: 1.25rem; } /* ---- Buttons ---- */ .corporate-embedded-surface .booking-btn { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 10px; padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 600; border: 1px solid transparent; cursor: pointer; } .corporate-embedded-surface .booking-btn--confirm { background-color: var(--booking-ink); color: var(--color-white); } .corporate-embedded-surface .booking-btn--confirm:disabled { background-color: rgba(51, 51, 51, 0.1); color: #000; cursor: not-allowed; } .corporate-embedded-surface .booking-btn--cancel { background-color: var(--booking-danger-bg); color: var(--booking-danger); } /* Decorative trash affordance rendered as a pseudo-element so it never enters the button's DOM text content (the controller test asserts the exact label). */ .corporate-embedded-surface .booking-btn--cancel::before { content: "\1F5D1"; font-size: 0.875rem; line-height: 1; } .corporate-embedded-surface .booking-btn--ghost { background-color: var(--color-white); border-color: var(--color-gray-300); color: var(--booking-ink); } .corporate-embedded-surface .booking-btn:focus-visible { outline: 2px solid var(--booking-ink); outline-offset: 2px; } /* ---- Tabs ---- */ .corporate-embedded-surface .booking-panel-left__title { font-size: 1.25rem; font-weight: 700; color: var(--booking-ink); margin-bottom: 1rem; } .corporate-embedded-surface .booking-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.25rem; } .corporate-embedded-surface .booking-tab { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 42px; border-radius: 8px; font-size: 0.875rem; font-weight: 700; background-color: var(--color-white); border: 1px solid var(--booking-ink); color: var(--booking-ink); cursor: pointer; } .corporate-embedded-surface .booking-tab.is-active { background-color: var(--booking-ink); color: var(--color-white); border-color: var(--booking-ink); } /* The active tab's white check (Figma) as a pseudo-element so the button's DOM text content stays exactly the label (the controller test asserts it). */ .corporate-embedded-surface .booking-tab.is-active::after { content: "\2713"; font-size: 0.75rem; } .corporate-embedded-surface .booking-tab:focus-visible { outline: 2px solid var(--booking-ink); outline-offset: 2px; } /* ---- Month nav ---- */ .corporate-embedded-surface .booking-monthnav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .corporate-embedded-surface .booking-monthnav__side { display: inline-flex; align-items: center; gap: 0.375rem; background: transparent; border: 0; cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem; color: var(--color-gray-500); } .corporate-embedded-surface .booking-monthnav__chevron { font-size: 1rem; line-height: 1; } .corporate-embedded-surface .booking-monthnav__current { text-transform: uppercase; font-size: 0.875rem; font-weight: 700; color: var(--booking-ink); } .corporate-embedded-surface .booking-monthnav__side:focus-visible { outline: 2px solid var(--booking-ink); outline-offset: 2px; } /* ---- Calendar grid ---- */ .corporate-embedded-surface .booking-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; } .corporate-embedded-surface .booking-grid--weekdays { padding-bottom: 0.5rem; } .corporate-embedded-surface .booking-weekday { text-align: center; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--color-gray-500); } .corporate-embedded-surface .booking-day { position: relative; display: flex; flex-direction: column; gap: 0.25rem; min-height: 4.25rem; border-radius: 8px; padding: 0.5rem; text-align: left; background-color: var(--booking-cell); border: 1px solid transparent; } .corporate-embedded-surface .booking-day--bookable { cursor: pointer; } .corporate-embedded-surface .booking-day--bookable:hover { border-color: var(--booking-ink); } .corporate-embedded-surface .booking-day--bookable:focus-visible { outline: 2px solid var(--booking-ink); outline-offset: 1px; } .corporate-embedded-surface .booking-day--muted { cursor: default; } .corporate-embedded-surface .booking-day.is-selected { background-color: var(--booking-ink); } .corporate-embedded-surface .booking-day__header { display: flex; align-items: flex-start; justify-content: space-between; } .corporate-embedded-surface .booking-day__number { font-size: 1rem; font-weight: 600; color: var(--booking-ink); } .corporate-embedded-surface .booking-day--muted .booking-day__number { color: var(--color-gray-400); } .corporate-embedded-surface .booking-day.is-selected .booking-day__number { color: var(--color-white); } /* Green count circle (top-right). Inverts on the selected day. */ .corporate-embedded-surface .booking-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.25rem; border-radius: 9999px; background-color: var(--color-green-600); color: var(--color-white); font-size: 0.75rem; font-weight: 700; line-height: 1; } /* The badge span also carries .text-green-600 (a calendar-test hook). That utility sets color and is declared later at equal specificity, so on its own it would override the white count back to green-on-green (invisible). This compound selector (0,3,0) outranks the bare .text-green-600 (0,2,0) and keeps the count white on the green circle; the is-selected rule below (also 0,3,0, later in source) still wins for the selected day. */ .corporate-embedded-surface .booking-count-badge.text-green-600 { color: var(--color-white); } .corporate-embedded-surface .booking-day.is-selected .booking-count-badge { background-color: var(--color-white); color: var(--booking-indigo); } /* The .text-green-600 hook the calendar tests pin: the bare utility keeps the token green for non-badge consumers (e.g. covered-balance text); the compound rule above wins for the count circle. */ .corporate-embedded-surface .text-green-600 { color: var(--color-green-600); } /* Dark "N BOOKED" pill pinned to the cell bottom. Inverts on the selected day. */ .corporate-embedded-surface .booking-booked-pill { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; border-radius: 5px; padding: 2px 4px; background-color: var(--booking-ink); color: var(--color-white); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2px; } .corporate-embedded-surface .bg-black { background-color: #000; } .corporate-embedded-surface .booking-day.is-selected .booking-booked-pill { background-color: var(--color-white); color: var(--booking-ink); } /* ---- Legend ---- */ .corporate-embedded-surface .booking-legend { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; font-size: 0.75rem; color: var(--color-gray-600); } .corporate-embedded-surface .booking-legend__item { display: flex; align-items: center; gap: 0.5rem; } .corporate-embedded-surface .booking-empty { font-size: 0.875rem; color: var(--color-gray-500); } .corporate-embedded-surface .booking-loading { font-size: 0.875rem; color: var(--color-gray-400); } /* ---- Slots (day view) ---- */ .corporate-embedded-surface .booking-slots__heading { text-align: center; font-size: 1rem; font-weight: 700; color: var(--booking-ink); margin-bottom: 1rem; } .corporate-embedded-surface .booking-slots__grid { gap: 0.75rem; } /* Test-pinned hooks: the day-view wrapper is selected as [data-booking-times].grid.grid-cols-2. */ .corporate-embedded-surface .grid { display: grid; } .corporate-embedded-surface .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .corporate-embedded-surface .booking-slots__empty { margin-top: 1rem; font-size: 0.875rem; color: var(--color-gray-500); } .corporate-embedded-surface .booking-time-card { display: flex; align-items: baseline; gap: 0.5rem; width: 100%; border-radius: 8px; padding: 0.625rem 0.875rem; text-align: left; background-color: var(--booking-cell); border: 1px solid transparent; cursor: pointer; } .corporate-embedded-surface .booking-time-card:hover { border-color: var(--booking-ink); } .corporate-embedded-surface .booking-time-card:focus-visible { outline: 2px solid var(--booking-ink); outline-offset: 1px; } .corporate-embedded-surface .booking-time-card.is-selected { background-color: var(--booking-ink); } .corporate-embedded-surface .booking-time-card__time { font-size: 0.875rem; font-weight: 700; color: var(--booking-ink); } .corporate-embedded-surface .booking-time-card__provider { font-size: 0.875rem; color: var(--color-gray-500); } .corporate-embedded-surface .booking-time-card.is-selected .booking-time-card__time, .corporate-embedded-surface .booking-time-card.is-selected .booking-time-card__provider { color: var(--color-white); } /* ---- Right details panel ---- */ .corporate-embedded-surface .booking-panel-right__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .corporate-embedded-surface .booking-panel-right__title { font-size: 1.5rem; font-weight: 700; color: var(--booking-ink); } .corporate-embedded-surface .booking-category-tag { flex: none; display: inline-flex; align-items: center; border-radius: 6px; padding: 8px 10px; background-color: var(--booking-tag-bg); border: 1px solid var(--booking-tag-border); color: var(--booking-tag-ink); font-size: 0.8125rem; font-weight: 600; } .corporate-embedded-surface .booking-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; } .corporate-embedded-surface .booking-detail__label { font-size: 0.875rem; font-weight: 700; color: var(--booking-ink); } .corporate-embedded-surface .booking-detail__value { margin-top: 0.25rem; font-size: 0.875rem; color: var(--color-gray-600); } .corporate-embedded-surface .booking-notes { margin-top: 1.25rem; } .corporate-embedded-surface .booking-notes__heading { font-size: 0.875rem; font-weight: 700; color: var(--booking-ink); } .corporate-embedded-surface .booking-notes__body { margin-top: 0.375rem; font-size: 0.875rem; color: var(--color-gray-600); white-space: pre-line; } .corporate-embedded-surface .booking-divider { margin: 1.25rem 0; border: 0; border-top: 1px solid var(--booking-divider); } .corporate-embedded-surface .booking-selected__heading { font-size: 0.875rem; font-weight: 700; color: var(--booking-ink); } .corporate-embedded-surface .booking-selected__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.75rem; } .corporate-embedded-surface .booking-selected__label { font-size: 0.875rem; font-weight: 700; color: var(--booking-ink); } .corporate-embedded-surface .booking-selected__value { margin-top: 0.25rem; font-size: 1.5rem; font-weight: 700; color: var(--booking-ink); } .corporate-embedded-surface .booking-selected__value.is-unset { opacity: 0.3; font-weight: 400; } /* ---- Offering selector / setup notice ---- */ .corporate-embedded-surface .booking-field-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--booking-ink); } .corporate-embedded-surface .booking-select { margin-top: 0.25rem; display: block; width: 100%; border-radius: 8px; border: 1px solid var(--color-gray-300); font-size: 0.875rem; padding: 0.5rem 0.625rem; } .corporate-embedded-surface .booking-setup-notice { border-radius: 10px; border: 1px solid var(--color-yellow-200); background-color: var(--color-yellow-50); padding: 1.5rem 1rem; font-size: 0.875rem; color: var(--color-yellow-800); } /* ---- Member balance card (bottom, full width) ---- */ .corporate-embedded-surface .booking-balance { background-color: var(--color-white); border: 1px solid var(--booking-card-border); border-radius: var(--booking-card-radius); box-shadow: var(--booking-card-shadow); padding: 1.5rem; } .corporate-embedded-surface .booking-balance__heading { font-size: 1.25rem; font-weight: 700; color: var(--booking-ink); } .corporate-embedded-surface .booking-balance__covered { margin-top: 0.75rem; display: inline-flex; align-items: center; border-radius: 9999px; background-color: var(--color-green-50); padding: 0.375rem 0.875rem; font-size: 0.875rem; font-weight: 600; color: var(--color-green-700); } .corporate-embedded-surface .booking-balance__flow { margin-top: 1rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; } .corporate-embedded-surface .booking-balance__box { background-color: var(--booking-page-bg); border-radius: 8px; padding: 1rem 1.25rem; } .corporate-embedded-surface .booking-balance__box-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .corporate-embedded-surface .booking-balance__box-label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--booking-ink); } .corporate-embedded-surface .booking-balance__info { color: var(--color-gray-400); } .corporate-embedded-surface .booking-balance__box-figure { text-align: right; } .corporate-embedded-surface .booking-balance__box-caption { display: block; font-size: 0.8125rem; color: var(--color-gray-600); } .corporate-embedded-surface .booking-balance__box-amount { display: block; font-size: 1.125rem; font-weight: 700; color: var(--booking-ink); } .corporate-embedded-surface .booking-balance__cost-static { font-weight: 700; color: var(--booking-ink); } .corporate-embedded-surface .booking-balance__cost-input { width: 6rem; border-radius: 6px; border: 1px solid var(--color-gray-300); background-color: var(--color-white); font-size: 0.8125rem; padding: 0.25rem 0.5rem; } .corporate-embedded-surface .booking-balance__arrow { font-size: 1.25rem; color: var(--color-gray-500); } .corporate-embedded-surface .booking-balance__bar { margin-top: 0.75rem; height: 0.5rem; width: 100%; overflow: hidden; border-radius: 9999px; background-color: var(--booking-cell); } .corporate-embedded-surface .booking-balance__bar-fill { height: 100%; border-radius: 9999px; background-color: var(--booking-ink); } .corporate-embedded-surface .booking-balance__warning { margin-top: 0.75rem; border-radius: 8px; background-color: var(--color-red-50); padding: 0.5rem 0.875rem; font-size: 0.875rem; color: var(--color-red-700); } .corporate-embedded-surface .booking-balance__empty { margin-top: 0.5rem; font-size: 0.875rem; color: var(--color-gray-500); } @media (max-width: 640px) { .corporate-embedded-surface .booking-balance__flow { grid-template-columns: 1fr; } .corporate-embedded-surface .booking-balance__arrow { transform: rotate(90deg); justify-self: center; } } /* ---- Overlap-confirm modal ---- */ .corporate-embedded-surface .booking-modal__overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; background-color: rgba(0, 0, 0, 0.4); } .corporate-embedded-surface .booking-modal__dialog { width: 100%; max-width: 28rem; border-radius: 10px; background-color: var(--color-white); padding: 1.5rem; box-shadow: var(--booking-card-shadow); } .corporate-embedded-surface .booking-modal__title { font-size: 1.125rem; font-weight: 700; color: var(--booking-ink); } .corporate-embedded-surface .booking-modal__body { margin-top: 0.5rem; font-size: 0.875rem; color: var(--color-gray-600); } .corporate-embedded-surface .booking-modal__actions { margin-top: 1.25rem; display: flex; justify-content: flex-end; gap: 0.5rem; } /* Mobile: collapse the day-view slot grid to a single column (mirrors the balance flow's responsive rule). The class hook lets this target a real selector instead of the test-pinned .grid-cols-2 utility. */ @media (max-width: 640px) { .corporate-embedded-surface .booking-slots__grid { grid-template-columns: minmax(0, 1fr); } } /* ---- Provider picker (Select Provider tab) ---- A vertical list of full-width cards reusing the slot-card look: the resting state is the gray --booking-cell card; the selected (aria-pressed) state inverts to --booking-ink + white, matching .booking-time-card.is-selected. */ .corporate-embedded-surface .booking-providers { display: flex; flex-direction: column; gap: 0.5rem; } .corporate-embedded-surface .booking-provider-option { display: block; width: 100%; border-radius: 8px; padding: 0.625rem 0.875rem; text-align: left; font-size: 0.875rem; font-weight: 700; background-color: var(--booking-cell); border: 1px solid transparent; color: var(--booking-ink); cursor: pointer; } .corporate-embedded-surface .booking-provider-option:hover { border-color: var(--booking-ink); } .corporate-embedded-surface .booking-provider-option:focus-visible { outline: 2px solid var(--booking-ink); outline-offset: 1px; } .corporate-embedded-surface .booking-provider-option.is-selected, .corporate-embedded-surface .booking-provider-option[aria-pressed="true"] { background-color: var(--booking-ink); color: var(--color-white); } /* ---- Tab completion check ---- A small inline check next to the tab label, shown once that tab's step is complete (a date picked / a provider chosen). Hidden via the [hidden] guard. */ .corporate-embedded-surface .booking-tab__check { display: inline-flex; font-size: 0.75rem; line-height: 1; } /* Toggle guards (re-emitted): the display utilities in THIS section (.grid) share the same specificity as a scoped .hidden rule, so without re-declaring the hide semantics at this section's tail they would land below the file's previous last-wins guard and re-defeat hide-semantics for any JS-toggled element inside the booking shell (e.g. the overlap-confirm modal's hidden overlay). Restores Tailwind's canonical last-wins ordering. */ .corporate-embedded-surface .hidden { display: none; } .corporate-embedded-surface [hidden]:where(:not([hidden="until-found"])) { display: none !important; } /* ==== end Booking calendar (Step 8) ==== */ /* ==== Availability editor (Scheduling Engine) — generated from the app Tailwind theme; keep in sync with the component class lists ==== */ /* Source of truth: app/components/corporate/availability/*.{html.erb,rb} + app/views/corporate/availability/{show,_window_form,_exception_form}.html.erb. The availability editor is an Avo-embedded surface (show.html.erb wraps its root in .corporate-embedded-surface), so it can only reach utilities that exist as literal selectors here — Avo pages do NOT load the app Tailwind build (corporate-surfaces.md §3/§3a). Nearly every utility the editor uses already resolves from the Step 8 booking section, the Commit 6/7/8 builder sections, and the app theme; this section emits ONLY the genuine gaps. The builder-* theme tokens, the focus/hover ring states, the modal-overlay escape, .text-builder-* / .text-green-600, and the base spacing/flex/grid utilities are all already present and are intentionally NOT re-emitted. The trailing .hidden / [hidden] guards stay LAST so the JS-toggled window/ exception modals and inline edit forms keep their hide semantics. */ /* Token gap: --container-5xl backs the editor shell's `max-w-5xl`; every other --color-builder-* / --container-* token the editor references is already declared earlier in the file, so only this one is re-declared here. */ .corporate-embedded-surface { --container-5xl: 64rem; } /* ---- Layout / sizing gaps ---- */ .corporate-embedded-surface .max-w-5xl { max-width: var(--container-5xl); } .corporate-embedded-surface :where(.space-y-6 > :not(:last-child)) { margin-bottom: calc(var(--spacing) * 6); } .corporate-embedded-surface .pt-2 { padding-top: calc(var(--spacing) * 2); } .corporate-embedded-surface .px-1\.5 { padding-inline: calc(var(--spacing) * 1.5); } /* The exceptions-calendar day cell — the only arbitrary size the editor uses; the component class string `min-h-[3rem]` is a frozen in-content hook. */ .corporate-embedded-surface .min-h-\[3rem\] { min-height: 3rem; } /* The window/exception modal overlay scrim. Matches the booking shell's raw rgba overlay convention (no color-mix needed for a black scrim). */ .corporate-embedded-surface .bg-black\/50 { background-color: rgba(0, 0, 0, 0.5); } /* ---- Interaction-state gaps ---- */ .corporate-embedded-surface .hover\:no-underline:hover { text-decoration-line: none; } .corporate-embedded-surface .hover\:text-builder-primary:hover { color: var(--color-builder-primary); } .corporate-embedded-surface .hover\:bg-builder-danger-surface:hover { background-color: var(--color-builder-danger-surface); } /* ---- Responsive gaps (mobile-first; min-width media queries) ---- The week grid is grid-cols-1 → sm:grid-cols-2 → lg:grid-cols-7; the header stacks on mobile and splits sm: and up. The base (grid-cols-1, flex-col, sm:flex-row, sm:px-6, lg:px-8) already resolve; only these variants are new. These media blocks are bracketed inside THIS section so the scoping guard descends into them. */ @media (min-width: 40rem) { .corporate-embedded-surface .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .corporate-embedded-surface .sm\:items-start { align-items: flex-start; } .corporate-embedded-surface .sm\:justify-between { justify-content: space-between; } } @media (min-width: 64rem) { .corporate-embedded-surface .lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } } /* ---- Exceptions calendar (mirrors the Book Session calendar, Step 8) ---- Same spacious month-grid look: a 3-month nav (adjacent names + chevrons), a gray uppercase weekday row, rounded filled day tiles (day number top-left, marker chip top-right). Literal #333 / #f2f2f2 mirror the booking surface's --booking-ink / --booking-cell, which are scoped to .booking-shell and so do NOT resolve on this page. */ .corporate-embedded-surface .availability-monthnav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .corporate-embedded-surface .availability-monthnav__side { display: inline-flex; align-items: center; gap: 0.375rem; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem; font-weight: 600; text-decoration: none; color: var(--color-gray-500); } .corporate-embedded-surface .availability-monthnav__side:hover { color: #333; } .corporate-embedded-surface .availability-monthnav__side:focus-visible { outline: 2px solid #333; outline-offset: 2px; } .corporate-embedded-surface .availability-monthnav__chevron { font-size: 1rem; line-height: 1; } .corporate-embedded-surface .availability-monthnav__current { text-transform: uppercase; font-size: 0.875rem; font-weight: 700; color: #333; } .corporate-embedded-surface .availability-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; } .corporate-embedded-surface .availability-grid--weekdays { padding-bottom: 0.5rem; } .corporate-embedded-surface .availability-weekday { text-align: center; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--color-gray-500); } .corporate-embedded-surface .availability-cal-day { position: relative; display: flex; flex-direction: column; gap: 0.25rem; min-height: 4.25rem; border-radius: 8px; padding: 0.5rem; text-align: left; background-color: #f2f2f2; border: 1px solid transparent; } .corporate-embedded-surface .availability-cal-day--addable { cursor: pointer; } .corporate-embedded-surface .availability-cal-day--addable:hover { border-color: #333; } .corporate-embedded-surface .availability-cal-day--addable:focus-visible { outline: 2px solid #333; outline-offset: 1px; } .corporate-embedded-surface .availability-cal-day__header { display: flex; align-items: flex-start; justify-content: space-between; } .corporate-embedded-surface .availability-cal-day__number { font-size: 1rem; font-weight: 600; color: #333; } .corporate-embedded-surface .availability-cal-day__add { margin-top: auto; align-self: flex-start; font-size: 1.25rem; line-height: 1; color: var(--color-gray-400); } .corporate-embedded-surface .availability-cal-day--addable:hover .availability-cal-day__add { color: #333; } /* Marker chip (top-right), echoing the booking count circle but colored by kind: red ✕ for closed (subtracts), green ＋ for extra (adds). */ .corporate-embedded-surface .availability-marker { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.25rem; border-radius: 9999px; color: var(--color-white); font-size: 0.75rem; font-weight: 700; line-height: 1; } .corporate-embedded-surface .availability-marker--closed { background-color: var(--color-builder-danger); } .corporate-embedded-surface .availability-marker--extra { background-color: var(--color-green-600); } /* Remove control pinned to the cell bottom (the booking pill's slot). */ .corporate-embedded-surface .availability-remove { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; border: 0; cursor: pointer; border-radius: 5px; padding: 2px 4px; background-color: transparent; color: var(--color-builder-danger); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2px; } .corporate-embedded-surface .availability-remove:hover { background-color: var(--color-builder-danger-surface); } .corporate-embedded-surface .availability-remove:focus-visible { outline: 2px solid var(--color-builder-danger); outline-offset: 1px; } /* Edit + Remove share the cell's bottom row (the slot Remove used to claim alone via margin-top:auto). The wrapper now owns the push so both buttons sit flush. */ .corporate-embedded-surface .availability-cal-day__actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; } /* Edit control: same chip shape as Remove, primary-colored (it opens the modal). */ .corporate-embedded-surface .availability-edit { display: inline-flex; align-items: center; border: 0; cursor: pointer; border-radius: 5px; padding: 2px 4px; background-color: transparent; color: var(--color-builder-primary); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2px; } .corporate-embedded-surface .availability-edit:hover { background-color: var(--color-builder-surface-muted); } .corporate-embedded-surface .availability-edit:focus-visible { outline: 2px solid var(--color-builder-primary); outline-offset: 1px; } .corporate-embedded-surface .availability-calendar__empty { margin-bottom: 0.75rem; font-size: 0.875rem; color: var(--color-gray-500); } .corporate-embedded-surface .availability-legend { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; font-size: 0.75rem; color: var(--color-gray-600); } .corporate-embedded-surface .availability-legend__item { display: flex; align-items: center; gap: 0.5rem; } /* Toggle guards (re-emitted): the display utilities in THIS section (.space-y-6 uses no display; but the section sits below the file's previous last-wins guard, and the editor toggles .hidden on the modal overlays + the inline edit forms). Re-declaring the hide semantics at this section's tail restores Tailwind's canonical last-wins ordering so a `.hidden`/`[hidden]` modal cannot be defeated by an earlier display rule. Mirrors the Step 8 section's trailing guard exactly. */ .corporate-embedded-surface .hidden { display: none; } .corporate-embedded-surface [hidden]:where(:not([hidden="until-found"])) { display: none !important; } /* ==== end Availability editor ==== */