/* 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: 860px; } .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-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; } .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: #007AFF; 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 #007AFF; 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: #007AFF; box-shadow: 0 0 0 1px rgba(0, 122, 255, 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; } } /* ======================================== * 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: #007AFF; 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 #007AFF; 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: #007AFF; box-shadow: 0 0 0 1px rgba(0, 122, 255, 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: #5b5fed; } .text-builder-text { color: #1a1d2b; } .text-builder-muted { color: #5a5f7a; } .text-builder-subtle { color: #9298b0; } .text-builder-primary { color: #5b5fed; } .bg-builder-primary { background-color: #5b5fed; } .bg-builder-primary\/10 { background-color: rgba(91, 95, 237, 0.1); } .hover\:bg-builder-primary\/15:hover { background-color: rgba(91, 95, 237, 0.15); } .border-builder-primary\/20 { border-color: rgba(91, 95, 237, 0.2); } .border-builder-primary\/30 { border-color: rgba(91, 95, 237, 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; } .hover\:bg-builder-surface:hover { background-color: #f8f9fc; } .hover\:text-builder-text:hover { color: #1a1d2b; } .focus\:border-builder-primary:focus { border-color: #5b5fed; } .focus\:ring-builder-primary:focus, .focus-visible\:ring-builder-primary:focus-visible { --tw-ring-color: #5b5fed; } /* ======================================== * 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: #007aff; 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 #007aff; color: #007aff; 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(0, 122, 255, 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: #007aff; box-shadow: 0 0 0 2px rgba(0, 122, 255, 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: #007aff; box-shadow: 0 0 0 2px rgba(0, 122, 255, 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: #007aff; } .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 #007aff; 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: #007AFF !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 #007AFF; 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: #007AFF; 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: #007AFF; box-shadow: 0 0 0 2px rgba(0, 122, 255, 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; } /* 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 #007AFF; 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; } }