/* ============================================================================ ifmg-admin.css — Cars Compliance Admin, CMS-aligned foundation (Increment 1) WHAT THIS IS A deliberately limited port of the IFMG CMS Admin design system so the Cars Compliance operating console reads as a native module of the CMS platform. Cars Compliance OWNS this copy; its values/structure mirror the canonical CMS Admin at this point in time. Every block cites the CMS file it derives from. This is NOT a wholesale copy of any CMS stylesheet. CANONICAL SOURCES (read-only reference in the CMS repo): brand.css src/Ifmg.Cms.Admin/wwwroot/css/brand.css (tokens; :root L1-25) aeo-health.css src/Ifmg.Cms.Admin/wwwroot/css/aeo-health.css (status tokens/chips/notes) admin-shell.css src/Ifmg.Cms.Admin/wwwroot/css/admin-shell.css (shell, pagehead, table, field, empty) admin-chrome.css src/Ifmg.Cms.Admin/wwwroot/css/admin-chrome.css (navbar/badge tokens consumed here) site.css src/Ifmg.Cms.Admin/wwwroot/css/site.css (base font size, .btn-primary) LOAD ORDER (see _AdminLayout.cshtml ): inter.css -> bootstrap.min.css -> bootstrap-icons.min.css -> admin.css (LEGACY, transitional) -> THIS FILE (last, so the shell wins). COLLISION POLICY (transitional, until page bodies migrate in later increments): * This file overrides ONLY the global `body` font, the `html` font-size, and the Bootstrap `.btn-primary` tone. * It NEVER redefines the legacy page-body classes (.card/.btn/.badge/table/ label/input/.grid/.login-*). Those keep being styled by admin.css so every un-migrated page renders exactly as in the baseline. * The shell uses only .ifmg-* / .aeo-* / .container-fluid classes that admin.css does not define, so admin.css cannot override the shell. ============================================================================ */ /* ---- Design tokens — from brand.css :root (L1-25) ------------------------- */ :root{ --ifmg-blue:#1B75BC; --ifmg-blue-dark:#155E96; --ifmg-blue-logo:#3FA9DC; --ifmg-orange:#F58220; --ifmg-orange-dark:#D96E12; --ifmg-orange-text:#9C4F0E; --ifmg-ink:#0F1720; --ifmg-ink-soft:#3A4A5A; --ifmg-muted:#5A6675; --ifmg-surface:#ffffff; --ifmg-bg:#EBEFF5; --ifmg-border:#E5E9EF; --ifmg-radius-sm:8px; --ifmg-radius:14px; --ifmg-radius-lg:20px; --ifmg-radius-full:999px; --ifmg-shadow-sm:0 1px 2px rgba(15,23,32,.04),0 1px 3px rgba(15,23,32,.06); --ifmg-shadow:0 4px 12px rgba(15,23,32,.06),0 2px 4px rgba(15,23,32,.04); --ifmg-shadow-lg:0 12px 40px rgba(15,23,32,.10),0 4px 10px rgba(15,23,32,.06); --ifmg-success:#1FA363; --ifmg-danger:#D0021B; } /* Status tones — from aeo-health.css :root (L20-28) */ :root{ --aeo-err-bg:color-mix(in srgb,var(--ifmg-danger) 11%,#fff); --aeo-err-line:color-mix(in srgb,var(--ifmg-danger) 45%,#fff); --aeo-err-fg:#a12718; --aeo-warn-bg:color-mix(in srgb,var(--ifmg-orange) 16%,#fff); --aeo-warn-line:color-mix(in srgb,var(--ifmg-orange) 55%,#fff); --aeo-warn-fg:var(--ifmg-orange-text); --aeo-ok-bg:#e6f4ec; --aeo-ok-fg:#1f7a47; } /* ---- Shell frame dims — from admin-shell.css :root (L11-15) --------------- */ :root{ --ifmg-sb-w:256px; --ifmg-sb-rail:64px; --ifmg-topbar-h:52px; } /* ---- Base typography — from site.css (html 14->16px) + Inter -------------- */ html{ font-size:14px; } @media (min-width:768px){ html{ font-size:16px; } } /* Global font override (deliberately beats legacy admin.css `body{font-family:system}`). */ body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; } /* ============================================================================ APPLICATION SHELL — from admin-shell.css (L17-132) + admin-chrome.css brand band. Cars Compliance always renders the shell (no NewNav feature flag), so these rules are scoped under .ifmg-shell exactly as in the CMS. ============================================================================ */ .ifmg-shell{ display:flex; align-items:stretch; min-height:100vh; } /* Sidebar (admin-shell.css L20-58) */ .ifmg-sb{ flex:0 0 var(--ifmg-sb-w); width:var(--ifmg-sb-w); position:sticky; top:0; align-self:flex-start; height:100vh; display:flex; flex-direction:column; background:#fff; border-right:1px solid var(--ifmg-border); box-shadow:var(--ifmg-shadow-sm); z-index:1040; transition:width .15s ease, flex-basis .15s ease, left .2s ease; } /* Brand lockup — brand-blue band (admin-shell.css L37-47) */ .ifmg-sb__brand{ display:flex; align-items:center; gap:.5rem; height:var(--ifmg-topbar-h); padding:0 .9rem; background:var(--ifmg-blue); color:#fff; flex:0 0 auto; } .ifmg-sb__brand a{ display:inline-flex; align-items:center; gap:.5rem; color:#fff; font-weight:700; letter-spacing:-.01em; text-decoration:none; min-width:0; } .ifmg-sb__brand img{ height:24px; width:auto; display:block; flex:0 0 auto; } /* Product lockup: IFMG arrow + two-line "Cars Compliance / Operating Console" — mirrors the IFMG ecosystem (the arrow says "you're inside IFMG", the product name says which app). */ .ifmg-sb__brandtext{ display:flex; flex-direction:column; line-height:1.15; white-space:nowrap; overflow:hidden; min-width:0; } .ifmg-sb__product{ font-weight:700; font-size:.95rem; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; } .ifmg-sb__console{ font-weight:500; font-size:.72rem; color:rgba(255,255,255,.78); overflow:hidden; text-overflow:ellipsis; } /* Icon-rail collapse toggle (IFMG shell feature) — sits in the brand band. */ .ifmg-sb__railbtn{ margin-left:auto; flex:0 0 auto; background:transparent; border:0; color:rgba(255,255,255,.85); width:30px; height:30px; border-radius:7px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } .ifmg-sb__railbtn:hover{ background:rgba(255,255,255,.15); color:#fff; } .ifmg-sb__railbtn .bi{ transition:transform .15s ease; } /* Nav body (admin-shell.css L57) */ .ifmg-sb__nav{ flex:1 1 auto; overflow-y:auto; overflow-x:hidden; padding:.5rem .5rem 1rem; } .ifmg-sb__footer{ flex:0 0 auto; border-top:1px solid var(--ifmg-border); padding:.6rem .65rem; } /* Nav links (admin-shell.css L61-94) */ .ifmg-nav__link{ display:flex; align-items:center; gap:.6rem; width:100%; padding:.5rem .65rem; border-radius:8px; color:var(--ifmg-ink-soft); font-size:.9rem; font-weight:500; text-decoration:none; line-height:1.2; } .ifmg-nav__link > .bi{ flex:0 0 20px; font-size:1rem; text-align:center; color:var(--ifmg-muted); } .ifmg-nav__label{ flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ifmg-nav__link:hover{ background:var(--ifmg-bg); color:var(--ifmg-ink); } /* Active state — blue text + tint + left accent bar (admin-shell.css L84-92) */ .ifmg-nav__link.is-current{ background:color-mix(in srgb,var(--ifmg-blue) 10%,#fff); color:var(--ifmg-blue); font-weight:600; box-shadow:inset 3px 0 0 var(--ifmg-blue); } .ifmg-nav__link.is-current > .bi{ color:var(--ifmg-blue); } /* Main column (admin-shell.css L107-127) */ .ifmg-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; } .ifmg-topbar{ position:sticky; top:0; z-index:1030; height:var(--ifmg-topbar-h); display:flex; align-items:center; gap:.5rem; padding:0 1rem; background:#fff; border-bottom:1px solid var(--ifmg-border); } .ifmg-topbar__burger{ display:none; background:transparent; border:1px solid var(--ifmg-border); border-radius:7px; width:34px; height:34px; color:var(--ifmg-ink); cursor:pointer; align-items:center; justify-content:center; } .ifmg-topbar__spacer{ flex:1 1 auto; } .ifmg-topbar__account{ display:inline-flex; align-items:center; gap:.5rem; color:var(--ifmg-ink-soft); font-size:.85rem; font-weight:500; } .ifmg-topbar__account .bi-person-circle{ font-size:1.25rem; color:var(--ifmg-muted); } .ifmg-topbar__role{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; background:var(--ifmg-bg); color:var(--ifmg-muted); padding:.1rem .4rem; border-radius:999px; } /* Sign-out control — Cars Compliance keeps its own local POST logout (unchanged). */ .ifmg-topbar__signout{ display:inline-flex; align-items:center; gap:.35rem; background:transparent; border:1px solid var(--ifmg-border); border-radius:8px; padding:.28rem .6rem; color:var(--ifmg-ink-soft); font:inherit; font-size:.82rem; font-weight:500; cursor:pointer; } .ifmg-topbar__signout:hover{ background:var(--ifmg-bg); color:var(--ifmg-ink); } /* Content container (admin-shell.css L127) */ .ifmg-main__content{ flex:1 1 auto; padding:1.25rem 1.5rem; } /* Off-canvas backdrop (admin-shell.css L130-132) */ .ifmg-sb__backdrop{ display:none; position:fixed; inset:0; background:rgba(15,23,32,.4); z-index:1035; } /* Responsive off-canvas < lg (admin-shell.css L162-169) */ @media (max-width:991.98px){ .ifmg-sb{ position:fixed; left:calc(-1 * var(--ifmg-sb-w) - 4px); top:0; height:100vh; } .ifmg-shell.is-open .ifmg-sb{ left:0; } .ifmg-shell.is-open .ifmg-sb__backdrop{ display:block; } .ifmg-topbar__burger{ display:inline-flex; } .ifmg-sb__railbtn{ display:none; } /* rail collapse is desktop-only; mobile keeps the off-canvas drawer */ } /* ---- Desktop icon-rail collapse (>= lg) — IFMG shell feature (admin-shell.css L134-159). Toggled by .ifmg-sb__railbtn, persisted in localStorage 'ifmg.shell.rail' (pre-paint script in _AdminLayout ). Gated to >= 992px so tablet/mobile off-canvas is untouched. The active indicator (tint + left accent bar + blue icon) stays visible when collapsed. ---- */ @media (min-width:992px){ html.ifmg-rail .ifmg-sb{ flex:0 0 var(--ifmg-sb-rail); width:var(--ifmg-sb-rail); } html.ifmg-rail .ifmg-sb__brandtext{ display:none; } html.ifmg-rail .ifmg-sb__brand{ justify-content:center; padding:0; } html.ifmg-rail .ifmg-sb__brand > a{ display:none; } html.ifmg-rail .ifmg-sb__railbtn{ margin:0 auto; } html.ifmg-rail .ifmg-sb__railbtn .bi{ transform:rotate(180deg); } html.ifmg-rail .ifmg-nav__link{ justify-content:center; padding-left:0; padding-right:0; } html.ifmg-rail .ifmg-nav__label{ display:none; } } /* ============================================================================ PAGE HEADER — from admin-shell.css (L786-790) ============================================================================ */ .ifmg-pagehead{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-bottom:.9rem; margin-bottom:1rem; border-bottom:1px solid var(--ifmg-border); } .ifmg-pagehead__title{ margin:0; font-size:1.15rem; font-weight:700; letter-spacing:-.01em; line-height:1.25; color:var(--ifmg-ink); display:flex; align-items:center; } .ifmg-pagehead__sub{ margin:.3rem 0 0; font-size:.82rem; line-height:1.5; color:var(--ifmg-muted); max-width:64ch; } .ifmg-pagehead__actions{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; } /* ============================================================================ CARDS / PANELS .ifmg-card — from brand.css (L264-270) .aeo-group — the admin panel, from aeo-health.css (L72-86) ============================================================================ */ .ifmg-card{ background:var(--ifmg-surface); border:1px solid var(--ifmg-border); border-radius:var(--ifmg-radius); box-shadow:var(--ifmg-shadow-sm); padding:1.5rem; } .aeo-group{ background:var(--ifmg-surface); border:1px solid var(--ifmg-border); border-radius:var(--ifmg-radius); overflow:hidden; } .aeo-group__head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.7rem .9rem; border-bottom:1px solid var(--ifmg-border); } .aeo-group__name{ font-weight:600; font-size:.95rem; color:var(--ifmg-ink); } .aeo-group__host, .aeo-group__meta{ font-size:.74rem; color:var(--ifmg-muted); } /* ============================================================================ DATA TABLE — opt-in .ifmg-table, from admin-shell.css (L445-454) ============================================================================ */ .ifmg-table{ --bs-table-bg:transparent; --bs-table-hover-bg:var(--ifmg-bg); margin-bottom:0; } .ifmg-table > thead > tr > th{ background:transparent; border:0; border-bottom:1px solid var(--ifmg-border); color:var(--ifmg-muted); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:.5rem .75rem; } .ifmg-table > tbody > tr > td{ border:0; border-bottom:1px solid var(--ifmg-border); padding:.6rem .75rem; } .ifmg-table > tbody > tr:last-child > td{ border-bottom:0; } /* Wide data tables scroll horizontally within their panel on narrow viewports instead of clipping against the panel's overflow:hidden — the standard overflow-x:auto responsive-table pattern, scoped to panels that hold a table so form panels are unaffected. */ .aeo-group:has(> .ifmg-table){ overflow-x:auto; } /* ============================================================================ FORM FIELDS — opt-in .ifmg-field over Bootstrap controls, from admin-shell.css (L466-486) ============================================================================ */ .ifmg-field .form-label{ font-size:.72rem; font-weight:600; letter-spacing:.01em; color:var(--ifmg-muted); margin-bottom:.25rem; } .ifmg-field .form-control, .ifmg-field .form-select{ border:1px solid var(--ifmg-border); border-radius:var(--ifmg-radius-sm); color:var(--ifmg-ink); background-color:var(--ifmg-surface); } .ifmg-field .form-control:focus, .ifmg-field .form-select:focus{ border-color:var(--ifmg-blue); box-shadow:0 0 0 .15rem color-mix(in srgb,var(--ifmg-blue) 18%,transparent); } .ifmg-field .form-control::placeholder{ color:var(--ifmg-muted); opacity:.75; } .ifmg-field .form-text{ color:var(--ifmg-muted); } .ifmg-field .input-group-text{ border-color:var(--ifmg-border); background:var(--ifmg-bg); color:var(--ifmg-muted); } /* ============================================================================ BUTTONS — brand-blue primary + outline variants over Bootstrap (site.css L14-18). The migrated pages use Bootstrap button variants; because the legacy admin.css `.btn` (loaded first) hardcodes bg/color/border/padding/weight, these rules re-assert the variant treatments with explicit properties (this file loads after admin.css). They target ONLY the variant classes the migrated shell uses — bare legacy `.btn` / `.btn.secondary` (Credentials/Status, out of scope) stay untouched. ============================================================================ */ .btn-primary, .btn-outline-primary, .btn-outline-secondary, .btn-outline-danger { border: 1px solid transparent; border-radius: var(--ifmg-radius-sm); padding: .4rem .85rem; font-weight: 500; } .btn-sm { padding: .25rem .6rem; font-size: .82rem; border-radius: var(--ifmg-radius-sm); } .btn-primary { background-color: var(--ifmg-blue); border-color: var(--ifmg-blue-dark); color: #fff; } .btn-primary:hover { background-color: var(--ifmg-blue-dark); border-color: var(--ifmg-blue-dark); color: #fff; } .btn-outline-primary { background-color: transparent; border-color: var(--ifmg-blue); color: var(--ifmg-blue); } .btn-outline-primary:hover { background-color: var(--ifmg-blue); border-color: var(--ifmg-blue); color: #fff; } .btn-outline-secondary { background-color: transparent; border-color: var(--ifmg-border); color: var(--ifmg-ink-soft); } .btn-outline-secondary:hover { background-color: var(--ifmg-bg); border-color: var(--ifmg-border); color: var(--ifmg-ink); } .btn-outline-danger { background-color: transparent; border-color: var(--ifmg-danger); color: var(--ifmg-danger); } .btn-outline-danger:hover { background-color: var(--ifmg-danger); border-color: var(--ifmg-danger); color: #fff; } /* ============================================================================ STATUS CHIPS — from aeo-health.css (L54-63) ============================================================================ */ .aeo-chip{ display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:600; padding:.15rem .55rem; border-radius:var(--ifmg-radius-full); white-space:nowrap; } .aeo-chip--err{ background:var(--aeo-err-bg); color:var(--aeo-err-fg); } .aeo-chip--warn{ background:var(--aeo-warn-bg); color:var(--aeo-warn-fg); } .aeo-chip--ok{ background:var(--aeo-ok-bg); color:var(--aeo-ok-fg); } .aeo-chip--muted{ background:color-mix(in srgb,var(--ifmg-bg) 65%,#fff); color:var(--ifmg-muted); border:1px solid var(--ifmg-border); } .aeo-chip--info{ background:color-mix(in srgb,var(--ifmg-blue) 10%,#fff); color:var(--ifmg-blue); border:1px solid color-mix(in srgb,var(--ifmg-blue) 35%,#fff); } /* ============================================================================ NOTES / ALERTS — base from aeo-health.css (L112) + solid modifiers from admin-shell.css (L710-721) ============================================================================ */ .aeo-note{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--ifmg-muted); border:1px dashed var(--ifmg-border); border-radius:var(--ifmg-radius-sm); padding:.55rem .8rem; } .aeo-note--err{ display:block; border-style:solid; border-color:var(--aeo-err-line); background:var(--aeo-err-bg); color:var(--aeo-err-fg); } .aeo-note--warn{ display:block; border-style:solid; border-color:var(--aeo-warn-line); background:var(--aeo-warn-bg); color:var(--aeo-warn-fg); } .aeo-note--info{ display:block; border-style:solid; border-color:color-mix(in srgb,var(--ifmg-blue) 35%,#fff); background:color-mix(in srgb,var(--ifmg-blue) 8%,#fff); color:var(--ifmg-ink); } /* ============================================================================ EMPTY STATE — from admin-shell.css (L354-361) ============================================================================ */ .ws-empty{ display:flex; flex-direction:column; align-items:center; gap:.4rem; text-align:center; padding:1.5rem .5rem; color:var(--ifmg-muted); } .ws-empty .ic{ font-size:1.7rem; opacity:.6; } .ws-empty__h{ font-size:.85rem; font-weight:500; color:var(--ifmg-ink); } /* ============================================================================ DEFINITION LIST (key/value detail) — from admin-shell.css .ws-dl (L349-351), with row separators for the longer Run Detail list. ============================================================================ */ .ws-dl{ display:grid; grid-template-columns:200px 1fr; gap:0 .9rem; font-size:.85rem; } .ws-dl dt{ color:var(--ifmg-muted); padding:.55rem 0; border-bottom:1px solid var(--ifmg-border); } .ws-dl dd{ margin:0; padding:.55rem 0; font-weight:500; color:var(--ifmg-ink); border-bottom:1px solid var(--ifmg-border); } .ws-dl dt:last-of-type, .ws-dl dd:last-of-type{ border-bottom:0; } @media (max-width:575.98px){ .ws-dl{ grid-template-columns:1fr; gap:0; } .ws-dl dt{ border-bottom:0; padding-bottom:0; } } /* ============================================================================ BACK LINK (contextual pages) — derived from admin-shell.css .ifmg-catnav__back ============================================================================ */ .ifmg-backlink{ display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem; color:var(--ifmg-muted); text-decoration:none; margin-bottom:.6rem; } .ifmg-backlink:hover{ color:var(--ifmg-blue); } /* ============================================================================ DEALER WORKSPACE — Dealer Detail tabbed console. Reproduces the CMS "Site Overview" screenshot's visual system in ifmg/aeo tokens: a dense identity header (reusing .ifmg-pagehead), an icon tab bar directly beneath it, a lightly separated content canvas, a 6-up KPI row, and two-column operational cards. Desktop-first, dense. New classes only (prefixed .cc-*); nothing existing is redefined. Tab active-state tokens match .ifmg-nav__link.is-current. ============================================================================ */ /* Identity header composition (logo + name/domain/status on the left of .ifmg-pagehead) */ .cc-idhead{ display:flex; align-items:center; gap:.85rem; min-width:0; } .cc-idhead__logo{ flex:0 0 auto; width:46px; height:46px; border-radius:var(--ifmg-radius-sm); border:1px solid var(--ifmg-border); background:#fff; object-fit:contain; padding:3px; } .cc-idhead__body{ min-width:0; } .cc-idmeta{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .8rem; margin-top:.3rem; font-size:.78rem; color:var(--ifmg-muted); } .cc-idmeta a{ color:var(--ifmg-muted); text-decoration:none; } .cc-idmeta a:hover{ color:var(--ifmg-blue); } .cc-idmeta .font-monospace{ font-size:.74rem; } /* Horizontal tab bar (mirrors the screenshot: icon+label tabs, blue underline active) */ .cc-tabs{ display:flex; align-items:stretch; gap:.1rem; flex-wrap:wrap; border-bottom:1px solid var(--ifmg-border); margin:0 0 1.1rem; } .cc-tab{ display:inline-flex; align-items:center; gap:.45rem; padding:.6rem .9rem; margin-bottom:-1px; color:var(--ifmg-ink-soft); font-size:.9rem; font-weight:500; text-decoration:none; line-height:1.2; border-bottom:2px solid transparent; white-space:nowrap; } .cc-tab > .bi{ font-size:1rem; color:var(--ifmg-muted); } .cc-tab:hover{ color:var(--ifmg-ink); } .cc-tab:hover > .bi{ color:var(--ifmg-ink-soft); } .cc-tab.is-current{ color:var(--ifmg-blue); font-weight:600; border-bottom-color:var(--ifmg-blue); } .cc-tab.is-current > .bi{ color:var(--ifmg-blue); } /* Uppercase section label (mirrors the screenshot's "CONTENT ON THIS SITE") */ .cc-sectlabel{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ifmg-muted); margin:.1rem 0 .55rem; } /* 6-up KPI card row — icon+label / big number / subtitle. Anatomy from report .kpi; tokens from .rv-stat. */ .cc-kpis{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:.7rem; margin-bottom:1.1rem; } @media (max-width:1200px){ .cc-kpis{ grid-template-columns:repeat(3, minmax(0,1fr)); } } @media (max-width:575.98px){ .cc-kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); } } .cc-kpi{ background:var(--ifmg-surface); border:1px solid var(--ifmg-border); border-radius:var(--ifmg-radius); padding:.8rem .9rem; display:flex; flex-direction:column; gap:.12rem; color:inherit; text-decoration:none; } .cc-kpi__k{ display:flex; align-items:center; gap:.4rem; font-size:.71rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--ifmg-muted); } .cc-kpi__k .bi{ font-size:.9rem; } .cc-kpi__n{ font-size:1.7rem; font-weight:800; line-height:1.15; color:var(--ifmg-ink); } .cc-kpi__sub{ font-size:.73rem; color:var(--ifmg-muted); } .cc-kpi__drill{ margin-top:.1rem; font-size:.69rem; color:var(--ifmg-blue); font-weight:600; opacity:0; transition:opacity .12s ease; } a.cc-kpi{ transition:border-color .12s ease, box-shadow .12s ease; } a.cc-kpi:hover{ border-color:color-mix(in srgb,var(--ifmg-blue) 45%,#fff); box-shadow:var(--ifmg-shadow-sm); } a.cc-kpi:hover .cc-kpi__drill{ opacity:1; } .cc-kpi--ok .cc-kpi__n{ color:var(--ifmg-success); font-size:1.15rem; } .cc-kpi--err .cc-kpi__n{ color:var(--ifmg-danger); font-size:1.15rem; } /* Compact operational rows inside section cards (Needs Attention, Source Alignment, etc.) */ .cc-rows{ display:flex; flex-direction:column; } .cc-row{ display:flex; align-items:center; gap:.6rem; padding:.55rem .9rem; border-bottom:1px solid var(--ifmg-border); font-size:.85rem; color:var(--ifmg-ink); text-decoration:none; } .cc-row:last-child{ border-bottom:0; } .cc-row > .bi{ flex:0 0 auto; color:var(--ifmg-muted); font-size:1rem; } .cc-row__main{ flex:1 1 auto; min-width:0; } .cc-row__title{ font-weight:500; } .cc-row__meta{ font-size:.74rem; color:var(--ifmg-muted); } .cc-row__end{ flex:0 0 auto; margin-left:auto; text-align:right; white-space:nowrap; } a.cc-row:hover{ background:var(--ifmg-bg); } a.cc-row:hover .cc-row__title{ color:var(--ifmg-blue); } /* Quick-actions grid (right column) — mirrors the screenshot's action button block */ .cc-actions{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem; padding:.9rem; } .cc-actions .btn{ justify-content:flex-start; text-align:left; } @media (max-width:575.98px){ .cc-actions{ grid-template-columns:1fr; } } /* Logo thumbnails for marketplace/source alignment rows */ .cc-srclogo{ height:18px; width:auto; max-width:96px; object-fit:contain; vertical-align:middle; } /* Drill-down detail table wrapper (KPI drill-downs) reuses .ifmg-table; keep monetary cells tight */ .cc-num{ font-variant-numeric:tabular-nums; white-space:nowrap; } .cc-pos{ color:var(--ifmg-danger); font-weight:600; } .cc-neg{ color:var(--ifmg-success); font-weight:600; }