/* Rango design system. Pure CSS — defines --rango-* tokens, remaps --cui-* CoreUI variables so existing components re-theme automatically, and defines opt-in component-foundation classes. Loaded after vendors/css/style.css (CoreUI) and before krdt-site.css in every page's . Never renames/removes any #id, .class used as a JS selector, data-* attribute, form field name, or API call. */ /* ---- Color tokens ---- */ :root { --rango-bg-page: #f5f6f8; --rango-bg-sidebar: #14172a; --rango-surface: #ffffff; --rango-surface-2: #f1f2f5; --rango-border: #dfe2e8; --rango-border-strong: #c7cbd4; --rango-text-primary: #1b1e2a; --rango-text-secondary: #545a6b; --rango-text-muted: #8b90a0; --rango-brand-primary: #f47521; --rango-brand-hover: #d9600f; --rango-brand-soft: #fdece0; --rango-success: #1a7f42; --rango-success-soft: #e5f5ea; --rango-warning: #a9660a; --rango-warning-soft: #fbeed8; --rango-danger: #c53030; --rango-danger-soft: #fbe6e6; --rango-info: #2563a8; --rango-info-soft: #e5f0fb; --rango-shadow-sm: 0 1px 2px rgba(15, 18, 30, .06); --rango-shadow-md: 0 4px 12px rgba(15, 18, 30, .08); --rango-radius-sm: .25rem; --rango-radius-md: .375rem; --rango-radius-lg: .5rem; /* Typography */ --rango-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --rango-text-page-title: 600 1.25rem/1.3 var(--rango-font-sans); --rango-text-section-title: 600 1rem/1.35 var(--rango-font-sans); --rango-text-body: 400 .875rem/1.5 var(--rango-font-sans); --rango-text-label: 600 .78rem/1.3 var(--rango-font-sans); --rango-text-caption: 400 .75rem/1.4 var(--rango-font-sans); --rango-text-table: 400 .8125rem/1.4 var(--rango-font-sans); --rango-text-button: 600 .8125rem/1 var(--rango-font-sans); /* Spacing scale: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 */ --rango-space-1: .25rem; --rango-space-2: .5rem; --rango-space-3: .75rem; --rango-space-4: 1rem; --rango-space-5: 1.25rem; --rango-space-6: 1.5rem; --rango-space-8: 2rem; --rango-space-10: 2.5rem; --rango-space-12: 3rem; } [data-coreui-theme="dark"] { --rango-bg-page: #14161f; --rango-bg-sidebar: #0d0f1a; --rango-surface: #1b1e2b; --rango-surface-2: #22263666; --rango-border: #2c3040; --rango-border-strong: #3a3f52; --rango-text-primary: #eef0f5; --rango-text-secondary: #a7acbd; --rango-text-muted: #767c8f; --rango-brand-soft: rgba(244, 117, 33, .14); --rango-success-soft: rgba(26, 127, 66, .16); --rango-warning-soft: rgba(169, 102, 10, .18); --rango-danger-soft: rgba(197, 48, 48, .18); --rango-info-soft: rgba(37, 99, 168, .18); --rango-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --rango-shadow-md: 0 4px 14px rgba(0, 0, 0, .35); } /* CoreUI/Bootstrap remap — re-skins existing buttons, cards, tables, badges, alerts, dropdowns, pagination, tooltips, modals. */ :root { --cui-body-bg: var(--rango-bg-page); --cui-body-color: var(--rango-text-primary); --cui-secondary-color: var(--rango-text-secondary); --cui-tertiary-bg: var(--rango-surface-2); --cui-border-color: var(--rango-border); --cui-border-radius: var(--rango-radius-md); --cui-border-radius-sm: var(--rango-radius-sm); --cui-border-radius-lg: var(--rango-radius-lg); --cui-box-shadow: var(--rango-shadow-md); --cui-box-shadow-sm: var(--rango-shadow-sm); --cui-font-sans-serif: var(--rango-font-sans); --cui-primary: var(--rango-brand-primary); --cui-primary-rgb: 244, 117, 33; --cui-success: var(--rango-success); --cui-warning: var(--rango-warning); --cui-danger: var(--rango-danger); --cui-info: var(--rango-info); --cui-focus-ring-color: rgba(244, 117, 33, .25); --cui-form-valid-color: var(--rango-success); --cui-form-valid-border-color: var(--rango-success); --cui-form-invalid-color: var(--rango-danger); --cui-form-invalid-border-color: var(--rango-danger); } [data-coreui-theme="dark"] { --cui-body-bg: var(--rango-bg-page); --cui-body-color: var(--rango-text-primary); --cui-secondary-color: var(--rango-text-secondary); --cui-tertiary-bg: var(--rango-surface-2); --cui-border-color: var(--rango-border); --cui-box-shadow: var(--rango-shadow-md); --cui-primary: var(--rango-brand-primary); --cui-primary-rgb: 244, 117, 33; } .card { border-color: var(--rango-border); box-shadow: var(--rango-shadow-sm); } /* CoreUI's compiled .btn-primary/.btn-outline-primary hardcode literal hex instead of referencing var(--cui-primary), in both light and dark theme blocks — these overrides are the actual fix. */ .btn { font: var(--rango-text-button); border-radius: var(--rango-radius-sm); } .btn-primary { --cui-btn-color: #fff; --cui-btn-bg: var(--rango-brand-primary); --cui-btn-border-color: var(--rango-brand-primary); --cui-btn-hover-color: #fff; --cui-btn-hover-bg: var(--rango-brand-hover); --cui-btn-hover-border-color: var(--rango-brand-hover); --cui-btn-active-color: #fff; --cui-btn-active-bg: var(--rango-brand-hover); --cui-btn-active-border-color: var(--rango-brand-hover); --cui-btn-disabled-color: #fff; --cui-btn-disabled-bg: var(--rango-brand-primary); --cui-btn-disabled-border-color: var(--rango-brand-primary); color: #fff; } .btn-outline-primary { --cui-btn-color: var(--rango-brand-primary); --cui-btn-border-color: var(--rango-brand-primary); --cui-btn-hover-color: #fff; --cui-btn-hover-bg: var(--rango-brand-primary); --cui-btn-hover-border-color: var(--rango-brand-primary); --cui-btn-active-color: #fff; --cui-btn-active-bg: var(--rango-brand-primary); --cui-btn-active-border-color: var(--rango-brand-primary); --cui-btn-disabled-color: var(--rango-brand-primary); --cui-btn-disabled-border-color: var(--rango-brand-primary); } [data-coreui-theme="dark"] .btn-primary { --cui-btn-color: #fff; --cui-btn-bg: var(--rango-brand-primary); --cui-btn-border-color: var(--rango-brand-primary); --cui-btn-hover-color: #fff; --cui-btn-hover-bg: var(--rango-brand-hover); --cui-btn-hover-border-color: var(--rango-brand-hover); --cui-btn-active-color: #fff; --cui-btn-active-bg: var(--rango-brand-hover); --cui-btn-active-border-color: var(--rango-brand-hover); --cui-btn-disabled-color: #fff; --cui-btn-disabled-bg: var(--rango-brand-primary); --cui-btn-disabled-border-color: var(--rango-brand-primary); } [data-coreui-theme="dark"] .btn-outline-primary { --cui-btn-color: var(--rango-brand-primary); --cui-btn-border-color: var(--rango-brand-primary); --cui-btn-hover-color: #fff; --cui-btn-hover-bg: var(--rango-brand-primary); --cui-btn-hover-border-color: var(--rango-brand-primary); --cui-btn-active-color: #fff; --cui-btn-active-bg: var(--rango-brand-primary); --cui-btn-active-border-color: var(--rango-brand-primary); --cui-btn-disabled-color: var(--rango-brand-primary); --cui-btn-disabled-border-color: var(--rango-brand-primary); } /* --cui-link-color-rgb is also hardcoded in both theme blocks. */ :root, [data-coreui-theme="dark"] { --cui-link-color-rgb: 244, 117, 33; } #dashboardContent .table { font: var(--rango-text-table); } #dashboardContent .table > :not(caption) > * > * { padding-block: var(--rango-space-2); } #dashboardContent .table th { font: var(--rango-text-label); text-transform: uppercase; color: var(--rango-text-secondary); border-bottom-width: 1px; } /* ---- Sidebar / shell ---- */ #sidebar { background: var(--rango-bg-sidebar); width: 14.5rem; height: 100vh; height: 100dvh; overflow: hidden; } #sidebarNav { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-color: rgba(255, 255, 255, .28) transparent; scrollbar-width: thin; } #sidebarNav::-webkit-scrollbar { width: 8px; } #sidebarNav::-webkit-scrollbar-track { background: transparent; } #sidebarNav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border: 2px solid transparent; border-radius: 4px; background-clip: padding-box; } #sidebarNav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .4); } .sidebar-brand-full, .sidebar-brand-narrow { color: #fff; } .sidebar-nav .nav-title { font: var(--rango-text-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgba(255, 255, 255, .38); padding: var(--rango-space-4) var(--rango-space-4) var(--rango-space-1); } .sidebar-nav .nav-title:first-child { padding-top: var(--rango-space-2); } .sidebar-nav .nav-link { font: var(--rango-text-body); border-radius: var(--rango-radius-sm); margin-inline: var(--rango-space-2); margin-block-end: 1px; } .sidebar-nav .nav-link.active { background: color-mix(in srgb, var(--rango-brand-primary) 18%, transparent); color: #fff; border-inline-start: 3px solid var(--rango-brand-primary); padding-inline-start: calc(1rem - 3px); } .sidebar-nav .nav-link:hover:not(.active) { background: rgba(255, 255, 255, .06); } .sidebar-nav .nav-icon { opacity: .85; } .sidebar-nav .nav-link.active .nav-icon { opacity: 1; color: var(--rango-brand-primary); } .header.header-sticky { background: var(--rango-surface); box-shadow: 0 1px 0 var(--rango-border); min-height: 3.25rem; } .header .breadcrumb { font: var(--rango-text-caption); } .header .avatar-img { border-radius: var(--rango-radius-sm); } #dashboardContent { padding-block: var(--rango-space-4); } .footer { border-top: 1px solid var(--rango-border); font-size: var(--rango-text-caption); } .rango-page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--rango-space-3); margin-block-end: var(--rango-space-5); } .rango-page-header__title { font: var(--rango-text-page-title); color: var(--rango-text-primary); margin: 0; } .rango-page-header__subtitle { font: var(--rango-text-body); color: var(--rango-text-secondary); margin-block-start: var(--rango-space-1); } .rango-page-header__actions { display: flex; gap: var(--rango-space-2); flex-wrap: wrap; } /* ---- Component foundations ---- */ .rango-metric-card { background: var(--rango-surface); border: 1px solid var(--rango-border); border-radius: var(--rango-radius-md); padding: var(--rango-space-4); display: flex; align-items: center; gap: var(--rango-space-3); } .rango-metric-card__value { font: 700 1.5rem/1.1 var(--rango-font-sans); color: var(--rango-text-primary); } .rango-metric-card__label { font: var(--rango-text-label); color: var(--rango-text-secondary); margin-top: var(--rango-space-1); } .rango-badge { display: inline-flex; align-items: center; gap: .25em; font: var(--rango-text-caption); font-weight: 600; padding: .2em .55em; border-radius: var(--rango-radius-sm); } .rango-badge-success { background: var(--rango-success-soft); color: var(--rango-success); } .rango-badge-warning { background: var(--rango-warning-soft); color: var(--rango-warning); } .rango-badge-danger { background: var(--rango-danger-soft); color: var(--rango-danger); } .rango-badge-info { background: var(--rango-info-soft); color: var(--rango-info); } .rango-badge-neutral { background: var(--rango-surface-2); color: var(--rango-text-secondary); } .rango-empty-state { text-align: center; padding: var(--rango-space-10) var(--rango-space-4); color: var(--rango-text-secondary); font: var(--rango-text-body); } .rango-loading { display: inline-flex; align-items: center; gap: var(--rango-space-2); color: var(--rango-text-secondary); font: var(--rango-text-body); } .rango-loading::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--rango-border-strong); border-top-color: var(--rango-brand-primary); animation: rango-spin .6s linear infinite; } @keyframes rango-spin { to { transform: rotate(360deg); } } .rango-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rango-space-2); margin-block-end: var(--rango-space-4); } /* Icons: inline SVG only, no font/CDN. */ .rango-icon { width: 1rem; height: 1rem; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .rango-icon-lg { width: 1.25rem; height: 1.25rem; } .rango-icon-sm { width: .875rem; height: .875rem; } /* ---- Accessibility ---- */ :focus-visible { outline: 2px solid var(--rango-brand-primary); outline-offset: 2px; } .btn:disabled, .form-control:disabled, .form-select:disabled { opacity: .55; } @media (pointer: coarse) { .btn, .form-control, .form-select, .nav-link { min-height: 2.5rem; } } /* ---- Responsive ---- */ @media (max-width: 991.98px) { #sidebar { width: 15.5rem; } .rango-metric-card { padding: var(--rango-space-3); } } @media (max-width: 575.98px) { #dashboardContent { padding-inline: var(--rango-space-2); } } /* ===================================================================== Dashboard layer (v2). One accent (brand orange) for actions and the active nav item; semantic colors only for status. Surfaces are flat: 1px borders, no drop shadows, no gradients, 8px radius at most. ===================================================================== */ :root { --rango-ink: #111522; --rango-radius-panel: .5rem; --rango-positive: #1a7f42; --rango-negative: #b42318; } [data-coreui-theme="dark"] { --rango-positive: #4cc27a; --rango-negative: #f07a6e; } #sidebar { background: var(--rango-ink); } [data-coreui-theme="dark"] #sidebar { background: var(--rango-bg-sidebar); } /* Flat cards everywhere in the dashboard. */ #dashboardContent .card { box-shadow: none; border-radius: var(--rango-radius-panel); background: var(--rango-surface); } #dashboardContent .card-header { background: transparent; border-bottom: 1px solid var(--rango-border); padding: var(--rango-space-3) var(--rango-space-4); font: var(--rango-text-section-title); } #dashboardContent .card-header strong { font-weight: 600; } #dashboardContent .card-footer { background: transparent; border-top: 1px solid var(--rango-border); } #dashboardContent .form-label { font: var(--rango-text-label); color: var(--rango-text-secondary); margin-bottom: var(--rango-space-1); } #dashboardContent .form-control, #dashboardContent .form-select { font-size: .875rem; } /* Tables: quiet header, right-aligned tabular numbers via .num. */ #dashboardContent .table th { font: 600 .72rem/1.3 var(--rango-font-sans); letter-spacing: .04em; color: var(--rango-text-muted); background: transparent; } #dashboardContent .table > :not(caption) > * > * { border-bottom-color: var(--rango-border); } #dashboardContent .table tbody tr:last-child > * { border-bottom: 0; } #dashboardContent .table tbody tr:hover > * { background: var(--rango-surface-2); } .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .rango-muted { color: var(--rango-text-secondary); } .rango-small { font: var(--rango-text-caption); } .rango-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .75rem; color: var(--rango-text-secondary); } /* Status badges rendered with Bootstrap utility classes, toned down to the same soft style as .rango-badge. */ #dashboardContent .badge { font: 600 .72rem/1 var(--rango-font-sans); padding: .3em .55em; border-radius: var(--rango-radius-sm); } #dashboardContent .badge.bg-success, #dashboardContent .badge.text-bg-success { background: var(--rango-success-soft) !important; color: var(--rango-success) !important; } #dashboardContent .badge.bg-warning, #dashboardContent .badge.text-bg-warning { background: var(--rango-warning-soft) !important; color: var(--rango-warning) !important; } #dashboardContent .badge.bg-danger, #dashboardContent .badge.text-bg-danger { background: var(--rango-danger-soft) !important; color: var(--rango-danger) !important; } #dashboardContent .badge.bg-secondary, #dashboardContent .badge.text-bg-secondary { background: var(--rango-surface-2) !important; color: var(--rango-text-secondary) !important; } #dashboardContent .badge.bg-info, #dashboardContent .badge.text-bg-info { background: var(--rango-info-soft) !important; color: var(--rango-info) !important; } /* ---- Stat bar: several figures in one bordered strip ---- */ .rango-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); background: var(--rango-surface); border: 1px solid var(--rango-border); border-radius: var(--rango-radius-panel); margin-block-end: var(--rango-space-5); overflow: hidden; } .rango-stat { padding: var(--rango-space-4) var(--rango-space-5); border-inline-start: 1px solid var(--rango-border); margin-inline-start: -1px; /* Hidden on the first row by the container overflow; divides wrapped rows. */ border-top: 1px solid var(--rango-border); margin-top: -1px; min-width: 0; } .rango-stat__label { font: var(--rango-text-label); color: var(--rango-text-secondary); } .rango-stat__value { font: 600 1.375rem/1.2 var(--rango-font-sans); color: var(--rango-text-primary); font-variant-numeric: tabular-nums; margin-top: var(--rango-space-1); overflow-wrap: anywhere; } .rango-stat__value small { font-size: .8rem; font-weight: 500; color: var(--rango-text-secondary); margin-inline-end: .25rem; } .rango-stat__meta { font: var(--rango-text-caption); color: var(--rango-text-muted); margin-top: var(--rango-space-1); } .rango-stat--primary .rango-stat__value { font-size: 1.625rem; } .rango-delta { font-weight: 600; } .rango-delta.is-up { color: var(--rango-positive); } .rango-delta.is-down { color: var(--rango-negative); } .rango-stats-caption { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rango-space-2); font: var(--rango-text-label); color: var(--rango-text-secondary); margin-block-end: var(--rango-space-2); } /* ---- Section heading inside a page ---- */ .rango-section-title { font: var(--rango-text-section-title); color: var(--rango-text-primary); margin: var(--rango-space-6) 0 var(--rango-space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--rango-space-2); } .rango-section-title:first-child { margin-top: 0; } .rango-section-title .btn-link, .rango-link { color: var(--rango-text-secondary); text-decoration: none; font: 500 .8125rem/1.2 var(--rango-font-sans); } .rango-section-title .btn-link:hover, .rango-link:hover { color: var(--rango-text-primary); text-decoration: underline; } /* ---- Underline tabs (sub-navigation within a page) ---- */ .rango-tabs { display: flex; gap: var(--rango-space-5); flex-wrap: wrap; border-bottom: 1px solid var(--rango-border); margin-block-end: var(--rango-space-4); } .rango-tabs button { appearance: none; background: none; border: 0; padding: var(--rango-space-2) 0; margin-bottom: -1px; font: 500 .875rem/1.4 var(--rango-font-sans); color: var(--rango-text-secondary); border-bottom: 2px solid transparent; } .rango-tabs button:hover { color: var(--rango-text-primary); } .rango-tabs button.active { color: var(--rango-text-primary); border-bottom-color: var(--rango-brand-primary); } /* ---- Segmented control (period picker) ---- */ .rango-segmented { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--rango-border-strong); border-radius: var(--rango-radius-sm); overflow: hidden; } .rango-segmented button { appearance: none; border: 0; background: var(--rango-surface); padding: .3rem .7rem; font: 500 .8125rem/1.2 var(--rango-font-sans); color: var(--rango-text-secondary); } .rango-segmented button + button { border-inline-start: 1px solid var(--rango-border-strong); } .rango-segmented button.active { background: var(--rango-text-primary); color: var(--rango-surface); } /* ---- Collapsible form panel (forms hidden until asked for) ---- */ .rango-form-panel { background: var(--rango-surface); border: 1px solid var(--rango-border); border-radius: var(--rango-radius-panel); padding: var(--rango-space-4); margin-block-end: var(--rango-space-4); } .rango-form-panel__title { font: var(--rango-text-section-title); margin-block-end: var(--rango-space-3); } .rango-hint { font: var(--rango-text-caption); color: var(--rango-text-muted); margin-top: var(--rango-space-1); } /* ---- Row actions menu ---- */ .rango-row-menu > .btn { padding: .15rem .5rem; line-height: 1; color: var(--rango-text-secondary); border-color: transparent; } .rango-row-menu > .btn:hover { border-color: var(--rango-border-strong); } .rango-row-menu .dropdown-menu { font-size: .8125rem; min-width: 11rem; } /* ---- Minimal bar chart (inline SVG) ---- */ .rango-chart { width: 100%; height: 180px; display: block; } .rango-chart .bar { fill: var(--rango-text-primary); opacity: .78; } .rango-chart .bar:hover { opacity: 1; } .rango-chart .axis { stroke: var(--rango-border); } .rango-chart text { font: 400 10px var(--rango-font-sans); fill: var(--rango-text-muted); } /* ---- Definition rows (label: value) ---- */ .rango-kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--rango-space-1) var(--rango-space-4); font: var(--rango-text-body); margin: 0; } .rango-kv dt { color: var(--rango-text-secondary); font-weight: 400; } .rango-kv dd { margin: 0; font-variant-numeric: tabular-nums; } /* Legacy metric card (still used by a few sections): neutral icon, no tint. */ .rango-metric-card .icon { color: var(--rango-text-muted); } @media (max-width: 575.98px) { .rango-stats { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); } .rango-stat { padding: var(--rango-space-3); } .rango-stat__value { font-size: 1.125rem; } .rango-tabs { gap: var(--rango-space-4); overflow-x: auto; flex-wrap: nowrap; } .rango-segmented { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; } .rango-segmented button { white-space: nowrap; } } @media print { #sidebar, .header, .footer, .rango-page-header__actions, .rango-segmented, .rango-tabs { display: none !important; } .wrapper { padding: 0 !important; } }