/** * Xceednet — Corporate Design System (2026) * Built on AdminLTE v4 / Bootstrap 5. * * Design philosophy: Clean, professional, unified SaaS aesthetic. * Single brand accent (teal) across all modules for corporate * consistency. Subtle KPI stripe colors for data differentiation. * * Color architecture: * Brand primary: Teal (#0f766e) — all buttons, links, accents * KPI stripes: Subtle per-metric color for card left borders * Semantic: Success/Warning/Danger/Info for status only * * Conventions: * --nld-* custom properties scoped to this project * --nld-mod-* module-specific accent colors * .nld-* utility / component classes * * Dark mode: AdminLTE v4 uses [data-bs-theme="dark"] on . */ /* ═══════════════════════════════════════════════════════════════════════════ 1. DESIGN TOKENS — Color Palette & Custom Properties ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Primary accent — telecom-grade teal */ --nld-accent: #0f766e; --nld-accent-hover: #0d6560; --nld-accent-light: #f0fdfa; --nld-accent-subtle: rgba(15, 118, 110, 0.08); --nld-accent-ring: rgba(15, 118, 110, 0.22); --nld-accent-gradient: linear-gradient(135deg, #0f766e, #14b8a6); /* Semantic colors */ --nld-success: #059669; --nld-success-light: #ecfdf5; --nld-warning: #d97706; --nld-warning-light: #fffbeb; --nld-danger: #dc2626; --nld-danger-light: #fef2f2; --nld-info: #0891b2; --nld-info-light: #ecfeff; /* ── Module accent colors — contextual identity per CRM module ────────── */ --nld-mod-sales: #4f46e5; /* Indigo — opportunities, pipeline */ --nld-mod-sales-light: rgba(79, 70, 229, 0.08); --nld-mod-sales-gradient: linear-gradient(135deg, #4f46e5, #818cf8); --nld-mod-billing: #059669; /* Emerald — invoices, payments, MRR */ --nld-mod-billing-light: rgba(5, 150, 105, 0.08); --nld-mod-billing-gradient: linear-gradient(135deg, #059669, #34d399); --nld-mod-support: #e11d48; /* Rose — tickets, escalations */ --nld-mod-support-light: rgba(225, 29, 72, 0.08); --nld-mod-support-gradient: linear-gradient(135deg, #e11d48, #fb7185); --nld-mod-network: #0891b2; /* Cyan — circuits, assets, PoPs */ --nld-mod-network-light: rgba(8, 145, 178, 0.08); --nld-mod-network-gradient: linear-gradient(135deg, #0891b2, #22d3ee); --nld-mod-provision: #7c3aed; /* Violet — orders, provisioning */ --nld-mod-provision-light: rgba(124, 58, 237, 0.08); --nld-mod-provision-gradient: linear-gradient(135deg, #7c3aed, #a78bfa); --nld-mod-company: #475569; /* Slate — admin, company settings */ --nld-mod-company-light: rgba(71, 85, 105, 0.08); --nld-mod-company-gradient: linear-gradient(135deg, #475569, #94a3b8); --nld-mod-wallet: #ea580c; /* Orange — wallet, recharge */ --nld-mod-wallet-light: rgba(234, 88, 12, 0.08); --nld-mod-wallet-gradient: linear-gradient(135deg, #ea580c, #fb923c); --nld-mod-catalog: #0f766e; /* Teal — products, TSPs (brand) */ --nld-mod-catalog-light: rgba(15, 118, 110, 0.08); --nld-mod-catalog-gradient: linear-gradient(135deg, #0f766e, #14b8a6); --nld-mod-lastmile: #2563eb; /* Blue — TPLM, CPE */ --nld-mod-lastmile-light: rgba(37, 99, 235, 0.08); --nld-mod-lastmile-gradient: linear-gradient(135deg, #2563eb, #60a5fa); --nld-mod-users: #8b5cf6; /* Purple — user management */ --nld-mod-users-light: rgba(139, 92, 246, 0.08); --nld-mod-users-gradient: linear-gradient(135deg, #8b5cf6, #c4b5fd); --nld-mod-notif: #06b6d4; /* Sky — notifications */ --nld-mod-notif-light: rgba(6, 182, 212, 0.08); --nld-mod-notif-gradient: linear-gradient(135deg, #06b6d4, #67e8f9); --nld-mod-workforce: #65a30d; /* Lime — field tasks, KPI, SLA */ --nld-mod-workforce-light: rgba(101, 163, 13, 0.08); --nld-mod-workforce-gradient: linear-gradient(135deg, #65a30d, #a3e635); --nld-mod-inventory: #d97706; /* Amber — warehouses, stock, logistics */ --nld-mod-inventory-light: rgba(217, 119, 6, 0.08); --nld-mod-inventory-gradient: linear-gradient(135deg, #d97706, #fbbf24); --nld-mod-admin: #64748b; /* Cool gray — reports, imports */ --nld-mod-admin-light: rgba(100, 116, 139, 0.08); --nld-mod-admin-gradient: linear-gradient(135deg, #64748b, #94a3b8); /* Surface / Card system */ --nld-surface: #ffffff; --nld-surface-raised: #ffffff; --nld-surface-overlay: rgba(255, 255, 255, 0.92); --nld-border: #e5e7eb; --nld-border-light: #f3f4f6; /* Shadows — layered depth system */ --nld-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --nld-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --nld-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --nld-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04); --nld-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03); --nld-shadow-glow: 0 0 0 3px var(--nld-accent-ring); /* Typography */ --nld-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --nld-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace; /* Spacing rhythm */ --nld-radius-sm: 0.5rem; --nld-radius-md: 0.75rem; --nld-radius-lg: 1rem; --nld-radius-xl: 1.25rem; --nld-radius-full: 9999px; /* Transitions */ --nld-ease: cubic-bezier(0.4, 0, 0.2, 1); --nld-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --nld-duration: 180ms; --nld-duration-slow: 300ms; /* KPI card accent stripe */ --nld-kpi-stripe-w: 4px; /* Map height */ --nld-map-h: 420px; /* Sidebar — light, corporate */ --nld-sidebar-bg: #ffffff; --nld-sidebar-active: rgba(15, 118, 110, 0.08); --nld-sidebar-hover: #f8fafc; --nld-sidebar-text: #475569; --nld-sidebar-text-hover: #1e293b; --nld-sidebar-text-active: var(--nld-accent); --nld-sidebar-header: #94a3b8; --nld-sidebar-width: 260px; /* Navbar */ --nld-navbar-h: 3.5rem; /* Text colors */ --nld-text-muted: #6b7280; --nld-text-light: #9ca3af; --nld-text-secondary: #6c757d; --nld-text-cyan: #0891b2; --nld-text-orange: #fd7e14; --nld-text-slate: #e2e8f0; --nld-text-border: #d1d5db; --nld-accent-bright: #14b8a6; } /* ── Dark mode tokens ─────────────────────────────────────────────────────── */ [data-bs-theme="dark"] { --nld-accent-light: rgba(15, 118, 110, 0.12); --nld-accent-subtle: rgba(15, 118, 110, 0.10); --nld-accent-ring: rgba(15, 118, 110, 0.30); --nld-success-light: rgba(5, 150, 105, 0.12); --nld-warning-light: rgba(217, 119, 6, 0.12); --nld-danger-light: rgba(220, 38, 38, 0.12); --nld-info-light: rgba(8, 145, 178, 0.12); /* Module accents — dark mode (higher alpha for visibility) */ --nld-mod-sales-light: rgba(79, 70, 229, 0.15); --nld-mod-billing-light: rgba(5, 150, 105, 0.15); --nld-mod-support-light: rgba(225, 29, 72, 0.15); --nld-mod-network-light: rgba(8, 145, 178, 0.15); --nld-mod-provision-light: rgba(124, 58, 237, 0.15); --nld-mod-company-light: rgba(71, 85, 105, 0.15); --nld-mod-wallet-light: rgba(234, 88, 12, 0.15); --nld-mod-catalog-light: rgba(15, 118, 110, 0.15); --nld-mod-lastmile-light: rgba(37, 99, 235, 0.15); --nld-mod-users-light: rgba(139, 92, 246, 0.15); --nld-mod-notif-light: rgba(6, 182, 212, 0.15); --nld-mod-workforce-light: rgba(101, 163, 13, 0.15); --nld-mod-inventory-light: rgba(217, 119, 6, 0.15); --nld-mod-admin-light: rgba(100, 116, 139, 0.15); --nld-surface: #0f172a; --nld-surface-raised: #1e293b; --nld-surface-overlay: rgba(30, 41, 59, 0.95); --nld-border: rgba(255, 255, 255, 0.08); --nld-border-light: rgba(255, 255, 255, 0.04); --nld-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20); --nld-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.20); --nld-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.30), 0 2px 4px -2px rgba(0, 0, 0, 0.25); --nld-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.25); --nld-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.40), 0 8px 10px -6px rgba(0, 0, 0, 0.25); /* Text colors — dark mode adjustments */ --nld-text-muted: #94a3b8; --nld-text-light: #64748b; --nld-text-secondary: #94a3b8; --nld-text-border: #475569; --nld-text-slate: #94a3b8; /* Sidebar — dark mode */ --nld-sidebar-bg: #1e293b; --nld-sidebar-active: rgba(20, 184, 166, 0.15); --nld-sidebar-hover: rgba(255, 255, 255, 0.08); --nld-sidebar-text: rgba(255, 255, 255, 0.72); --nld-sidebar-text-hover: rgba(255, 255, 255, 0.95); --nld-sidebar-text-active: #ffffff; --nld-sidebar-header: rgba(255, 255, 255, 0.40); --nld-sidebar-scrollbar: rgba(255, 255, 255, 0.12); } /* ═══════════════════════════════════════════════════════════════════════════ 2. GLOBAL RESETS & FOUNDATION ═══════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--nld-font-sans); font-size: 0.875rem; letter-spacing: -0.006em; line-height: 1.6; background: var(--nld-surface) !important; } /* Light mode body subtle pattern */ [data-bs-theme="light"] body { background: #f8fafc !important; } /* Dark mode body — richer dark with subtle warmth */ [data-bs-theme="dark"] body { background: #0c1222 !important; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: var(--nld-radius-full); } ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); } [data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); } [data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.20); } /* Selection */ ::selection { background: var(--nld-accent); color: #fff; } /* ═══════════════════════════════════════════════════════════════════════════ 3. TYPOGRAPHY ═══════════════════════════════════════════════════════════════════════════ */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.3; } h1, .h1 { font-size: 1.75rem; } h2, .h2 { font-size: 1.375rem; } h3, .h3 { font-size: 1.125rem; } h4, .h4 { font-size: 1rem; } h5, .h5 { font-size: 0.9375rem; } h6, .h6 { font-size: 0.8125rem; } .app-brand-text { font-weight: 800; letter-spacing: -0.03em; font-size: 1.15rem; background: var(--nld-accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Code / mono */ code, kbd, pre, samp { font-family: var(--nld-font-mono); font-size: 0.8125em; } code { color: var(--nld-accent) !important; background: var(--nld-accent-subtle); padding: 0.125em 0.375em; border-radius: 0.25rem; font-weight: 500; } /* ═══════════════════════════════════════════════════════════════════════════ 4. NAVBAR / TOP BAR ═══════════════════════════════════════════════════════════════════════════ */ .app-header.navbar { height: var(--nld-navbar-h); background: var(--nld-surface-overlay) !important; backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border-bottom: 1px solid var(--nld-border); /* Fallback for browsers without backdrop-filter support */ @supports not (backdrop-filter: blur(1px)) { background: var(--nld-surface) !important; } box-shadow: none !important; z-index: 1030; } [data-bs-theme="dark"] .app-header.navbar { background: rgba(15, 23, 42, 0.85) !important; border-bottom-color: rgba(255, 255, 255, 0.06); } /* Notification bell */ .app-header .nav-link { color: var(--bs-body-color); transition: color var(--nld-duration) var(--nld-ease); } .app-header .nav-link:hover { color: var(--nld-accent); } /* User avatar pill in navbar */ .app-header .avatar { background: var(--nld-accent-gradient) !important; box-shadow: 0 0 0 2px var(--nld-surface), 0 0 0 3px var(--nld-accent-ring); transition: box-shadow var(--nld-duration) var(--nld-ease); } /* Dropdown menus — modern */ .dropdown-menu { border: 1px solid var(--nld-border); border-radius: var(--nld-radius-md); box-shadow: var(--nld-shadow-lg); padding: 0.375rem; background: var(--nld-surface-overlay); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); animation: nld-dropdown-in 0.15s var(--nld-ease); /* Fallback for browsers without backdrop-filter support */ @supports not (backdrop-filter: blur(1px)) { background: var(--nld-surface) !important; } } @keyframes nld-dropdown-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .dropdown-item { border-radius: var(--nld-radius-sm); font-size: 0.8125rem; padding: 0.5rem 0.75rem; transition: background var(--nld-duration) var(--nld-ease); } .dropdown-item:hover, .dropdown-item:focus { background: var(--nld-accent-subtle); color: var(--nld-accent); } .dropdown-item.text-danger:hover { background: var(--nld-danger-light); color: var(--nld-danger); } .dropdown-divider { border-color: var(--nld-border-light); margin: 0.25rem 0; } .dropdown-header { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bs-secondary-color); padding: 0.5rem 0.75rem 0.25rem; } /* Notification badge */ .app-header .badge.rounded-pill.bg-danger { background: var(--nld-danger) !important; font-size: 0.55rem; box-shadow: 0 0 0 2px var(--nld-surface); animation: nld-pulse 2s infinite; } @keyframes nld-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--nld-surface); } 50% { box-shadow: 0 0 0 2px var(--nld-surface), 0 0 0 5px rgba(220, 38, 38, 0.2); } } /* ═══════════════════════════════════════════════════════════════════════════ 5. SIDEBAR ═══════════════════════════════════════════════════════════════════════════ */ .app-sidebar { background: var(--nld-sidebar-bg) !important; border-right: 1px solid var(--nld-border) !important; box-shadow: none !important; width: var(--nld-sidebar-width) !important; } /* Sidebar brand */ .sidebar-brand { padding: 1rem 1.25rem !important; border-bottom: 1px solid var(--nld-border); } .sidebar-brand .brand-link { display: flex; align-items: center; text-decoration: none !important; } .sidebar-brand .brand-image { color: var(--nld-accent) !important; font-size: 1.5rem !important; } /* Sidebar scrollbar */ .sidebar-wrapper { scrollbar-width: thin; scrollbar-color: var(--nld-sidebar-scrollbar, rgba(0, 0, 0, 0.08)) transparent; } .sidebar-wrapper::-webkit-scrollbar { width: 4px; } .sidebar-wrapper::-webkit-scrollbar-track { background: transparent; } .sidebar-wrapper::-webkit-scrollbar-thumb { background: var(--nld-sidebar-scrollbar, rgba(0, 0, 0, 0.08)); border-radius: var(--nld-radius-full); } /* Section headers */ .sidebar-menu .nav-header { font-size: 0.6875rem !important; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nld-sidebar-header) !important; padding: 1.25rem 1.25rem 0.5rem !important; margin-top: 0.25rem; } /* Nav items */ .sidebar-menu .nav-link { color: var(--nld-sidebar-text) !important; padding: 0.5625rem 1rem !important; margin: 0.125rem 0.75rem !important; border-radius: var(--nld-radius-sm) !important; transition: all var(--nld-duration) var(--nld-ease); font-size: 0.8125rem; font-weight: 450; position: relative; line-height: 1.5; } .sidebar-menu .nav-link:hover { background: var(--nld-sidebar-hover) !important; color: var(--nld-sidebar-text-hover, #1e293b) !important; } .sidebar-menu .nav-link.active { background: var(--nld-sidebar-active) !important; color: var(--nld-sidebar-text-active) !important; font-weight: 600; box-shadow: inset 3px 0 0 0 var(--nld-accent); } .sidebar-menu .nav-link .nav-icon { margin-right: 0.625rem; font-size: 1.0625rem; width: 1.375rem; text-align: center; opacity: 0.6; transition: opacity var(--nld-duration) var(--nld-ease); } .sidebar-menu .nav-link:hover .nav-icon, .sidebar-menu .nav-link.active .nav-icon { opacity: 1; } .sidebar-menu .nav-link.active .nav-icon { color: var(--nld-accent) !important; } /* Sidebar footer */ .sidebar-footer { border-top: 1px solid var(--nld-border); } .sidebar-footer hr { display: none; } /* ═══════════════════════════════════════════════════════════════════════════ 6. CARDS — Refined modern cards ═══════════════════════════════════════════════════════════════════════════ */ .card { background: var(--nld-surface-raised); border: 1px solid var(--nld-border) !important; border-radius: var(--nld-radius-lg) !important; box-shadow: var(--nld-shadow-sm); transition: box-shadow var(--nld-duration-slow) var(--nld-ease), transform var(--nld-duration-slow) var(--nld-ease); overflow: hidden; } .card:hover { box-shadow: var(--nld-shadow-md); } .card-header { background: transparent !important; border-bottom: 1px solid var(--nld-border-light) !important; padding: 1rem 1.25rem !important; font-weight: 600; } .card-body { padding: 1.25rem !important; } .card-footer { background: transparent !important; border-top: 1px solid var(--nld-border-light) !important; padding: 0.75rem 1.25rem !important; } /* Section card — elevated */ .nld-section-card { background: var(--nld-surface-raised); border: 1px solid var(--nld-border); border-radius: var(--nld-radius-lg); box-shadow: var(--nld-shadow-sm); } /* ═══════════════════════════════════════════════════════════════════════════ 7. KPI CARDS ═══════════════════════════════════════════════════════════════════════════ */ .nld-kpi-card { background: var(--nld-surface-raised); border: 1px solid var(--nld-border); border-radius: var(--nld-radius-lg); box-shadow: var(--nld-shadow-sm); transition: transform var(--nld-duration) var(--nld-ease-spring), box-shadow var(--nld-duration-slow) var(--nld-ease); position: relative; overflow: hidden; padding: 1.25rem 1.5rem; } .nld-kpi-card::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: var(--nld-kpi-stripe-w); background: var(--kpi-color, var(--nld-accent)); border-radius: var(--nld-radius-lg) 0 0 var(--nld-radius-lg); } /* Subtle glow on hover */ .nld-kpi-card:hover { transform: translateY(-2px); box-shadow: var(--nld-shadow-lg); } .nld-kpi-card .kpi-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bs-secondary-color); margin-bottom: 0.5rem; } .nld-kpi-card .kpi-value { font-size: 1.875rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--bs-body-color); } .nld-kpi-card .kpi-icon { font-size: 2.5rem; opacity: 0.08; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--kpi-color, var(--nld-accent)); } .nld-kpi-card .kpi-trend { font-size: 0.75rem; margin-top: 0.5rem; font-weight: 500; } /* KPI color variants — subtle left-stripe only, clean white/dark cards */ .nld-kpi-card[data-kpi="circuits"] { --kpi-color: var(--nld-mod-network); } .nld-kpi-card[data-kpi="feasibility"] { --kpi-color: var(--nld-warning); } .nld-kpi-card[data-kpi="orders"] { --kpi-color: var(--nld-mod-provision); } .nld-kpi-card[data-kpi="mrr"] { --kpi-color: var(--nld-mod-billing); } .nld-kpi-card[data-kpi="opportunities"] { --kpi-color: var(--nld-mod-sales); } .nld-kpi-card[data-kpi="tickets"] { --kpi-color: var(--nld-mod-support); } .nld-kpi-card[data-kpi="pops"] { --kpi-color: var(--nld-mod-catalog); } .nld-kpi-card[data-kpi="quotations"] { --kpi-color: var(--nld-mod-sales); } .nld-kpi-card[data-kpi="invoices"] { --kpi-color: var(--nld-mod-billing); } .nld-kpi-card[data-kpi="wallet"] { --kpi-color: var(--nld-mod-wallet); } /* KPI card hover — clean lift */ .nld-kpi-card:hover { transform: translateY(-2px); box-shadow: var(--nld-shadow-lg); } /* KPI value — use module color for impact */ .nld-kpi-card .kpi-value { color: var(--kpi-color, var(--bs-body-color)); } /* ═══════════════════════════════════════════════════════════════════════════ 8. TABLES — Modern refined tables ═══════════════════════════════════════════════════════════════════════════ */ .table { --bs-table-bg: transparent; font-size: 0.8125rem; margin-bottom: 0; } .table > thead th { position: sticky; top: 0; z-index: 2; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-secondary-color); background: var(--nld-surface-raised); border-bottom: 2px solid var(--nld-border) !important; padding: 0.75rem 1rem; white-space: nowrap; } .table > tbody > tr { transition: background var(--nld-duration) var(--nld-ease); } .table > tbody > tr:hover { background: var(--nld-accent-subtle) !important; } .table > tbody > tr > td { padding: 0.75rem 1rem; vertical-align: middle; border-bottom: 1px solid var(--nld-border-light); color: var(--bs-body-color); } /* Zebra stripe — very subtle */ .table-striped > tbody > tr:nth-of-type(odd) > td { background: rgba(0, 0, 0, 0.015); } [data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td { background: rgba(255, 255, 255, 0.015); } /* Scrollable table area with sticky headers — the table-responsive container gets a viewport-relative max-height so it becomes the scroll context, and th elements stick at its top edge. */ .card .table-responsive { max-height: calc(100vh - 12rem); overflow-y: auto; } /* Table inside card — seamless */ .card > .table-responsive, .card > .card-body > .table-responsive { margin: -1.25rem; margin-top: 0; } .card > .table-responsive .table, .card > .card-body > .table-responsive .table { margin-bottom: 0; } /* Table light header variant */ .table-light th { background: var(--nld-surface-raised) !important; } [data-bs-theme="dark"] .table-light th { background: rgba(255, 255, 255, 0.03) !important; color: var(--bs-secondary-color) !important; } /* Nested port sub-table */ .bg-body-tertiary .table-sm td { padding: 0.375rem 0.625rem; } /* ═══════════════════════════════════════════════════════════════════════════ 9. BADGES — Modern pill badges ═══════════════════════════════════════════════════════════════════════════ */ .badge { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.3em 0.65em; border-radius: var(--nld-radius-full); line-height: 1.4; } /* Status badges with dot indicator */ .badge.text-bg-success, .badge.bg-success { background: var(--nld-success-light) !important; color: var(--nld-success) !important; border: 1px solid rgba(5, 150, 105, 0.15); } .badge.text-bg-danger, .badge.bg-danger:not(.rounded-pill):not(.app-header .badge) { background: var(--nld-danger-light) !important; color: var(--nld-danger) !important; border: 1px solid rgba(220, 38, 38, 0.15); } .badge.text-bg-warning, .badge.bg-warning { background: var(--nld-warning-light) !important; color: var(--nld-warning) !important; border: 1px solid rgba(217, 119, 6, 0.15); } .badge.text-bg-info, .badge.bg-info { background: var(--nld-info-light) !important; color: var(--nld-info) !important; border: 1px solid rgba(8, 145, 178, 0.15); } .badge.text-bg-secondary, .badge.bg-secondary { background: rgba(100, 116, 139, 0.1) !important; color: #64748b !important; border: 1px solid rgba(100, 116, 139, 0.12); } .badge.text-bg-primary, .badge.bg-primary:not(.app-header .badge) { background: var(--nld-accent-light) !important; color: var(--nld-accent) !important; border: 1px solid rgba(15, 118, 110, 0.15); } .badge.text-bg-cyan, .badge.bg-cyan { background: rgba(8, 145, 178, 0.1) !important; color: #0891b2 !important; border: 1px solid rgba(8, 145, 178, 0.15); } /* ── Dark mode: neutralise .text-dark forced onto badges ───────────────── */ [data-bs-theme="dark"] .badge.text-dark { color: inherit !important; } [data-bs-theme="dark"] .bg-warning.text-dark { color: inherit !important; } /* ── Dark mode: fix bg-light elements ──────────────────────────────────── */ [data-bs-theme="dark"] .badge.text-bg-light, [data-bs-theme="dark"] .badge.bg-light { background: rgba(255, 255, 255, 0.08) !important; color: var(--bs-secondary-color) !important; border-color: rgba(255, 255, 255, 0.12) !important; } [data-bs-theme="dark"] th.bg-light, [data-bs-theme="dark"] td.bg-light { background: rgba(255, 255, 255, 0.04) !important; } [data-bs-theme="dark"] pre.bg-light, [data-bs-theme="dark"] div.bg-light { background: rgba(255, 255, 255, 0.06) !important; } [data-bs-theme="dark"] .alert-light { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: var(--bs-body-color) !important; } /* ── Dark mode: elevated card surface ──────────────────────────────────── */ [data-bs-theme="dark"] .card { border-color: rgba(255, 255, 255, 0.06) !important; } [data-bs-theme="dark"] .card-header { border-bottom-color: rgba(255, 255, 255, 0.06) !important; } [data-bs-theme="dark"] .card-footer { border-top-color: rgba(255, 255, 255, 0.06) !important; } /* ── Dark mode: nld-section-card ───────────────────────────────────────── */ [data-bs-theme="dark"] .nld-section-card { border-color: rgba(255, 255, 255, 0.06); } /* ── Dark mode: KPI cards — module-colored glow ──────────────────────── */ [data-bs-theme="dark"] .nld-kpi-card { border-color: rgba(255, 255, 255, 0.06); background: var(--nld-surface-raised); } [data-bs-theme="dark"] .nld-kpi-card:hover { box-shadow: var(--nld-shadow-lg); } /* ── Dark mode: form controls ──────────────────────────────────────────── */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.10); color: var(--bs-body-color); } [data-bs-theme="dark"] .form-control::placeholder { color: rgba(255, 255, 255, 0.3); } /* ── Dark mode: modal ──────────────────────────────────────────────────── */ [data-bs-theme="dark"] .modal-content { background: #1e293b; border-color: rgba(255, 255, 255, 0.08); } /* ── Dark mode: dropdown ───────────────────────────────────────────────── */ [data-bs-theme="dark"] .dropdown-menu { background: rgba(30, 41, 59, 0.98); border-color: rgba(255, 255, 255, 0.08); } /* ── Dark mode: table-primary row (e.g. primary bank account) ──────────── */ [data-bs-theme="dark"] .table-primary { --bs-table-bg: rgba(15, 118, 110, 0.08); --bs-table-border-color: rgba(15, 118, 110, 0.12); color: var(--bs-body-color); } /* ── Dark mode: border utility ─────────────────────────────────────────── */ [data-bs-theme="dark"] .border { border-color: rgba(255, 255, 255, 0.10) !important; } /* ── Dark mode: text-muted visibility boost ────────────────────────────── */ [data-bs-theme="dark"] .text-muted { color: rgba(255, 255, 255, 0.5) !important; } /* ── Dark mode: outline button borders ─────────────────────────────────── */ [data-bs-theme="dark"] .btn-outline-secondary { border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.65); } [data-bs-theme="dark"] .btn-outline-secondary:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.9); } /* ── Dark mode: progress bar track ─────────────────────────────────────── */ [data-bs-theme="dark"] .progress { background: rgba(255, 255, 255, 0.06); } /* ── Dark mode: list-group ─────────────────────────────────────────────── */ [data-bs-theme="dark"] .list-group-item { background: transparent; border-color: rgba(255, 255, 255, 0.06); } /* ── Dark mode: hr / divider ───────────────────────────────────────────── */ [data-bs-theme="dark"] hr { border-color: rgba(255, 255, 255, 0.08); } /* Subtle badge variants */ .badge.bg-primary-subtle { background: var(--nld-accent-light) !important; border: 1px solid rgba(15, 118, 110, 0.12); } .badge.text-primary-emphasis { color: var(--nld-accent) !important; } .badge.bg-info-subtle { background: var(--nld-info-light) !important; border: 1px solid rgba(8, 145, 178, 0.12); } .badge.text-info-emphasis { color: var(--nld-info) !important; } .badge.bg-secondary-subtle { background: rgba(100, 116, 139, 0.08) !important; border: 1px solid rgba(100, 116, 139, 0.10); } .badge.text-secondary-emphasis { color: #64748b !important; } .badge.bg-success-subtle { background: var(--nld-success-light) !important; border: 1px solid rgba(5, 150, 105, 0.12); } .badge.text-success-emphasis { color: var(--nld-success) !important; } /* ═══════════════════════════════════════════════════════════════════════════ 9b. SEMANTIC BADGE SYSTEM Separate visual languages for Status, Priority, Type, and Boolean badges. Eliminates color collision across modules. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Status Lifecycle ──────────────────────────────────────────────────── */ .nld-badge-draft { background: #f1f5f9 !important; color: #475569 !important; border: 1px solid #cbd5e1; } .nld-badge-progress { background: #eff6ff !important; color: #2563eb !important; border: 1px solid rgba(37, 99, 235, 0.2); } .nld-badge-waiting { background: #fffbeb !important; color: #b45309 !important; border: 1px solid rgba(180, 83, 9, 0.2); } .nld-badge-done { background: #ecfdf5 !important; color: #059669 !important; border: 1px solid rgba(5, 150, 105, 0.15); } .nld-badge-closed { background: #1e293b !important; color: #e2e8f0 !important; border: 1px solid #334155; } .nld-badge-failed { background: #fef2f2 !important; color: #dc2626 !important; border: 1px solid rgba(220, 38, 38, 0.15); } .nld-badge-overdue { background: #fef2f2 !important; color: #dc2626 !important; border: 1px dashed #fca5a5; } /* ── Priority ──────────────────────────────────────────────────────────── */ .nld-badge-p-critical { background: #fef2f2 !important; color: #dc2626 !important; border: 1px solid rgba(220, 38, 38, 0.15); border-left: 3px solid #dc2626; border-radius: 2px var(--nld-radius-full) var(--nld-radius-full) 2px !important; } .nld-badge-p-high { background: #fff7ed !important; color: #c2410c !important; border: 1px solid rgba(194, 65, 12, 0.15); border-left: 3px solid #ea580c; border-radius: 2px var(--nld-radius-full) var(--nld-radius-full) 2px !important; } .nld-badge-p-normal { background: #f1f5f9 !important; color: #475569 !important; border: 1px solid #cbd5e1; } .nld-badge-p-low { background: #f9fafb !important; color: #9ca3af !important; border: 1px dashed #d1d5db; } /* ── Type / Category (generic fallback) ─────────────────────────────── */ .nld-badge-type { background: #f3f4f6 !important; color: #4b5563 !important; border: 1px solid rgba(75, 85, 99, 0.12); } /* ── Type / Category — per-value palette ────────────────────────────── */ /* 16 distinct hues that do NOT collide with Status (blue #2563eb, amber #b45309, green #059669, red #dc2626, dark #1e293b), Priority (red #dc2626, orange #c2410c, slate #475569), or Boolean (green #059669, grey #64748b) badges. */ .nld-badge-t-teal { background: #f0fdfa !important; color: #0f766e !important; border: 1px solid rgba(15, 118, 110, 0.15); } .nld-badge-t-purple { background: #faf5ff !important; color: #7c3aed !important; border: 1px solid rgba(124, 58, 237, 0.15); } .nld-badge-t-indigo { background: #eef2ff !important; color: #4f46e5 !important; border: 1px solid rgba(79, 70, 229, 0.15); } .nld-badge-t-rose { background: #fff1f2 !important; color: #be123c !important; border: 1px solid rgba(190, 18, 60, 0.15); } .nld-badge-t-cyan { background: #ecfeff !important; color: #0e7490 !important; border: 1px solid rgba(14, 116, 144, 0.15); } .nld-badge-t-lime { background: #f7fee7 !important; color: #4d7c0f !important; border: 1px solid rgba(77, 124, 15, 0.15); } .nld-badge-t-sky { background: #f0f9ff !important; color: #0369a1 !important; border: 1px solid rgba(3, 105, 161, 0.15); } .nld-badge-t-fuchsia { background: #fdf4ff !important; color: #a21caf !important; border: 1px solid rgba(162, 28, 175, 0.15); } .nld-badge-t-stone { background: #fafaf9 !important; color: #78716c !important; border: 1px solid rgba(120, 113, 108, 0.15); } .nld-badge-t-violet { background: #f5f3ff !important; color: #6d28d9 !important; border: 1px solid rgba(109, 40, 217, 0.15); } .nld-badge-t-pink { background: #fdf2f8 !important; color: #db2777 !important; border: 1px solid rgba(219, 39, 119, 0.15); } .nld-badge-t-bronze { background: #fef9ee !important; color: #9a6d38 !important; border: 1px solid rgba(154, 109, 56, 0.15); } .nld-badge-t-sage { background: #f2f7f2 !important; color: #2d6a4f !important; border: 1px solid rgba(45, 106, 79, 0.15); } .nld-badge-t-denim { background: #edf2f7 !important; color: #3b5998 !important; border: 1px solid rgba(59, 89, 152, 0.15); } .nld-badge-t-plum { background: #f8f0fc !important; color: #862e9c !important; border: 1px solid rgba(134, 46, 156, 0.15); } .nld-badge-t-rust { background: #fdf0ed !important; color: #9c4221 !important; border: 1px solid rgba(156, 66, 33, 0.15); } /* ── Boolean (Active / Inactive) ───────────────────────────────────────── */ .nld-badge-active { background: #ecfdf5 !important; color: #059669 !important; border: 1px solid rgba(5, 150, 105, 0.15); } .nld-badge-active::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #059669; margin-right: 0.35em; vertical-align: 1px; } .nld-badge-inactive { background: rgba(100, 116, 139, 0.08) !important; color: #64748b !important; border: 1px solid rgba(100, 116, 139, 0.12); } .nld-badge-inactive::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; margin-right: 0.35em; vertical-align: 1px; } /* ── Dark mode overrides ───────────────────────────────────────────────── */ [data-bs-theme="dark"] .nld-badge-draft { background: rgba(100, 116, 139, 0.15) !important; color: #94a3b8 !important; border-color: rgba(100, 116, 139, 0.25); } [data-bs-theme="dark"] .nld-badge-progress { background: rgba(37, 99, 235, 0.15) !important; color: #60a5fa !important; border-color: rgba(37, 99, 235, 0.25); } [data-bs-theme="dark"] .nld-badge-waiting { background: rgba(180, 83, 9, 0.15) !important; color: #fbbf24 !important; border-color: rgba(180, 83, 9, 0.25); } [data-bs-theme="dark"] .nld-badge-done { background: rgba(5, 150, 105, 0.15) !important; color: #34d399 !important; border-color: rgba(5, 150, 105, 0.2); } [data-bs-theme="dark"] .nld-badge-closed { background: #334155 !important; color: #94a3b8 !important; border-color: #475569; } [data-bs-theme="dark"] .nld-badge-failed { background: rgba(220, 38, 38, 0.15) !important; color: #f87171 !important; border-color: rgba(220, 38, 38, 0.2); } [data-bs-theme="dark"] .nld-badge-overdue { background: rgba(220, 38, 38, 0.15) !important; color: #f87171 !important; border-color: rgba(248, 113, 113, 0.4); } [data-bs-theme="dark"] .nld-badge-p-critical { background: rgba(220, 38, 38, 0.15) !important; color: #f87171 !important; border-color: rgba(220, 38, 38, 0.2); border-left-color: #f87171; } [data-bs-theme="dark"] .nld-badge-p-high { background: rgba(194, 65, 12, 0.15) !important; color: #fb923c !important; border-color: rgba(194, 65, 12, 0.2); border-left-color: #fb923c; } [data-bs-theme="dark"] .nld-badge-p-normal { background: rgba(100, 116, 139, 0.15) !important; color: #94a3b8 !important; border-color: rgba(100, 116, 139, 0.25); } [data-bs-theme="dark"] .nld-badge-p-low { background: rgba(255, 255, 255, 0.04) !important; color: #64748b !important; border-color: rgba(255, 255, 255, 0.1); } [data-bs-theme="dark"] .nld-badge-type { background: rgba(255, 255, 255, 0.06) !important; color: #94a3b8 !important; border-color: rgba(255, 255, 255, 0.1); } [data-bs-theme="dark"] .nld-badge-t-teal { background: rgba(15, 118, 110, 0.15) !important; color: #5eead4 !important; border-color: rgba(15, 118, 110, 0.25); } [data-bs-theme="dark"] .nld-badge-t-purple { background: rgba(124, 58, 237, 0.15) !important; color: #c4b5fd !important; border-color: rgba(124, 58, 237, 0.25); } [data-bs-theme="dark"] .nld-badge-t-indigo { background: rgba(79, 70, 229, 0.15) !important; color: #a5b4fc !important; border-color: rgba(79, 70, 229, 0.25); } [data-bs-theme="dark"] .nld-badge-t-rose { background: rgba(190, 18, 60, 0.15) !important; color: #fda4af !important; border-color: rgba(190, 18, 60, 0.25); } [data-bs-theme="dark"] .nld-badge-t-cyan { background: rgba(14, 116, 144, 0.15) !important; color: #67e8f9 !important; border-color: rgba(14, 116, 144, 0.25); } [data-bs-theme="dark"] .nld-badge-t-lime { background: rgba(77, 124, 15, 0.15) !important; color: #bef264 !important; border-color: rgba(77, 124, 15, 0.25); } [data-bs-theme="dark"] .nld-badge-t-sky { background: rgba(3, 105, 161, 0.15) !important; color: #7dd3fc !important; border-color: rgba(3, 105, 161, 0.25); } [data-bs-theme="dark"] .nld-badge-t-fuchsia { background: rgba(162, 28, 175, 0.15) !important; color: #f0abfc !important; border-color: rgba(162, 28, 175, 0.25); } [data-bs-theme="dark"] .nld-badge-t-stone { background: rgba(120, 113, 108, 0.15) !important; color: #a8a29e !important; border-color: rgba(120, 113, 108, 0.25); } [data-bs-theme="dark"] .nld-badge-t-violet { background: rgba(109, 40, 217, 0.15) !important; color: #c084fc !important; border-color: rgba(109, 40, 217, 0.25); } [data-bs-theme="dark"] .nld-badge-t-pink { background: rgba(219, 39, 119, 0.15) !important; color: #f9a8d4 !important; border-color: rgba(219, 39, 119, 0.25); } [data-bs-theme="dark"] .nld-badge-t-bronze { background: rgba(154, 109, 56, 0.15) !important; color: #d4a96a !important; border-color: rgba(154, 109, 56, 0.25); } [data-bs-theme="dark"] .nld-badge-t-sage { background: rgba(45, 106, 79, 0.15) !important; color: #74c69d !important; border-color: rgba(45, 106, 79, 0.25); } [data-bs-theme="dark"] .nld-badge-t-denim { background: rgba(59, 89, 152, 0.15) !important; color: #8babd8 !important; border-color: rgba(59, 89, 152, 0.25); } [data-bs-theme="dark"] .nld-badge-t-plum { background: rgba(134, 46, 156, 0.15) !important; color: #d6a4e0 !important; border-color: rgba(134, 46, 156, 0.25); } [data-bs-theme="dark"] .nld-badge-t-rust { background: rgba(156, 66, 33, 0.15) !important; color: #f0a882 !important; border-color: rgba(156, 66, 33, 0.25); } [data-bs-theme="dark"] .nld-badge-active { background: rgba(5, 150, 105, 0.15) !important; color: #34d399 !important; border-color: rgba(5, 150, 105, 0.2); } [data-bs-theme="dark"] .nld-badge-active::before { background: #34d399; } [data-bs-theme="dark"] .nld-badge-inactive { background: rgba(100, 116, 139, 0.1) !important; color: #64748b !important; border-color: rgba(100, 116, 139, 0.15); } [data-bs-theme="dark"] .nld-badge-inactive::before { background: #64748b; } /* ═══════════════════════════════════════════════════════════════════════════ 10. BUTTONS — Refined modern buttons ═══════════════════════════════════════════════════════════════════════════ */ .btn { font-size: 0.8125rem; font-weight: 600; border-radius: var(--nld-radius-sm); padding: 0.5rem 1rem; transition: all var(--nld-duration) var(--nld-ease); letter-spacing: 0.01em; position: relative; } .btn:active { transform: scale(0.97); } /* Primary button — gradient */ .btn-primary { background: var(--nld-accent-gradient) !important; border-color: var(--nld-accent) !important; box-shadow: var(--nld-shadow-xs), 0 1px 2px rgba(15, 118, 110, 0.15); } .btn-primary:hover { background: linear-gradient(135deg, #0d6560, #0f766e) !important; box-shadow: var(--nld-shadow-sm), 0 2px 8px rgba(15, 118, 110, 0.25); transform: translateY(-1px); } .btn-primary:focus-visible { box-shadow: var(--nld-shadow-glow) !important; } /* Outline buttons */ .btn-outline-primary { color: var(--nld-accent); border-color: rgba(15, 118, 110, 0.3); } .btn-outline-primary:hover { background: var(--nld-accent-light); border-color: var(--nld-accent); color: var(--nld-accent); } .btn-outline-secondary { color: var(--bs-secondary-color); border-color: var(--nld-border); } .btn-outline-secondary:hover { background: var(--bs-tertiary-bg); border-color: var(--bs-secondary-color); color: var(--bs-body-color); } .btn-outline-success { color: var(--nld-success); border-color: rgba(5, 150, 105, 0.3); } .btn-outline-success:hover { background: var(--nld-success-light); border-color: var(--nld-success); color: var(--nld-success); } .btn-outline-danger { color: var(--nld-danger); border-color: rgba(220, 38, 38, 0.3); } .btn-outline-danger:hover { background: var(--nld-danger-light); border-color: var(--nld-danger); color: var(--nld-danger); } .btn-outline-warning { color: var(--nld-warning); border-color: rgba(217, 119, 6, 0.3); } .btn-outline-warning:hover { background: var(--nld-warning-light); border-color: var(--nld-warning); color: var(--nld-warning); } .btn-outline-info { color: var(--nld-info); border-color: rgba(8, 145, 178, 0.3); } .btn-outline-info:hover { background: var(--nld-info-light); border-color: var(--nld-info); color: var(--nld-info); } /* Ghost / link buttons */ .btn-ghost-secondary, .btn-link { color: var(--bs-secondary-color); transition: color var(--nld-duration) var(--nld-ease), background var(--nld-duration) var(--nld-ease); } .btn-ghost-secondary:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); } /* Accent button — glass-teal style (inspired by landing page login) */ .btn-accent { background: rgba(20, 184, 166, 0.12); color: var(--nld-accent) !important; border: 1px solid rgba(15, 118, 110, 0.2); border-radius: 10px; font-weight: 700; padding: 0.5rem 1.25rem; transition: all 0.25s ease; } .btn-accent:hover { background: rgba(20, 184, 166, 0.22); border-color: rgba(15, 118, 110, 0.4); box-shadow: 0 0 20px rgba(20, 184, 166, 0.15); color: var(--nld-accent) !important; transform: translateY(-1px); } .btn-accent:active { transform: scale(0.97); } .btn-accent:focus-visible { box-shadow: var(--nld-shadow-glow) !important; } [data-bs-theme="dark"] .btn-accent { background: rgba(20, 184, 166, 0.15); color: #14b8a6 !important; border-color: rgba(20, 184, 166, 0.25); } [data-bs-theme="dark"] .btn-accent:hover { background: rgba(20, 184, 166, 0.25); border-color: rgba(20, 184, 166, 0.45); box-shadow: 0 0 20px rgba(20, 184, 166, 0.2); } /* Small button refinement */ .btn-sm { font-size: 0.75rem; padding: 0.3125rem 0.625rem; border-radius: 0.375rem; } /* Rounded pill button */ .btn.rounded-pill { padding-left: 1.25rem; padding-right: 1.25rem; } /* Success solid */ .btn-success { background: var(--nld-success) !important; border-color: var(--nld-success) !important; } /* Danger solid */ .btn-danger { background: var(--nld-danger) !important; border-color: var(--nld-danger) !important; } /* ═══════════════════════════════════════════════════════════════════════════ 11. FORMS — Modern input styling ═══════════════════════════════════════════════════════════════════════════ */ .form-control, .form-select { border-radius: var(--nld-radius-sm); border-color: var(--nld-border); font-size: 0.8125rem; padding: 0.5rem 0.75rem; transition: border-color var(--nld-duration) var(--nld-ease), box-shadow var(--nld-duration) var(--nld-ease); background: var(--nld-surface-raised); } .form-control:focus, .form-select:focus { border-color: var(--nld-accent) !important; box-shadow: var(--nld-shadow-glow) !important; } .form-floating > .form-control:focus, .form-floating > .form-select:focus { border-color: var(--nld-accent); box-shadow: var(--nld-shadow-glow); } /* Input group */ .input-group .form-control { border-color: var(--nld-border); } .input-group-text { background: var(--bs-tertiary-bg); border-color: var(--nld-border); font-size: 0.8125rem; color: var(--bs-secondary-color); font-weight: 500; } /* Labels */ .form-label { font-size: 0.8125rem; font-weight: 600; color: var(--bs-body-color); margin-bottom: 0.375rem; } /* Help text */ .form-text { font-size: 0.75rem; color: var(--bs-secondary-color); margin-top: 0.25rem; } /* Checkbox / radio / switch refinement */ .form-check-input { width: 1.15em; height: 1.15em; margin-top: 0.2em; border: 2px solid #9ca3af; background-color: var(--nld-surface-raised, #fff); transition: all var(--nld-duration) var(--nld-ease); } .form-check-input:checked { background-color: var(--nld-accent); border-color: var(--nld-accent); } .form-check-input:focus { box-shadow: var(--nld-shadow-glow); border-color: var(--nld-accent); } /* Dark mode checkbox / radio visibility */ [data-bs-theme="dark"] .form-check-input { background-color: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.30); } [data-bs-theme="dark"] .form-check-input:checked { background-color: var(--nld-accent); border-color: var(--nld-accent); } .form-switch .form-check-input { width: 2.5rem; height: 1.25rem; } /* Invalid state */ .form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid, .was-validated .form-select:invalid { border-color: var(--nld-danger); } .invalid-feedback { font-size: 0.75rem; color: var(--nld-danger); font-weight: 500; } /* ═══════════════════════════════════════════════════════════════════════════ 12. BREADCRUMBS ═══════════════════════════════════════════════════════════════════════════ */ .app-content-header { padding: 0.875rem 1.25rem; } .breadcrumb { font-size: 0.8125rem; } .breadcrumb-item a { text-decoration: none; color: var(--nld-accent); font-weight: 500; transition: color var(--nld-duration) var(--nld-ease); } .breadcrumb-item a:hover { color: var(--nld-accent-hover); } .breadcrumb-item + .breadcrumb-item::before { content: "\203A" !important; color: var(--bs-secondary-color); font-weight: 300; font-size: 1rem; } .breadcrumb-item.active { color: var(--bs-secondary-color); font-weight: 500; } /* ═══════════════════════════════════════════════════════════════════════════ 13. ALERTS / TOAST MESSAGES ═══════════════════════════════════════════════════════════════════════════ */ .nld-messages { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1090; display: flex; flex-direction: column; gap: 0.5rem; max-width: 400px; } .nld-messages .alert { border-radius: var(--nld-radius-md); box-shadow: var(--nld-shadow-lg); padding: 0.875rem 1rem; font-size: 0.8125rem; margin-bottom: 0; border: 1px solid; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: nld-toast-in 0.3s var(--nld-ease-spring); } @keyframes nld-toast-in { from { opacity: 0; transform: translateX(40px) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } } .alert-success { background: var(--nld-success-light) !important; border-color: rgba(5, 150, 105, 0.2) !important; color: var(--nld-success) !important; } .alert-danger { background: var(--nld-danger-light) !important; border-color: rgba(220, 38, 38, 0.2) !important; color: var(--nld-danger) !important; } .alert-warning { background: var(--nld-warning-light) !important; border-color: rgba(217, 119, 6, 0.2) !important; color: var(--nld-warning) !important; } .alert-info { background: var(--nld-info-light) !important; border-color: rgba(8, 145, 178, 0.2) !important; color: var(--nld-info) !important; } /* ═══════════════════════════════════════════════════════════════════════════ 14. PAGINATION ═══════════════════════════════════════════════════════════════════════════ */ .pagination { gap: 0.25rem; } .page-link { border-radius: var(--nld-radius-sm) !important; border: 1px solid var(--nld-border); color: var(--bs-body-color); font-size: 0.8125rem; font-weight: 500; padding: 0.375rem 0.75rem; transition: all var(--nld-duration) var(--nld-ease); min-width: 2.25rem; text-align: center; } .page-link:hover { background: #f1f5f9; border-color: #cbd5e1; color: #1e293b; } .page-item.active .page-link { background: #334155 !important; border-color: #334155 !important; color: #fff; box-shadow: none; } .page-item.disabled .page-link { background: transparent; border-color: var(--nld-border-light); color: var(--bs-secondary-color); opacity: 0.5; } /* ═══════════════════════════════════════════════════════════════════════════ 15. MAP CONTAINER ═══════════════════════════════════════════════════════════════════════════ */ #nld-pop-map { height: var(--nld-map-h); border-radius: var(--nld-radius-md); border: 1px solid var(--nld-border); box-shadow: var(--nld-shadow-sm); overflow: hidden; } /* ═══════════════════════════════════════════════════════════════════════════ 16. MODALS ═══════════════════════════════════════════════════════════════════════════ */ .modal-content { border-radius: var(--nld-radius-lg) !important; border: 1px solid var(--nld-border); box-shadow: var(--nld-shadow-xl); overflow: hidden; } .modal-header { border-bottom: 1px solid var(--nld-border-light); padding: 1rem 1.25rem; } .modal-title { font-size: 1rem; font-weight: 700; } .modal-body { padding: 1.25rem; } .modal-footer { border-top: 1px solid var(--nld-border-light); padding: 0.75rem 1.25rem; gap: 0.5rem; } .modal-backdrop { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ═══════════════════════════════════════════════════════════════════════════ 17. DARK MODE TOGGLE ═══════════════════════════════════════════════════════════════════════════ */ #theme-toggle { width: 2.125rem; height: 2.125rem; border-radius: var(--nld-radius-full); padding: 0; display: inline-flex; align-items: center; justify-content: center; transition: background var(--nld-duration) var(--nld-ease), transform var(--nld-duration) var(--nld-ease); font-size: 1rem; } #theme-toggle:hover { transform: rotate(15deg) scale(1.1); background: var(--bs-tertiary-bg); } #theme-toggle .bi-sun-fill { display: none; } #theme-toggle .bi-moon-fill { display: inline; } [data-bs-theme="dark"] #theme-toggle .bi-sun-fill { display: inline; color: #fbbf24; } [data-bs-theme="dark"] #theme-toggle .bi-moon-fill { display: none; } /* ═══════════════════════════════════════════════════════════════════════════ 18. DYNAMIC JSONB PRODUCT SCHEMA FIELDS ═══════════════════════════════════════════════════════════════════════════ */ #product-schema-fields { min-height: 2rem; transition: opacity 0.2s var(--nld-ease); } #product-schema-fields.loading { opacity: 0.4; pointer-events: none; } .schema-product-banner { background: var(--bs-tertiary-bg); border: 1px solid var(--nld-border); border-left: 3px solid var(--nld-accent); border-radius: var(--nld-radius-sm); padding: 0.75rem 1rem; animation: nld-field-in 0.2s var(--nld-ease) forwards; } .schema-section-label { padding-bottom: 0.35rem; border-bottom: 1px solid var(--nld-border-light); } .ls-wide { letter-spacing: 0.06em; font-size: 0.7rem !important; } .schema-field-group { opacity: 0; animation: nld-field-in 0.25s var(--nld-ease) forwards; } @keyframes nld-field-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .schema-toggle-card { background: var(--bs-tertiary-bg); border: 1px solid var(--nld-border); border-radius: var(--nld-radius-sm); padding: 0.75rem 1rem; height: 100%; transition: border-color var(--nld-duration) var(--nld-ease), box-shadow var(--nld-duration) var(--nld-ease); } .schema-toggle-card:hover { border-color: var(--nld-accent); box-shadow: var(--nld-shadow-xs); } .schema-toggle-card .schema-toggle-label { font-size: 0.875rem; font-weight: 500; color: var(--bs-body-color); } .schema-toggle-card .form-check-input { width: 2.5rem; height: 1.25rem; cursor: pointer; } .schema-range-hint { font-size: 0.72rem; color: var(--bs-secondary-color); padding: 0.2rem 0.5rem; margin-top: 0.25rem; background: var(--bs-tertiary-bg); border-radius: 0.25rem; display: inline-block; } .schema-help-text { font-size: 0.75rem; color: var(--bs-secondary-color); margin-top: 0.25rem; line-height: 1.4; } /* Attribute chip */ .attr-chip { background: var(--bs-tertiary-bg); border: 1px solid var(--nld-border); border-radius: var(--nld-radius-sm); transition: border-color var(--nld-duration) var(--nld-ease); } .attr-chip:hover { border-color: var(--nld-accent); } /* ═══════════════════════════════════════════════════════════════════════════ 19. MAP PICKER (opportunity create) ═══════════════════════════════════════════════════════════════════════════ */ #location-picker-map { height: 280px; border-radius: var(--nld-radius-sm); border: 1px solid var(--nld-border); cursor: crosshair; transition: border-color var(--nld-duration) var(--nld-ease), box-shadow var(--nld-duration) var(--nld-ease); } #location-picker-map.has-pin { border-color: var(--nld-accent); box-shadow: var(--nld-shadow-glow); } /* ═══════════════════════════════════════════════════════════════════════════ 20. PROGRESS BARS ═══════════════════════════════════════════════════════════════════════════ */ .progress { background: var(--nld-border-light); border-radius: var(--nld-radius-full); overflow: hidden; } .progress-bar { border-radius: var(--nld-radius-full); transition: width 0.6s var(--nld-ease); } /* ═══════════════════════════════════════════════════════════════════════════ 21. TABS — Modern nav-tabs / nav-pills ═══════════════════════════════════════════════════════════════════════════ */ .nav-tabs { border-bottom: 2px solid var(--nld-border-light); gap: 0.25rem; } .nav-tabs .nav-link { border: none; border-bottom: 2px solid transparent; color: var(--bs-secondary-color); font-size: 0.8125rem; font-weight: 600; padding: 0.625rem 1rem; margin-bottom: -2px; transition: all var(--nld-duration) var(--nld-ease); border-radius: var(--nld-radius-sm) var(--nld-radius-sm) 0 0; } .nav-tabs .nav-link:hover { color: var(--nld-accent); background: var(--nld-accent-subtle); border-bottom-color: transparent; } .nav-tabs .nav-link.active { color: var(--nld-accent); border-bottom-color: var(--nld-accent); background: transparent; } /* Filter pills */ .nav-pills .nav-link { border-radius: var(--nld-radius-full); font-size: 0.8125rem; font-weight: 500; padding: 0.375rem 0.875rem; color: var(--bs-secondary-color); transition: all var(--nld-duration) var(--nld-ease); } .nav-pills .nav-link:hover { background: var(--nld-accent-subtle); color: var(--nld-accent); } .nav-pills .nav-link.active { background: var(--nld-accent-gradient) !important; color: #fff; box-shadow: 0 1px 3px rgba(15, 118, 110, 0.2); } /* ═══════════════════════════════════════════════════════════════════════════ 22. FOOTER ═══════════════════════════════════════════════════════════════════════════ */ .app-footer { background: transparent !important; border-top: 1px solid var(--nld-border-light) !important; font-size: 0.75rem; color: var(--bs-secondary-color); padding: 0.625rem 1.25rem !important; } /* ═══════════════════════════════════════════════════════════════════════════ 23. VENDOR INFO SECTION HEADERS ═══════════════════════════════════════════════════════════════════════════ */ .nld-vendor-header { background: var(--nld-accent-gradient); color: #ffffff; } [data-bs-theme="dark"] .nld-vendor-header { background: linear-gradient(135deg, #1e293b, #334155); border-bottom: 1px solid var(--nld-accent-subtle); } /* ═══════════════════════════════════════════════════════════════════════════ 24. PAGE CONTENT ENTRANCE ANIMATION ═══════════════════════════════════════════════════════════════════════════ */ .app-content { animation: nld-page-in 0.35s var(--nld-ease); } @keyframes nld-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════════════════════ 24. EMPTY STATES ═══════════════════════════════════════════════════════════════════════════ */ .text-center.text-muted.py-4 { padding: 3rem 1rem !important; } .text-center.text-muted.py-4 > i { opacity: 0.3; } /* ═══════════════════════════════════════════════════════════════════════════ 25. STATUS FILTER BUTTONS (list pages) ═══════════════════════════════════════════════════════════════════════════ */ .btn-group > .btn-outline-secondary, .btn-group > .btn-check + .btn-outline-secondary { border-color: var(--nld-border); color: var(--bs-secondary-color); font-size: 0.8125rem; } .btn-group > .btn-check:checked + .btn-outline-secondary, .btn-group > .btn-outline-secondary.active { background: var(--nld-accent) !important; border-color: var(--nld-accent) !important; color: #fff !important; } /* ═══════════════════════════════════════════════════════════════════════════ 26. SPINNER / LOADING STATES ═══════════════════════════════════════════════════════════════════════════ */ .spinner-border { border-color: currentColor; border-right-color: transparent; } .btn .spinner-border-sm { width: 0.875rem; height: 0.875rem; border-width: 0.15em; } /* ═══════════════════════════════════════════════════════════════════════════ 27. UTILITY CLASSES ═══════════════════════════════════════════════════════════════════════════ */ /* Gradient text */ .nld-gradient-text { background: var(--nld-accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Hover lift */ .nld-hover-lift { transition: transform var(--nld-duration) var(--nld-ease-spring), box-shadow var(--nld-duration-slow) var(--nld-ease); } .nld-hover-lift:hover { transform: translateY(-2px); box-shadow: var(--nld-shadow-md); } /* Subtle divider */ .nld-divider { height: 1px; background: var(--nld-border-light); border: none; margin: 1rem 0; } /* ═══════════════════════════════════════════════════════════════════════════ 28. RESPONSIVE ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 575.98px) { .nld-kpi-card .kpi-value { font-size: 1.5rem; } .nld-kpi-card { padding: 1rem; } #nld-pop-map { height: 260px; } .app-content-header { padding: 0.5rem 0.75rem; } .nld-messages { left: 0.75rem; right: 0.75rem; max-width: none; } .card-body { padding: 1rem !important; } } @media (max-width: 767.98px) { .nav-tabs.card-header-tabs, .nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 1px; } .nav-tabs.card-header-tabs::-webkit-scrollbar, .nav-tabs::-webkit-scrollbar { display: none; } .nav-tabs .nav-link { white-space: nowrap; } } @media (max-width: 991.98px) { .btn-sm { min-height: 36px; padding-top: 0.35rem; padding-bottom: 0.35rem; } } /* Mobile: enforce WCAG 44px touch targets */ @media (max-width: 575.98px) { .btn-sm { min-height: 44px; padding: 0.5rem 0.75rem; } /* Clamp fixed-width truncated cells to prevent overflow on 375px screens */ td[style*="max-width"], td.text-truncate { max-width: 140px !important; } } /* Large screens — wider sidebar */ @media (min-width: 1400px) { :root { --nld-sidebar-width: 280px; } } /* ═══════════════════════════════════════════════════════════════════════════ MOBILE-RESPONSIVE CARD TABLES @media (max-width: 767.98px) transforms table rows into stacked cards. Usage: add .table-responsive-cards to the element and data-label="Field Name" to each
. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 767.98px) { .table-responsive-cards thead { display: none; } .table-responsive-cards tbody tr { display: block; margin-bottom: .75rem; border: 1px solid var(--nld-border); border-radius: var(--nld-radius); padding: .5rem; background: var(--nld-surface); box-shadow: var(--nld-shadow-xs); } .table-responsive-cards tbody td { display: flex; justify-content: space-between; align-items: center; padding: .35rem .5rem; border: none; border-bottom: 1px solid var(--nld-border-light); text-align: right; } .table-responsive-cards tbody td:last-child { border-bottom: none; } .table-responsive-cards tbody td::before { content: attr(data-label); font-weight: 600; font-size: .8rem; color: var(--bs-secondary-color); text-align: left; flex-shrink: 0; margin-right: .75rem; } .table-responsive-cards tbody td .ps-3 { padding-left: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════════════ CLICKABLE KPI CARD LINKS ═══════════════════════════════════════════════════════════════════════════ */ a.nld-kpi-link { display: block; color: inherit; transition: transform .15s ease, box-shadow .15s ease; } a.nld-kpi-link:hover { transform: translateY(-2px); box-shadow: var(--nld-shadow-md); } a.nld-kpi-link:active { transform: translateY(0); } /* ═══════════════════════════════════════════════════════════════════════════ ACTIVITY TIMELINE ═══════════════════════════════════════════════════════════════════════════ */ .nld-timeline { position: relative; padding-left: 1.5rem; } .nld-timeline::before { content: ""; position: absolute; left: .45rem; top: 0; bottom: 0; width: 2px; background: var(--nld-border); } .nld-timeline-item { position: relative; padding-bottom: 1rem; } .nld-timeline-item:last-child { padding-bottom: 0; } .nld-timeline-dot { position: absolute; left: -1.1rem; top: .25rem; width: 10px; height: 10px; border-radius: 50%; background: var(--nld-accent); border: 2px solid var(--nld-surface); box-shadow: 0 0 0 2px var(--nld-accent-ring); } .nld-timeline-content { padding: .5rem .75rem; background: var(--nld-surface-raised); border: 1px solid var(--nld-border-light); border-radius: var(--nld-radius); } /* ═══════════════════════════════════════════════════════════════════════════ FUNNEL STAGE BAR ═══════════════════════════════════════════════════════════════════════════ */ .nld-funnel-stage { transition: width .6s ease; } /* ═══════════════════════════════════════════════════════════════════════════ NLD UTILITY CLASSES — Text Colors, Font Sizes, Icon Sizes Standardized scale to replace all inline style="..." across templates. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Text Colors (use CSS custom properties for dark-mode awareness) ────── */ .nld-text-accent { color: var(--nld-accent) !important; } .nld-text-accent-bright { color: var(--nld-accent-bright) !important; } .nld-text-success { color: var(--nld-success) !important; } .nld-text-warning { color: var(--nld-warning) !important; } .nld-text-danger { color: var(--nld-danger) !important; } .nld-text-info { color: var(--nld-info) !important; } .nld-text-muted { color: var(--nld-text-muted) !important; } .nld-text-light { color: var(--nld-text-light) !important; } .nld-text-secondary { color: var(--nld-text-secondary) !important; } .nld-text-cyan { color: var(--nld-text-cyan) !important; } .nld-text-orange { color: var(--nld-text-orange) !important; } .nld-text-slate { color: var(--nld-text-slate) !important; } .nld-text-border { color: var(--nld-text-border) !important; } .nld-text-white { color: #ffffff !important; } /* ── Font Sizes — Standardized Scale ────────────────────────────────────── Consolidates 20+ ad-hoc values into a clean, predictable scale. ─────────────────────────────────────────────────────────────────────────── */ .nld-fs-dot { font-size: 0.45rem !important; } /* Status dot in badges */ .nld-fs-3xs { font-size: 0.5rem !important; } /* Sidebar count badges */ .nld-fs-2xs { font-size: 0.625rem !important; } /* Footer, micro text */ .nld-fs-xs { font-size: 0.7rem !important; } /* Captions, helper text */ .nld-fs-sm { font-size: 0.75rem !important; } /* Small labels, form hints */ .nld-fs-body { font-size: 0.8125rem !important; } /* Sub-body (slightly < default) */ .nld-fs-base { font-size: 0.875rem !important; } /* Body default (14px) */ .nld-fs-md { font-size: 1rem !important; } /* 16px */ .nld-fs-lg { font-size: 1.125rem !important; } /* 18px */ .nld-fs-xl { font-size: 1.25rem !important; } /* 20px */ .nld-fs-otp { font-size: 1.6rem !important; letter-spacing: 0.4rem; } /* OTP display */ /* ── Icon Sizes — Consistent scale for Bootstrap Icons ──────────────────── Use on etc. ─────────────────────────────────────────────────────────────────────────── */ .nld-icon-sm { font-size: 1.25rem !important; } /* Inline-with-text icons */ .nld-icon-md { font-size: 1.5rem !important; } /* Card header icons */ .nld-icon-lg { font-size: 2rem !important; } /* Section empty states */ .nld-icon-xl { font-size: 2.5rem !important; } /* Table/card empty states */ .nld-icon-2xl { font-size: 3rem !important; } /* Page-level empty states */ .nld-icon-3xl { font-size: 4rem !important; } /* Hero / suspended state */ /* ── Font Family ──────────────────────────────────────────────────────────── */ .nld-font-mono { font-family: var(--nld-font-mono) !important; } /* ═══════════════════════════════════════════════════════════════════════════ SIDEBAR SECTION INDICATORS Small colored dots on section headers for instant module recognition. ═══════════════════════════════════════════════════════════════════════════ */ .sidebar-menu .nav-header[data-module]::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 0.5rem; vertical-align: middle; } .sidebar-menu .nav-header[data-module="sales"]::before { background: var(--nld-mod-sales); } .sidebar-menu .nav-header[data-module="provision"]::before { background: var(--nld-mod-provision); } .sidebar-menu .nav-header[data-module="network"]::before { background: var(--nld-mod-network); } .sidebar-menu .nav-header[data-module="billing"]::before { background: var(--nld-mod-billing); } .sidebar-menu .nav-header[data-module="wallet"]::before { background: var(--nld-mod-wallet); } .sidebar-menu .nav-header[data-module="support"]::before { background: var(--nld-mod-support); } .sidebar-menu .nav-header[data-module="catalog"]::before { background: var(--nld-mod-catalog); } .sidebar-menu .nav-header[data-module="lastmile"]::before { background: var(--nld-mod-lastmile); } .sidebar-menu .nav-header[data-module="users"]::before { background: var(--nld-mod-users); } .sidebar-menu .nav-header[data-module="company"]::before { background: var(--nld-mod-company); } .sidebar-menu .nav-header[data-module="notif"]::before { background: var(--nld-mod-notif); } .sidebar-menu .nav-header[data-module="workforce"]::before { background: var(--nld-mod-workforce); } .sidebar-menu .nav-header[data-module="inventory"]::before { background: var(--nld-mod-inventory); } .sidebar-menu .nav-header[data-module="admin"]::before { background: var(--nld-mod-admin); } /* Per-module active state — colored left stripe, icon, and text */ [data-module-section="sales"] .nav-link.active { box-shadow: inset 3px 0 0 0 var(--nld-mod-sales) !important; color: var(--nld-mod-sales) !important; } [data-module-section="sales"] .nav-link.active .nav-icon { color: var(--nld-mod-sales) !important; } [data-module-section="provision"] .nav-link.active { box-shadow: inset 3px 0 0 0 var(--nld-mod-provision) !important; color: var(--nld-mod-provision) !important; } [data-module-section="provision"] .nav-link.active .nav-icon { color: var(--nld-mod-provision) !important; } [data-module-section="network"] .nav-link.active { box-shadow: inset 3px 0 0 0 var(--nld-mod-network) !important; color: var(--nld-mod-network) !important; } [data-module-section="network"] .nav-link.active .nav-icon { color: var(--nld-mod-network) !important; } [data-module-section="billing"] .nav-link.active { box-shadow: inset 3px 0 0 0 var(--nld-mod-billing) !important; color: var(--nld-mod-billing) !important; } [data-module-section="billing"] .nav-link.active .nav-icon { color: var(--nld-mod-billing) !important; } [data-module-section="wallet"] .nav-link.active { box-shadow: inset 3px 0 0 0 var(--nld-mod-wallet) !important; color: var(--nld-mod-wallet) !important; } [data-module-section="wallet"] .nav-link.active .nav-icon { color: var(--nld-mod-wallet) !important; } [data-module-section="support"] .nav-link.active { box-shadow: inset 3px 0 0 0 var(--nld-mod-support) !important; color: var(--nld-mod-support) !important; } [data-module-section="support"] .nav-link.active .nav-icon { color: var(--nld-mod-support) !important; } [data-module-section="catalog"] .nav-link.active { box-shadow: inset 3px 0 0 0 var(--nld-mod-catalog) !important; color: var(--nld-mod-catalog) !important; } [data-module-section="catalog"] .nav-link.active .nav-icon { color: var(--nld-mod-catalog) !important; } [data-module-section="lastmile"] .nav-link.active { box-shadow: inset 3px 0 0 0 var(--nld-mod-lastmile) !important; color: var(--nld-mod-lastmile) !important; } [data-module-section="lastmile"] .nav-link.active .nav-icon { color: var(--nld-mod-lastmile) !important; } [data-module-section="users"] .nav-link.active { box-shadow: inset 3px 0 0 0 var(--nld-mod-users) !important; color: var(--nld-mod-users) !important; } [data-module-section="users"] .nav-link.active .nav-icon { color: var(--nld-mod-users) !important; } [data-module-section="company"] .nav-link.active { box-shadow: inset 3px 0 0 0 var(--nld-mod-company) !important; color: var(--nld-mod-company) !important; } [data-module-section="company"] .nav-link.active .nav-icon { color: var(--nld-mod-company) !important; } [data-module-section="notif"] .nav-link.active { box-shadow: inset 3px 0 0 0 var(--nld-mod-notif) !important; color: var(--nld-mod-notif) !important; } [data-module-section="notif"] .nav-link.active .nav-icon { color: var(--nld-mod-notif) !important; } [data-module-section="admin"] .nav-link.active { box-shadow: inset 3px 0 0 0 var(--nld-mod-admin) !important; color: var(--nld-mod-admin) !important; } [data-module-section="admin"] .nav-link.active .nav-icon { color: var(--nld-mod-admin) !important; } [data-module-section="workforce"] .nav-link.active { box-shadow: inset 3px 0 0 0 var(--nld-mod-workforce) !important; color: var(--nld-mod-workforce) !important; } [data-module-section="workforce"] .nav-link.active .nav-icon { color: var(--nld-mod-workforce) !important; } [data-module-section="inventory"] .nav-link.active { box-shadow: inset 3px 0 0 0 var(--nld-mod-inventory) !important; color: var(--nld-mod-inventory) !important; } [data-module-section="inventory"] .nav-link.active .nav-icon { color: var(--nld-mod-inventory) !important; } /* ═══════════════════════════════════════════════════════════════════════════ MODULE-COLORED ICON UTILITY CLASSES Use for page headers, section titles, etc. Usage: ═══════════════════════════════════════════════════════════════════════════ */ /* Module icon tints — unified brand accent for corporate consistency */ .nld-mod-icon-sales, .nld-mod-icon-billing, .nld-mod-icon-support, .nld-mod-icon-network, .nld-mod-icon-provision, .nld-mod-icon-company, .nld-mod-icon-wallet, .nld-mod-icon-catalog, .nld-mod-icon-lastmile, .nld-mod-icon-users, .nld-mod-icon-notif, .nld-mod-icon-admin { color: var(--nld-accent) !important; } /* Module gradient text */ /* Module gradient text — unified brand accent */ .nld-mod-text-sales, .nld-mod-text-billing, .nld-mod-text-network { color: var(--nld-accent); } /* Module buttons — unified brand accent for corporate consistency */ .btn-mod-sales, .btn-mod-billing, .btn-mod-support, .btn-mod-provision, .btn-mod-network { background: var(--nld-accent) !important; border-color: var(--nld-accent) !important; color: #fff !important; box-shadow: var(--nld-shadow-xs); } .btn-mod-sales:hover, .btn-mod-billing:hover, .btn-mod-support:hover, .btn-mod-provision:hover, .btn-mod-network:hover { background: var(--nld-accent-hover) !important; box-shadow: var(--nld-shadow-sm); transform: translateY(-1px); } /* Module outline buttons — per-module color accent */ .btn-outline-mod-sales, .btn-outline-mod-billing, .btn-outline-mod-support, .btn-outline-mod-provision, .btn-outline-mod-network, .btn-outline-mod-wallet, .btn-outline-mod-catalog, .btn-outline-mod-lastmile, .btn-outline-mod-inventory { background: var(--nld-surface-raised); border: 1.5px solid var(--nld-border); transition: all 0.15s; } .btn-outline-mod-sales { color: var(--nld-mod-sales); border-color: var(--nld-mod-sales-light); } .btn-outline-mod-billing { color: var(--nld-mod-billing); border-color: var(--nld-mod-billing-light); } .btn-outline-mod-support { color: var(--nld-mod-support); border-color: var(--nld-mod-support-light); } .btn-outline-mod-provision { color: var(--nld-mod-provision); border-color: var(--nld-mod-provision-light); } .btn-outline-mod-network { color: var(--nld-mod-network); border-color: var(--nld-mod-network-light); } .btn-outline-mod-wallet { color: var(--nld-mod-wallet); border-color: var(--nld-mod-wallet-light); } .btn-outline-mod-catalog { color: var(--nld-mod-catalog); border-color: var(--nld-mod-catalog-light); } .btn-outline-mod-lastmile { color: var(--nld-mod-lastmile); border-color: var(--nld-mod-lastmile-light); } .btn-outline-mod-inventory { color: var(--nld-mod-inventory); border-color: var(--nld-mod-inventory-light); } .btn-outline-mod-sales:hover { background: var(--nld-mod-sales-light); border-color: var(--nld-mod-sales); } .btn-outline-mod-billing:hover { background: var(--nld-mod-billing-light); border-color: var(--nld-mod-billing); } .btn-outline-mod-support:hover { background: var(--nld-mod-support-light); border-color: var(--nld-mod-support); } .btn-outline-mod-provision:hover { background: var(--nld-mod-provision-light); border-color: var(--nld-mod-provision); } .btn-outline-mod-network:hover { background: var(--nld-mod-network-light); border-color: var(--nld-mod-network); } .btn-outline-mod-wallet:hover { background: var(--nld-mod-wallet-light); border-color: var(--nld-mod-wallet); } .btn-outline-mod-catalog:hover { background: var(--nld-mod-catalog-light); border-color: var(--nld-mod-catalog); } .btn-outline-mod-lastmile:hover { background: var(--nld-mod-lastmile-light); border-color: var(--nld-mod-lastmile); } .btn-outline-mod-inventory:hover { background: var(--nld-mod-inventory-light); border-color: var(--nld-mod-inventory); } /* ═══════════════════════════════════════════════════════════════════════════ MODULE-COLORED SECTION CARDS Subtle top-border accent on section cards per module. Usage:
═══════════════════════════════════════════════════════════════════════════ */ /* Section card top accents — unified brand color */ .nld-section-card[data-module] { border-top: 3px solid var(--nld-accent); } /* ═══════════════════════════════════════════════════════════════════════════ TABLE ROW TOUCH FEEDBACK Interactive hover/tap state for list table rows. ═══════════════════════════════════════════════════════════════════════════ */ .table tbody tr { transition: background-color 0.15s ease; } .table tbody tr:hover { background-color: var(--nld-accent-subtle); } @media (hover: none) { .table tbody tr:active { background-color: var(--nld-accent-subtle); } } /* ═══════════════════════════════════════════════════════════════════════════ MOBILE DROPDOWN OVERFLOW FIX Prevent dropdown menus exceeding viewport on small screens. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 575.98px) { .dropdown-menu { min-width: auto !important; max-width: 92vw; right: 0.5rem !important; } } /* ═══════════════════════════════════════════════════════════════════════════ SCROLLABLE TAB FADE INDICATOR Subtle gradient cue on mobile when tabs overflow horizontally. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 767.98px) { .nav-tabs { position: relative; } .nav-tabs::after { content: ""; position: sticky; right: 0; top: 0; bottom: 0; flex-shrink: 0; width: 24px; background: linear-gradient(to right, transparent, var(--bs-body-bg)); pointer-events: none; } } /* ═══════════════════════════════════════════════════════════════════════════ SKELETON LOADER UTILITY Apply .nld-skeleton to placeholder elements for loading states. ═══════════════════════════════════════════════════════════════════════════ */ @keyframes nld-skeleton-pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } } .nld-skeleton { background: var(--nld-border-light) !important; color: transparent !important; border-color: transparent !important; border-radius: var(--nld-radius); animation: nld-skeleton-pulse 1.5s ease-in-out infinite; pointer-events: none; user-select: none; } .nld-skeleton * { visibility: hidden; } /* ═══════════════════════════════════════════════════════════════════════════ PRINT STYLESHEET Clean output for invoices, quotations, tickets, and reports. ═══════════════════════════════════════════════════════════════════════════ */ @media print { /* Hide chrome: sidebar, navbar, footer, buttons, tabs */ .app-header, .app-sidebar, .app-footer, .app-content-header .btn, .nld-messages, .nav-tabs, .btn, .breadcrumb, .sidebar-wrapper, .noc-navbar, .noc-bottom, #theme-toggle, .dropdown-menu { display: none !important; } /* Reset layout */ body { background: #fff !important; color: #000 !important; font-size: 12pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .app-wrapper, .app-main, .app-content { margin: 0 !important; padding: 0 !important; width: 100% !important; } /* Cards: flat, no shadow */ .card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; } .card-header { background: #f8f9fa !important; } /* Tables: visible borders */ .table { border-collapse: collapse; } .table th, .table td { border: 1px solid #ccc !important; padding: 6px 8px; } /* Badges: outline for ink savings */ .badge { border: 1px solid currentColor !important; background: transparent !important; color: #000 !important; } /* Links: show URL */ a[href]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #666; } /* Don't show URL for nav links, buttons, etc. */ .nav-link[href]::after, .btn[href]::after, .badge[href]::after, .breadcrumb a[href]::after, a[href^="#"]::after, a[href^="javascript"]::after { content: none; } /* Page breaks */ h1, h2, h3, h4, h5, h6 { break-after: avoid; } .table { break-inside: avoid; } } /* ═══════════════════════════════════════════════════════════════════════════ XCEEDNET LOGO — theme-aware visibility Logo is designed for dark backgrounds. Light mode: place on a dark pill to preserve original colors. ═══════════════════════════════════════════════════════════════════════════ */ [data-bs-theme="light"] .xceednet-logo { background: #0c1222; border-radius: 6px; padding: 4px 8px; } /* ═══════════════════════════════════════════════════════════════════════════ REPORT FORMAT CARDS — PDF / CSV selector on report generation form ═══════════════════════════════════════════════════════════════════════════ */ .format-card { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--bs-border-color); border-radius: 8px; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .btn-check:checked + .format-card { border-color: var(--nld-accent, #0f766e); box-shadow: 0 0 0 2px rgba(15,118,110,.18); } .format-card-icon { width: 36px; height: 36px; flex-shrink: 0; } .format-card-title { font-weight: 600; font-size: .875rem; } .format-card-desc { font-size: .75rem; color: var(--bs-secondary-color); } /* ═══════════════════════════════════════════════════════════════════════════ PIPELINE STEPPER (used in opportunity_detail, feasibility_detail) ═══════════════════════════════════════════════════════════════════════════ */ .nld-pipeline-stepper { display: flex; align-items: flex-start; justify-content: center; padding: .75rem 1rem; background: var(--nld-surface-raised, var(--bs-body-bg)); border: 1px solid var(--nld-border, #dee2e6); border-radius: var(--nld-radius-lg, .5rem); box-shadow: var(--nld-shadow-sm); user-select: none; overflow-x: auto; } .nld-pipeline-step { display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 80px; flex-shrink: 0; } .nld-pipeline-step .step-circle { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; border: 2px solid #dee2e6; background: var(--bs-body-bg, #fff); color: #9ca3af; transition: all .3s ease; } .nld-pipeline-step .step-dot { width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; } .nld-pipeline-step .step-label { font-size: .7rem; font-weight: 500; color: #9ca3af; white-space: nowrap; text-transform: uppercase; letter-spacing: .03em; } /* Active step */ .nld-pipeline-step.active .step-circle { border-color: var(--nld-accent); background: var(--nld-accent); color: #fff; box-shadow: 0 0 0 4px var(--nld-accent-ring); } .nld-pipeline-step.active .step-label { color: var(--nld-accent); font-weight: 700; } .nld-pipeline-step.active .step-pulse { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: nldPipelinePulse 2s ease-in-out infinite; } @keyframes nldPipelinePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(.8); } } /* Completed step */ .nld-pipeline-step.completed .step-circle { border-color: var(--nld-accent); background: var(--nld-accent); color: #fff; } .nld-pipeline-step.completed .step-label { color: var(--nld-accent); font-weight: 600; } /* Terminal: Won / Approved */ .nld-pipeline-step.terminal.won .step-circle { border-color: var(--bs-success); background: var(--bs-success); color: #fff; box-shadow: 0 0 0 4px rgba(5, 150, 105, .18); } .nld-pipeline-step.terminal.won .step-label { color: var(--bs-success); font-weight: 700; } /* Terminal: Lost / Rejected */ .nld-pipeline-step.terminal.lost .step-circle { border-color: var(--bs-danger); background: var(--bs-danger); color: #fff; box-shadow: 0 0 0 4px rgba(220, 38, 38, .15); } .nld-pipeline-step.terminal.lost .step-label { color: var(--bs-danger); font-weight: 700; } /* Connectors */ .nld-pipeline-connector { flex: 1; max-width: 100px; height: 2px; background: #dee2e6; margin: 0 .5rem; margin-top: 16px; transition: background .3s ease; } .nld-pipeline-connector.completed { background: var(--nld-accent); } .nld-pipeline-connector.lost { background: var(--bs-danger); } /* Dark mode */ [data-bs-theme="dark"] .nld-pipeline-stepper { border-color: rgba(255, 255, 255, .06); } [data-bs-theme="dark"] .nld-pipeline-step .step-circle { border-color: #495057; background: var(--bs-body-bg, #212529); color: #6c757d; } [data-bs-theme="dark"] .nld-pipeline-connector { background: #495057; } /* Mobile */ @media (max-width: 575.98px) { .nld-pipeline-stepper { padding: .5rem; } .nld-pipeline-step { min-width: 60px; } .nld-pipeline-step .step-circle { width: 28px; height: 28px; font-size: .7rem; } .nld-pipeline-step .step-label { font-size: .6rem; } .nld-pipeline-connector { margin: 0 .25rem; margin-top: 13px; max-width: 50px; } } /* ═══════════════════════════════════════════════════════════════════════════ COLLAPSIBLE CARD HEADERS ═══════════════════════════════════════════════════════════════════════════ */ .nld-collapse-toggle { cursor: pointer; } .nld-collapse-chevron { transition: transform .2s ease; } .nld-collapse-toggle[aria-expanded="true"] .nld-collapse-chevron, .nld-collapse-toggle:not(.collapsed) .nld-collapse-chevron { transform: rotate(180deg); }