/* ===================================================================== Insure Solutions Hub — DRG (Del Rio Group) design system Rebranded from UCPM to DRG brand palette. Token names (--ucpm-*) are kept for compatibility with scoped component CSS; values now reflect the DRG brand per the Del Rio Group Design System. ===================================================================== */ /* =============== TOKENS (DRG design-system foundations) ============== Custom properties live at :root so they cascade to scoped CSS too. DRG uses a single-family type system (Hanken Grotesk) loaded from Google Fonts. */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&display=swap'); :root { /* Primary / brand — DRG Pine teal + Deep Sea navy */ --ucpm-brand-teal: #0C7773; /* DRG --teal-600 (Pine) */ --ucpm-nightshade-teal: #07534F; /* DRG --teal-700 */ --ucpm-deep-sea: #042A40; /* DRG --navy-800 (Deep Sea) */ --ucpm-aria-cloud: #B4E0DD; /* DRG --teal-200 */ /* Secondary — DRG navy + cool sage neutrals */ --ucpm-deep-navy: #042A40; /* DRG --navy-800 */ --ucpm-blue-thunder: #5C7B7D; /* DRG --sage-700 */ --ucpm-gray-tide: #7B989A; /* DRG --sage-600 */ --ucpm-vapor-cream: #F6F8F8; /* DRG --neutral-50 */ --ucpm-mint: #E7F4F3; /* DRG --teal-50 */ --ucpm-soft-sky: #CEDCDD; /* DRG --sage-300 */ /* Accent — DRG Terracotta rust + Mist sage */ --ucpm-accent-lime: #9DB7B9; /* DRG --sage-500 (Mist) — replaces lime */ --ucpm-accent-orange: #CE5A28; /* DRG --rust-600 (Terracotta) */ --ucpm-accent-yellow: #DE6F3A; /* DRG --rust-500 */ /* Extended ramp — DRG navy + cool neutral ramp */ --ucpm-ink-900: #021F2F; /* DRG --navy-900 */ --ucpm-ink-700: #042A40; /* DRG --navy-800 */ --ucpm-ink-500: #114E6B; /* DRG --navy-600 */ --ucpm-ink-400: #6C7B7D; /* DRG --neutral-500 */ --ucpm-ink-300: #97A6A8; /* DRG --neutral-400 */ --ucpm-ink-200: #C3CFCF; /* DRG --neutral-300 */ --ucpm-ink-100: #DDE5E5; /* DRG --neutral-200 */ --ucpm-ink-050: #EDF1F1; /* DRG --neutral-100 */ --ucpm-ink-025: #F6F8F8; /* DRG --neutral-50 */ /* Surfaces — DRG cool neutral ramp */ --ucpm-surface-app: #F6F8F8; /* DRG --neutral-50 */ --ucpm-surface-raised: #FFFFFF; --ucpm-surface-sunken: #EDF1F1; /* DRG --neutral-100 */ --ucpm-divider: #DDE5E5; /* DRG --neutral-200 */ --ucpm-divider-strong: #C3CFCF; /* DRG --neutral-300 */ /* Semantic — DRG status colors */ --ucpm-danger: #B23A22; /* DRG --status-error */ --ucpm-danger-soft: #FBE9E5; /* DRG --status-error-bg */ --ucpm-warning: #CE5A28; /* DRG --status-warning (Terracotta) */ --ucpm-warning-soft: #FBEDE4; /* DRG --status-warning-bg */ --ucpm-success: #0C7773; /* DRG --status-success (Pine) */ --ucpm-success-soft: #E7F4F3; /* DRG --status-success-bg */ --ucpm-info: #1C6585; /* DRG --status-info */ --ucpm-info-soft: #E7EFF3; /* DRG --status-info-bg */ /* Text */ --ucpm-fg1: #042A40; /* DRG --navy-800 */ --ucpm-fg2: #222B2D; /* DRG --neutral-800 */ --ucpm-fg3: #6C7B7D; /* DRG --neutral-500 */ --ucpm-fg-link: #0C7773; /* DRG --teal-600 */ --ucpm-fg-link-hover: #07534F; /* DRG --teal-700 */ /* Radii — DRG: 10px cards, 6px inputs */ --ucpm-radius-sm: 4px; --ucpm-radius-md: 6px; --ucpm-radius-lg: 10px; /* DRG --radius-card */ --ucpm-radius-xl: 16px; /* Shadows — DRG navy-tinted (rgba(4,42,64,...)), never gray */ --ucpm-shadow-tile: 0 1px 2px rgba(4,42,64,.06); --ucpm-shadow-card: 0 1px 3px rgba(4,42,64,.08), 0 1px 2px rgba(4,42,64,.05); --ucpm-shadow-float: 0 4px 12px rgba(4,42,64,.10), 0 2px 4px rgba(4,42,64,.06); /* Motion */ --ucpm-motion-fast: 120ms; --ucpm-motion-base: 200ms; --ucpm-ease: cubic-bezier(0.2, 0, 0.2, 1); /* Type — DRG single-family Hanken Grotesk */ --ucpm-font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --ucpm-font-display: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --ucpm-font-mono: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; /* SL Tax Filing source-scope tokens (#205) — consumed by SlTaxFiling.razor.css, AccountsTable.razor.css, and any future source-scope UI. The names are a contract across those files — do not rename. Values mirror the DRG palette. */ --ucpm-source-ucpm: var(--ucpm-brand-teal); --ucpm-source-ucpm-soft: #E7F4F3; /* DRG --teal-50 */ --ucpm-source-ucpm-ink: #07534F; /* DRG --teal-700 */ --ucpm-source-lenders: #5B5423; --ucpm-source-lenders-soft: #EDEBD9; --ucpm-source-lenders-ink: #3E3818; --ucpm-source-nxus: #506578; --ucpm-source-nxus-soft: #E4E8EB; --ucpm-source-nxus-ink: #37424C; --ucpm-source-all: var(--ucpm-deep-sea); } /* =============== SL SOURCE-SCOPE SWITCHER (#205, #242) ================= Source-scope segmented switcher (All / UCPM / Lenders). Shared by the main SL Tax Filing dashboard (SlTaxFiling.razor) and the Admin SL Tax Filing page (SlTaxFilingAdmin.razor, #242). Matches the `.seg` entity switcher in the sl-tax-filing.html design handoff: a white pill container whose options are fully-rounded buttons, the active one filled with its source color (white text), the inactive ones carrying a small color swatch dot. The markup keeps Bootstrap's .nav/.nav-tabs classes for the flex/list reset, so the global .ish-page .nav-tabs underline pattern is overridden here at higher specificity. Lives in global CSS (not a scoped .razor.css) so both pages share one definition. */ .sl-source-tabs { margin-bottom: 14px; } /* Per-source color, consumed by the active fill and the swatch dot */ .sl-source-tabs .sl-source-tabs__link--ucpm { --source-color: var(--ucpm-source-ucpm); } .sl-source-tabs .sl-source-tabs__link--lenders { --source-color: var(--ucpm-source-lenders); } .sl-source-tabs .sl-source-tabs__link--nxus { --source-color: var(--ucpm-source-nxus); } .sl-source-tabs .sl-source-tabs__link--all { --source-color: var(--ucpm-source-all); } .sl-source-tabs .sl-source-tabs__link--brokers { --source-color: var(--ucpm-source-all); } /* Pill container. NOTE: these selectors are prefixed with .ish-page to beat the global `.ish-page .nav-tabs` underline pattern (later in this file, equal base specificity). When these rules lived in a scoped *.razor.css the Blazor [b-xxx] attribute supplied the extra specificity; in global CSS we add .ish-page explicitly so the pill styling wins regardless of source order. */ .ish-page .sl-source-tabs .nav-tabs { display: inline-flex; gap: 0; padding: 3px; margin-bottom: 0; background: #fff; border: 1px solid var(--ucpm-divider); border-radius: 999px; box-shadow: 0 1px 2px rgba(4, 42, 64, .04); } .ish-page .sl-source-tabs .nav-tabs .nav-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; margin-bottom: 0; font-family: var(--ucpm-font-display); font-size: 13px; font-weight: 600; color: var(--ucpm-fg2); border: 0; border-radius: 999px; transition: background var(--ucpm-motion-fast), color var(--ucpm-motion-fast); } .ish-page .sl-source-tabs .nav-tabs .nav-link:hover:not(.active) { background: var(--ucpm-ink-025); color: var(--ucpm-deep-navy); } /* Filled active state — the source color owns the pill */ .ish-page .sl-source-tabs .nav-tabs .nav-link.active { background: var(--source-color, var(--ucpm-deep-sea)); color: #fff; border: 0; box-shadow: 0 1px 4px rgba(4, 42, 64, .18); } /* Swatch dot inside the UCPM / Lenders options (the All option uses an icon) */ .sl-source-tabs__swatch { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--source-color, var(--ucpm-fg3)); } .ish-page .sl-source-tabs .nav-tabs .nav-link.active .sl-source-tabs__swatch { background: rgba(255, 255, 255, .85); } .sl-source-tabs__link--all .bi { font-size: 12px; } /* =============== APP SHELL (sidebar + topbar) ====================== */ :root { --ish-sidebar-w: 225px; --ish-topbar-h: 66px; /* One shared beat for the rail collapse/expand. Width, content margin, every label, the brand padding and the footer all read this so they start AND finish together — the staggered timings (240ms width vs 120ms label fade vs 180ms content) are what read as a sudden "snap" mid-transition. */ --ish-nav-motion: .24s; /* Env banner height — 0 by default (Production / no banner). App.razor sets html.has-env-banner server-side (IWebHostEnvironment.IsNonProduction()) for any non-Production slot; EnvironmentBanner.razor renders the actual markup. Single source of truth: only this rule and the media query below ever set the px value — the banner's own CSS just reads var(--env-banner-h, 0px). */ --env-banner-h: 0px; } html.has-env-banner { --env-banner-h: 30px; } /* Expanded non-prod: the inline badge is the last item in the brand flex row and ran under the absolutely-positioned collapse toggle (which occupies the lane from calc(100% - 40px) to 100% - 12px), so hovering the sidebar painted the toggle over the DEV/STAGE text. Reserve the toggle's lane as brand padding. :not(.nav-is-rail) keeps this off the rail, where the badge moves to its own centered row and the rail rule zeroes brand padding. */ html.has-env-banner:not(.nav-is-rail) .ish-sidebar__brand { padding-right: 44px; } /* Collapsible sidebar rail — App.razor toggles `nav-is-rail` on ('auto' collapses below 1400px, or forced rail/expanded via the topbar toggle). The whole shell reads --ish-sidebar-w, so flipping it reflows the fixed sidebar, the fixed topbar (left) and the main content (margin-left) together. Kept global (not scoped) so it can hang off the ancestor; selectors are specific enough to beat the scoped sidebar defaults in NavMenu.razor.css. */ html.nav-is-rail { --ish-sidebar-w: 64px; --ish-env-badge-row-h: 0px; --ish-navtoggle-rail-offset: 0px; } /* Non-prod: the badge row sits in flow between the brand block and the toggle, so the toggle's rail offset has to clear it. Brand block ends at ~89px in rail mode (18px pad + ~54px lockup + 16px pad + 1px border), the row adds 26px → the toggle must start at ~115px, i.e. 80px + 38px. Change the row height and the offset together; they're the only two numbers in this relationship. */ html.nav-is-rail.has-env-banner { --ish-env-badge-row-h: 26px; --ish-navtoggle-rail-offset: 38px; } html.nav-is-rail .ish-sidebar__brand { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; } /* Non-prod rail: tighten the brand's bottom padding so the badge tucks directly under the logo mark instead of floating in the middle of the gap. */ html.nav-is-rail.has-env-banner .ish-sidebar__brand { padding-bottom: 6px; } /* Swap the wide "UCPM" lockup for the diamond-only mark so the rail shows just the diamond (descendant selectors keep these ahead of the scoped img rule). */ html.nav-is-rail .ish-sidebar__brand .ish-sidebar__brand-full { display: none; } html.nav-is-rail .ish-sidebar__brand .ish-sidebar__brand-mark { display: block; } /* Collapse the footer by height + fade (not display:none) so it eases out with the rail over the shared beat instead of disappearing in a single frame. */ html.nav-is-rail .ish-sidebar__footer { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-top-color: transparent; } /* Labels collapse by shrinking + fading (base transitions are in NavMenu.razor.css) so open/close animates with the sidebar width instead of snapping (display:none). */ html.nav-is-rail .ish-sidebar__brand-title { max-width: 0; opacity: 0; } /* In rail mode: hide the inline badge (brand text is gone) and show the centered badge row under the logo mark instead. The row has a fixed height so the absolutely-positioned toggle below it can be offset by a known amount (--ish-navtoggle-rail-offset) — flow can't push an absolute element. */ html.nav-is-rail .env-stage-badge--inline { display: none; } html.nav-is-rail .ish-sidebar__env-badge-row { display: flex; align-items: center; height: var(--ish-env-badge-row-h); padding: 0; } html.nav-is-rail .ish-sidebar__env-badge-row .env-stage-badge { font-size: 8px; padding: 1px 6px; } html.nav-is-rail .ish-sidebar__section-label { max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 8px; opacity: 0; } html.nav-is-rail .ish-sidebar__nav { padding: 0 8px; } html.nav-is-rail .ish-sidebar__nav .ish-sidebar__item { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; } html.nav-is-rail .ish-sidebar__nav .ish-sidebar__item > span { max-width: 0; opacity: 0; } /* Active accent: in the rail the item sits at the 8px nav padding, so pull the bar out to the sidebar's left edge (x=0) — a full 3px bar like the expanded nav, instead of the ~1px clipped sliver it became under overflow-x:hidden. */ html.nav-is-rail .ish-sidebar__nav .ish-sidebar__item.active::before, html.nav-is-rail .ish-sidebar__nav .ish-sidebar__item.is-active::before { left: -8px; } /* A1 toggle when collapsed: slide (don't jump) to a centered row just below the brand mark, always visible (vs. reveal-on-hover when expanded). Stays absolute so top/left animate; the first section reserves that row so the nav clears it. --ish-navtoggle-rail-offset is 0 in prod and clears the env badge row in non-prod. */ html.nav-is-rail .ish-navtoggle { top: calc(80px + var(--ish-navtoggle-rail-offset, 0px)); left: calc((var(--ish-sidebar-w) - 28px) / 2); opacity: 1; background: rgba(255,255,255,.05); } /* Reserve the toggle's row so nav items clear it. Selected as "the section right after the toggle" rather than :first-of-type — the non-prod env badge row is also a div, so :first-of-type silently stopped matching the section and the reserve switched off (nav items overlapped the toggle in non-prod only). Flat 40px, not 40px + offset: the badge row already pushes this section down in flow, so adding the offset here too would double-count it into dead whitespace. */ html.nav-is-rail .ish-navtoggle + .ish-sidebar__section { padding-top: 40px; } /* App shell migrated under Phase 3: - .ish-app + .ish-app__main → Components/Layout/MainLayout.razor.css - .ish-sidebar*, .ish-topbar* → Components/Layout/NavMenu.razor.css (.ish-sidebar__item uses ::deep because it's a class on , a Blazor framework component whose rendered doesn't carry the parent's scope attribute). */ /* ---------- Adjust .ish-page when inside the new shell ---------- */ .ish-app .ish-page { min-height: calc(100vh - var(--ish-topbar-h) - 40px - var(--env-banner-h, 0px)); } .ish-page { background: var(--ucpm-surface-app); font-family: var(--ucpm-font-sans); color: var(--ucpm-fg2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding: 24px 28px 45px; min-height: calc(100vh - 40px); } .ish-page h1, .ish-page h2, .ish-page h3, .ish-page h4, .ish-page h5, .ish-page h6 { font-family: var(--ucpm-font-display); color: var(--ucpm-fg1); margin: 0; font-weight: 600; letter-spacing: -.005em; } .ish-page a { color: var(--ucpm-fg-link); text-decoration: none; font-weight: 500; } .ish-page a:hover { color: var(--ucpm-fg-link-hover); } .ish-page .u-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .ish-page .u-mono { font-family: var(--ucpm-font-mono); } .ish-page .u-muted { color: var(--ucpm-fg3); } /* ---------- Page header ---------- */ .ish-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .ish-header__icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--ucpm-brand-teal); color: #fff; border-radius: var(--ucpm-radius-md); box-shadow: var(--ucpm-shadow-sm); font-size: 22px; flex-shrink: 0; } .ish-header__titles { flex: 1; min-width: 260px; } .ish-header__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ucpm-brand-teal); margin-bottom: 2px; } .ish-header__title { font-family: var(--ucpm-font-display); font-weight: 600; font-size: 26px; line-height: 1.2; color: var(--ucpm-fg1); letter-spacing: -.005em; } .ish-header__subtitle { font-size: 14.5px; color: var(--ucpm-fg2); margin-top: 4px; max-width: 70ch; } .ish-header__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* Right-aligned source-system slot on a page header (Insured Info). margin-left:auto pushes it opposite the titles; the eyebrow reuses .ish-header__eyebrow. */ .ish-header__source { margin-left: auto; text-align: right; } .ish-header__source .ish-source-badge { margin: 5px 0 0 auto; } /* Loading placeholder for the source badge — matches its filled-pill footprint. */ .ish-header__source .ish-skeleton--badge { display: inline-block; width: 96px; height: 29px; margin: 5px 0 0 auto; border-radius: 999px; } /* ---------- source badge (#205, filled) ---------- */ /* Filled source pill matching the SL Tax Filing switcher's active tab: source color owns the pill, white text, leading white dot. Used on page headers (Insured Info). The grid's soft-tint variant is `.ish-source-pill` scoped in AccountsTable.razor.css. */ .ish-source-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; font-family: var(--ucpm-font-display); font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; color: #fff; background: var(--source-color, var(--ucpm-deep-sea)); box-shadow: 0 1px 4px rgba(4, 42, 64, .18); } .ish-source-badge::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .85); } .ish-source-badge--ucpm { --source-color: var(--ucpm-source-ucpm); } .ish-source-badge--lenders { --source-color: var(--ucpm-source-lenders); } .ish-source-badge--nxus { --source-color: var(--ucpm-source-nxus); } .ish-source-badge--unknown { --source-color: var(--ucpm-fg3); } /* KPI cards (.ish-kpi*) live in Components/Pages/SlTaxFiling.razor.css — that page is their only consumer, so they were colocated under Phase 3. The general .ish-skeleton* shimmer below is still global because many components reuse it. */ /* Skeleton shimmer (used for KPI values + delta during data load) */ .ish-skeleton { display: block; background: linear-gradient(90deg, rgba(4, 42, 64, 0.06) 0%, rgba(4, 42, 64, 0.12) 50%, rgba(4, 42, 64, 0.06) 100%); background-size: 200% 100%; animation: ish-shimmer 1.4s ease-in-out infinite; border-radius: 6px; color: transparent; } /* Skeleton placeholders sit inside .ish-kpi which is `display: flex; flex-direction: column; gap: 4px`. Heights below match the rendered .ish-kpi__value (32px font × 1.1 line-height ≈ 36px) and .ish-kpi__delta (13px font × 1.4 line-height ≈ 18px). NO margin-top — the parent's flex gap handles spacing identically for both loading and loaded states. */ .ish-skeleton--value { height: 36px; width: 110px; margin: 0; border-radius: 6px; } .ish-skeleton--delta { height: 18px; width: 70%; min-width: 150px; margin: 0; border-radius: 4px; } .ish-skeleton--pill { /* Sized for tab-badge counts up to 4 digits (e.g. "9999"). Wider variants scope themselves under their parent (e.g. .ish-skeleton-ff). */ display: inline-block; height: 16px; width: 44px; border-radius: 999px; vertical-align: -2px; } @keyframes ish-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ---------- Card ---------- */ .ish-card { background: #FFF; border: 1px solid var(--ucpm-divider); border-radius: var(--ucpm-radius-lg); box-shadow: var(--ucpm-shadow-tile); overflow: hidden; margin-bottom: 16px; } /* ---------- Buttons (design tokens applied to Bootstrap classes) ---------- */ .ish-page .btn { font-family: var(--ucpm-font-sans); font-weight: 600; font-size: 14.5px; letter-spacing: .01em; border-radius: var(--ucpm-radius-sm); padding: 7px 14px; transition: background var(--ucpm-motion-fast), border-color var(--ucpm-motion-fast), box-shadow var(--ucpm-motion-fast); display: inline-flex; align-items: center; gap: 6px; line-height: 1.3; } .ish-page .btn-sm { padding: 5px 10px; font-size: 13px; } .ish-page .btn-primary, .ish-page .btn-ucpm-main { background: var(--ucpm-deep-navy); border-color: var(--ucpm-deep-navy); color: #fff; } .ish-page .btn-primary:hover, .ish-page .btn-primary:focus, .ish-page .btn-primary.focus, .ish-page .btn-ucpm-main:hover, .ish-page .btn-ucpm-main:focus, .ish-page .btn-ucpm-main.focus { /* navy → teal on hover. Matches the SET button (.filing-due-edit__savebtn) pattern so every primary navy CTA flips to the brand-teal accent on hover — uniform branded feedback across the app. */ background: var(--ucpm-brand-teal); border-color: var(--ucpm-brand-teal); color: #fff; } .ish-page .btn-primary:disabled, .ish-page .btn-ucpm-main:disabled { background: var(--ucpm-deep-navy); border-color: var(--ucpm-deep-navy); color: #fff; opacity: .6; } .ish-page .btn-success { background: var(--ucpm-brand-teal); border-color: var(--ucpm-brand-teal); color: #fff; } .ish-page .btn-success:hover { background: #07534F; border-color: #07534F; color: #fff; } .ish-page .btn-warning { background: var(--ucpm-warning); border-color: var(--ucpm-warning); color: #fff; } .ish-page .btn-warning:hover { background: #A2421C; border-color: #A2421C; color: #fff; } .ish-page .btn-outline-primary { color: var(--ucpm-deep-navy); border-color: var(--ucpm-deep-navy); background: transparent; } .ish-page .btn-outline-primary:hover, .ish-page .btn-outline-primary.active, .ish-page .btn-check:checked + .btn-outline-primary { background: var(--ucpm-deep-navy); border-color: var(--ucpm-deep-navy); color: #fff; } .ish-page .btn-outline-success { color: var(--ucpm-brand-teal); border-color: var(--ucpm-brand-teal); background: transparent; } .ish-page .btn-outline-success:hover, .ish-page .btn-outline-success.active { background: var(--ucpm-brand-teal); border-color: var(--ucpm-brand-teal); color: #fff; } .ish-page .btn-outline-secondary { color: var(--ucpm-fg2); border-color: var(--ucpm-divider-strong); background: #fff; } .ish-page .btn-outline-secondary:hover { background: var(--ucpm-surface-sunken); border-color: var(--ucpm-divider-strong); color: var(--ucpm-fg1); } /* Pill-style button group used for filters */ .ish-page .btn-group .btn-outline-primary { border-radius: 999px !important; margin-right: 4px; font-size: 13px; padding: 5px 14px; } .ish-page .btn-group { gap: 4px; flex-wrap: wrap; } /* ---------- Inputs / filter bar ---------- */ .ish-page .input-group-text { background: var(--ucpm-surface-sunken); border-color: var(--ucpm-divider); color: var(--ucpm-fg3); font-size: 14px; font-weight: 600; letter-spacing: .02em; text-transform: none; } .ish-page .form-control, .ish-page .form-select { border-color: var(--ucpm-divider); font-size: 15px; color: var(--ucpm-fg2); border-radius: var(--ucpm-radius-sm); } .ish-page .form-control:focus, .ish-page .form-select:focus { border-color: var(--ucpm-brand-teal); box-shadow: 0 0 0 3px rgba(18,139,134,0.35); } .ish-page .input-group .form-control, .ish-page .input-group .form-select { border-left: 0; } /* ---------- Tabs (Bootstrap .nav-tabs) ---------- */ .ish-page .nav-tabs { border-bottom: 1px solid var(--ucpm-divider); gap: 2px; padding: 0 4px; background: #fff; border-top-left-radius: var(--ucpm-radius-lg); border-top-right-radius: var(--ucpm-radius-lg); } .ish-page .nav-tabs .nav-link { border: 0; color: var(--ucpm-fg2); padding: 12px 18px; font-size: 14.5px; font-weight: 500; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 8px; } .ish-page .nav-tabs .nav-link:hover { color: var(--ucpm-fg1); border-bottom-color: var(--ucpm-divider-strong); } .ish-page .nav-tabs .nav-link.active { color: var(--ucpm-brand-teal); background: transparent; border-bottom: 2px solid var(--ucpm-brand-teal); font-weight: 600; } .ish-page .tab-content, .ish-page .bordered-tabs { background: #fff; border: 1px solid var(--ucpm-divider); border-top: 0; border-bottom-left-radius: var(--ucpm-radius-lg); border-bottom-right-radius: var(--ucpm-radius-lg); } /* ---------- Table polish (Bootstrap .table) ---------- */ .ish-page .table { font-family: var(--ucpm-font-sans); font-size: 15.5px; color: var(--ucpm-fg1); margin: 0; --bs-table-hover-bg: var(--ucpm-ink-025); } /* site.min.css forces `.table td, .table th { font-size: 0.85rem !important }` which shrinks every cell. Override at the same `!important` weight inside .ish-page so our 15.5px body / 14px header sizes actually apply. */ .ish-page .table td, .ish-page .table tbody tr td { font-size: 15.5px !important; } /* site.css uses `table thead tr th { ...!important }` — match specificity + !important */ .ish-page table thead tr th, .ish-page .table > thead > tr > th { background: var(--ucpm-surface-sunken) !important; background-color: var(--ucpm-surface-sunken) !important; color: var(--ucpm-fg2) !important; text-transform: uppercase !important; font-size: 14px !important; letter-spacing: .05em !important; font-weight: 700 !important; padding: 12px 14px !important; border-bottom: 1px solid var(--ucpm-divider-strong) !important; border-top: 0 !important; white-space: nowrap; } /* Header sortable text rendered inside / by BSDataTable should inherit the th color, not the global teal link color. Sort highlight comes from .is-sorted / [aria-sort] on the th itself. */ .ish-page table thead tr th a, .ish-page table thead tr th a:hover, .ish-page .table > thead > tr > th a, .ish-page .table > thead > tr > th a:hover { color: inherit !important; font-weight: inherit !important; text-decoration: none !important; } /* Sortable column headers (My Tasks .ish-th-sort + BSDataTable's clickable thead) */ .ish-page table thead tr th.ish-th-sort, .ish-page .table > thead > tr > th.ish-th-sort, .ish-page table thead tr th[role="columnheader"], .ish-page .bs-table thead tr th { cursor: pointer; user-select: none; transition: background var(--ucpm-motion-fast), color var(--ucpm-motion-fast); } .ish-page table thead tr th.ish-th-sort:hover, .ish-page .table > thead > tr > th.ish-th-sort:hover, .ish-page table thead tr th[role="columnheader"]:hover, .ish-page .bs-table thead tr th:hover { background: var(--ucpm-ink-100) !important; background-color: var(--ucpm-ink-100) !important; color: var(--ucpm-deep-navy) !important; } .ish-page .ish-th-sort .bi, .ish-page table thead tr th .bi-arrow-down-up, .ish-page table thead tr th .bi-sort-down, .ish-page table thead tr th .bi-sort-up { font-size: 11px; margin-left: 4px; color: var(--ucpm-ink-300); vertical-align: 0; } /* AccountsTable column widths: Type and State don't need much room */ .ish-page .accounts-table-wrap table > thead > tr > th:nth-child(3), .ish-page .accounts-table-wrap table > tbody > tr > td:nth-child(3) { width: 90px; } .ish-page .accounts-table-wrap table > thead > tr > th:nth-child(8), .ish-page .accounts-table-wrap table > tbody > tr > td:nth-child(8) { width: 80px; } .ish-page table thead tr th.is-sorted, .ish-page .table > thead > tr > th.is-sorted { color: var(--ucpm-brand-teal) !important; } .ish-page .is-sorted .bi { color: var(--ucpm-brand-teal); } /* BSDataTable's active sort highlight */ .ish-page .bs-table thead tr th.sorted, .ish-page .bs-table thead tr th.bs-sorted, .ish-page table thead tr th[aria-sort="ascending"], .ish-page table thead tr th[aria-sort="descending"] { color: var(--ucpm-brand-teal) !important; } .ish-page table thead tr th[aria-sort="ascending"] .bi, .ish-page table thead tr th[aria-sort="descending"] .bi { color: var(--ucpm-brand-teal) !important; } .ish-page .table > tbody > tr > td { padding: 12px 14px; border-bottom: 1px solid var(--ucpm-divider); vertical-align: middle; border-top: 0; } .ish-page .table > tbody > tr:last-child > td { border-bottom: 0; } .ish-page .table > tbody > tr:hover > td { background: var(--ucpm-ink-025); } .ish-page .table a { color: var(--ucpm-brand-teal); font-weight: 600; } .ish-page .table a:hover { color: var(--ucpm-fg-link-hover); text-decoration: underline; } /* ---------- Badges (Bootstrap .badge) ---------- */ .ish-page .badge { font-family: var(--ucpm-font-sans); font-weight: 600; font-size: 12px; letter-spacing: .02em; padding: 4px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; } .ish-page .badge.bg-primary { background: var(--ucpm-info-soft) !important; color: var(--ucpm-info) !important; } .ish-page .badge.bg-secondary { background: var(--ucpm-surface-sunken) !important; color: var(--ucpm-fg2) !important; } .ish-page .badge.bg-success { background: var(--ucpm-success-soft) !important; color: var(--ucpm-brand-teal) !important; } .ish-page .badge.bg-warning { background: var(--ucpm-warning-soft) !important; color: var(--ucpm-warning) !important; } .ish-page .badge.bg-danger { background: var(--ucpm-danger-soft) !important; color: var(--ucpm-danger) !important; } .ish-page .badge.bg-info { background: var(--ucpm-info-soft) !important; color: var(--ucpm-info) !important; } /* Extra design-system badges for new markup. Matches the UCPM design-system `.badge-x` token: 4px box radius (not a full pill), 11px/600 type, snug 2px 8px padding, and the deep nightshade teal for the teal variant (higher contrast on the mint fill). */ .ish-badge { font-family: var(--ucpm-font-sans); font-weight: 600; font-size: 11px; line-height: 1.5; padding: 2px 8px; border-radius: var(--ucpm-radius-sm); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; background: var(--ucpm-surface-sunken); color: var(--ucpm-fg2); } .ish-badge--teal { background: var(--ucpm-success-soft); color: var(--ucpm-nightshade-teal); } .ish-badge--warning { background: var(--ucpm-warning-soft); color: var(--ucpm-warning); } .ish-badge--danger { background: var(--ucpm-danger-soft); color: var(--ucpm-danger); } .ish-badge--muted { background: var(--ucpm-surface-sunken); color: var(--ucpm-fg2); } .ish-badge--info { background: var(--ucpm-info-soft); color: var(--ucpm-info); } /* "+N more" role toggle — a badge that happens to be a