/* ================================================================ Untitled UI Dashboard — ocpp-cloud-dashboard Complete design system override for the OCPP Cloud Dashboard. Loaded LAST after Bootstrap 5.3.3 + Untitled UI Tokens. All values reference shared tokens from untitled-ui-tokens.css. ================================================================ */ /* ================================================================ 1. COLOR SCHEME DEFINITIONS Three brand palettes, set via class on ================================================================ */ .theme-blue_gray { --brand-25: #F8F9FC; --brand-50: #F0F1F8; --brand-100: #D8DBE9; --brand-200: #B1B7D4; --brand-300: #8A93BE; --brand-400: #6C78B0; --brand-500: #4E5BA6; --brand-600: #3E4784; --brand-700: #363F72; --brand-800: #293056; --brand-900: #1D2240; --brand-950: #101323; } .theme-green_gray { --brand-25: #F6FAF8; --brand-50: #ECF5F0; --brand-100: #D0E5D9; --brand-200: #A7CBB5; --brand-300: #72B18F; --brand-400: #59946F; --brand-500: #4A7766; --brand-600: #3B6658; --brand-700: #32574B; --brand-800: #27443B; --brand-900: #1C3228; --brand-950: #0D1F17; } .theme-red_gray { --brand-25: #FCF8F9; --brand-50: #F8EFF1; --brand-100: #EDD4DA; --brand-200: #D9ACB7; --brand-300: #C6909E; --brand-400: #A96878; --brand-500: #8C4A5A; --brand-600: #7A3D4E; --brand-700: #683444; --brand-800: #522937; --brand-900: #3D1E29; --brand-950: #1A0E12; } /* ================================================================ 2. SEMANTIC COLOR TOKENS — Light Mode Maps brand + gray primitives to functional roles ================================================================ */ .docs:not(.dark-edition) { --colorNeutralBackground1: #FFFFFF; --colorNeutralBackground2: var(--gray-50); --colorNeutralBackground3: var(--gray-100); --colorNeutralForeground1: var(--gray-900); --colorNeutralForeground2: var(--gray-700); --colorNeutralForeground3: var(--gray-600); --colorNeutralForeground4: var(--gray-500); --colorNeutralStroke1: var(--gray-300); --colorNeutralStroke2: var(--gray-200); --colorBrandBackground: var(--brand-600); --colorBrandForeground1: var(--brand-700); --pipelet-nav-background: linear-gradient(135deg, var(--brand-800), var(--brand-700) 40%, var(--brand-600)); --pipelet-btn-start: #ea580c; --pipelet-btn-end: #facc15; --pipelet-btn-text: #0b0d10; --pipelet-card-border: var(--gray-200); } /* ================================================================ 3. SEMANTIC COLOR TOKENS — Dark Mode ================================================================ */ .docs.dark-edition { --colorNeutralBackground1: var(--gray-dark-900); --colorNeutralBackground2: var(--gray-dark-800); --colorNeutralBackground3: var(--gray-dark-700); --colorNeutralForeground1: var(--gray-dark-50); --colorNeutralForeground2: var(--gray-dark-200); --colorNeutralForeground3: var(--gray-dark-300); --colorNeutralForeground4: var(--gray-dark-400); --colorNeutralStroke1: var(--gray-dark-600); --colorNeutralStroke2: var(--gray-dark-700); --colorBrandBackground: var(--brand-500); --colorBrandForeground1: var(--brand-300); --pipelet-nav-background: linear-gradient(135deg, var(--brand-950), var(--brand-900) 40%, var(--brand-800)); --pipelet-card-border: var(--gray-dark-700); --shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.20); --shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.24), 0px 1px 3px rgba(0, 0, 0, 0.28); --shadow-md: 0px 2px 4px rgba(0, 0, 0, 0.24), 0px 4px 8px rgba(0, 0, 0, 0.28); --shadow-lg: 0px 4px 6px rgba(0, 0, 0, 0.12), 0px 12px 16px rgba(0, 0, 0, 0.24); --shadow-xl: 0px 8px 8px rgba(0, 0, 0, 0.12), 0px 20px 24px rgba(0, 0, 0, 0.24); --shadow-2xl: 0px 24px 48px rgba(0, 0, 0, 0.40); } /* ================================================================ 4. GLOBAL RESETS & TYPOGRAPHY Force Inter everywhere, replace all legacy fonts ================================================================ */ *, *::before, *::after { font-family: var(--font-family) !important; } html { font-size: var(--text-md); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-family) !important; color: var(--colorNeutralForeground1); background-color: var(--colorNeutralBackground2); line-height: 1.5; } code, pre, kbd, samp, .font-monospace { font-family: var(--font-family-mono) !important; } h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-semibold); color: var(--colorNeutralForeground1); } a { color: var(--brand-600); text-decoration: none; } a:hover { color: var(--brand-700); text-decoration: underline; } /* ================================================================ 5. SOFT UI COMPATIBILITY LAYER Maps legacy utility classes to Untitled UI tokens. ~494 usages across 53 templates — avoids mass template edits. ================================================================ */ .opacity-5 { opacity: 0.5 !important; } .opacity-6 { opacity: 0.6 !important; } .opacity-7 { opacity: 0.7 !important; } .opacity-8 { opacity: 0.8 !important; } .opacity-9 { opacity: 0.9 !important; } .opacity-10 { opacity: 1.0 !important; } .text-xxs { font-size: var(--text-xs) !important; } .font-weight-bolder { font-weight: var(--font-weight-semibold) !important; } .font-weight-bold { font-weight: var(--font-weight-bold) !important; } .font-weight-normal { font-weight: var(--font-weight-regular) !important; } .bg-gradient-primary { background-image: linear-gradient(135deg, var(--brand-700), var(--brand-500)) !important; } .bg-gradient-secondary { background-image: linear-gradient(135deg, var(--gray-600), var(--gray-400)) !important; } .bg-gradient-success { background-image: linear-gradient(135deg, var(--success-700, #15803d), var(--success-500, #22c55e)) !important; } .bg-gradient-info { background-image: linear-gradient(135deg, var(--brand-700), var(--brand-500)) !important; } .bg-gradient-warning { background-image: linear-gradient(135deg, #c2410c, #f97316) !important; } .bg-gradient-danger { background-image: linear-gradient(135deg, var(--error-700, #b91c1c), var(--error-500, #ef4444)) !important; } .bg-gradient-dark { background-image: linear-gradient(135deg, var(--gray-800), var(--gray-600)) !important; } .bg-gradient-purple { background-image: linear-gradient(135deg, #6d28d9, #a855f7) !important; } /* Icon shape & size utilities (Soft UI compat) */ .icon-shape { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; } .icon-xxs { width: 20px; height: 20px; } .icon-xs { width: 24px; height: 24px; } .icon-xs i { font-size: 0.5rem; } .icon-sm { width: 32px; height: 32px; } .icon-sm i { font-size: 0.65rem; } .icon-md { width: 48px; height: 48px; } .icon-lg { width: 64px; height: 64px; } /* Border-radius utilities (Soft UI compat) */ .border-radius-md { border-radius: var(--radius-md, 8px) !important; } .border-radius-lg { border-radius: var(--radius-lg, 10px) !important; } .border-radius-xl { border-radius: var(--radius-xl, 12px) !important; } .text-body { color: var(--colorNeutralForeground1) !important; } .bg-white { background-color: var(--colorNeutralBackground1) !important; } /* ================================================================ 6. LAYOUT — Page Structure Flex layout for sidebar + content area ================================================================ */ .ct-docs-main-container { min-height: calc(100vh - 60px); } .ct-docs-main-content-row { display: flex; flex-wrap: nowrap; min-height: 0; } .ct-docs-content-col { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; padding: var(--spacing-3xl); margin-top: 0; background-color: var(--colorNeutralBackground2); } @media (max-width: 767.98px) { .ct-docs-sidebar-col { display: none; } .ct-docs-content-col { padding: var(--spacing-xl); } } @media (min-width: 768px) { .ct-docs-sidebar-col { flex: 0 0 240px; max-width: 240px; min-width: 220px; } } @media (min-width: 1200px) { .ct-docs-sidebar-col { flex: 0 0 280px; max-width: 280px; } } .ct-docs-main-footer-row { padding: var(--spacing-xl) var(--spacing-3xl); } /* ================================================================ 7. HEADER / NAVBAR Branded gradient header with navigation ================================================================ */ .ctNavBar { position: relative; display: flex; padding: 0 var(--spacing-xl); align-items: center; justify-content: space-between; height: 60px; background-image: var(--pipelet-nav-background, linear-gradient(135deg, var(--brand-800), var(--brand-600))); box-shadow: var(--shadow-md); flex-direction: row; flex-wrap: nowrap; z-index: 1030; } .ctNavBar::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); } .ct-docs-navbar-brand { display: flex; align-items: center; gap: var(--spacing-lg); } .ct-docs-navbar-brand .ct-docs-navbar-text, .ct-docs-navbar-brand.has-logo .ct-docs-navbar-text { display: inline-flex; align-items: center; font-weight: var(--font-weight-semibold); font-size: var(--text-md); color: #fff; text-decoration: none; letter-spacing: -0.01em; } .ct-docs-navbar-brand .ct-docs-navbar-text:hover { text-decoration: none; color: #fff; } .ct-docs-navbar-logo { max-height: 48px; width: auto; object-fit: contain; padding: 8px 0; } .ct-docs-navbar-nav-right { display: flex; align-items: center; margin-left: auto; list-style: none; padding: 0; margin-bottom: 0; gap: var(--spacing-md); } .ct-docs-navbar-nav-item { display: flex; align-items: center; list-style: none; } .ctNavBar .btn-icon, .ctNavBar .nav-link { color: rgba(255,255,255,0.8); transition: color 0.15s ease; } .ctNavBar .btn-icon:hover, .ctNavBar .nav-link:hover { color: #fff; } /* Impersonate banner */ .impersonate-banner { background: var(--warning-50); border-bottom: 1px solid var(--warning-200); color: var(--warning-800); padding: var(--spacing-md) var(--spacing-xl); font-size: var(--text-sm); font-weight: var(--font-weight-medium); text-align: center; } .docs.dark-edition .impersonate-banner { background: rgba(220, 104, 3, 0.12); border-color: rgba(220, 104, 3, 0.30); color: var(--warning-300); } /* ================================================================ 8. SIDEBAR NAVIGATION Clean Untitled UI vertical navigation ================================================================ */ .ct-docs-sidebar-col { background: var(--colorNeutralBackground1); border-right: 1px solid var(--colorNeutralStroke2); padding-top: var(--spacing-xl); padding-bottom: var(--spacing-3xl); overflow-y: auto; max-height: calc(100vh - 60px); position: sticky; top: 60px; } .ct-docs-sidebar-collapse-links { padding: 0; } .navHead { font-size: 11px; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; padding-left: 20px; margin-top: var(--spacing-2xl); margin-bottom: var(--spacing-md); color: var(--colorNeutralForeground4); } .ct-docs-toc-item { padding-left: var(--spacing-xl); margin-top: var(--spacing-md); } .ct-docs-toc-link { display: flex; align-items: center; gap: var(--spacing-lg); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--colorNeutralForeground2); padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-md); text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } .ct-docs-toc-link:hover { background: var(--colorNeutralBackground2); color: var(--colorNeutralForeground1); text-decoration: none; } .ct-docs-toc-link .icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--brand-600); color: #fff; font-size: 13px; flex-shrink: 0; } .ct-docs-toc-link .icon i { color: #fff !important; } .toggle-icon { transition: transform 0.2s ease; margin-left: auto; } .toggle-icon.rotate-180 { transform: rotate(180deg); } .ct-docs-nav-sidenav { margin-left: 0; padding-left: 0; list-style: none; } .ct-docs-nav-sidenav li { list-style: none; margin: 0; padding: 0; } .ct-docs-nav-sidenav li a { display: block; padding: 6px var(--spacing-lg) 6px 56px; font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--colorNeutralForeground3); border-radius: var(--radius-md); text-decoration: none; transition: color 0.15s ease, background-color 0.15s ease; } .ct-docs-nav-sidenav li a:hover { color: var(--colorNeutralForeground1); background: var(--colorNeutralBackground2); text-decoration: none; } .ct-docs-nav-sidenav-active a, .ct-docs-nav-sidenav li.ct-docs-nav-sidenav-active a { color: var(--brand-600) !important; font-weight: var(--font-weight-semibold) !important; background: var(--brand-25) !important; } .docs.dark-edition .ct-docs-nav-sidenav-active a, .docs.dark-edition .ct-docs-nav-sidenav li.ct-docs-nav-sidenav-active a { color: var(--brand-300) !important; background: rgba(78, 91, 166, 0.10) !important; } /* ================================================================ 9. THEME DROPDOWN Settings/language dropdown in header ================================================================ */ .theme-dropdown { position: relative; } .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: transparent; color: rgba(255,255,255,0.8); padding: 0; border-radius: var(--radius-md); transition: color 0.15s ease, background-color 0.15s ease; cursor: pointer; } .theme-toggle-btn:hover, .theme-toggle-btn:focus { color: #fff; background: rgba(255,255,255,0.08); } .theme-dropdown-toggle::after { display: none !important; } .theme-toggle-icon { display: inline-flex; align-items: center; justify-content: center; } .theme-icon { display: inline-block; } .theme-icon-sun { display: none; } /* Theme dropdown menu — hidden by default, shown via .show */ .theme-dropdown-menu { display: none; position: absolute; right: 0; top: 100%; margin-top: var(--spacing-md); min-width: 240px; padding: var(--spacing-lg); border-radius: var(--radius-xl); border: 1px solid var(--colorNeutralStroke2); background: var(--colorNeutralBackground1); box-shadow: var(--shadow-xl); z-index: 1050; } .theme-dropdown-menu.show { display: block; } .theme-dropdown-menu .dropdown-header { font-size: var(--text-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--colorNeutralForeground4); padding: var(--spacing-sm) var(--spacing-lg); margin-bottom: var(--spacing-xs); } .theme-dropdown-menu .dropdown-section + .dropdown-section { margin-top: var(--spacing-md); } .theme-dropdown-item { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); width: 100%; padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); border: none; background: transparent; color: var(--colorNeutralForeground1); text-align: left; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .theme-dropdown-item:hover, .theme-dropdown-item:focus { background: var(--colorNeutralBackground2); color: var(--colorNeutralForeground1); text-decoration: none; } .theme-dropdown-divider { height: 1px; margin: var(--spacing-lg) 0; background: var(--colorNeutralStroke2); border: 0; } .theme-dropdown-item .theme-toggle-icon svg { width: 18px; height: 18px; } /* Dark mode dropdown */ .docs.dark-edition .theme-dropdown-menu { background: var(--gray-dark-800); border-color: var(--gray-dark-600); box-shadow: var(--shadow-2xl); } .docs.dark-edition .theme-dropdown-menu .dropdown-header { color: var(--gray-dark-400); } .docs.dark-edition .theme-dropdown-item { color: var(--gray-dark-100); } .docs.dark-edition .theme-dropdown-item:hover, .docs.dark-edition .theme-dropdown-item:focus { background: var(--gray-dark-700); color: var(--gray-dark-50); } .docs.dark-edition .theme-dropdown-divider { background: var(--gray-dark-700); } /* ================================================================ 10. PAGE CONTENT ================================================================ */ .ct-docs-page-h1-title, .ct-docs-content-col h1:first-child { font-size: var(--display-xs); font-weight: var(--font-weight-bold); color: var(--colorNeutralForeground1); margin-bottom: var(--spacing-xl); line-height: var(--leading-display-xs); } mark { padding: 0; background-image: linear-gradient(135deg, var(--brand-500), var(--brand-700)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: var(--display-xs); font-weight: var(--font-weight-bold); } /* ================================================================ 11. CARDS ================================================================ */ .card { border-radius: var(--radius-xl) !important; border: 1px solid var(--pipelet-card-border) !important; background: var(--colorNeutralBackground1) !important; box-shadow: var(--shadow-xs) !important; transition: box-shadow 0.2s ease; overflow: hidden; } .card:hover { box-shadow: var(--shadow-sm) !important; } .card-header { background: transparent !important; border-bottom: 1px solid var(--colorNeutralStroke2) !important; padding: var(--spacing-xl) !important; font-weight: var(--font-weight-semibold); } .card-body { padding: var(--spacing-xl) !important; } .card-footer { background: transparent !important; border-top: 1px solid var(--colorNeutralStroke2) !important; padding: var(--spacing-xl) !important; } .docs.dark-edition .card { background: var(--colorNeutralBackground1) !important; border-color: var(--pipelet-card-border) !important; } /* ================================================================ 12. BUTTONS ================================================================ */ .btn { font-weight: var(--font-weight-semibold) !important; font-size: var(--text-sm) !important; border-radius: var(--radius-md) !important; padding: var(--spacing-md) var(--spacing-xl) !important; line-height: var(--leading-sm) !important; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important; border: 1px solid transparent; } .btn-sm { font-size: var(--text-sm) !important; padding: var(--spacing-sm) var(--spacing-lg) !important; } .btn-lg { font-size: var(--text-md) !important; padding: var(--spacing-lg) var(--spacing-2xl) !important; } .btn-primary { background-color: var(--button-primary-bg) !important; border-color: var(--button-primary-border) !important; color: var(--button-primary-fg) !important; box-shadow: var(--shadow-xs); } .btn-primary:hover, .btn-primary:focus { background-color: var(--button-primary-bg-hover) !important; border-color: var(--button-primary-bg-hover) !important; color: var(--button-primary-fg) !important; } .btn-danger { background-color: var(--button-error-bg) !important; border-color: var(--button-error-border) !important; color: var(--button-error-fg) !important; box-shadow: var(--shadow-xs); } .btn-danger:hover, .btn-danger:focus { background-color: var(--button-error-bg-hover) !important; border-color: var(--button-error-bg-hover) !important; } .btn-success { background-color: var(--success-600) !important; border-color: var(--success-600) !important; color: #fff !important; box-shadow: var(--shadow-xs); } .btn-success:hover, .btn-success:focus { background-color: var(--success-700) !important; border-color: var(--success-700) !important; } .btn-warning { background-color: var(--warning-600) !important; border-color: var(--warning-600) !important; color: #fff !important; } .btn-warning:hover, .btn-warning:focus { background-color: var(--warning-700) !important; border-color: var(--warning-700) !important; } .btn-secondary, .btn-outline-secondary { background-color: var(--button-secondary-bg) !important; border-color: var(--button-secondary-border) !important; color: var(--button-secondary-fg) !important; box-shadow: var(--shadow-xs); } .btn-secondary:hover, .btn-secondary:focus, .btn-outline-secondary:hover, .btn-outline-secondary:focus { background-color: var(--button-secondary-bg-hover) !important; border-color: var(--button-secondary-border) !important; color: var(--button-secondary-fg) !important; } .btn-outline-primary { background-color: transparent !important; border-color: var(--brand-300) !important; color: var(--brand-700) !important; } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--brand-50) !important; } .btn-link { color: var(--brand-600) !important; text-decoration: none !important; box-shadow: none !important; border: none !important; } .btn-link:hover { color: var(--brand-700) !important; text-decoration: underline !important; } /* Pipelet gradient CTA button */ .pipelet-btn { margin-top: var(--spacing-3xl); border-radius: var(--radius-md); border: none !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 0.35rem; font-weight: var(--font-weight-semibold); line-height: 1.2 !important; white-space: nowrap; height: 40px; min-height: 40px; padding: var(--spacing-md) var(--spacing-2xl) !important; color: var(--pipelet-btn-text, #0b0d10) !important; background-image: linear-gradient(135deg, var(--pipelet-btn-start, #ea580c), var(--pipelet-btn-end, #facc15)); box-shadow: var(--shadow-lg); transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease !important; } .pipelet-btn:hover, .pipelet-btn:focus { color: var(--pipelet-btn-text, #0b0d10) !important; opacity: 0.92; transform: translateY(-1px); box-shadow: var(--shadow-xl); } .pipelet-btn:active { transform: none; box-shadow: var(--shadow-lg); } .pipelet-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; } /* ================================================================ 13. FORMS ================================================================ */ .form-control, .form-select { font-size: var(--text-sm) !important; font-weight: var(--font-weight-regular); border: 1px solid var(--input-border) !important; border-radius: var(--radius-md) !important; padding: var(--spacing-md) var(--spacing-lg) !important; color: var(--input-text) !important; background-color: var(--input-bg) !important; box-shadow: var(--shadow-xs); transition: border-color 0.15s ease, box-shadow 0.15s ease !important; } .form-control:hover, .form-select:hover { border-color: var(--input-border-hover) !important; } .form-control:focus, .form-select:focus { border-color: var(--input-border-focus) !important; box-shadow: var(--input-ring-focus) !important; outline: none; } .form-control::placeholder { color: var(--input-placeholder) !important; } .form-control:disabled, .form-select:disabled { background-color: var(--input-disabled-bg) !important; border-color: var(--input-disabled-border) !important; cursor: not-allowed; } .form-control-sm, .form-select-sm { padding: var(--spacing-sm) var(--spacing-md) !important; font-size: var(--text-sm) !important; } .form-label { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--colorNeutralForeground2); margin-bottom: var(--spacing-sm); } .form-check-input { border-radius: var(--radius-xs) !important; border-color: var(--input-border) !important; } .form-check-input:checked { background-color: var(--brand-600) !important; border-color: var(--brand-600) !important; } .form-check-input:focus { box-shadow: var(--ring-brand) !important; } .form-switch .form-check-input { border-radius: var(--radius-full) !important; } .input-group-text { border: 1px solid var(--input-border); border-radius: var(--radius-md); background: var(--colorNeutralBackground2); color: var(--colorNeutralForeground3); font-size: var(--text-sm); } /* ================================================================ 14. TABLES ================================================================ */ .table { font-size: var(--text-sm); color: var(--colorNeutralForeground1); border-color: var(--colorNeutralStroke2); } .table > thead > tr > th { font-size: var(--text-xs) !important; font-weight: var(--font-weight-semibold) !important; text-transform: uppercase !important; letter-spacing: 0.04em; color: var(--colorNeutralForeground3) !important; background: var(--colorNeutralBackground2) !important; border-bottom: 1px solid var(--colorNeutralStroke2) !important; padding: var(--spacing-lg) var(--spacing-xl) !important; white-space: nowrap; } .table > tbody > tr > td { padding: var(--spacing-lg) var(--spacing-xl) !important; vertical-align: middle; border-bottom: 1px solid var(--colorNeutralStroke2); color: var(--colorNeutralForeground1); } .table > tbody > tr:last-child > td { border-bottom: none; } .table-striped > tbody > tr:nth-of-type(odd) > td { background-color: var(--colorNeutralBackground2); } .table-hover > tbody > tr:hover > td { background-color: var(--colorNeutralBackground3) !important; } .table-responsive { border-radius: var(--radius-xl); border: 1px solid var(--colorNeutralStroke2); overflow: hidden; } /* ================================================================ 15. BADGES ================================================================ */ .badge { font-size: var(--text-xs) !important; font-weight: var(--font-weight-medium) !important; padding: 2px 10px !important; border-radius: var(--radius-full) !important; border: 1px solid transparent; line-height: var(--leading-xs); } .badge.bg-primary, .badge.badge-primary { background: var(--badge-brand-bg) !important; color: var(--badge-brand-fg) !important; border-color: var(--badge-brand-border) !important; } .badge.bg-success, .badge.badge-success { background: var(--badge-success-bg) !important; color: var(--badge-success-fg) !important; border-color: var(--badge-success-border) !important; } .badge.bg-danger, .badge.badge-danger { background: var(--badge-error-bg) !important; color: var(--badge-error-fg) !important; border-color: var(--badge-error-border) !important; } .badge.bg-warning, .badge.badge-warning { background: var(--badge-warning-bg) !important; color: var(--badge-warning-fg) !important; border-color: var(--badge-warning-border) !important; } .badge.bg-info, .badge.badge-info { background: var(--badge-brand-bg) !important; color: var(--badge-brand-fg) !important; border-color: var(--badge-brand-border) !important; } .badge.bg-secondary, .badge.badge-secondary { background: var(--badge-gray-bg) !important; color: var(--badge-gray-fg) !important; border-color: var(--badge-gray-border) !important; } /* ================================================================ 16. ALERTS ================================================================ */ .alert { border-radius: var(--radius-xl) !important; font-size: var(--text-sm); padding: var(--spacing-xl) !important; } .alert-success { background: var(--success-25) !important; border-color: var(--success-200) !important; color: var(--success-800) !important; } .alert-danger { background: var(--error-25) !important; border-color: var(--error-200) !important; color: var(--error-800) !important; } .alert-warning { background: var(--warning-25) !important; border-color: var(--warning-200) !important; color: var(--warning-800) !important; } .alert-info, .alert-primary { background: var(--brand-25) !important; border-color: var(--brand-200) !important; color: var(--brand-800) !important; } /* ================================================================ 17. DROPDOWNS (Bootstrap overrides) ================================================================ */ .dropdown-menu { border-radius: var(--radius-lg) !important; border: 1px solid var(--colorNeutralStroke2) !important; box-shadow: var(--shadow-lg) !important; background: var(--colorNeutralBackground1) !important; padding: var(--spacing-xs) !important; font-size: var(--text-sm); } .dropdown-item { border-radius: var(--radius-sm); padding: var(--spacing-md) var(--spacing-lg); font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--colorNeutralForeground2); } .dropdown-item:hover, .dropdown-item:focus { background: var(--colorNeutralBackground2); color: var(--colorNeutralForeground1); } .dropdown-item.active, .dropdown-item:active { background: var(--brand-50); color: var(--brand-700); } /* ================================================================ 18. MODALS ================================================================ */ .modal-content { border-radius: var(--radius-xl) !important; border: 1px solid var(--colorNeutralStroke2) !important; box-shadow: var(--shadow-xl) !important; background: var(--colorNeutralBackground1) !important; } .modal-header { border-bottom: 1px solid var(--colorNeutralStroke2); padding: var(--spacing-xl); } .modal-body { padding: var(--spacing-xl); } .modal-footer { border-top: 1px solid var(--colorNeutralStroke2); padding: var(--spacing-xl); } /* ================================================================ 19. PAGINATION ================================================================ */ .pagination .page-link { border-radius: var(--radius-md); border: 1px solid var(--colorNeutralStroke1); color: var(--colorNeutralForeground2); font-size: var(--text-sm); font-weight: var(--font-weight-medium); padding: var(--spacing-md) var(--spacing-lg); margin: 0 2px; } .pagination .page-link:hover { background: var(--colorNeutralBackground2); color: var(--colorNeutralForeground1); } .pagination .page-item.active .page-link { background: var(--brand-600); border-color: var(--brand-600); color: #fff; } /* ================================================================ 20. TOASTS (toastr overrides) ================================================================ */ #toast-container > .toast-success { background-color: var(--success-600) !important; } #toast-container > .toast-error { background-color: var(--error-600) !important; } #toast-container > .toast-warning { background-color: var(--warning-600) !important; } #toast-container > .toast-info { background-color: var(--brand-600) !important; } #toast-container > div { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important; opacity: 1 !important; } /* ================================================================ 21. TOOLTIPS ================================================================ */ .tooltip-inner { background: var(--gray-900) !important; border-radius: var(--radius-md) !important; font-size: var(--text-xs) !important; font-weight: var(--font-weight-medium); padding: var(--spacing-sm) var(--spacing-lg); } /* ================================================================ 22. SCROLLBAR ================================================================ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); } .docs.dark-edition ::-webkit-scrollbar-thumb { background: var(--gray-dark-600); } .docs.dark-edition ::-webkit-scrollbar-thumb:hover { background: var(--gray-dark-500); } /* ================================================================ 23. DARK MODE — Component Overrides ================================================================ */ .docs.dark-edition { color: var(--colorNeutralForeground1); background-color: var(--colorNeutralBackground2); } .docs.dark-edition a { color: var(--brand-300); } .docs.dark-edition a:hover { color: var(--brand-200); } .docs.dark-edition .ct-docs-sidebar-col { background: var(--colorNeutralBackground1); border-right-color: var(--colorNeutralStroke2); } .docs.dark-edition .table > thead > tr > th { background: var(--colorNeutralBackground3) !important; color: var(--colorNeutralForeground3) !important; border-bottom-color: var(--colorNeutralStroke2) !important; } .docs.dark-edition .table > tbody > tr > td { border-bottom-color: var(--colorNeutralStroke2); color: var(--colorNeutralForeground1); } .docs.dark-edition .form-control, .docs.dark-edition .form-select { background-color: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--input-text) !important; } .docs.dark-edition .dropdown-menu { background: var(--colorNeutralBackground1) !important; border-color: var(--colorNeutralStroke2) !important; } .docs.dark-edition .dropdown-item:hover { background: var(--colorNeutralBackground3); } .docs.dark-edition .alert-success { background: rgba(3, 152, 85, 0.12) !important; border-color: rgba(3, 152, 85, 0.30) !important; color: var(--success-300) !important; } .docs.dark-edition .alert-danger { background: rgba(217, 45, 32, 0.12) !important; border-color: rgba(217, 45, 32, 0.30) !important; color: var(--error-300) !important; } .docs.dark-edition .alert-warning { background: rgba(220, 104, 3, 0.12) !important; border-color: rgba(220, 104, 3, 0.30) !important; color: var(--warning-300) !important; } .docs.dark-edition .alert-info, .docs.dark-edition .alert-primary { background: rgba(78, 91, 166, 0.12) !important; border-color: rgba(78, 91, 166, 0.30) !important; color: var(--brand-300) !important; } /* Dark mode — ensure all tables have correct text color, even without .table class */ .docs.dark-edition table { color: var(--colorNeutralForeground1); } .docs.dark-edition table th { color: var(--colorNeutralForeground3); } .docs.dark-edition table td { color: var(--colorNeutralForeground1); } /* Dark mode — text and link colors for content area */ .docs.dark-edition .ct-docs-content-col { color: var(--colorNeutralForeground1); } .docs.dark-edition p, .docs.dark-edition span, .docs.dark-edition label, .docs.dark-edition div { color: inherit; } /* Dark mode — pagination */ .docs.dark-edition .pagination .page-link { background: var(--colorNeutralBackground1); border-color: var(--colorNeutralStroke1); color: var(--colorNeutralForeground2); } .docs.dark-edition .pagination .page-link:hover { background: var(--colorNeutralBackground3); color: var(--colorNeutralForeground1); } .docs.dark-edition .pagination .page-item.active .page-link { background: var(--brand-500); border-color: var(--brand-500); color: #fff; } /* Dark mode — modals */ .docs.dark-edition .modal-content { background: var(--colorNeutralBackground1) !important; border-color: var(--colorNeutralStroke2) !important; color: var(--colorNeutralForeground1); } .docs.dark-edition .modal-header { border-bottom-color: var(--colorNeutralStroke2); } .docs.dark-edition .modal-footer { border-top-color: var(--colorNeutralStroke2); } /* Dark mode icon theme toggle */ .docs.dark-edition .theme-icon { display: none; } .docs.dark-edition .theme-icon-sun { display: inline-block; } /* ================================================================ 24. MISC ================================================================ */ .text-muted { color: var(--colorNeutralForeground4) !important; } .noIdent { margin-left: 0 !important; padding-left: 0 !important; } .swal2-popup { border-radius: var(--radius-xl) !important; } .flatpickr-calendar { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important; border: 1px solid var(--colorNeutralStroke2) !important; } .dataTables_wrapper .dataTables_filter input { border: 1px solid var(--input-border) !important; border-radius: var(--radius-md) !important; padding: var(--spacing-sm) var(--spacing-lg) !important; } .navbar-main, .navbar { box-shadow: none !important; } /* List style resets — scoped to navigation only */ .ct-docs-sidebar-col li, .ct-docs-navbar-nav-right li, .ct-docs-navbar-nav-left li { list-style-type: none; } /* Navbar icon button (logout, etc.) */ .navbar-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: transparent; color: rgba(255,255,255,0.8); padding: 0; border-radius: var(--radius-md); transition: color 0.15s ease, background-color 0.15s ease; text-decoration: none; } .navbar-icon-button:hover, .navbar-icon-button:focus { color: #fff; background: rgba(255,255,255,0.08); text-decoration: none; }