/** * css/app.css — KEYSTONEX ENTERPRISE DESIGN SYSTEM (COMPILED BUNDLE) * AUTO-GENERATED FROM css/design-system/* — DO NOT EDIT HARDCODED VALUES OUTSIDE TOKENS * Modules Compiled: 12 | Last Built: 2026-10-16 08:11:58 */ /* ========================================================================= */ /* MODULE: css/design-system/_tokens.css */ /* ========================================================================= */ /** * css/design-system/_tokens.css * LAYER 1: DESIGN TOKENS (Single Source of Truth) * * All colors, typography, spacing, border-radii, shadows, and component dimensions * are defined here as CSS Custom Properties. * Note: --bs-primary and --bs-primary-rgb are dynamically injected in header.php * from the organization's configured Brand Primary Color ($settings->primary_color). */ :root { /* 1. Brand & Dynamic Primary Accent Tokens */ --kx-brand-primary: var(--bs-primary, #4fa2b5); --kx-brand-primary-rgb: var(--bs-primary-rgb, 79, 162, 181); --kx-brand-primary-soft: rgba(var(--bs-primary-rgb, 79, 162, 181), 0.12); --kx-brand-primary-subtle: rgba(var(--bs-primary-rgb, 79, 162, 181), 0.06); --kx-brand-primary-border: rgba(var(--bs-primary-rgb, 79, 162, 181), 0.35); --kx-brand-primary-glow: 0 4px 12px rgba(var(--bs-primary-rgb, 79, 162, 181), 0.25); --kx-text-on-primary: #ffffff; /* 2. Extended Semantic Functional Palette (Light Mode) */ --bs-purple: #7c3aed; --bs-purple-rgb: 124, 58, 237; --kx-purple: var(--bs-purple); --bs-indigo: #4f46e5; --bs-indigo-rgb: 79, 70, 229; --kx-indigo: var(--bs-indigo); --bs-teal: #0d9488; --bs-teal-rgb: 13, 148, 136; --kx-teal: var(--bs-teal); --bs-orange: #ea580c; --bs-orange-rgb: 234, 88, 12; --kx-orange: var(--bs-orange); /* High-contrast semantic & neutral tokens for Light Mode buttons, pills & badges */ --kx-info-text: #0284c7; --kx-info-bg-soft: rgba(2, 132, 199, 0.10); --kx-warning-text: #b45309; --kx-warning-bg-soft: rgba(245, 158, 11, 0.14); --kx-success-text: #15803d; --kx-success-bg-soft: rgba(21, 128, 61, 0.10); --kx-danger-text: #dc2626; --kx-danger-bg-soft: rgba(220, 38, 38, 0.10); --kx-secondary-text: #334155; --kx-secondary-bg-soft: rgba(51, 65, 85, 0.08); --kx-secondary-border: #64748b; --kx-secondary-hover-bg: #334155; --kx-secondary-hover-text: #ffffff; /* 3. Surface, Canvas & Border Tokens (Light Mode) */ --kx-bg-canvas: #dedfe0; --kx-bg-surface: #ffffff; --kx-bg-elevated: #f8f9fb; --kx-bg-input: #f3f5f8; --kx-border-color: #e2e3e5; --kx-border-subtle: rgba(0, 0, 0, 0.08); --kx-text-main: #212529; --kx-text-muted: #64748b; /* 4. Typography Tokens */ --kx-font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --kx-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --kx-font-size-base: 0.925rem; --kx-font-size-table: 0.90rem; --kx-font-size-label: 0.75rem; /* 5. Radius & Elevation Tokens */ --kx-radius-sm: 0.5rem; --kx-radius-md: 0.75rem; --kx-radius-lg: 1rem; --kx-radius-xl: 1.25rem; --kx-radius-pill: 50rem; --kx-shadow-card: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --kx-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.08); --kx-shadow-action: 0 4px 10px rgba(0, 0, 0, 0.15); /* 6. Standardized Component Dimension Tokens */ --kx-pill-height: 26px; --kx-pill-padding-x: 0.75rem; --kx-pill-font-size: 0.75rem; --kx-pill-gap: 0.35rem; --kx-field-height: 36px; --kx-btn-pill-height: 36px; --kx-btn-pill-padding-x: 0.95rem; --kx-btn-pill-font-size: 0.8125rem; --kx-btn-pill-gap: 0.425rem; --kx-btn-group-gap: 0.5rem; --kx-action-icon-size: 32px; --kx-action-icon-sm-size: 28px; --kx-action-icon-font: 0.85rem; --kx-action-icon-gap: 0.375rem; /* Navigation Tabs (.command-nav-pills & .project-settings-tabs) Tokens */ --kx-tab-track-bg: rgba(15, 23, 42, 0.04); --kx-tab-gap: 0.45rem; --kx-tab-height: 36px; --kx-tab-padding-x: 0.95rem; --kx-tab-font-size: 0.84rem; --kx-tab-radius: 8px; --kx-tab-hover-bg: rgba(var(--bs-primary-rgb, 79, 162, 181), 0.10); /* Search Box (.custom-search-group) Tokens */ --kx-search-height-sm: 36px; --kx-search-height-md: 36px; --kx-search-radius: 0.5rem; --kx-sidebar-width: 268px; --kx-navbar-height: 76px; --kx-kanban-col-width: 330px; --kx-kanban-col-gap: 1.5rem; --kx-kanban-card-gap: 1.125rem; /* 7. Table Header, Summary Row & Row Hover Tokens (Light Mode) */ --kx-thead-bg: rgba(var(--bs-primary-rgb, 79, 162, 181), 0.08); --kx-thead-text: #1e293b; --kx-thead-border: rgba(var(--bs-primary-rgb, 79, 162, 181), 0.24); --kx-thead-font-size: 0.75rem; --kx-thead-transform: uppercase; --kx-tfoot-bg: rgba(var(--bs-primary-rgb, 79, 162, 181), 0.06); --kx-tfoot-text: #0f172a; --kx-row-hover-bg: rgba(var(--bs-primary-rgb, 79, 162, 181), 0.06); --kx-row-hover-text: #0f172a; /* 8. Cross-Studio Semantic Token Aliases */ --surface-card: var(--kx-bg-surface); --bg-subtle: var(--kx-bg-elevated); --border-subtle: var(--kx-border-color); --accent-primary: var(--kx-brand-primary); --accent-soft: var(--kx-brand-primary-soft); --text-primary: var(--kx-text-main); --text-secondary: var(--kx-text-muted); --shadow-sm: var(--kx-shadow-card); --shadow-md: var(--kx-shadow-hover); --status-info: var(--kx-info-text); --status-success: var(--kx-success-text); } /* Dark Mode Token Overrides (Triggered by header.php data-bs-theme="dark") */ [data-bs-theme="dark"] { --bs-purple: #c084fc; --bs-purple-rgb: 192, 132, 252; --bs-indigo: #818cf8; --bs-indigo-rgb: 129, 140, 248; --bs-teal: #2dd4bf; --bs-teal-rgb: 45, 212, 191; --bs-orange: #fb923c; --bs-orange-rgb: 251, 146, 60; --bs-secondary-color: #cbd5e1; --bs-secondary-rgb: 203, 213, 225; --kx-info-text: #38bdf8; --kx-info-bg-soft: rgba(56, 189, 248, 0.15); --kx-warning-text: #fbbf24; --kx-warning-bg-soft: rgba(251, 191, 36, 0.15); --kx-success-text: #4ade80; --kx-success-bg-soft: rgba(74, 222, 128, 0.15); --kx-danger-text: #f87171; --kx-danger-bg-soft: rgba(248, 113, 113, 0.15); /* Luminous neutral tokens so secondary buttons/badges never appear dark-grey on dark surfaces */ --kx-secondary-text: #e2e8f0; --kx-secondary-bg-soft: rgba(226, 232, 240, 0.12); --kx-secondary-border: #94a3b8; --kx-secondary-hover-bg: #e2e8f0; --kx-secondary-hover-text: #0f172a; --kx-bg-canvas: #121416; --kx-bg-surface: #212529; --kx-bg-elevated: #2b3035; --kx-bg-input: #2b3035; --kx-border-color: #343a40; --kx-border-subtle: rgba(255, 255, 255, 0.1); --kx-text-main: #f1f5f9; --kx-text-muted: #94a3b8; --kx-tab-track-bg: rgba(255, 255, 255, 0.05); --kx-tab-hover-bg: rgba(var(--bs-primary-rgb, 79, 162, 181), 0.18); /* Table Header, Summary Row & Row Hover Tokens (Dark Mode) */ --kx-thead-bg: rgba(var(--bs-primary-rgb, 79, 162, 181), 0.16); --kx-thead-text: #f1f5f9; --kx-thead-border: rgba(var(--bs-primary-rgb, 79, 162, 181), 0.34); --kx-tfoot-bg: rgba(var(--bs-primary-rgb, 79, 162, 181), 0.12); --kx-tfoot-text: #f8fafc; --kx-row-hover-bg: rgba(var(--bs-primary-rgb, 79, 162, 181), 0.14); --kx-row-hover-text: #f8fafc; /* Cross-Studio Semantic Token Aliases (Dark Mode) */ --surface-card: var(--kx-bg-surface); --bg-subtle: var(--kx-bg-elevated); --border-subtle: var(--kx-border-color); --accent-primary: var(--kx-brand-primary); --accent-soft: var(--kx-brand-primary-soft); --text-primary: var(--kx-text-main); --text-secondary: var(--kx-text-muted); --shadow-sm: var(--kx-shadow-card); --shadow-md: var(--kx-shadow-hover); --status-info: var(--kx-info-text); --status-success: var(--kx-success-text); } @media (prefers-color-scheme: dark) { [data-bs-theme="auto"] { --bs-purple: #c084fc; --bs-purple-rgb: 192, 132, 252; --bs-indigo: #818cf8; --bs-indigo-rgb: 129, 140, 248; --bs-teal: #2dd4bf; --bs-teal-rgb: 45, 212, 191; --bs-orange: #fb923c; --bs-orange-rgb: 251, 146, 60; --bs-secondary-color: #cbd5e1; --bs-secondary-rgb: 203, 213, 225; --kx-info-text: #38bdf8; --kx-info-bg-soft: rgba(56, 189, 248, 0.15); --kx-warning-text: #fbbf24; --kx-warning-bg-soft: rgba(251, 191, 36, 0.15); --kx-success-text: #4ade80; --kx-success-bg-soft: rgba(74, 222, 128, 0.15); --kx-danger-text: #f87171; --kx-danger-bg-soft: rgba(248, 113, 113, 0.15); --kx-secondary-text: #e2e8f0; --kx-secondary-bg-soft: rgba(226, 232, 240, 0.12); --kx-secondary-border: #94a3b8; --kx-secondary-hover-bg: #e2e8f0; --kx-secondary-hover-text: #0f172a; --kx-bg-canvas: #121416; --kx-bg-surface: #212529; --kx-bg-elevated: #2b3035; --kx-bg-input: #2b3035; --kx-border-color: #343a40; --kx-border-subtle: rgba(255, 255, 255, 0.1); --kx-text-main: #f1f5f9; --kx-text-muted: #94a3b8; --kx-tab-hover-bg: rgba(var(--bs-primary-rgb, 79, 162, 181), 0.18); --kx-thead-bg: rgba(var(--bs-primary-rgb, 79, 162, 181), 0.16); --kx-thead-text: #f1f5f9; --kx-thead-border: rgba(var(--bs-primary-rgb, 79, 162, 181), 0.34); --kx-tfoot-bg: rgba(var(--bs-primary-rgb, 79, 162, 181), 0.12); --kx-tfoot-text: #f8fafc; --kx-row-hover-bg: rgba(var(--bs-primary-rgb, 79, 162, 181), 0.14); --kx-row-hover-text: #f8fafc; --surface-card: var(--kx-bg-surface); --bg-subtle: var(--kx-bg-elevated); --border-subtle: var(--kx-border-color); --accent-primary: var(--kx-brand-primary); --accent-soft: var(--kx-brand-primary-soft); --text-primary: var(--kx-text-main); --text-secondary: var(--kx-text-muted); --shadow-sm: var(--kx-shadow-card); --shadow-md: var(--kx-shadow-hover); --status-info: var(--kx-info-text); --status-success: var(--kx-success-text); } } /* ========================================================================= */ /* MODULE: css/design-system/_reset.css */ /* ========================================================================= */ /** * css/design-system/_reset.css * LAYER 2: BASE NORMALIZATION, SURFACES & FRACTIONAL SPACING UTILITIES */ ::-webkit-scrollbar { display: none; } html, body { -ms-overflow-style: none; scrollbar-width: none; display: flex; min-height: 100vh; flex-direction: column; overflow-x: hidden; font-family: var(--kx-font-sans) !important; font-size: var(--kx-font-size-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--kx-font-sans) !important; font-weight: 700 !important; letter-spacing: -0.015em; color: var(--kx-brand-primary) !important; margin-bottom: 0 !important; } /* Allow explicit text-* overrides on headings when needed */ h1.text-body, h2.text-body, h3.text-body, h4.text-body, h5.text-body, h6.text-body { color: var(--kx-text-main) !important; } h3.text-success, h4.text-success, h5.text-success, h6.text-success, .card-header h6.text-success { color: var(--bs-success) !important; } h3.text-danger, h4.text-danger, h5.text-danger, h6.text-danger, .card-header h6.text-danger { color: var(--bs-danger) !important; } h3.text-warning, h4.text-warning, h5.text-warning, h6.text-warning, .card-header h6.text-warning { color: var(--bs-warning) !important; } h3.text-info, h4.text-info, h5.text-info, h6.text-info, .card-header h6.text-info { color: var(--bs-info) !important; } h3.text-purple, h4.text-purple, h5.text-purple, h6.text-purple, .card-header h6.text-purple { color: var(--bs-purple) !important; } h3.text-indigo, h4.text-indigo, h5.text-indigo, h6.text-indigo, .card-header h6.text-indigo { color: var(--bs-indigo) !important; } h3.text-teal, h4.text-teal, h5.text-teal, h6.text-teal, .card-header h6.text-teal { color: var(--bs-teal) !important; } h3.text-orange, h4.text-orange, h5.text-orange, h6.text-orange, .card-header h6.text-orange { color: var(--bs-orange) !important; } .card-header h6.text-secondary { color: var(--bs-secondary) !important; } .card-header h6.text-dark { color: var(--kx-text-main) !important; } /* Light Mode Surfaces */ html, body, [data-bs-theme="light"] html, [data-bs-theme="light"] body { background-color: var(--kx-bg-canvas) !important; color: var(--kx-text-main) !important; } .card, .modal-content, #sidebar, #content .navbar, footer, [data-bs-theme="light"] .card, [data-bs-theme="light"] .modal-content, [data-bs-theme="light"] #sidebar, [data-bs-theme="light"] #content .navbar, [data-bs-theme="light"] footer { background-color: var(--kx-bg-surface) !important; border-color: var(--kx-border-color) !important; } /* Dark Mode Surfaces */ [data-bs-theme="dark"] html, [data-bs-theme="dark"] body { background-color: var(--kx-bg-canvas) !important; color: var(--kx-text-main) !important; } [data-bs-theme="dark"] .card, [data-bs-theme="dark"] .modal-content, [data-bs-theme="dark"] #sidebar, [data-bs-theme="dark"] #content .navbar, [data-bs-theme="dark"] footer { background-color: var(--kx-bg-surface) !important; border-color: var(--kx-border-color) !important; } /* Dark Mode Text Contrast Guardrails: Prevent dark-grey/black text from disappearing on dark surfaces */ [data-bs-theme="dark"] #content main .text-dark:not(mark):not(.bg-white) { color: var(--kx-text-main) !important; } [data-bs-theme="dark"] .text-secondary { color: var(--kx-secondary-text) !important; } /* Auto Mode (System Dark) */ @media (prefers-color-scheme: dark) { [data-bs-theme="auto"] html, [data-bs-theme="auto"] body { background-color: var(--kx-bg-canvas) !important; color: var(--kx-text-main) !important; } [data-bs-theme="auto"] .card, [data-bs-theme="auto"] .modal-content, [data-bs-theme="auto"] #sidebar, [data-bs-theme="auto"] #content .navbar, [data-bs-theme="auto"] footer { background-color: var(--kx-bg-surface) !important; border-color: var(--kx-border-color) !important; } [data-bs-theme="auto"] #content main .text-dark:not(mark):not(.bg-white) { color: var(--kx-text-main) !important; } [data-bs-theme="auto"] .text-secondary { color: var(--kx-secondary-text) !important; } } /* Links inside Main Content */ #content main a:where(:not(.btn):not(.dropdown-item):not(.list-group-item):not(.nav-link):not(.badge):not(.cc-header-pill):not(.cc-view-pill):not(.cb-tab-pill):not(.em-mode-btn):not(.active)) { color: var(--kx-brand-primary); text-decoration: none; } #content main a:where(:not(.btn):not(.dropdown-item):not(.list-group-item):not(.nav-link):not(.badge):not(.cc-header-pill):not(.cc-view-pill):not(.cb-tab-pill):not(.em-mode-btn):not(.active)):hover { color: var(--kx-brand-primary); filter: brightness(90%); text-decoration: underline; } /* Fractional Spacing Utilities (.5 increments) */ .gap-1\.5 { gap: 0.375rem !important; } .gap-2\.5 { gap: 0.625rem !important; } .gap-3\.5 { gap: 1.25rem !important; } .p-2\.5 { padding: 0.625rem !important; } .p-3\.5 { padding: 1.25rem !important; } .px-2\.5 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; } .px-3\.5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .py-0\.5 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; } .py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; } .py-2\.5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; } .me-1\.5 { margin-right: 0.375rem !important; } .ms-1\.5 { margin-left: 0.375rem !important; } .mb-2\.5 { margin-bottom: 0.625rem !important; } .mb-3\.5 { margin-bottom: 1.25rem !important; } .mt-2\.5 { margin-top: 0.625rem !important; } .pt-2\.5 { padding-top: 0.625rem !important; } .cursor-pointer { cursor: pointer !important; } .tracking-wider { letter-spacing: 0.05em !important; } /* Ensure .bg-primary respects Bootstrap .bg-opacity-* utilities */ .bg-primary { --bs-bg-opacity: 1; background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; } .bg-opacity-10 { --bs-bg-opacity: 0.1 !important; } .bg-opacity-15 { --bs-bg-opacity: 0.15 !important; } .bg-opacity-20 { --bs-bg-opacity: 0.2 !important; } .bg-opacity-25 { --bs-bg-opacity: 0.25 !important; } .bg-opacity-50 { --bs-bg-opacity: 0.5 !important; } .bg-opacity-75 { --bs-bg-opacity: 0.75 !important; } /* ========================================================================= */ /* MODULE: css/design-system/layout/_sidebar.css */ /* ========================================================================= */ /** * css/design-system/layout/_sidebar.css * LAYER 2: SIDEBAR NAVIGATION & LAYOUT SHELL */ .wrapper { display: flex; width: 100%; flex: 1; } .min-w-0 { min-width: 0 !important; } .kx-rich-text p:last-child, .kx-rich-text ol:last-child, .kx-rich-text ul:last-child { margin-bottom: 0; } .kx-rich-text ol, .kx-rich-text ul { padding-left: 1.25rem; } #sidebar { min-width: var(--kx-sidebar-width, 268px); max-width: var(--kx-sidebar-width, 268px); width: var(--kx-sidebar-width, 268px); transition: margin 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s ease; height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; border-right: 1px solid var(--kx-border-subtle); background-color: var(--kx-bg-surface); flex-shrink: 0; user-select: none; } #sidebar::-webkit-scrollbar { width: 5px; } #sidebar::-webkit-scrollbar-track { background: transparent; } #sidebar::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.2); border-radius: 4px; } #sidebar::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 128, 0.38); } #sidebar .sidebar-header { padding: 16px 20px; text-align: center; } #sidebar .sidebar-header img { max-width: 100%; max-height: 54px; } /* Sidebar Search & Toolbar (scrolls naturally with the sidebar header & links) */ .kx-sidebar-toolbar { padding: 0.65rem 0.95rem 0.55rem; border-bottom: 1px solid var(--kx-border-subtle); background-color: var(--kx-bg-surface); position: relative; box-sizing: border-box; width: 100%; flex-shrink: 0; } .kx-sidebar-search-wrap { position: relative; } .kx-sidebar-search-wrap .kx-search-icon { position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); font-size: 0.78rem; color: var(--kx-text-muted); pointer-events: none; } .kx-sidebar-search-input { width: 100%; height: 32px; padding: 0.25rem 2.8rem 0.25rem 2rem; font-size: 0.78rem; border-radius: 0.5rem; border: 1px solid var(--kx-border-subtle); background-color: var(--kx-bg-elevated); color: var(--kx-text-main); transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .kx-sidebar-search-input:focus { outline: none; border-color: var(--kx-brand-primary); background-color: var(--kx-bg-surface); box-shadow: 0 0 0 3px var(--kx-brand-primary-subtle); } .kx-sidebar-search-kbd { position: absolute; right: 0.45rem; top: 50%; transform: translateY(-50%); font-size: 0.64rem; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--kx-border-subtle); background: var(--kx-bg-surface); color: var(--kx-text-muted); font-family: var(--kx-font-mono); pointer-events: none; } /* Sidebar Toolbar Round Icon Buttons & Pill Buttons (Light & Dark Mode) */ .kx-sidebar-tool-btn { width: 25px !important; height: 25px !important; min-width: 25px !important; padding: 0 !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background-color: var(--kx-brand-primary-subtle) !important; border: 1px solid rgba(var(--bs-primary-rgb), 0.55) !important; color: var(--kx-brand-primary) !important; box-shadow: none !important; transition: all 0.15s ease !important; cursor: pointer; flex-shrink: 0 !important; } .kx-sidebar-tool-btn i.bi { color: currentColor !important; font-size: 0.74rem !important; line-height: 1 !important; } .kx-sidebar-tool-btn:hover, .kx-sidebar-tool-btn.is-active { background-color: var(--kx-brand-primary) !important; border-color: var(--kx-brand-primary) !important; color: #ffffff !important; transform: translateY(-1px); } .kx-sidebar-pill-btn { height: 25px !important; min-height: 25px !important; padding: 0 0.55rem !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.3rem !important; white-space: nowrap !important; flex-shrink: 0 !important; font-size: 0.70rem !important; font-weight: 600 !important; line-height: 1 !important; text-decoration: none !important; background-color: var(--kx-brand-primary-subtle) !important; border: 1px solid var(--kx-brand-primary) !important; color: var(--kx-brand-primary) !important; box-shadow: none !important; transition: all 0.15s ease !important; } .kx-sidebar-pill-btn i.bi { color: currentColor !important; font-size: 0.72rem !important; line-height: 1 !important; margin: 0 !important; } .kx-sidebar-pill-btn:hover, .kx-sidebar-pill-btn:focus { background-color: var(--kx-brand-primary) !important; border-color: var(--kx-brand-primary) !important; color: #ffffff !important; transform: translateY(-1px); } /* Section Headers */ .kx-sidebar-section { margin-bottom: 0.35rem; } .kx-sidebar-section-header { display: flex; align-items: center; justify-content: space-between; padding: 0.42rem 0.65rem; margin-top: 0.45rem; margin-bottom: 0.15rem; border-radius: 0.45rem; cursor: pointer; color: var(--kx-text-muted); transition: background-color 0.15s ease, color 0.15s ease; } .kx-sidebar-section-header:hover { background-color: var(--kx-bg-elevated); color: var(--kx-text-main); } .kx-sidebar-section-header.has-active-child { color: var(--kx-brand-primary); } .kx-sidebar-section-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin: 0; display: flex; align-items: center; gap: 0.4rem; } .kx-sidebar-section-meta { display: flex; align-items: center; gap: 0.35rem; } .kx-sidebar-section-count { font-size: 0.64rem; font-weight: 600; padding: 0.05rem 0.38rem; border-radius: 999px; background-color: var(--kx-bg-elevated); color: var(--kx-text-muted); } .kx-sidebar-section-header.has-active-child .kx-sidebar-section-count { background-color: var(--kx-brand-primary-subtle); color: var(--kx-brand-primary); } .kx-sidebar-chevron { font-size: 0.7rem; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .kx-sidebar-section-header[aria-expanded="true"] .kx-sidebar-chevron { transform: rotate(-180deg); } /* Nav Links & Row Wrapper */ .kx-nav-item-row { position: relative; display: flex; align-items: center; margin-bottom: 2px; } #sidebar .nav-link { color: var(--kx-text-secondary); border-radius: 0.5rem; padding: 0.48rem 0.75rem; font-size: 0.84rem; font-weight: 500; margin-bottom: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color 0.14s ease, color 0.14s ease, transform 0.14s ease; } #sidebar.kx-sidebar-compact .nav-link { padding: 0.34rem 0.65rem; font-size: 0.8rem; } #sidebar.kx-sidebar-compact .kx-sidebar-section-header { padding: 0.28rem 0.6rem; margin-top: 0.25rem; } #sidebar .nav-link .kx-nav-link-main { display: flex; align-items: center; gap: 0.55rem; min-width: 0; flex: 1; overflow: hidden; } #sidebar .nav-link .kx-nav-link-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #sidebar .nav-link .bi { color: var(--kx-text-muted); font-size: 0.96rem; flex-shrink: 0; transition: color 0.14s ease; } #sidebar .nav-link:hover { background: var(--kx-brand-primary-subtle); color: var(--kx-brand-primary); } #sidebar .nav-link:hover .bi { color: var(--kx-brand-primary); } /* Active Link State */ .nav-link.active-link, #sidebar .nav-link.active-link { background-color: var(--kx-brand-primary) !important; color: var(--kx-text-on-primary, #ffffff) !important; border-radius: 0.5rem !important; font-weight: 600 !important; box-shadow: var(--kx-brand-primary-glow); } .nav-link.active-link .bi, #sidebar .nav-link.active-link .bi { color: var(--kx-text-on-primary, #ffffff) !important; } /* Hover Quick Actions (Studio Gear & Pin Star) */ .kx-nav-quick-actions { display: inline-flex; align-items: center; gap: 2px; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; z-index: 2; } .kx-nav-item-row:hover .kx-nav-quick-actions, .kx-nav-item-row:focus-within .kx-nav-quick-actions { opacity: 1; pointer-events: auto; } #sidebar.kx-hide-studio-gears .kx-studio-quick-btn { display: none !important; } .kx-nav-action-btn { width: 24px; height: 24px; border-radius: 6px; border: none; background: var(--kx-bg-surface); color: var(--kx-text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; padding: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); text-decoration: none; transition: background-color 0.12s ease, color 0.12s ease; } .kx-nav-action-btn:hover { background: var(--kx-brand-primary); color: #ffffff !important; } .kx-nav-action-btn.is-pinned { color: #f59e0b !important; } .kx-nav-action-btn.is-active-studio { background: rgba(255, 255, 255, 0.22); color: #ffffff !important; } /* Customizer Modal Item Cards */ .kx-cust-section-card { border: 1px solid var(--kx-border-subtle); border-radius: 0.65rem; background: var(--kx-bg-surface); margin-bottom: 0.75rem; overflow: hidden; } .kx-cust-section-head { background: var(--kx-bg-elevated); padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--kx-border-subtle); display: flex; align-items: center; justify-content: space-between; } .kx-cust-item-row { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.85rem; border-bottom: 1px solid var(--kx-border-subtle); gap: 0.75rem; background: var(--kx-bg-surface); } .kx-cust-item-row:last-child { border-bottom: none; } .kx-cust-item-row.is-hidden-item { opacity: 0.52; background: var(--kx-bg-elevated); } .kx-cust-move-group { display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; } .kx-cust-icon-btn { width: 28px !important; height: 28px !important; min-width: 28px !important; padding: 0 !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; line-height: 1 !important; flex-shrink: 0 !important; } .kx-cust-icon-btn i.bi { font-size: 0.74rem !important; line-height: 1 !important; margin: 0 !important; } #content { width: 100%; height: 100vh !important; overflow-y: auto !important; padding: 0; transition: all 0.3s; } @media (max-width: 991.98px) { #sidebar { margin-left: calc(-1 * var(--kx-sidebar-width, 268px)); position: fixed; z-index: 1050; height: 100vh; overflow-y: auto; } #sidebar.show { margin-left: 0; } #content { width: 100%; } main.container-fluid { padding: 15px; } } /* ========================================================================= */ /* MODULE: css/design-system/layout/_navbar.css */ /* ========================================================================= */ /** * css/design-system/layout/_navbar.css * LAYER 2: TOP NAVBAR, WEATHER PILL, GLOBAL SEARCH & QUICK ACTIONS */ #content .navbar { border-bottom: 1px solid var(--kx-border-subtle); padding: 1rem; } /* Universal KeystoneX Search Group (.custom-search-group) Matches the topbar Global Search style across all search fields, DataTables & AJAX search boxes */ .custom-search-group { position: relative; display: flex; align-items: stretch; border-radius: var(--kx-search-radius, 0.5rem) !important; } .custom-search-group .form-control, .custom-search-group .btn { border-radius: var(--kx-search-radius, 0.5rem) !important; } .custom-search-group .form-control { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right: 0 !important; background-color: var(--kx-bg-input) !important; border-color: var(--kx-border-color) !important; color: var(--kx-text-main) !important; height: var(--kx-field-height, var(--kx-search-height-md, 36px)) !important; min-height: var(--kx-field-height, var(--kx-search-height-md, 36px)) !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 0.85rem !important; } [data-bs-theme="dark"] .custom-search-group .form-control { border-color: #495057 !important; } .custom-search-group .btn, .custom-search-group .btn:disabled, .custom-search-group .btn.disabled { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-top-right-radius: var(--kx-search-radius, 0.5rem) !important; border-bottom-right-radius: var(--kx-search-radius, 0.5rem) !important; background-color: var(--kx-brand-primary) !important; border-color: var(--kx-brand-primary) !important; color: var(--kx-text-on-primary) !important; opacity: 1 !important; z-index: 2 !important; box-shadow: none !important; transform: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 0.85rem !important; min-width: 38px !important; height: var(--kx-field-height, var(--kx-search-height-md, 36px)) !important; min-height: var(--kx-field-height, var(--kx-search-height-md, 36px)) !important; } .custom-search-group .btn:hover { filter: brightness(92%); } .custom-search-group .btn i { color: var(--kx-text-on-primary) !important; } .custom-search-group .form-control:focus { box-shadow: none !important; border-color: var(--kx-brand-primary) !important; } .custom-search-group-sm .form-control, .custom-search-group-sm .btn { height: var(--kx-field-height, var(--kx-search-height-sm, 36px)) !important; min-height: var(--kx-field-height, var(--kx-search-height-sm, 36px)) !important; font-size: 0.85rem !important; padding-top: 0 !important; padding-bottom: 0 !important; } .custom-search-group-lg .form-control, .custom-search-group-lg .btn { height: 44px !important; min-height: 44px !important; font-size: 0.95rem !important; } .custom-search-clear { position: absolute; top: 50%; right: 52px; transform: translateY(-50%); color: var(--kx-text-muted) !important; text-decoration: none; font-size: 0.85rem; line-height: 1; cursor: pointer; z-index: 5; } .custom-search-clear:hover { color: var(--bs-danger) !important; } .kx-ajax-search-dropdown { background-color: var(--kx-bg-surface) !important; border-color: var(--kx-border-color) !important; } /* Dropdown Mouse Over Effects */ .dropdown-item { transition: all 0.2s ease-in-out; border-radius: 6px; margin: 0 4px; width: calc(100% - 8px); } .dropdown-item:hover { background-color: var(--kx-brand-primary-soft) !important; color: var(--kx-brand-primary) !important; transform: translateX(4px); } /* Top Navbar Glossy Weather Pill */ .weather-pill { display: inline-flex; align-items: center; gap: 0.5rem; height: 36px; padding: 0 12px; border-radius: var(--kx-radius-pill); font-size: 0.85rem; cursor: default; user-select: none; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; position: relative; overflow: hidden; } [data-bs-theme="light"] .weather-pill, :root:not([data-bs-theme="dark"]) .weather-pill { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 244, 248, 0.85) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 1), 0 2px 6px rgba(0, 0, 0, 0.05); color: #2b3035; } [data-bs-theme="light"] .weather-pill:hover, :root:not([data-bs-theme="dark"]) .weather-pill:hover { box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 1), 0 4px 10px rgba(0, 0, 0, 0.09); border-color: rgba(0, 0, 0, 0.14); } [data-bs-theme="dark"] .weather-pill { background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.10) 100%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.3), 0 3px 10px rgba(0, 0, 0, 0.28); color: #f8f9fa; } [data-bs-theme="dark"] .weather-pill:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.14) 100%); box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4), 0 4px 14px rgba(0, 0, 0, 0.35); border-color: rgba(255, 255, 255, 0.28); } .weather-pill #weather-icon { font-size: 1.05rem; line-height: 1; display: inline-flex; align-items: center; vertical-align: middle; } .weather-pill .weather-temp { font-weight: 700; font-size: 0.85rem; letter-spacing: -0.2px; line-height: 1; display: inline-flex; align-items: center; } .weather-pill .weather-pill-divider { width: 1px; height: 14px; background-color: currentColor; opacity: 0.25; margin: 0 1px; display: inline-block; } .weather-pill .weather-suburb { font-size: 0.78rem; font-weight: 500; opacity: 0.85; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1; display: inline-flex; align-items: center; } /* Topbar Nav Item Uniform Vertical Centering */ .topbar-nav-list { display: flex; flex-direction: row; align-items: center; gap: 0.65rem; margin-bottom: 0; } .topbar-nav-list .nav-item { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; line-height: 1; } .topbar-nav-list .topbar-btn { width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; line-height: 1; transition: all 0.2s ease; } .topbar-nav-list .topbar-divider { width: 1px; height: 20px; background-color: var(--bs-border-color, rgba(108, 117, 125, 0.3)); opacity: 0.5; display: inline-block; margin: 0 0.15rem; } /* Quick Actions Dropdown Menu Styling */ .quick-actions-menu { min-width: 205px; max-width: 250px; font-size: 0.8rem !important; padding: 0.35rem 0 !important; border-radius: var(--kx-radius-md) !important; } .quick-actions-menu .dropdown-header { font-size: 0.65rem !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.35rem 0.85rem 0.2rem !important; color: var(--kx-text-muted); } .quick-actions-menu .dropdown-item { font-size: 0.8rem !important; padding: 0.35rem 0.85rem !important; display: flex; align-items: center; gap: 0.5rem; transition: background-color 0.15s ease, color 0.15s ease; } .quick-actions-menu .dropdown-item i { font-size: 0.85rem !important; width: 1.1rem; text-align: center; flex-shrink: 0; } .quick-actions-menu .dropdown-divider { margin: 0.25rem 0 !important; } /* ========================================================================= */ /* MODULE: css/design-system/components/_buttons.css */ /* ========================================================================= */ /** * css/design-system/components/_buttons.css * LAYER 2: UNIVERSAL BUTTONS, FUNCTION PILLS & CIRCULAR ACTION ICONS * * Enforces: * 1. Global .btn pill shaping and smooth elevation hover * 2. Universal Function Button Pills (.cc-header-pill) with identical height (34px), * font size (0.8125rem), and currentColor border/icon synchronization * 3. Extended Semantic Palette Buttons (Primary, Purple, Indigo, Teal, Orange, Info, Warning, Success, Danger, Secondary) * 4. Universal Circular Action Icon Buttons (.btn-action-icon) at 32x32px with currentColor border/icon sync */ .btn { border-radius: var(--kx-radius-pill) !important; font-weight: 600 !important; box-shadow: var(--kx-shadow-card) !important; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .btn:hover:not(:disabled):not(.disabled) { transform: translateY(-1px); } /* Primary Brand Button (Dynamic via --kx-brand-primary / --bs-primary) */ .btn-primary { background-color: var(--kx-brand-primary) !important; border-color: var(--kx-brand-primary) !important; color: var(--kx-text-on-primary) !important; } .btn-primary:hover, .btn-primary:active, .btn-primary:focus { background-color: var(--kx-brand-primary) !important; border-color: var(--kx-brand-primary) !important; color: var(--kx-text-on-primary) !important; filter: brightness(92%); } .btn-outline-primary { color: var(--kx-brand-primary) !important; border-color: var(--kx-brand-primary) !important; background-color: var(--kx-brand-primary-subtle); } .btn-outline-primary:hover, .btn-outline-primary:active { background-color: var(--kx-brand-primary) !important; border-color: var(--kx-brand-primary) !important; color: var(--kx-text-on-primary) !important; } /* Extended Semantic Palette Buttons (Purple, Indigo, Teal, Orange) */ /* Purple (Customize / Quick Edit) */ .btn-purple { background-color: var(--bs-purple) !important; border-color: var(--bs-purple) !important; color: #ffffff !important; } .btn-outline-purple { border-color: var(--bs-purple) !important; color: var(--bs-purple) !important; background-color: rgba(var(--bs-purple-rgb), 0.08); } .btn-outline-purple:hover, .btn-outline-purple:active { background-color: var(--bs-purple) !important; border-color: var(--bs-purple) !important; color: #ffffff !important; } /* Indigo (Complete / Approve / Email) */ .btn-indigo { background-color: var(--bs-indigo) !important; border-color: var(--bs-indigo) !important; color: #ffffff !important; } .btn-outline-indigo { border-color: var(--bs-indigo) !important; color: var(--bs-indigo) !important; background-color: rgba(var(--bs-indigo-rgb), 0.08); } .btn-outline-indigo:hover, .btn-outline-indigo:active { background-color: var(--bs-indigo) !important; border-color: var(--bs-indigo) !important; color: #ffffff !important; } /* Teal (All Tasks / Convert / Payment) */ .btn-teal { background-color: var(--bs-teal) !important; border-color: var(--bs-teal) !important; color: #ffffff !important; } .btn-outline-teal { border-color: var(--bs-teal) !important; color: var(--bs-teal) !important; background-color: rgba(var(--bs-teal-rgb), 0.08); } .btn-outline-teal:hover, .btn-outline-teal:active { background-color: var(--bs-teal) !important; border-color: var(--bs-teal) !important; color: #ffffff !important; } /* Orange (Full Edit / Modify) */ .btn-orange { background-color: var(--bs-orange) !important; border-color: var(--bs-orange) !important; color: #ffffff !important; } .btn-outline-orange { border-color: var(--bs-orange) !important; color: var(--bs-orange) !important; background-color: rgba(var(--bs-orange-rgb), 0.08); } .btn-outline-orange:hover, .btn-outline-orange:active { background-color: var(--bs-orange) !important; border-color: var(--bs-orange) !important; color: #ffffff !important; } /* High-Contrast Light/Dark Mode Refinements for Info, Warning, Success, Danger & Neutral Buttons */ .btn-info { background-color: var(--kx-info-text) !important; border-color: var(--kx-info-text) !important; color: #ffffff !important; } .btn-outline-info { color: var(--kx-info-text) !important; border-color: var(--kx-info-text) !important; background-color: var(--kx-info-bg-soft); } .btn-outline-info:hover, .btn-outline-info:active, .btn-outline-info.active { background-color: var(--kx-info-text) !important; border-color: var(--kx-info-text) !important; color: #ffffff !important; } .btn-warning { background-color: var(--kx-warning-text) !important; border-color: var(--kx-warning-text) !important; color: #ffffff !important; } .btn-outline-warning { color: var(--kx-warning-text) !important; border-color: var(--kx-warning-text) !important; background-color: var(--kx-warning-bg-soft); } .btn-outline-warning:hover, .btn-outline-warning:active, .btn-outline-warning.active { background-color: var(--kx-warning-text) !important; border-color: var(--kx-warning-text) !important; color: #ffffff !important; } [data-bs-theme="dark"] .btn-outline-warning:hover, [data-bs-theme="dark"] .btn-outline-warning:active, [data-bs-theme="dark"] .btn-outline-warning.active, [data-bs-theme="dark"] .btn-warning { color: #0f172a !important; } .btn-success { background-color: var(--kx-success-text) !important; border-color: var(--kx-success-text) !important; color: #ffffff !important; } .btn-outline-success { color: var(--kx-success-text) !important; border-color: var(--kx-success-text) !important; background-color: var(--kx-success-bg-soft); } .btn-outline-success:hover, .btn-outline-success:active, .btn-outline-success.active { background-color: var(--kx-success-text) !important; border-color: var(--kx-success-text) !important; color: #ffffff !important; } .btn-danger { background-color: var(--kx-danger-text) !important; border-color: var(--kx-danger-text) !important; color: #ffffff !important; } .btn-outline-danger { color: var(--kx-danger-text) !important; border-color: var(--kx-danger-text) !important; background-color: var(--kx-danger-bg-soft); } .btn-outline-danger:hover, .btn-outline-danger:active, .btn-outline-danger.active { background-color: var(--kx-danger-text) !important; border-color: var(--kx-danger-text) !important; color: #ffffff !important; } /* Theme-Adaptive Neutral Buttons (.btn-secondary, .btn-outline-secondary, .btn-light, .btn-dark) Never renders as unreadable dark-grey-on-dark-grey in Dark Mode or white-on-white in Light Mode */ .btn-outline-secondary, .btn-secondary, #sidebar .btn-light, #content main .btn-light, #content main .btn-outline-light, #content main .btn-dark, #content main .btn-outline-dark, .modal .btn-light, .modal .btn-secondary { color: var(--kx-secondary-text) !important; border-color: var(--kx-secondary-border) !important; background-color: var(--kx-secondary-bg-soft) !important; } .btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-secondary:hover, .btn-secondary:active, .btn-secondary.active, #sidebar .btn-light:hover, #sidebar .btn-light:active, #content main .btn-light:hover, #content main .btn-light:active, #content main .btn-outline-light:hover, #content main .btn-outline-light:active, #content main .btn-dark:hover, #content main .btn-dark:active, #content main .btn-outline-dark:hover, #content main .btn-outline-dark:active, .modal .btn-light:hover, .modal .btn-secondary:hover { background-color: var(--kx-secondary-hover-bg) !important; border-color: var(--kx-secondary-hover-bg) !important; color: var(--kx-secondary-hover-text) !important; } /* ========================================================================= */ /* UNIVERSAL FUNCTION HEADER PILL (.cc-header-pill) & STANDARD ERP BUTTONS */ /* ========================================================================= */ .cc-header-pill, #content main .btn:not(.btn-action-icon):not(.btn-close):not(.btn-link):not(.nav-link):not(.custom-search-btn):not(.custom-search-clear):not(.filter-btn):not(.lead-filter-btn):not(.project-filter-btn):not(.task-filter-btn):not(.btn-lg) { height: var(--kx-field-height, var(--kx-btn-pill-height, 36px)) !important; min-height: var(--kx-field-height, var(--kx-btn-pill-height, 36px)) !important; padding: 0 var(--kx-btn-pill-padding-x, 0.95rem) !important; font-size: var(--kx-btn-pill-font-size, 0.8125rem) !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: var(--kx-btn-pill-gap, 0.425rem) !important; border-radius: var(--kx-radius-pill) !important; line-height: 1 !important; white-space: nowrap !important; box-sizing: border-box !important; border-width: 1px !important; border-style: solid !important; } .cc-header-pill:not(.btn) { text-decoration: none !important; cursor: pointer !important; background-color: var(--kx-brand-primary-subtle); color: var(--kx-brand-primary); border-color: var(--kx-brand-primary) !important; box-shadow: var(--kx-shadow-card) !important; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .cc-header-pill:not(.btn):hover { background-color: var(--kx-brand-primary) !important; border-color: var(--kx-brand-primary) !important; color: var(--kx-text-on-primary) !important; transform: translateY(-1px); } .cc-header-pill.cc-header-pill-primary { background-color: var(--kx-brand-primary) !important; border-color: var(--kx-brand-primary) !important; color: var(--kx-text-on-primary) !important; } .cc-header-pill.cc-header-pill-primary:hover { filter: brightness(92%); color: var(--kx-text-on-primary) !important; } .cc-header-pill:not(.btn):has(> i.text-info) { color: var(--kx-info-text) !important; border-color: var(--kx-info-text) !important; background-color: var(--kx-info-bg) !important; } .cc-header-pill:not(.btn):has(> i.text-info):hover { background-color: var(--kx-info-text) !important; color: #ffffff !important; } .cc-header-pill:not(.btn):has(> i.text-success) { color: var(--kx-success-text) !important; border-color: var(--kx-success-text) !important; background-color: var(--kx-success-bg) !important; } .cc-header-pill:not(.btn):has(> i.text-success):hover { background-color: var(--kx-success-text) !important; color: #ffffff !important; } .cc-header-pill:not(.btn):has(> i.text-warning) { color: var(--kx-warning-text) !important; border-color: var(--kx-warning-text) !important; background-color: var(--kx-warning-bg) !important; } .cc-header-pill:not(.btn):has(> i.text-warning):hover { background-color: var(--kx-warning-text) !important; color: #ffffff !important; } .cc-header-pill:not(.btn):has(> i.text-danger) { color: var(--kx-danger-text) !important; border-color: var(--kx-danger-text) !important; background-color: var(--kx-danger-bg) !important; } .cc-header-pill:not(.btn):has(> i.text-danger):hover { background-color: var(--kx-danger-text) !important; color: #ffffff !important; } .cc-header-pill:not(.btn-primary):not(.cc-header-pill-primary):not(.btn-success):not(.btn-danger):not(.btn-info):not(.btn-warning):not(.btn-purple):not(.btn-teal):not(.btn-orange):not(.btn-indigo) { border-color: currentColor !important; } .cc-header-pill > span:not(.badge), .cc-header-pill > div { color: currentColor !important; line-height: 1 !important; } .cc-header-pill i, #content main .btn:not(.btn-action-icon):not(.btn-close):not(.btn-link):not(.nav-link):not(.custom-search-btn):not(.custom-search-clear) > i { color: currentColor !important; font-size: 0.85rem !important; line-height: 1 !important; margin: 0 !important; } /* Counter Badges inside .cc-header-pill & Workflow Pipeline Pills */ #content main .cc-header-pill .badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 20px !important; min-width: 22px !important; padding: 0 0.42rem !important; font-size: 0.72rem !important; font-weight: 700 !important; line-height: 1 !important; border-radius: 999px !important; background-color: rgba(15, 23, 42, 0.07) !important; color: currentColor !important; border: 1px solid currentColor !important; margin-top: 0 !important; margin-bottom: 0 !important; } [data-bs-theme="dark"] #content main .cc-header-pill .badge { background-color: rgba(255, 255, 255, 0.12) !important; color: currentColor !important; border-color: currentColor !important; } #content main .cc-header-pill.btn-primary .badge, #content main .cc-header-pill.cc-header-pill-primary .badge, #content main .cc-header-pill.btn-info .badge, #content main .cc-header-pill.btn-warning .badge, #content main .cc-header-pill.btn-orange .badge, #content main .cc-header-pill.btn-purple .badge, #content main .cc-header-pill.btn-teal .badge, #content main .cc-header-pill.btn-success .badge, #content main .cc-header-pill.btn-danger .badge, #content main .cc-header-pill.btn-indigo .badge, #content main .cc-header-pill.active .badge, #content main .cc-header-pill:hover .badge { background-color: rgba(255, 255, 255, 0.24) !important; color: currentColor !important; border-color: rgba(255, 255, 255, 0.55) !important; } [data-bs-theme="dark"] #content main .cc-header-pill.btn-warning .badge, [data-bs-theme="dark"] #content main .cc-header-pill.btn-outline-warning:hover .badge, [data-bs-theme="dark"] #content main .cc-header-pill.btn-outline-warning.active .badge { background-color: rgba(15, 23, 42, 0.18) !important; color: #0f172a !important; border-color: rgba(15, 23, 42, 0.4) !important; } /* ========================================================================= */ /* COMMAND CENTER PAGE HEADER RIGHT-ALIGNMENT & SUBTITLE WRAPPING */ /* ========================================================================= */ #content main .d-flex.justify-content-between:has(> div:first-child h1, > div:first-child h2, > div:first-child .h3) > div:first-child { flex: 1 1 280px !important; min-width: 0 !important; } #content main .d-flex.justify-content-between:has(> div:first-child h1, > div:first-child h2, > div:first-child .h3) > div:last-child { margin-left: auto !important; justify-content: flex-end !important; } /* Consistent Spacing Between Tabs & Action Buttons */ #content main .btn-group:not(.input-group), .modal .btn-group:not(.input-group) { display: inline-flex !important; flex-wrap: wrap !important; align-items: center !important; gap: var(--kx-btn-group-gap, 0.5rem) !important; } #content main .btn-group:not(.input-group) > .btn, .modal .btn-group:not(.input-group) > .btn { border-radius: var(--kx-radius-pill) !important; margin-left: 0 !important; } #content main table td.text-end .btn-group, #content main table td.text-end .d-inline-flex, #content main table td.text-end .d-flex { gap: var(--kx-action-icon-gap, 0.375rem) !important; } /* ========================================================================= */ /* UNIVERSAL CIRCULAR ACTION ICON BUTTONS (.btn-action-icon) */ /* ========================================================================= */ .btn-action-icon, #content main table td.text-end .btn-sm:has(> i:only-child) { width: var(--kx-action-icon-size, 32px) !important; height: var(--kx-action-icon-size, 32px) !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; font-size: var(--kx-action-icon-font, 0.85rem) !important; border-width: 1px !important; border-style: solid !important; text-decoration: none !important; cursor: pointer !important; transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease !important; flex-shrink: 0 !important; } /* Default fallback for .btn-action-icon without explicit Bootstrap .btn-* class */ .btn-action-icon:not(.btn) { color: var(--kx-brand-primary) !important; border-color: var(--kx-brand-primary) !important; background-color: var(--kx-brand-primary-subtle) !important; } .btn-action-icon:not(.btn):hover:not(:disabled) { background-color: var(--kx-brand-primary) !important; border-color: var(--kx-brand-primary) !important; color: #ffffff !important; } /* Semantic Modifier & Child-Icon Auto-Detection for .btn-action-icon */ .btn-action-icon.btn-action-primary, .btn-action-icon:not(.btn):has(> i.text-primary) { color: var(--kx-brand-primary) !important; border-color: var(--kx-brand-primary) !important; background-color: var(--kx-brand-primary-subtle) !important; } .btn-action-icon.btn-action-primary:hover:not(:disabled), .btn-action-icon:not(.btn):has(> i.text-primary):hover:not(:disabled) { background-color: var(--kx-brand-primary) !important; border-color: var(--kx-brand-primary) !important; color: #ffffff !important; } .btn-action-icon.btn-action-info, .btn-action-icon.btn-action-view, .btn-action-icon.view, .btn-action-icon:not(.btn):has(> i.text-info) { color: var(--kx-info-text) !important; border-color: var(--kx-info-text) !important; background-color: var(--kx-info-bg) !important; } .btn-action-icon.btn-action-info:hover:not(:disabled), .btn-action-icon.btn-action-view:hover:not(:disabled), .btn-action-icon.view:hover:not(:disabled), .btn-action-icon:not(.btn):has(> i.text-info):hover:not(:disabled) { background-color: var(--kx-info-text) !important; border-color: var(--kx-info-text) !important; color: #ffffff !important; } .btn-action-icon.btn-action-success, .btn-action-icon.btn-action-payment, .btn-action-icon.payment, .btn-action-icon:not(.btn):has(> i.text-success) { color: var(--kx-success-text) !important; border-color: var(--kx-success-text) !important; background-color: var(--kx-success-bg) !important; } .btn-action-icon.btn-action-success:hover:not(:disabled), .btn-action-icon.btn-action-payment:hover:not(:disabled), .btn-action-icon.payment:hover:not(:disabled), .btn-action-icon:not(.btn):has(> i.text-success):hover:not(:disabled) { background-color: var(--kx-success-text) !important; border-color: var(--kx-success-text) !important; color: #ffffff !important; } .btn-action-icon.btn-action-send, .btn-action-icon.btn-action-indigo, .btn-action-icon.send, .btn-action-icon:not(.btn):has(> i.text-indigo) { color: var(--bs-indigo) !important; border-color: var(--bs-indigo) !important; background-color: rgba(var(--bs-indigo-rgb), 0.1) !important; } .btn-action-icon.btn-action-send:hover:not(:disabled), .btn-action-icon.btn-action-indigo:hover:not(:disabled), .btn-action-icon.send:hover:not(:disabled), .btn-action-icon:not(.btn):has(> i.text-indigo):hover:not(:disabled) { background-color: var(--bs-indigo) !important; border-color: var(--bs-indigo) !important; color: #ffffff !important; } .btn-action-icon.btn-action-teal, .btn-action-icon:not(.btn):has(> i.text-teal) { color: var(--bs-teal) !important; border-color: var(--bs-teal) !important; background-color: rgba(var(--bs-teal-rgb), 0.1) !important; } .btn-action-icon.btn-action-teal:hover:not(:disabled), .btn-action-icon:not(.btn):has(> i.text-teal):hover:not(:disabled) { background-color: var(--bs-teal) !important; border-color: var(--bs-teal) !important; color: #ffffff !important; } .btn-action-icon.btn-action-warning, .btn-action-icon.btn-action-edit, .btn-action-icon.edit, .btn-action-icon:not(.btn):has(> i.text-warning) { color: var(--kx-warning-text) !important; border-color: var(--kx-warning-text) !important; background-color: var(--kx-warning-bg) !important; } .btn-action-icon.btn-action-warning:hover:not(:disabled), .btn-action-icon.btn-action-edit:hover:not(:disabled), .btn-action-icon.edit:hover:not(:disabled), .btn-action-icon:not(.btn):has(> i.text-warning):hover:not(:disabled) { background-color: var(--kx-warning-text) !important; border-color: var(--kx-warning-text) !important; color: #ffffff !important; } .btn-action-icon.btn-action-danger, .btn-action-icon.btn-action-delete, .btn-action-icon.delete, .btn-action-icon:not(.btn):has(> i.text-danger) { color: var(--kx-danger-text) !important; border-color: var(--kx-danger-text) !important; background-color: var(--kx-danger-bg) !important; } .btn-action-icon.btn-action-danger:hover:not(:disabled), .btn-action-icon.btn-action-delete:hover:not(:disabled), .btn-action-icon.delete:hover:not(:disabled), .btn-action-icon:not(.btn):has(> i.text-danger):hover:not(:disabled) { background-color: var(--kx-danger-text) !important; border-color: var(--kx-danger-text) !important; color: #ffffff !important; } .btn-action-icon.btn-action-purple, .btn-action-icon:not(.btn):has(> i.text-purple) { color: var(--bs-purple) !important; border-color: var(--bs-purple) !important; background-color: rgba(var(--bs-purple-rgb), 0.1) !important; } .btn-action-icon.btn-action-purple:hover:not(:disabled), .btn-action-icon:not(.btn):has(> i.text-purple):hover:not(:disabled) { background-color: var(--bs-purple) !important; border-color: var(--bs-purple) !important; color: #ffffff !important; } .btn-action-icon.btn-action-orange, .btn-action-icon:not(.btn):has(> i.text-orange) { color: var(--bs-orange) !important; border-color: var(--bs-orange) !important; background-color: rgba(var(--bs-orange-rgb), 0.1) !important; } .btn-action-icon.btn-action-orange:hover:not(:disabled), .btn-action-icon:not(.btn):has(> i.text-orange):hover:not(:disabled) { background-color: var(--bs-orange) !important; border-color: var(--bs-orange) !important; color: #ffffff !important; } .btn-action-icon.btn-action-secondary, .btn-action-icon:not(.btn):has(> i.text-secondary), .btn-action-icon:not(.btn):has(> i.text-muted) { color: var(--kx-secondary-text) !important; border-color: var(--kx-secondary-border) !important; background-color: var(--kx-secondary-bg) !important; } .btn-action-icon.btn-action-secondary:hover:not(:disabled), .btn-action-icon:not(.btn):has(> i.text-secondary):hover:not(:disabled), .btn-action-icon:not(.btn):has(> i.text-muted):hover:not(:disabled) { background-color: var(--kx-secondary-hover-bg) !important; border-color: var(--kx-secondary-hover-border) !important; color: var(--kx-secondary-hover-text) !important; } .btn-action-icon:not(.btn-primary):not(.btn-danger):not(.btn-success), #content main table td.text-end .btn-sm:has(> i:only-child):not(.btn-primary):not(.btn-danger):not(.btn-success) { border-color: currentColor !important; } .btn-action-icon i, #content main table td.text-end .btn-sm:has(> i:only-child) > i { color: currentColor !important; font-size: var(--kx-action-icon-font, 0.85rem) !important; line-height: 1 !important; margin: 0 !important; } .btn-action-icon:hover:not(:disabled):not(.btn-action-secondary):not(:has(> i.text-secondary)):not(:has(> i.text-muted)) i { color: #ffffff !important; } .btn-action-icon:hover:not(:disabled), #content main table td.text-end .btn-sm:has(> i:only-child):hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--kx-shadow-action) !important; } .btn-ghost { background: transparent; border: none; } .btn-ghost:hover { background-color: rgba(0, 0, 0, 0.05); } [data-bs-theme="dark"] .btn-ghost:hover { background-color: rgba(255, 255, 255, 0.05); } /* ========================================================================= */ /* UNIVERSAL QUICK-FILTER BAR PILLS (.filter-btn) */ /* ========================================================================= */ .filter-btn, .lead-filter-btn, .project-filter-btn, .task-filter-btn { height: 30px !important; padding: 0 0.85rem !important; font-size: 0.78rem !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.35rem !important; border-radius: var(--kx-radius-pill) !important; line-height: 1 !important; } .filter-btn.btn-primary, .lead-filter-btn.btn-primary, .project-filter-btn.btn-primary, .task-filter-btn.btn-primary { box-shadow: var(--kx-brand-primary-glow) !important; } /* When any button or filter pill is highlighted with solid primary/semantic fill, force inner colored icons (e.g. .text-danger, .text-warning, .text-info) and dots to crisp white */ #content main .btn-primary i, #content main .btn-primary i[class*="text-"], #content main .btn-success i, #content main .btn-danger i, #content main .btn-purple i, #content main .btn-indigo i, #content main .btn-teal i, #content main .btn-orange i, #content main .btn-outline-primary:hover i, #content main .btn-outline-primary.active i, #content main .btn-outline-purple:hover i, #content main .btn-outline-indigo:hover i, #content main .btn-outline-teal:hover i, #content main .btn-outline-orange:hover i, #content main .btn-outline-info:hover i, #content main .btn-outline-success:hover i, #content main .btn-outline-danger:hover i { color: #ffffff !important; } #content main .btn-outline-secondary:hover i, #content main .btn-outline-secondary.active i, #content main .btn-secondary:hover i { color: var(--kx-secondary-hover-text) !important; } #content main .btn-primary span.rounded-circle { background-color: #ffffff !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35) !important; } .input-group > .btn { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } /* ========================================================================= */ /* MODULE: css/design-system/components/_badges.css */ /* ========================================================================= */ /** * css/design-system/components/_badges.css * LAYER 2: UNIFORM STATUS PILLS, METADATA BADGES & COLOR UTILITIES * * Enforces: * 1. Identical pill height (26px), font-size (0.75rem), padding (0 0.75rem), and border-radius (50rem) * across all status/metadata badges in the platform * 2. Border color strictly synced to text/icon color (border: 1px solid currentColor !important) * 3. Full utility classes for extended palette (purple, indigo, teal, orange) */ .badge { font-weight: 600; letter-spacing: 0.02em; } /* Extended Semantic Color Utilities for Badges, Text, Backgrounds & Subtle Borders */ /* Purple */ .bg-purple { background-color: rgba(var(--bs-purple-rgb), var(--bs-bg-opacity, 1)) !important; } .bg-purple.bg-opacity-10 { background-color: rgba(var(--bs-purple-rgb), 0.12) !important; } .bg-purple.bg-opacity-15 { background-color: rgba(var(--bs-purple-rgb), 0.16) !important; } .bg-purple.bg-opacity-25 { background-color: rgba(var(--bs-purple-rgb), 0.25) !important; } .text-purple { color: var(--bs-purple) !important; } .border-purple, .border-purple-subtle { border-color: var(--bs-purple) !important; } .bg-purple-subtle { background-color: rgba(var(--bs-purple-rgb), 0.12) !important; color: var(--bs-purple) !important; } /* Indigo */ .bg-indigo { background-color: rgba(var(--bs-indigo-rgb), var(--bs-bg-opacity, 1)) !important; } .bg-indigo.bg-opacity-10 { background-color: rgba(var(--bs-indigo-rgb), 0.12) !important; } .bg-indigo.bg-opacity-15 { background-color: rgba(var(--bs-indigo-rgb), 0.16) !important; } .bg-indigo.bg-opacity-25 { background-color: rgba(var(--bs-indigo-rgb), 0.25) !important; } .text-indigo { color: var(--bs-indigo) !important; } .border-indigo, .border-indigo-subtle { border-color: var(--bs-indigo) !important; } .bg-indigo-subtle { background-color: rgba(var(--bs-indigo-rgb), 0.12) !important; color: var(--bs-indigo) !important; } /* Teal */ .bg-teal { background-color: rgba(var(--bs-teal-rgb), var(--bs-bg-opacity, 1)) !important; } .bg-teal.bg-opacity-10 { background-color: rgba(var(--bs-teal-rgb), 0.12) !important; } .bg-teal.bg-opacity-15 { background-color: rgba(var(--bs-teal-rgb), 0.16) !important; } .bg-teal.bg-opacity-25 { background-color: rgba(var(--bs-teal-rgb), 0.25) !important; } .text-teal { color: var(--bs-teal) !important; } .border-teal, .border-teal-subtle { border-color: var(--bs-teal) !important; } .bg-teal-subtle { background-color: rgba(var(--bs-teal-rgb), 0.12) !important; color: var(--bs-teal) !important; } /* Orange */ .bg-orange { background-color: rgba(var(--bs-orange-rgb), var(--bs-bg-opacity, 1)) !important; } .bg-orange.bg-opacity-10 { background-color: rgba(var(--bs-orange-rgb), 0.12) !important; } .bg-orange.bg-opacity-15 { background-color: rgba(var(--bs-orange-rgb), 0.16) !important; } .bg-orange.bg-opacity-25 { background-color: rgba(var(--bs-orange-rgb), 0.25) !important; } .text-orange { color: var(--bs-orange) !important; } .border-orange, .border-orange-subtle { border-color: var(--bs-orange) !important; } .bg-orange-subtle { background-color: rgba(var(--bs-orange-rgb), 0.12) !important; color: var(--bs-orange) !important; } /* Sync Standard Subtle Borders with Brand & Semantic Colors */ .border-primary-subtle { border-color: var(--kx-brand-primary) !important; } .border-info-subtle { border-color: var(--kx-info-text) !important; } .border-success-subtle { border-color: var(--kx-success-text) !important; } .border-warning-subtle { border-color: var(--kx-warning-text) !important; } .border-danger-subtle { border-color: var(--kx-danger-text) !important; } .border-secondary-subtle { border-color: var(--kx-secondary-border) !important; } /* Theme-Adaptive Badge Color Normalization (Light & Dark Modes) Eliminates unreadable dark-grey/black badges in Dark Mode and washed-out badges in Light Mode */ #content main .badge:not(.rounded-circle):not(.position-absolute).bg-secondary, #content main .badge:not(.rounded-circle):not(.position-absolute).bg-secondary-subtle, #content main .badge:not(.rounded-circle):not(.position-absolute).bg-body-secondary, #content main .badge:not(.rounded-circle):not(.position-absolute).bg-body-tertiary, #content main .badge:not(.rounded-circle):not(.position-absolute).bg-light, #content main .badge:not(.rounded-circle):not(.position-absolute).bg-dark { background-color: var(--kx-secondary-bg-soft) !important; color: var(--kx-secondary-text) !important; border-color: var(--kx-secondary-border) !important; } #content main .badge:not(.rounded-circle):not(.position-absolute).bg-warning { background-color: var(--kx-warning-bg-soft) !important; color: var(--kx-warning-text) !important; border-color: var(--kx-warning-text) !important; } #content main .badge:not(.rounded-circle):not(.position-absolute).bg-info { background-color: var(--kx-info-bg-soft) !important; color: var(--kx-info-text) !important; border-color: var(--kx-info-text) !important; } #content main .badge:not(.rounded-circle):not(.position-absolute).bg-success { background-color: var(--kx-success-bg-soft) !important; color: var(--kx-success-text) !important; border-color: var(--kx-success-text) !important; } #content main .badge:not(.rounded-circle):not(.position-absolute).bg-danger { background-color: var(--kx-danger-bg-soft) !important; color: var(--kx-danger-text) !important; border-color: var(--kx-danger-text) !important; } #content main .badge:not(.rounded-circle):not(.position-absolute).bg-primary, .kx-badge--primary, .kx-badge-primary { background-color: var(--kx-brand-primary-soft) !important; color: var(--kx-brand-primary) !important; border-color: var(--kx-brand-primary) !important; } /* Explicit .kx-badge--* and .kx-badge-* Semantic Color Variants (Invoices, Inventory, Delivery Notes, Quotes, KPIs) */ .kx-badge--success, .kx-badge-success, .kx-badge-paid { background-color: var(--kx-success-bg-soft) !important; color: var(--kx-success-text) !important; border-color: var(--kx-success-text) !important; } .kx-badge--danger, .kx-badge-danger, .kx-badge-overdue { background-color: var(--kx-danger-bg-soft) !important; color: var(--kx-danger-text) !important; border-color: var(--kx-danger-text) !important; } .kx-badge--warning, .kx-badge-warning, .kx-badge-pending { background-color: var(--kx-warning-bg-soft) !important; color: var(--kx-warning-text) !important; border-color: var(--kx-warning-text) !important; } .kx-badge--info, .kx-badge-info, .kx-badge-sent { background-color: var(--kx-info-bg-soft) !important; color: var(--kx-info-text) !important; border-color: var(--kx-info-text) !important; } .kx-badge--secondary, .kx-badge-secondary, .kx-badge-neutral, .kx-badge-draft { background-color: var(--kx-secondary-bg-soft) !important; color: var(--kx-secondary-text) !important; border-color: var(--kx-secondary-border) !important; } .kx-badge--teal, .kx-badge-teal { background-color: rgba(var(--bs-teal-rgb), 0.14) !important; color: var(--bs-teal) !important; border-color: var(--bs-teal) !important; } .kx-badge--purple, .kx-badge-purple, .kx-badge-Inspector { background-color: rgba(var(--bs-purple-rgb), 0.14) !important; color: var(--bs-purple) !important; border-color: var(--bs-purple) !important; } .kx-badge--indigo, .kx-badge-indigo { background-color: rgba(var(--bs-indigo-rgb), 0.14) !important; color: var(--bs-indigo) !important; border-color: var(--bs-indigo) !important; } .kx-badge--orange, .kx-badge-orange { background-color: rgba(var(--bs-orange-rgb), 0.14) !important; color: var(--bs-orange) !important; border-color: var(--bs-orange) !important; } /* Standardized Platform-Wide Pills & Badges (Identical Height, Font Size & Border Color) */ .column-count-badge { min-width: 26px !important; height: 24px !important; padding: 0 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: var(--kx-radius-pill) !important; font-size: var(--kx-pill-font-size) !important; font-weight: 700 !important; line-height: 1 !important; border: 1px solid currentColor !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .stage-badge-preview, .project-meta-pill, .kx-badge, #content main .badge:not(.nav-link .badge):not(.btn .badge):not(.position-absolute):not(.column-count-badge):not(.rounded-circle) { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: var(--kx-pill-gap) !important; height: var(--kx-pill-height) !important; padding: 0 var(--kx-pill-padding-x) !important; border-radius: var(--kx-radius-pill) !important; font-size: var(--kx-pill-font-size) !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0.015em !important; white-space: nowrap !important; border: 1px solid currentColor !important; box-sizing: border-box !important; } .stage-badge-preview i, .project-meta-pill i, .kx-badge i, #content main .badge:not(.nav-link .badge):not(.btn .badge):not(.position-absolute):not(.column-count-badge):not(.rounded-circle) i { color: currentColor !important; font-size: 0.78rem !important; line-height: 1 !important; margin: 0 !important; } .nav-link .badge.rounded-pill, .nav-link .badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 22px !important; height: 20px !important; padding: 0 0.5rem !important; border-radius: var(--kx-radius-pill) !important; font-size: 0.72rem !important; font-weight: 700 !important; line-height: 1 !important; border: 1px solid currentColor !important; } /* Highlighted/Active Tab & Primary Button Badge Override: Always turn the badge number & border crisp white when the parent tab or button is highlighted */ #content main .nav-link.active .badge, #content main .list-group-item-action.active .badge, #content main .btn-primary .badge, #content main .btn.active .badge { background-color: rgba(255, 255, 255, 0.22) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.65) !important; } /* Command Centre Info Tooltip Badges */ .cc-info-badge { font-size: 0.78rem; color: var(--kx-text-muted); opacity: 0.65; cursor: pointer; vertical-align: middle; transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease; display: inline-block; } .cc-info-badge:hover { opacity: 1; color: var(--kx-brand-primary) !important; transform: scale(1.2); } /* ========================================================================= */ /* MODULE: css/design-system/components/_cards.css */ /* ========================================================================= */ /** * css/design-system/components/_cards.css * LAYER 2: CARDS, KPI TELEMETRY CARDS, ICON CONTAINERS & LIFECYCLE STEPPERS */ .card { border-radius: var(--kx-radius-lg) !important; box-shadow: var(--kx-shadow-card) !important; margin-bottom: 1.5rem; } .card-header, .modal-header { background-color: transparent !important; border-bottom: inherit !important; padding: 1.25rem 1.5rem !important; } .card-body, .modal-body { padding: 1.5rem !important; } .card-body.p-0 { padding: 0 !important; } .card-footer, .modal-footer { background-color: transparent !important; border-top: inherit !important; padding: 1.25rem 1.5rem !important; } /* Form Section Cards */ .form-section-card { border-radius: var(--kx-radius-lg); border: 1px solid var(--kx-border-color); background: var(--kx-bg-surface); box-shadow: var(--kx-shadow-card); } /* KPI Telemetry Cards & Hover Elevation */ .kpi-card, .kpi-stat-card, .kpi-card-hover, .stat-hover-card { border-radius: var(--kx-radius-lg) !important; border: 1px solid var(--kx-border-color) !important; background: var(--kx-bg-surface) !important; padding: 0; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; overflow: hidden; position: relative; } .kpi-stat-card { padding: 1rem 1.15rem !important; display: flex; flex-direction: column; } .kpi-stat-card .kpi-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--kx-text-muted); margin-bottom: 0.25rem; } .kpi-stat-card .kpi-value { font-size: 1.35rem; font-weight: 700; line-height: 1.2; color: var(--kx-text-main); } .kpi-card:hover, .kpi-stat-card:hover, .kpi-card-hover:hover, .stat-hover-card:hover { transform: translateY(-2px); box-shadow: var(--kx-shadow-hover) !important; } .kpi-icon-box { width: 42px; height: 42px; min-width: 42px; border-radius: var(--kx-radius-md); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; border: 1px solid currentColor !important; } /* Sync All Icon Boxes & Tinted Containers with their Text/Icon Color (currentColor) */ div[class*="bg-opacity-10"][class*="text-"], span[class*="bg-opacity-10"][class*="text-"]:not(.badge) { border: 1px solid currentColor !important; } div[class*="bg-opacity-10"][class*="text-"] > i, span[class*="bg-opacity-10"][class*="text-"] > i, .kpi-icon-box > i { color: currentColor !important; } /* Command Centre Header Banner */ .command-centre-header, .command-center-header, .cc-header-banner, .cc-header-zone, .cc-banner { background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.07) 0%, var(--kx-bg-surface) 100%) !important; border: 1px solid var(--kx-border-color) !important; border-radius: var(--kx-radius-lg) !important; padding: 1.25rem 1.5rem !important; position: relative; box-shadow: var(--kx-shadow-card) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-bs-theme="dark"] .command-centre-header, [data-bs-theme="dark"] .command-center-header, [data-bs-theme="dark"] .cc-header-banner, [data-bs-theme="dark"] .cc-header-zone, [data-bs-theme="dark"] .cc-banner { background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.15) 0%, rgba(30, 41, 59, 0.92) 100%) !important; border-color: var(--kx-border-color) !important; } [data-bs-theme="light"] .cc-header-banner h1.text-white, [data-bs-theme="light"] .cc-header-banner h2.text-white, [data-bs-theme="light"] .cc-header-banner h3.text-white, [data-bs-theme="light"] .cc-header-banner h4.text-white { color: var(--kx-text-main) !important; } [data-bs-theme="light"] .cc-header-banner .text-white-50 { color: var(--kx-text-muted) !important; } [data-bs-theme="light"] .cc-header-banner .badge[style*="rgba(255,255,255"] { background: var(--kx-brand-primary-soft) !important; color: var(--kx-brand-primary) !important; border: 1px solid var(--kx-brand-primary-border) !important; } [data-bs-theme="light"] .cc-header-banner .badge[style*="rgba(16,185,129"] { background: var(--kx-success-bg-soft) !important; color: var(--kx-success-text) !important; border: 1px solid rgba(21, 128, 61, 0.3) !important; } [data-bs-theme="light"] .cc-header-banner .badge[style*="rgba(56,189,248"] { background: var(--kx-info-bg-soft) !important; color: var(--kx-info-text) !important; border: 1px solid rgba(2, 132, 199, 0.3) !important; } .cc-header-icon { width: 48px; height: 48px; min-width: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; background: var(--kx-brand-primary-soft); color: var(--kx-brand-primary); border: 1px solid var(--kx-brand-primary-border); } .cc-header-title, .cc-title { font-size: 1.35rem; font-weight: 700; color: var(--kx-text-main); margin-bottom: 0.15rem; } .cc-header-subtitle, .cc-subtitle { font-size: 0.85rem; color: var(--kx-text-muted); margin-bottom: 0; } .cc-badge-live { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.65rem; border-radius: 50rem; font-size: 0.72rem; font-weight: 600; background: var(--kx-success-bg-soft); color: var(--kx-success-text); border: 1px solid rgba(21, 128, 61, 0.28); } .pulse-dot, .cc-pulse-dot { width: 8px; height: 8px; background-color: #198754; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 rgba(25, 135, 84, 0.4); animation: pulseGlow 2s infinite; } @keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(25, 135, 84, 0); } 100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); } } /* Lifecycle Stepper Track & Cards (Sales Pipeline & Project Governance) */ .stepper-track { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; overflow-x: auto !important; padding-bottom: 10px !important; scrollbar-width: thin !important; scrollbar-color: rgba(var(--bs-primary-rgb), 0.5) rgba(128, 128, 128, 0.12) !important; } .stepper-card { min-width: 175px !important; background: var(--kx-bg-surface) !important; border: 1px solid var(--bs-border-color-translucent) !important; border-radius: var(--kx-radius-md) !important; padding: 12px 14px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); transition: transform 0.15s ease, box-shadow 0.15s ease; flex-shrink: 0 !important; } .stepper-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .stepper-step-number { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; line-height: 1; border: 1px solid currentColor !important; } .stepper-connector { display: flex; align-items: center; justify-content: center; color: var(--kx-text-muted); opacity: 0.45; flex-shrink: 0; } /* ========================================================================= */ /* MODULE: css/design-system/components/_tabs.css */ /* ========================================================================= */ /** * css/design-system/components/_tabs.css * LAYER 2: UNIFIED NAVIGATION TABS, PILLS & LIST GROUP TABS * * Ensures all tab systems (.command-nav-pills, .nav-tabs, .nav-pills, and .list-group-item-action) * use the user's dynamic --kx-brand-primary (--bs-primary) accent color consistently. */ .nav-tabs .nav-link, .nav-pills .nav-link { color: var(--kx-text-main); transition: all 0.2s ease; } .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus, .nav-pills .nav-link:hover, .nav-pills .nav-link:focus { color: var(--kx-brand-primary) !important; background-color: var(--kx-brand-primary-subtle); } .nav-tabs .nav-link.active, .nav-pills .nav-link.active { color: var(--kx-text-on-primary) !important; background-color: var(--kx-brand-primary) !important; border-color: var(--kx-brand-primary) !important; box-shadow: var(--kx-brand-primary-glow); } .nav-tabs .nav-link.active i, .nav-pills .nav-link.active i, .command-nav-pills .nav-link.active i, .project-settings-tabs .nav-link.active i, #content main .nav-link.active i, #content main .nav-link.active i[class*="text-"] { color: var(--kx-text-on-primary) !important; } /* When a tab or pill button is highlighted/active, force its count badge & number to crisp white */ .nav-tabs .nav-link.active .badge, .nav-pills .nav-link.active .badge, .command-nav-pills .nav-link.active .badge, .project-settings-tabs .nav-link.active .badge, #content main .nav-link.active .badge, #content main .list-group-item-action.active .badge, #content main .btn-primary .badge, #content main .btn.active .badge, #content main .btn[class*="btn-outline-"]:hover .badge { background-color: rgba(255, 255, 255, 0.22) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.65) !important; } #content main .nav-link.active .badge i, #content main .btn-primary .badge i { color: #ffffff !important; } /* Command Navigation Pills Container (Unified Dashboard Tab Track Style) */ .command-nav-pills, .project-settings-tabs, .project-nav-tabs, .cc-view-switcher, .em-mode-bar, #content main ul.nav-pills, #content main div.nav-pills, #content main ul.nav-tabs { background-color: var(--kx-tab-track-bg, rgba(15, 23, 42, 0.04)) !important; padding: 0.35rem !important; border-radius: 12px !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: var(--kx-tab-gap, 0.45rem) !important; border: 1px solid var(--kx-border-color) !important; box-shadow: none !important; } /* Inline-flex variant when placed inside a flex header toolbar next to action buttons */ .d-flex > .command-nav-pills, .d-flex > .cc-view-switcher, .d-flex > .em-mode-bar, .col-lg-auto > .command-nav-pills, .card-header > .command-nav-pills, .card-header > ul.nav-pills { width: auto !important; display: inline-flex !important; } [data-bs-theme="dark"] .command-nav-pills, [data-bs-theme="dark"] .project-settings-tabs, [data-bs-theme="dark"] .project-nav-tabs, [data-bs-theme="dark"] .cc-view-switcher, [data-bs-theme="dark"] .em-mode-bar, [data-bs-theme="dark"] #content main ul.nav-pills, [data-bs-theme="dark"] #content main div.nav-pills, [data-bs-theme="dark"] #content main ul.nav-tabs { background-color: var(--kx-tab-track-bg, rgba(255, 255, 255, 0.05)) !important; border-color: var(--kx-border-color) !important; } .command-nav-pills .nav-link, .project-settings-tabs .nav-link, .project-nav-tabs .nav-link, .cc-view-switcher .cc-view-pill, .em-mode-bar .em-mode-btn, #content main ul.nav-pills .nav-link, #content main div.nav-pills .nav-link, #content main ul.nav-tabs .nav-link, .cb-tab-pill { color: var(--kx-secondary-text) !important; background: transparent !important; background-color: transparent !important; font-weight: 600 !important; font-size: var(--kx-tab-font-size, 0.84rem) !important; height: var(--kx-tab-height, 36px) !important; min-height: var(--kx-tab-height, 36px) !important; padding: 0 var(--kx-tab-padding-x, 0.95rem) !important; border-radius: var(--kx-tab-radius, 8px) !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.425rem !important; border: 1px solid transparent !important; box-shadow: none !important; text-decoration: none !important; line-height: 1.2 !important; white-space: nowrap !important; } .command-nav-pills .nav-link:hover:not(.active), .project-settings-tabs .nav-link:hover:not(.active), .project-nav-tabs .nav-link:hover:not(.active), .cc-view-switcher .cc-view-pill:hover:not(.active), .em-mode-bar .em-mode-btn:hover:not(.active), #content main ul.nav-pills .nav-link:hover:not(.active), #content main div.nav-pills .nav-link:hover:not(.active), #content main ul.nav-tabs .nav-link:hover:not(.active), .cb-tab-pill:hover:not(.active) { background-color: var(--kx-tab-hover-bg, rgba(var(--bs-primary-rgb), 0.10)) !important; color: var(--kx-brand-primary) !important; border-color: rgba(var(--bs-primary-rgb), 0.25) !important; } .command-nav-pills .nav-link.active, .project-settings-tabs .nav-link.active, .project-nav-tabs .nav-link.active, .cc-view-switcher .cc-view-pill.active, .em-mode-bar .em-mode-btn.active, #content main ul.nav-pills .nav-link.active, #content main div.nav-pills .nav-link.active, #content main ul.nav-tabs .nav-link.active, .cb-tab-pill.active { background: var(--kx-brand-primary) !important; background-color: var(--kx-brand-primary) !important; color: var(--kx-text-on-primary, #ffffff) !important; border-color: var(--kx-brand-primary) !important; box-shadow: var(--kx-brand-primary-glow) !important; } .em-mode-bar .em-mode-btn.active i, .cc-view-switcher .cc-view-pill.active i, .cb-tab-pill.active i { color: var(--kx-text-on-primary, #ffffff) !important; } /* Vertical List Group Tabs (e.g., Admin Settings Sidebar) */ .list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--kx-brand-primary-subtle) !important; color: var(--kx-brand-primary) !important; } .list-group-item-action.active { background-color: var(--kx-brand-primary) !important; border-color: var(--kx-brand-primary) !important; color: var(--kx-text-on-primary) !important; font-weight: 600; } .list-group-item-action.active i { color: var(--kx-text-on-primary) !important; } /* Date Preset Pills */ .date-preset-pill { padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 500; border: 1px solid var(--kx-border-color); background: transparent; color: var(--kx-text-main); transition: all 0.15s ease; cursor: pointer; } .date-preset-pill:hover { background: var(--kx-brand-primary-soft); color: var(--kx-brand-primary); } .date-preset-pill.active { background: var(--kx-brand-primary) !important; color: var(--kx-text-on-primary) !important; border-color: var(--kx-brand-primary) !important; } .metric-updating { opacity: 0.4; filter: blur(1px); transition: all 0.2s ease; } /* ========================================================================= Interactive Workflow Pipeline Strip (.jc-workflow-pipeline) Used in TaxRate, PaymentTerm, Admin Roles, Expenses, POs, Vendors, Reports & Inventory ========================================================================= */ .jc-workflow-pipeline { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; gap: 0.65rem !important; background: var(--kx-bg-surface) !important; border: 1px solid var(--kx-border-color) !important; border-radius: var(--kx-radius-lg) !important; padding: 0.65rem !important; box-shadow: var(--kx-shadow-card) !important; } /* 1. Multi-Mode Stage Cards (.jc-stage in TaxRate, PaymentTerm, Roles) */ .jc-workflow-pipeline .jc-stage { flex: 1 1 210px !important; display: flex !important; align-items: center !important; gap: 0.85rem !important; padding: 0.75rem 1rem !important; border-radius: var(--kx-radius-md) !important; border: 1px solid var(--kx-border-color) !important; background: var(--kx-bg-elevated) !important; color: var(--kx-text-main) !important; text-decoration: none !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative; } .jc-workflow-pipeline .jc-stage:hover:not(.active) { border-color: rgba(var(--bs-primary-rgb), 0.45) !important; background: var(--kx-brand-primary-subtle) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important; } .jc-workflow-pipeline .jc-stage.active { background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.16) 0%, rgba(var(--bs-primary-rgb), 0.05) 100%) !important; border-color: var(--kx-brand-primary) !important; box-shadow: 0 4px 14px rgba(var(--bs-primary-rgb), 0.16) !important; } .jc-workflow-pipeline .jc-stage-icon { width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 1.1rem !important; background: rgba(var(--bs-primary-rgb), 0.12) !important; color: var(--kx-brand-primary) !important; border: 1px solid rgba(var(--bs-primary-rgb), 0.3) !important; transition: all 0.2s ease !important; flex-shrink: 0 !important; } /* Distinct semantic icon colors for non-active stages */ .jc-workflow-pipeline > a.jc-stage:nth-of-type(2):not(.active) .jc-stage-icon { background: rgba(14, 165, 233, 0.12) !important; color: #0ea5e9 !important; border-color: rgba(14, 165, 233, 0.32) !important; } .jc-workflow-pipeline > a.jc-stage:nth-of-type(3):not(.active) .jc-stage-icon { background: rgba(245, 158, 11, 0.12) !important; color: #f59e0b !important; border-color: rgba(245, 158, 11, 0.32) !important; } .jc-workflow-pipeline > a.jc-stage:nth-of-type(4):not(.active) .jc-stage-icon { background: rgba(16, 185, 129, 0.12) !important; color: #10b981 !important; border-color: rgba(16, 185, 129, 0.32) !important; } .jc-workflow-pipeline .jc-stage.active .jc-stage-icon { background: var(--kx-brand-primary) !important; color: #ffffff !important; border-color: var(--kx-brand-primary) !important; box-shadow: 0 3px 10px rgba(var(--bs-primary-rgb), 0.35) !important; } .jc-workflow-pipeline .jc-stage.active .jc-stage-icon i { color: #ffffff !important; } .jc-workflow-pipeline .jc-stage-title { font-size: 0.85rem !important; font-weight: 700 !important; color: var(--kx-text-main) !important; line-height: 1.25 !important; margin-bottom: 0.15rem !important; } .jc-workflow-pipeline .jc-stage.active .jc-stage-title { color: var(--kx-brand-primary) !important; } .jc-workflow-pipeline .jc-stage-sub { font-size: 0.72rem !important; color: var(--kx-text-muted) !important; line-height: 1.25 !important; } .jc-workflow-pipeline .jc-stage-chevron { display: flex !important; align-items: center !important; justify-content: center !important; color: var(--kx-text-muted) !important; opacity: 0.45 !important; font-size: 0.85rem !important; padding: 0 0.05rem !important; flex-shrink: 0 !important; } @media (max-width: 1199.98px) { .jc-workflow-pipeline .jc-stage-chevron { display: none !important; } } /* 2. Compact Stage Filter Pills (.jc-stage-pill, .jc-pipeline-pill, .jc-pipeline-step, .jc-workflow-pill) */ .jc-workflow-pipeline .jc-stage-pill, .jc-workflow-pipeline .jc-pipeline-pill, .jc-workflow-pipeline .jc-pipeline-step, .jc-workflow-pipeline .jc-workflow-pill { flex: 1 1 auto !important; display: inline-flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.55rem !important; padding: 0.5rem 0.85rem !important; border-radius: var(--kx-radius-sm) !important; border: 1px solid var(--kx-border-color) !important; background: var(--kx-bg-elevated) !important; color: var(--kx-text-main) !important; font-size: 0.8rem !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap !important; transition: all 0.18s ease !important; } .jc-workflow-pipeline .jc-stage-pill:hover:not(.active), .jc-workflow-pipeline .jc-pipeline-pill:hover:not(.active), .jc-workflow-pipeline .jc-pipeline-step:hover:not(.active), .jc-workflow-pipeline .jc-workflow-pill:hover:not(.active) { border-color: rgba(var(--bs-primary-rgb), 0.45) !important; background: var(--kx-brand-primary-subtle) !important; color: var(--kx-brand-primary) !important; transform: translateY(-1px); } .jc-workflow-pipeline .jc-stage-pill.active, .jc-workflow-pipeline .jc-pipeline-pill.active, .jc-workflow-pipeline .jc-pipeline-step.active, .jc-workflow-pipeline .jc-workflow-pill.active { background: var(--kx-brand-primary) !important; border-color: var(--kx-brand-primary) !important; color: #ffffff !important; box-shadow: var(--kx-brand-primary-glow) !important; } .jc-workflow-pipeline .jc-stage-pill.active i, .jc-workflow-pipeline .jc-pipeline-pill.active i, .jc-workflow-pipeline .jc-pipeline-step.active i, .jc-workflow-pipeline .jc-workflow-pill.active i, .jc-workflow-pipeline .jc-stage-pill.active span, .jc-workflow-pipeline .jc-pipeline-pill.active span, .jc-workflow-pipeline .jc-pipeline-step.active span, .jc-workflow-pipeline .jc-workflow-pill.active span { color: #ffffff !important; } .jc-workflow-pipeline .jc-stage-count, .jc-workflow-pipeline .jc-pipeline-count, .jc-workflow-pipeline .jc-workflow-pill-count { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0.12rem 0.5rem !important; border-radius: 50rem !important; font-size: 0.72rem !important; font-weight: 700 !important; background: rgba(var(--bs-primary-rgb), 0.12) !important; color: var(--kx-brand-primary) !important; } .jc-workflow-pipeline .jc-stage-pill.active .jc-stage-count, .jc-workflow-pipeline .jc-pipeline-pill.active .jc-pipeline-count, .jc-workflow-pipeline .jc-pipeline-step.active .jc-pipeline-count, .jc-workflow-pipeline .jc-workflow-pill.active .jc-workflow-pill-count { background: rgba(255, 255, 255, 0.24) !important; color: #ffffff !important; } /* Semantic Stage Colors for .jc-workflow-pill[data-stage] & .jc-pipeline-step[data-stage-color] */ .jc-workflow-pipeline .jc-workflow-pill[data-stage="all"]:not(.active), .jc-workflow-pipeline .jc-pipeline-step[data-stage-color="primary"]:not(.active) { border-color: rgba(var(--bs-primary-rgb), 0.35) !important; background: var(--kx-brand-primary-subtle) !important; } .jc-workflow-pipeline .jc-workflow-pill[data-stage="all"]:not(.active) i, .jc-workflow-pipeline .jc-pipeline-step[data-stage-color="primary"]:not(.active) i { color: var(--kx-brand-primary) !important; } .jc-workflow-pipeline .jc-workflow-pill[data-stage="all"]:not(.active) .jc-workflow-pill-count, .jc-workflow-pipeline .jc-pipeline-step[data-stage-color="primary"]:not(.active) .jc-pipeline-count { background: var(--kx-brand-primary-soft) !important; color: var(--kx-brand-primary) !important; border: 1px solid var(--kx-brand-primary-border) !important; } .jc-workflow-pipeline .jc-workflow-pill[data-stage="completed"]:not(.active), .jc-workflow-pipeline .jc-pipeline-step[data-stage-color="success"]:not(.active) { border-color: rgba(21, 128, 61, 0.35) !important; background: var(--kx-success-bg) !important; } .jc-workflow-pipeline .jc-workflow-pill[data-stage="completed"]:not(.active) i, .jc-workflow-pipeline .jc-pipeline-step[data-stage-color="success"]:not(.active) i { color: var(--kx-success-text) !important; } .jc-workflow-pipeline .jc-workflow-pill[data-stage="completed"]:not(.active) .jc-workflow-pill-count, .jc-workflow-pipeline .jc-pipeline-step[data-stage-color="success"]:not(.active) .jc-pipeline-count { background: var(--kx-success-bg-soft) !important; color: var(--kx-success-text) !important; border: 1px solid rgba(21, 128, 61, 0.35) !important; } .jc-workflow-pipeline .jc-workflow-pill[data-stage="parts-hold"]:not(.active), .jc-workflow-pipeline .jc-workflow-pill[data-stage="scheduled"]:not(.active), .jc-workflow-pipeline .jc-pipeline-step[data-stage-color="warning"]:not(.active) { border-color: rgba(180, 83, 9, 0.35) !important; background: var(--kx-warning-bg) !important; } .jc-workflow-pipeline .jc-workflow-pill[data-stage="parts-hold"]:not(.active) i, .jc-workflow-pipeline .jc-workflow-pill[data-stage="scheduled"]:not(.active) i, .jc-workflow-pipeline .jc-pipeline-step[data-stage-color="warning"]:not(.active) i { color: var(--kx-warning-text) !important; } .jc-workflow-pipeline .jc-workflow-pill[data-stage="parts-hold"]:not(.active) .jc-workflow-pill-count, .jc-workflow-pipeline .jc-workflow-pill[data-stage="scheduled"]:not(.active) .jc-workflow-pill-count, .jc-workflow-pipeline .jc-pipeline-step[data-stage-color="warning"]:not(.active) .jc-pipeline-count { background: var(--kx-warning-bg-soft) !important; color: var(--kx-warning-text) !important; border: 1px solid rgba(180, 83, 9, 0.35) !important; } .jc-workflow-pipeline .jc-workflow-pill[data-stage="cancelled"]:not(.active), .jc-workflow-pipeline .jc-pipeline-step[data-stage-color="danger"]:not(.active) { border-color: rgba(185, 28, 28, 0.35) !important; background: var(--kx-danger-bg) !important; } .jc-workflow-pipeline .jc-workflow-pill[data-stage="cancelled"]:not(.active) i, .jc-workflow-pipeline .jc-pipeline-step[data-stage-color="danger"]:not(.active) i { color: var(--kx-danger-text) !important; } .jc-workflow-pipeline .jc-workflow-pill[data-stage="cancelled"]:not(.active) .jc-workflow-pill-count, .jc-workflow-pipeline .jc-pipeline-step[data-stage-color="danger"]:not(.active) .jc-pipeline-count { background: var(--kx-danger-bg-soft) !important; color: var(--kx-danger-text) !important; border: 1px solid rgba(185, 28, 28, 0.35) !important; } .jc-workflow-pipeline .jc-workflow-pill[data-stage="qa-testing"]:not(.active), .jc-workflow-pipeline .jc-pipeline-step[data-stage-color="info"]:not(.active) { border-color: rgba(3, 105, 161, 0.35) !important; background: var(--kx-info-bg) !important; } .jc-workflow-pipeline .jc-workflow-pill[data-stage="qa-testing"]:not(.active) i, .jc-workflow-pipeline .jc-pipeline-step[data-stage-color="info"]:not(.active) i { color: var(--kx-info-text) !important; } .jc-workflow-pipeline .jc-workflow-pill[data-stage="qa-testing"]:not(.active) .jc-workflow-pill-count, .jc-workflow-pipeline .jc-pipeline-step[data-stage-color="info"]:not(.active) .jc-pipeline-count { background: var(--kx-info-bg-soft) !important; color: var(--kx-info-text) !important; border: 1px solid rgba(3, 105, 161, 0.35) !important; } .jc-workflow-pipeline .jc-workflow-pill[data-stage="in-progress"]:not(.active) { border-color: rgba(var(--bs-purple-rgb), 0.35) !important; background: rgba(var(--bs-purple-rgb), 0.08) !important; } .jc-workflow-pipeline .jc-workflow-pill[data-stage="in-progress"]:not(.active) i { color: var(--bs-purple) !important; } .jc-workflow-pipeline .jc-workflow-pill[data-stage="in-progress"]:not(.active) .jc-workflow-pill-count { background: rgba(var(--bs-purple-rgb), 0.14) !important; color: var(--bs-purple) !important; border: 1px solid rgba(var(--bs-purple-rgb), 0.35) !important; } .jc-workflow-pipeline .jc-pipeline-step[data-stage-color="secondary"]:not(.active) { border-color: var(--kx-secondary-border) !important; background: var(--kx-secondary-bg) !important; } .jc-workflow-pipeline .jc-pipeline-step[data-stage-color="secondary"]:not(.active) i { color: var(--kx-secondary-text) !important; } .jc-workflow-pipeline .jc-pipeline-step[data-stage-color="secondary"]:not(.active) .jc-pipeline-count { background: var(--kx-secondary-bg-soft) !important; color: var(--kx-secondary-text) !important; border: 1px solid var(--kx-secondary-border) !important; } /* Command Nav Pill .badge-count Styling */ .command-nav-pills .nav-link .badge-count { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 22px !important; height: 20px !important; padding: 0 0.5rem !important; margin-left: 0.35rem !important; border-radius: var(--kx-radius-pill) !important; font-size: 0.72rem !important; font-weight: 700 !important; line-height: 1 !important; background: var(--kx-brand-primary-soft) !important; color: var(--kx-brand-primary) !important; border: 1px solid var(--kx-brand-primary-border) !important; } .command-nav-pills .nav-link.active .badge-count { background: rgba(255, 255, 255, 0.22) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.65) !important; } /* ========================================================================= */ /* MODULE: css/design-system/components/_tables.css */ /* ========================================================================= */ /** * css/design-system/components/_tables.css * LAYER 2: TABLES, DATATABLES, PAGINATION & INLINE SEARCH */ .table { font-size: var(--kx-font-size-table); --bs-table-bg: transparent !important; --bs-table-accent-bg: transparent !important; --bs-table-striped-bg: transparent !important; --bs-table-active-bg: transparent !important; --bs-table-hover-bg: transparent !important; } .table > :not(caption) > * > * { background-color: transparent !important; box-shadow: none !important; --bs-table-bg-state: transparent !important; --bs-table-bg-type: transparent !important; --bs-table-accent-bg: transparent !important; border-bottom-color: inherit !important; padding: 0.75rem 0.75rem !important; vertical-align: middle !important; } .table > tbody > tr:last-child > * { border-bottom: 0 !important; } /* Table Headers & Row Hovers (Light, Dark, Auto) */ .table thead th, .theme-thead th, .table thead.table-light th, .table thead tr.table-light th, [data-bs-theme="light"] .table thead th, [data-bs-theme="light"] .theme-thead th, [data-bs-theme="light"] .table thead.table-light th, [data-bs-theme="light"] .table thead tr.table-light th { background-color: var(--kx-thead-bg, rgba(var(--bs-primary-rgb), 0.08)) !important; color: var(--kx-thead-text, #1e293b) !important; box-shadow: none !important; border-bottom: 1px solid var(--kx-thead-border, rgba(var(--bs-primary-rgb), 0.24)) !important; font-size: var(--kx-thead-font-size, 0.75rem) !important; text-transform: var(--kx-thead-transform, uppercase) !important; letter-spacing: 0.04em !important; font-weight: 700 !important; } .table tbody tr.table-light, .table tfoot.table-light, .table tfoot tr.table-light, .theme-tfoot, tr.theme-summary-row { --bs-table-bg: transparent !important; --bs-table-bg-type: transparent !important; --bs-table-accent-bg: transparent !important; --bs-table-color: var(--kx-tfoot-text, #0f172a) !important; --bs-table-hover-bg: transparent !important; --bs-table-hover-color: var(--kx-tfoot-text, #0f172a) !important; } .table tbody tr.table-light > *, .table tfoot.table-light > tr > *, .table tfoot tr.table-light > *, .theme-tfoot > tr > *, tr.theme-summary-row > * { background-color: var(--kx-tfoot-bg, rgba(var(--bs-primary-rgb), 0.06)) !important; color: var(--kx-tfoot-text, #0f172a) !important; box-shadow: none !important; } .table-hover > tbody > tr:hover > *, [data-bs-theme="light"] .table-hover > tbody > tr:hover > * { background-color: var(--kx-row-hover-bg, rgba(var(--bs-primary-rgb), 0.06)) !important; box-shadow: none !important; --bs-table-bg-state: transparent !important; --bs-table-hover-bg: transparent !important; } [data-bs-theme="dark"] .table thead th, [data-bs-theme="dark"] .theme-thead th, [data-bs-theme="dark"] .table thead.table-light th, [data-bs-theme="dark"] .table thead tr.table-light th { background-color: var(--kx-thead-bg, rgba(var(--bs-primary-rgb), 0.16)) !important; color: var(--kx-thead-text, #f1f5f9) !important; box-shadow: none !important; border-bottom: 1px solid var(--kx-thead-border, rgba(var(--bs-primary-rgb), 0.34)) !important; } [data-bs-theme="dark"] .table tbody tr.table-light, [data-bs-theme="dark"] .table tfoot.table-light, [data-bs-theme="dark"] .table tfoot tr.table-light, [data-bs-theme="dark"] .theme-tfoot, [data-bs-theme="dark"] tr.theme-summary-row { --bs-table-color: var(--kx-tfoot-text, #f8fafc) !important; --bs-table-hover-color: var(--kx-tfoot-text, #f8fafc) !important; } [data-bs-theme="dark"] .table tbody tr.table-light > *, [data-bs-theme="dark"] .table tfoot.table-light > tr > *, [data-bs-theme="dark"] .table tfoot tr.table-light > *, [data-bs-theme="dark"] .theme-tfoot > tr > *, [data-bs-theme="dark"] tr.theme-summary-row > * { background-color: var(--kx-tfoot-bg, rgba(var(--bs-primary-rgb), 0.12)) !important; color: var(--kx-tfoot-text, #f8fafc) !important; box-shadow: none !important; } [data-bs-theme="dark"] .table tbody tr.table-light .text-muted, [data-bs-theme="dark"] tr.theme-summary-row .text-muted { color: #cbd5e1 !important; } [data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--kx-row-hover-bg, rgba(var(--bs-primary-rgb), 0.14)) !important; box-shadow: none !important; --bs-table-bg-state: transparent !important; --bs-table-hover-bg: transparent !important; --bs-table-hover-color: var(--kx-row-hover-text, #f8fafc) !important; } @media (prefers-color-scheme: dark) { [data-bs-theme="auto"] .table thead th, [data-bs-theme="auto"] .theme-thead th, [data-bs-theme="auto"] .table thead.table-light th, [data-bs-theme="auto"] .table thead tr.table-light th { background-color: var(--kx-thead-bg, rgba(var(--bs-primary-rgb), 0.16)) !important; color: var(--kx-thead-text, #f1f5f9) !important; box-shadow: none !important; border-bottom: 1px solid var(--kx-thead-border, rgba(var(--bs-primary-rgb), 0.34)) !important; } [data-bs-theme="auto"] .table tbody tr.table-light > *, [data-bs-theme="auto"] .table tfoot.table-light > tr > *, [data-bs-theme="auto"] .table tfoot tr.table-light > *, [data-bs-theme="auto"] .theme-tfoot > tr > *, [data-bs-theme="auto"] tr.theme-summary-row > * { background-color: var(--kx-tfoot-bg, rgba(var(--bs-primary-rgb), 0.12)) !important; color: var(--kx-tfoot-text, #f8fafc) !important; box-shadow: none !important; } [data-bs-theme="auto"] .table tbody tr.table-light .text-muted, [data-bs-theme="auto"] tr.theme-summary-row .text-muted { color: #cbd5e1 !important; } [data-bs-theme="auto"] .table-hover > tbody > tr:hover > * { background-color: var(--kx-row-hover-bg, rgba(var(--bs-primary-rgb), 0.14)) !important; box-shadow: none !important; --bs-table-bg-state: transparent !important; --bs-table-hover-bg: transparent !important; --bs-table-hover-color: var(--kx-row-hover-text, #f8fafc) !important; } } /* DataTables Search, Filter & Edge-to-Edge Card Padding */ .dataTables_wrapper .dataTables_filter, .dt-container .dt-search { float: right; margin-bottom: 1rem; } .dataTables_wrapper .dataTables_length, .dt-container .dt-length { margin-bottom: 1rem; } .dataTables_wrapper .form-select, .dt-container .form-select { border-radius: 0.5rem !important; } .dataTables_wrapper .dataTables_filter input:not(.custom-search-group input), .dt-container .dt-search input:not(.custom-search-group input) { border-radius: 0.5rem !important; } .card-body.p-0 .dataTables_wrapper > .row:first-child, .card-body.p-0 .dataTables_wrapper > .row:last-child, .card-body.p-0 .dt-container > .row:first-child, .card-body.p-0 .dt-container > .row:last-child { padding-left: 1.5rem; padding-right: 1.5rem; } .card-body.p-0 .dataTables_wrapper > .row:first-child, .card-body.p-0 .dt-container > .row:first-child { padding-top: 1rem; } .card-body.p-0 .dataTables_wrapper > .row:last-child, .card-body.p-0 .dt-container > .row:last-child { padding-bottom: 1rem; padding-top: 1rem; } /* DataTables Pagination Block Overrides */ .dataTables_wrapper .dataTables_paginate .pagination { justify-content: flex-end; } .pagination .page-link { color: var(--kx-brand-primary); padding: 0.375rem 0.75rem; border-color: var(--bs-secondary-border-subtle); transition: all 0.2s ease-in-out; } .pagination .page-item.active .page-link { background-color: var(--kx-brand-primary) !important; border-color: var(--kx-brand-primary) !important; color: var(--kx-text-on-primary) !important; font-weight: bold; } .pagination .page-link:hover { background-color: var(--kx-brand-primary-soft); color: var(--kx-brand-primary); } [data-bs-theme="dark"] .pagination .page-link { background-color: var(--bs-card-bg); border-color: var(--bs-secondary-border-subtle); } [data-bs-theme="dark"] .pagination .page-link:hover { background-color: rgba(var(--bs-primary-rgb), 0.15); } [data-bs-theme="dark"] .pagination .page-item.disabled .page-link { background-color: var(--bs-card-bg); border-color: var(--bs-secondary-border-subtle); color: #6c757d; } /* Unified Module Toolbar Search Field (.notif-search-wrapper) Styled identically to .custom-search-group (rounded-left input + solid primary button cap on right) */ .notif-search-wrapper { position: relative !important; display: inline-flex !important; align-items: stretch !important; width: 270px; max-width: 100%; height: 36px !important; border-radius: 0.5rem !important; box-shadow: var(--kx-shadow-card); } .notif-search-input { order: 1 !important; flex: 1 1 auto !important; height: 36px !important; padding-left: 0.85rem !important; padding-right: 2rem !important; font-size: 0.85rem !important; border-radius: 0.5rem 0 0 0.5rem !important; border-right: 0 !important; background-color: var(--kx-bg-input) !important; border-color: var(--kx-border-color) !important; color: var(--kx-text-main) !important; } [data-bs-theme="dark"] .notif-search-input { border-color: #495057 !important; } .notif-search-input:focus { border-color: var(--kx-brand-primary) !important; box-shadow: none !important; } .notif-search-btn { order: 2 !important; position: static !important; transform: none !important; width: 42px !important; height: 36px !important; padding: 0 !important; background-color: var(--kx-brand-primary) !important; border: 1px solid var(--kx-brand-primary) !important; border-radius: 0 0.5rem 0.5rem 0 !important; color: var(--kx-text-on-primary) !important; font-size: 0.85rem !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; pointer-events: auto !important; cursor: pointer !important; flex-shrink: 0 !important; } .notif-search-btn i { color: var(--kx-text-on-primary) !important; } .notif-search-clear { position: absolute !important; top: 50% !important; right: 50px !important; transform: translateY(-50%) !important; color: var(--kx-text-muted) !important; text-decoration: none; font-size: 0.85rem; line-height: 1; cursor: pointer; z-index: 5; } .notif-search-clear:hover { color: var(--bs-danger) !important; } @media (max-width: 768px) { .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length { float: none !important; text-align: left !important; } .dataTables_wrapper .dataTables_paginate .pagination { justify-content: center !important; margin-top: 10px; } } /* ========================================================================= */ /* MODULE: css/design-system/components/_forms.css */ /* ========================================================================= */ /** * css/design-system/components/_forms.css * LAYER 2: FORM CONTROLS, SELECTS, LABELS, CHECKBOXES & SELECT2 */ /* Light Mode Fields & Dropdowns */ .form-control, .form-select, .input-group-text, .dropdown-menu, [data-bs-theme="light"] .form-control, [data-bs-theme="light"] .form-select, [data-bs-theme="light"] .input-group-text, [data-bs-theme="light"] .dropdown-menu { background-color: var(--kx-bg-input) !important; border: 1px solid var(--kx-border-color) !important; color: var(--kx-text-main) !important; } /* Dark Mode Fields & Dropdowns */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .input-group-text, [data-bs-theme="dark"] .dropdown-menu { background-color: var(--kx-bg-input) !important; border-color: #495057 !important; color: var(--kx-text-main) !important; } @media (prefers-color-scheme: dark) { [data-bs-theme="auto"] .form-control, [data-bs-theme="auto"] .form-select, [data-bs-theme="auto"] .input-group-text, [data-bs-theme="auto"] .dropdown-menu { background-color: var(--kx-bg-input) !important; border-color: #495057 !important; color: var(--kx-text-main) !important; } } .form-control, .form-select { border-radius: var(--kx-radius-sm) !important; box-shadow: none !important; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important; } /* Unified System-Wide Field Height (--kx-field-height: 36px) */ .form-control:not(textarea):not([size]):not([multiple]):not(.form-control-lg):not([type="color"]):not([type="range"]), .form-control-sm:not(textarea):not([type="color"]):not([type="range"]), .form-select:not([size]):not([multiple]):not(.form-select-lg), .form-select-sm, .input-group:not(.input-group-lg) > .input-group-text { height: var(--kx-field-height, 36px) !important; min-height: var(--kx-field-height, 36px) !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 0.85rem !important; line-height: 1.4 !important; } .input-group:not(.input-group-lg) > .input-group-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; } .form-control:focus, .form-select:focus { border-color: var(--kx-brand-primary) !important; box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15) !important; } label:not(.form-check-label):not(.btn), .form-label, .col-form-label { font-weight: 700 !important; font-size: var(--kx-font-size-label) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-bottom: 0.5rem !important; display: inline-block; } /* Unified Toggle Switch & Checkbox Design System Rules */ .form-switch .form-check-input { width: 2.35rem !important; height: 1.25rem !important; border-radius: 999px !important; cursor: pointer !important; background-color: #cbd5e1 !important; border: 1px solid #94a3b8 !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important; background-position: left center !important; background-size: contain !important; transition: background-position 0.18s ease-in-out, background-color 0.18s ease-in-out, border-color 0.18s ease-in-out, box-shadow 0.18s ease-in-out !important; flex-shrink: 0 !important; } [data-bs-theme="dark"] .form-switch .form-check-input:not(:checked) { background-color: #334155 !important; border-color: #64748b !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23e2e8f0'/%3e%3c/svg%3e") !important; } .form-switch .form-check-input:checked, [data-bs-theme="dark"] .form-switch .form-check-input:checked { background-color: var(--kx-brand-primary) !important; border-color: var(--kx-brand-primary) !important; background-position: right center !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important; } .form-check.form-switch { padding-left: 2.85rem !important; min-height: 1.4rem !important; } .form-check.form-switch .form-check-input { margin-left: -2.85rem !important; margin-top: 0.1rem !important; } .form-check.form-switch:not(:has(.form-check-label)), .form-check.form-switch.ps-0 { padding-left: 0 !important; min-height: auto !important; display: inline-flex !important; align-items: center !important; } .form-check.form-switch:not(:has(.form-check-label)) .form-check-input, .form-check.form-switch.ps-0 .form-check-input { margin-left: 0 !important; margin-top: 0 !important; float: none !important; } .form-check-input:checked { background-color: var(--kx-brand-primary) !important; border-color: var(--kx-brand-primary) !important; } .form-check-input:focus { border-color: var(--kx-brand-primary) !important; box-shadow: 0 0 0 0.22rem rgba(var(--bs-primary-rgb), 0.25) !important; } /* Select2 Unified Height, Dark Mode & Brand Support */ .select2-container .select2-selection--single { height: var(--kx-field-height, 36px) !important; min-height: var(--kx-field-height, 36px) !important; display: flex !important; align-items: center !important; border-radius: var(--kx-radius-sm) !important; border: 1px solid var(--kx-border-color) !important; background-color: var(--kx-bg-input) !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: var(--kx-field-height, 36px) !important; padding-left: 0.75rem !important; font-size: 0.85rem !important; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(var(--kx-field-height, 36px) - 2px) !important; } [data-bs-theme="dark"] .select2-container--default .select2-selection--single, [data-bs-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: var(--bs-body-bg) !important; border-color: var(--bs-border-color) !important; } [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered, [data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { color: var(--bs-body-color) !important; } [data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--bs-secondary-bg) !important; border-color: var(--bs-border-color) !important; } [data-bs-theme="dark"] .select2-dropdown { background-color: var(--bs-body-bg) !important; border-color: var(--bs-border-color) !important; } [data-bs-theme="dark"] .select2-search--dropdown .select2-search__field { background-color: var(--bs-body-bg) !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color) !important; } [data-bs-theme="dark"] .select2-results__option { color: var(--bs-body-color) !important; } [data-bs-theme="dark"] .select2-results__option[aria-selected="true"] { background-color: var(--bs-secondary-bg) !important; color: var(--bs-body-color) !important; } [data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--kx-brand-primary) !important; color: #fff !important; } /* ========================================================================== KEYSTONEX SYSTEM-WIDE TIMESTAMPED & USER-ATTRIBUTED NOTES WIDGET ========================================================================== */ .kx-notes-widget { border: 1px solid var(--kx-border-color, #dee2e6); border-radius: var(--kx-radius-md, 0.5rem); background-color: var(--kx-bg-surface, var(--bs-body-bg)); overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .kx-notes-widget--internal { border-left: 3px solid #f59e0b; } .kx-notes-widget--standard { border-left: 3px solid var(--kx-brand-primary, #0d6efd); } .kx-notes-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding: 0.55rem 0.85rem; background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.04); border-bottom: 1px solid var(--kx-border-color, #dee2e6); } .kx-notes-widget--internal .kx-notes-toolbar { background-color: rgba(245, 158, 11, 0.06); } [data-bs-theme="dark"] .kx-notes-toolbar { background-color: rgba(255, 255, 255, 0.03); } .kx-notes-composer { padding: 0.85rem; background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.03); border-bottom: 1px solid var(--kx-border-color, #dee2e6); } [data-bs-theme="dark"] .kx-notes-composer { background-color: rgba(15, 23, 42, 0.45); } .kx-notes-composer textarea.kx-note-composer-input { min-height: 74px !important; height: auto !important; padding: 0.55rem 0.75rem !important; font-size: 0.85rem !important; line-height: 1.45 !important; resize: vertical; } .kx-notes-feed { padding: 0.75rem; max-height: 290px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; } .kx-note-card { border: 1px solid var(--kx-border-color, #e2e8f0); border-radius: var(--kx-radius-sm, 0.375rem); background-color: var(--kx-bg-input, var(--bs-body-bg)); padding: 0.65rem 0.85rem; position: relative; transition: border-color 0.15s ease, transform 0.15s ease; } .kx-note-card:hover { border-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.4); } .kx-note-card--internal { border-left: 3px solid #f59e0b; } .kx-note-card--standard { border-left: 3px solid var(--kx-brand-primary, #0d6efd); } .kx-note-card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.35rem; padding-bottom: 0.35rem; border-bottom: 1px dashed var(--kx-border-color, rgba(148, 163, 184, 0.25)); } .kx-note-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; font-size: 0.75rem; } .kx-note-author { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 700; color: var(--kx-brand-primary, #0d6efd); background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1); padding: 0.15rem 0.55rem; border-radius: 999px; } .kx-note-card--internal .kx-note-author { color: #d97706; background-color: rgba(245, 158, 11, 0.14); } [data-bs-theme="dark"] .kx-note-card--internal .kx-note-author { color: #fbbf24; background-color: rgba(245, 158, 11, 0.18); } .kx-note-timestamp { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--kx-text-muted, #64748b); font-family: var(--bs-font-monospace, monospace); font-size: 0.72rem; background-color: rgba(100, 116, 139, 0.1); padding: 0.15rem 0.5rem; border-radius: 999px; } .kx-note-body { font-size: 0.84rem; line-height: 1.45; color: var(--kx-text-main, var(--bs-body-color)); white-space: pre-wrap; word-break: break-word; } .kx-notes-empty { text-align: center; padding: 1rem 0.75rem; color: var(--kx-text-muted, #64748b); font-size: 0.8rem; border: 1px dashed var(--kx-border-color, #cbd5e1); border-radius: var(--kx-radius-sm, 0.375rem); } /* ========================================================================= */ /* MODULE: css/design-system/components/_kanban.css */ /* ========================================================================= */ /** * css/design-system/components/_kanban.css * LAYER 2: KANBAN BOARDS, HORIZONTAL SCROLLBARS & DRAGGABLE CARDS */ .kanban-scroll-container, .kanban-board { display: flex !important; gap: var(--kx-kanban-col-gap) !important; overflow-x: auto !important; padding-bottom: 1.25rem !important; scrollbar-width: thin !important; scrollbar-color: rgba(var(--bs-primary-rgb), 0.5) rgba(128, 128, 128, 0.12) !important; } .kanban-scroll-container::-webkit-scrollbar, .kanban-board::-webkit-scrollbar, .stepper-track::-webkit-scrollbar { display: block !important; height: 10px !important; } .kanban-scroll-container::-webkit-scrollbar-track, .kanban-board::-webkit-scrollbar-track, .stepper-track::-webkit-scrollbar-track { background: rgba(128, 128, 128, 0.12) !important; border-radius: 10px !important; } .kanban-scroll-container::-webkit-scrollbar-thumb, .kanban-board::-webkit-scrollbar-thumb, .stepper-track::-webkit-scrollbar-thumb { background: rgba(var(--bs-primary-rgb), 0.5) !important; border-radius: 10px !important; border: 2px solid transparent !important; background-clip: padding-box !important; } .kanban-scroll-container::-webkit-scrollbar-thumb:hover, .kanban-board::-webkit-scrollbar-thumb:hover, .stepper-track::-webkit-scrollbar-thumb:hover { background: var(--kx-brand-primary) !important; } .kanban-column-wrapper { flex: 0 0 var(--kx-kanban-col-width) !important; width: var(--kx-kanban-col-width) !important; } .kanban-column { transition: background-color 0.2s ease, border-color 0.2s ease; } .kanban-dropzone, .kanban-cards { display: flex !important; flex-direction: column !important; gap: var(--kx-kanban-card-gap) !important; } .kanban-dropzone.drag-over { background-color: rgba(var(--bs-primary-rgb), 0.08) !important; border: 2px dashed var(--kx-brand-primary) !important; border-radius: var(--kx-radius-md); } .kanban-card { transition: transform 0.15s ease, box-shadow 0.15s ease; margin-bottom: 0 !important; } .kanban-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important; } .kanban-card:active { cursor: grabbing !important; transform: scale(0.98); } .kanban-card.is-dragging { opacity: 0.45; } /* ========================================================================= */ /* MODULE: css/design-system/components/_modals.css */ /* ========================================================================= */ /** * css/design-system/components/_modals.css * LAYER 2: MODALS, SYSTEM TOAST NOTIFICATIONS, SCROLL PROGRESS & AUTH SHELL */ body.auth-body { align-items: center; justify-content: center; padding-top: 40px; padding-bottom: 40px; } .auth-wrapper { width: 100%; max-width: 550px; margin: auto; } .auth-logo { max-width: 200px; max-height: 70px; margin-bottom: 1rem; } /* Premier System Toast Popup Notification */ .toast-container { position: fixed !important; top: 75px !important; right: 1.25rem !important; z-index: 1100 !important; max-width: 400px; width: 100%; pointer-events: none; } body:has(.impersonation-bar) .toast-container { top: 115px !important; } .impersonation-bar { position: sticky; top: 0; z-index: 2000; border-radius: 0; } .premier-toast { background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; border: 1px solid var(--bs-border-color-translucent) !important; border-radius: 14px !important; box-shadow: 0 14px 38px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.08) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); overflow: hidden; pointer-events: auto; margin-bottom: 0.85rem; animation: premierToastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes premierToastSlideIn { from { opacity: 0; transform: translateY(-16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .toast-icon-wrapper { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .toast-icon-success { background-color: rgba(25, 135, 84, 0.12) !important; color: #198754 !important; border: 1px solid rgba(25, 135, 84, 0.25); } .toast-icon-danger { background-color: rgba(220, 53, 69, 0.12) !important; color: #dc3545 !important; border: 1px solid rgba(220, 53, 69, 0.25); } .toast-icon-warning { background-color: rgba(255, 193, 7, 0.18) !important; color: #d39e00 !important; border: 1px solid rgba(255, 193, 7, 0.35); } .toast-icon-info, .toast-icon-primary { background-color: var(--kx-brand-primary-soft) !important; color: var(--kx-brand-primary) !important; border: 1px solid rgba(var(--bs-primary-rgb), 0.25); } .toast-progress-bar { height: 3px; width: 100%; transform-origin: left; animation: premierToastProgress 6s linear forwards; } @keyframes premierToastProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } } .toast-progress-success { background: #198754; } .toast-progress-danger { background: #dc3545; } .toast-progress-warning { background: #ffc107; } .toast-progress-info, .toast-progress-primary { background: var(--kx-brand-primary); } @media (max-width: 576px) { .toast-container { right: 0.75rem !important; left: 0.75rem !important; width: auto !important; max-width: none !important; } } /* Scroll Progress Floating Button */ .scroll-progress-container { position: fixed; bottom: 80px; right: 20px; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1050; opacity: 0; pointer-events: none; transform: translateY(20px); } .scroll-progress-container.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .scroll-progress-inner { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--kx-brand-primary); font-size: 1.5rem; background-color: var(--bs-body-bg) !important; transition: background-color 0.2s, color 0.2s; } .scroll-progress-container:hover .scroll-progress-inner { background-color: var(--kx-brand-primary) !important; color: #fff; }