/* ============================================================ GLOBAL LAYOUT STANDARDIZATION — BankerPipeline Injected into every HTML page via server.js All selectors use .bp-app body class (added by global-nav.js) to avoid affecting pages where JS hasn't loaded yet. ============================================================ */ /* ── Canonical CSS Custom Properties ────────────────────────── Override any per-page variations to ensure consistency. Dark theme is the default (banking-appropriate dark palette). Light theme activates when is set. */ :root { /* Dark palette (default) */ --bp-ink: #0a0f1a; --bp-slate: #1a2332; --bp-steel: #3d4f65; --bp-mist: #8a9bb5; --bp-cloud: #c4d0e0; --bp-pearl: #e8edf4; --bp-white: #f7f9fc; --bp-gold: #c9a84c; --bp-gold-light: #e8d48b; --bp-gold-glow: rgba(201,168,76,0.12); --bp-danger: #e74c3c; --bp-danger-bg: rgba(231,76,60,0.1); --bp-success: #2ecc71; --bp-success-bg: rgba(46,204,113,0.1); --bp-blue: #3498db; --bp-blue-bg: rgba(52,152,219,0.1); --bp-orange: #e67e22; --bp-orange-bg: rgba(230,126,34,0.1); --bp-purple: #9b59b6; --bp-nav-h: 56px; --bp-container: 1320px; --bp-radius: 10px; --bp-radius-sm: 6px; --bp-shadow: 0 4px 24px rgba(0,0,0,0.25); --bp-shadow-lg: 0 12px 48px rgba(0,0,0,0.35); --bp-border: 1px solid rgba(201,168,76,0.08); --bp-border-subtle: 1px solid rgba(255,255,255,0.06); /* Nav surface (used for bg + mobile overlay) */ --bp-nav-bg: rgba(10,15,26,0.95); --bp-nav-bg-solid: #0d1420; --bp-mobile-overlay: rgba(10,15,26,0.98); /* Card / input surfaces */ --bp-card-bg: var(--bp-slate); --bp-input-bg: rgba(255,255,255,0.05); --bp-input-border: rgba(255,255,255,0.12); /* Scrollbar */ --bp-scrollbar-thumb: rgba(255,255,255,0.1); --bp-scrollbar-thumb-hover: rgba(255,255,255,0.2); } /* ── Light theme overrides ───────────────────────────────── Applied when . Preserves brand gold; swaps dark surfaces for clean whites. */ :root[data-theme="light"] { --bp-ink: #f0f4f8; --bp-slate: #ffffff; --bp-steel: #94a3b8; --bp-mist: #64748b; --bp-cloud: #1e293b; --bp-pearl: #0f172a; --bp-white: #0a0f1a; --bp-gold: #b8922e; --bp-gold-light: #9a7520; --bp-gold-glow: rgba(184,146,46,0.1); --bp-danger: #dc2626; --bp-danger-bg: rgba(220,38,38,0.08); --bp-success: #16a34a; --bp-success-bg: rgba(22,163,74,0.08); --bp-blue: #2563eb; --bp-blue-bg: rgba(37,99,235,0.08); --bp-orange: #ea580c; --bp-orange-bg: rgba(234,88,12,0.08); --bp-shadow: 0 4px 24px rgba(0,0,0,0.08); --bp-shadow-lg: 0 12px 48px rgba(0,0,0,0.12); --bp-border: 1px solid rgba(184,146,46,0.15); --bp-border-subtle: 1px solid rgba(0,0,0,0.07); --bp-nav-bg: rgba(255,255,255,0.95); --bp-nav-bg-solid: #ffffff; --bp-mobile-overlay: rgba(240,244,248,0.98); --bp-card-bg: #ffffff; --bp-input-bg: #f8fafc; --bp-input-border: #e2e8f0; --bp-scrollbar-thumb: rgba(0,0,0,0.12); --bp-scrollbar-thumb-hover: rgba(0,0,0,0.2); } /* Lock legacy variables to canonical values */ body.bp-app { --ink: var(--bp-ink); --slate: var(--bp-slate); --steel: var(--bp-steel); --mist: var(--bp-mist); --cloud: var(--bp-cloud); --pearl: var(--bp-pearl); --white: var(--bp-white); --gold: var(--bp-gold); --gold-light: var(--bp-gold-light); --gold-glow: var(--bp-gold-glow); --danger: var(--bp-danger); --success: var(--bp-success); --blue: var(--bp-blue); --orange: var(--bp-orange); } /* ── Base Reset & Typography ─────────────────────────────── */ body.bp-app { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bp-ink); color: var(--bp-cloud); line-height: 1.6; min-height: 100vh; overflow-x: hidden; } body.bp-app h1, body.bp-app h2, body.bp-app h3, body.bp-app h4, body.bp-app h5, body.bp-app h6 { font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--bp-white); line-height: 1.3; } body.bp-app h1 { font-size: 1.5rem; font-weight: 700; } body.bp-app h2 { font-size: 1.25rem; font-weight: 600; } body.bp-app h3 { font-size: 1.1rem; font-weight: 600; } body.bp-app h4 { font-size: 0.95rem; font-weight: 600; } /* ── Left Sidebar Navigation ────────────────────────────── */ :root { --bp-sidebar-w: 248px; --bp-sidebar-collapsed-w: 60px; } /* Sidebar element */ .bp-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--bp-sidebar-w); background: var(--bp-nav-bg-solid); border-right: var(--bp-border); z-index: 1000; display: flex; flex-direction: column; overflow: hidden; transition: width 0.25s cubic-bezier(0.4,0,0.2,1); will-change: width; } .bp-sidebar.collapsed { width: var(--bp-sidebar-collapsed-w); } /* Sidebar header — logo + collapse toggle */ .bp-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 0 0.85rem; height: 56px; flex-shrink: 0; border-bottom: var(--bp-border); gap: 0.5rem; min-width: 0; } .bp-logo { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--bp-gold); letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; overflow: hidden; flex: 1; min-width: 0; opacity: 1; transition: opacity 0.15s; } .bp-logo span { color: var(--bp-cloud); font-weight: 500; } .bp-sidebar.collapsed .bp-logo { opacity: 0; pointer-events: none; width: 0; flex: 0; } /* Collapse toggle button */ .bp-sidebar-toggle { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--bp-radius-sm); color: var(--bp-mist); cursor: pointer; transition: color 0.15s, background 0.15s, transform 0.25s; flex-shrink: 0; } .bp-sidebar-toggle:hover { color: var(--bp-cloud); background: rgba(255,255,255,0.08); } .bp-sidebar.collapsed .bp-sidebar-toggle { transform: rotate(180deg); } /* Scrollable nav area */ .bp-sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0.75rem 0.5rem; display: flex; flex-direction: column; gap: 0.1rem; } .bp-sidebar-nav::-webkit-scrollbar { width: 4px; } .bp-sidebar-nav::-webkit-scrollbar-track { background: transparent; } .bp-sidebar-nav::-webkit-scrollbar-thumb { background: var(--bp-scrollbar-thumb); border-radius: 2px; } /* Section group */ .bp-nav-group { margin-bottom: 0.35rem; } /* Group label */ .bp-nav-group-label { font-size: 0.63rem; font-weight: 700; color: var(--bp-steel); text-transform: uppercase; letter-spacing: 0.07em; padding: 0.5rem 0.65rem 0.2rem; white-space: nowrap; overflow: hidden; transition: opacity 0.15s; } .bp-sidebar.collapsed .bp-nav-group-label { opacity: 0; height: 0; padding: 0; margin: 0; } /* Nav item */ .bp-nav-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.52rem 0.65rem; font-size: 0.84rem; color: var(--bp-mist); background: none; border: none; border-radius: var(--bp-radius-sm); cursor: pointer; text-decoration: none; font-family: 'DM Sans', sans-serif; transition: color 0.15s, background 0.15s; white-space: nowrap; width: 100%; text-align: left; position: relative; overflow: hidden; } .bp-nav-item:hover { color: var(--bp-cloud); background: rgba(255,255,255,0.04); } .bp-nav-item.active { color: var(--bp-gold); background: var(--bp-gold-glow); } .bp-nav-item.active .bp-nav-item-icon { color: var(--bp-gold); } /* Nav item icon */ .bp-nav-item-icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; color: var(--bp-mist); transition: color 0.15s; } .bp-nav-item:hover .bp-nav-item-icon { color: var(--bp-cloud); } /* Nav item label */ .bp-nav-item-label { overflow: hidden; text-overflow: ellipsis; transition: opacity 0.15s, max-width 0.25s; max-width: 160px; flex: 1; } .bp-sidebar.collapsed .bp-nav-item-label { opacity: 0; max-width: 0; } /* Nav item badge (e.g. pending applications count) */ .bp-nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 0.68rem; font-weight: 700; background: rgba(231,76,60,0.85); color: #fff; flex-shrink: 0; letter-spacing: 0; } .bp-sidebar.collapsed .bp-nav-badge { position: absolute; top: 4px; right: 4px; min-width: 14px; height: 14px; padding: 0 3px; font-size: 0.6rem; } /* Tooltip in collapsed mode */ .bp-sidebar.collapsed .bp-nav-item { justify-content: center; padding: 0.52rem; } .bp-sidebar.collapsed .bp-nav-item::after { content: attr(data-tooltip); position: absolute; left: calc(var(--bp-sidebar-collapsed-w) + 8px); top: 50%; transform: translateY(-50%); background: var(--bp-slate); color: var(--bp-white); font-size: 0.78rem; font-weight: 500; padding: 0.35rem 0.65rem; border-radius: var(--bp-radius-sm); white-space: nowrap; pointer-events: none; opacity: 0; box-shadow: var(--bp-shadow); border: 1px solid rgba(201,168,76,0.12); transition: opacity 0.15s; z-index: 1010; } .bp-sidebar.collapsed .bp-nav-item:hover::after { opacity: 1; } /* Sidebar footer — user, theme, notifications */ .bp-sidebar-footer { flex-shrink: 0; border-top: var(--bp-border); padding: 0.6rem 0.5rem; display: flex; flex-direction: column; gap: 0.15rem; } .bp-sidebar-footer-actions { display: flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.6rem; overflow: hidden; } .bp-sidebar.collapsed .bp-sidebar-footer-actions { justify-content: center; padding: 0.35rem 0; flex-direction: column; } .bp-nav-icon-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: none; border-radius: var(--bp-radius-sm); color: var(--bp-mist); cursor: pointer; transition: color 0.15s, background 0.15s; position: relative; flex-shrink: 0; text-decoration: none; } .bp-nav-icon-btn:hover { color: var(--bp-cloud); background: rgba(255,255,255,0.05); } /* Notification badge */ .bp-notif-wrap { position: relative; display: flex; } .bp-notif-badge { position: absolute; top: 1px; right: 1px; background: var(--bp-danger); color: #fff; font-size: 0.58rem; font-weight: 700; min-width: 15px; height: 15px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 2px; font-family: 'DM Sans', sans-serif; pointer-events: none; } /* User section at footer */ .bp-user-wrap { position: relative; } .bp-user-btn { display: flex; align-items: center; gap: 0.55rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; padding: 0.45rem 0.65rem 0.45rem 0.45rem; cursor: pointer; color: var(--bp-cloud); font-size: 0.82rem; font-family: 'DM Sans', sans-serif; transition: background 0.15s, border-color 0.15s; width: 100%; text-align: left; overflow: hidden; } .bp-user-btn:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.11); } .bp-sidebar.collapsed .bp-user-btn { padding: 0.45rem; justify-content: center; background: none; border-color: transparent; } .bp-user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--bp-gold-glow); border: 1px solid rgba(201,168,76,0.3); display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; color: var(--bp-gold); font-family: 'Space Grotesk', sans-serif; flex-shrink: 0; } .bp-user-info { min-width: 0; overflow: hidden; transition: opacity 0.15s, max-width 0.25s; max-width: 120px; } .bp-sidebar.collapsed .bp-user-info { opacity: 0; max-width: 0; } .bp-user-name { font-size: 0.82rem; font-weight: 600; color: var(--bp-cloud); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bp-user-role { font-size: 0.7rem; color: var(--bp-steel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* User dropdown menu (pops up above) */ .bp-user-menu { position: absolute; bottom: calc(100% + 8px); left: 0.5rem; right: 0.5rem; min-width: 180px; background: var(--bp-slate); border: 1px solid rgba(201,168,76,0.12); border-radius: var(--bp-radius); padding: 0.4rem; box-shadow: var(--bp-shadow-lg); z-index: 1002; } .bp-sidebar.collapsed .bp-user-menu { left: calc(var(--bp-sidebar-collapsed-w) + 8px); bottom: 0.5rem; right: auto; min-width: 180px; } .bp-user-menu-header { padding: 0.6rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 0.35rem; } .bp-user-menu-name { font-size: 0.88rem; font-weight: 600; color: var(--bp-white); } .bp-user-menu-email { font-size: 0.75rem; color: var(--bp-mist); margin-top: 1px; } .bp-user-menu-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--bp-radius-sm); font-size: 0.84rem; color: var(--bp-cloud); cursor: pointer; transition: background 0.12s; border: none; background: none; width: 100%; text-align: left; text-decoration: none; font-family: 'DM Sans', sans-serif; } .bp-user-menu-item:hover { background: rgba(255,255,255,0.06); } .bp-user-menu-item.bp-danger { color: #ff8a7a; } .bp-user-menu-item.bp-danger:hover { background: rgba(231,76,60,0.1); } .bp-user-menu-sep { border: none; border-top: 1px solid rgba(255,255,255,0.06); margin: 0.3rem 0; } /* ── Theme Toggle ───────────────────────────────────────── */ .bp-theme-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: none; border-radius: var(--bp-radius-sm); color: var(--bp-mist); cursor: pointer; transition: color 0.15s, background 0.15s; flex-shrink: 0; } .bp-theme-btn:hover { color: var(--bp-cloud); background: rgba(128,128,128,0.08); } .bp-theme-btn svg { width: 16px; height: 16px; transition: opacity 0.2s, transform 0.3s; } /* Sun icon: visible in dark mode */ .bp-theme-btn .bp-icon-sun { display: block; } /* Moon icon: visible in light mode */ .bp-theme-btn .bp-icon-moon { display: none; } :root[data-theme="light"] .bp-theme-btn .bp-icon-sun { display: none; } :root[data-theme="light"] .bp-theme-btn .bp-icon-moon { display: block; } /* ── Mobile top bar (hamburger + logo) ──────────────────── */ .bp-topbar { display: none; position: fixed; top: 0; left: 0; right: 0; height: 52px; background: var(--bp-nav-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: var(--bp-border); z-index: 1001; align-items: center; padding: 0 1rem; gap: 0.75rem; } .bp-topbar-logo { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1rem; color: var(--bp-gold); letter-spacing: -0.02em; text-decoration: none; flex: 1; } .bp-topbar-logo span { color: var(--bp-cloud); font-weight: 500; } .bp-topbar-actions { display: flex; align-items: center; gap: 0.2rem; } /* Hamburger */ .bp-hamburger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; } .bp-hamburger span { display: block; width: 20px; height: 2px; background: var(--bp-cloud); border-radius: 2px; transition: all 0.3s; } .bp-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .bp-hamburger.open span:nth-child(2) { opacity: 0; } .bp-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile drawer backdrop */ .bp-mobile-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 1001; backdrop-filter: blur(2px); } .bp-mobile-backdrop.open { display: block; } /* On mobile, sidebar becomes a drawer */ @media (max-width: 768px) { .bp-topbar { display: flex !important; } .bp-sidebar { top: 52px; width: var(--bp-sidebar-w) !important; transform: translateX(calc(-1 * var(--bp-sidebar-w))); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); box-shadow: none; z-index: 1002; } .bp-sidebar.mobile-open { transform: translateX(0); box-shadow: 8px 0 32px rgba(0,0,0,0.4); } .bp-sidebar.collapsed { width: var(--bp-sidebar-w) !important; } .bp-sidebar-toggle { display: none; } body.bp-app .main, body.bp-app main.main, body.bp-app main:not(.bp-no-container):not([class]), body.bp-app .main-content:not(.bp-no-container), body.bp-app .page-wrap, body.bp-app .page-wrapper { margin-left: 0 !important; padding-left: 1rem; padding-right: 1rem; padding-top: calc(52px + 1rem); padding-bottom: 1.5rem; } body.bp-app .layout { padding-left: 0 !important; padding-top: 52px; } } /* Bottom nav — keep for mobile convenience */ .bp-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: rgba(10,15,26,0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(255,255,255,0.06); padding: 0.4rem 0; z-index: 998; justify-content: space-around; } .bp-bn-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0.2rem 0.75rem; color: var(--bp-steel); text-decoration: none; font-size: 0.6rem; font-family: 'DM Sans', sans-serif; min-width: 50px; transition: color 0.15s; } .bp-bn-item:hover { color: var(--bp-mist); } .bp-bn-item.active { color: var(--bp-gold); } .bp-bn-icon { font-size: 1.15rem; } @media (max-width: 768px) { .bp-bottom-nav { display: flex !important; } body.bp-app .main, body.bp-app main.main, body.bp-app main:not(.bp-no-container):not([class]), body.bp-app .main-content:not(.bp-no-container), body.bp-app .page-wrap, body.bp-app .page-wrapper { padding-bottom: 5rem; } } /* Deprecated top nav references kept as no-ops for safety */ .bp-topnav { display: none !important; } .bp-mobile-menu { display: none !important; } /* ── Standardized Container ────────────────────────────── */ /* Main content area — shifts right of sidebar on desktop. Covers all wrapper class names used across legacy pages: .main, main (bare), .main-content, .page-wrap, .page-wrapper */ body.bp-app .main, body.bp-app main.main, body.bp-app main:not(.bp-no-container):not([class]), body.bp-app .main-content:not(.bp-no-container), body.bp-app .page-wrap, body.bp-app .page-wrapper { max-width: calc(var(--bp-container) + var(--bp-sidebar-w)); margin-left: var(--bp-sidebar-w); margin-right: 0; /* Reset legacy topnav offset (app.html has margin-top: 56px for old fixed nav) */ margin-top: 0 !important; padding-top: 1.75rem; padding-left: 1.75rem; padding-right: 1.75rem; transition: margin-left 0.25s cubic-bezier(0.4,0,0.2,1); } body.bp-app.sidebar-collapsed .main, body.bp-app.sidebar-collapsed main.main, body.bp-app.sidebar-collapsed main:not(.bp-no-container):not([class]), body.bp-app.sidebar-collapsed .main-content:not(.bp-no-container), body.bp-app.sidebar-collapsed .page-wrap, body.bp-app.sidebar-collapsed .page-wrapper { margin-left: var(--bp-sidebar-collapsed-w); } /* Pages with their own sidebar layouts */ body.bp-app-sidebar .main, body.bp-app-sidebar main.main, body.bp-app-sidebar .main-content, body.bp-app-sidebar .layout { max-width: none; } /* Layout container (used by some legacy pages) */ body.bp-app .layout { padding-left: var(--bp-sidebar-w); padding-top: 0; transition: padding-left 0.25s cubic-bezier(0.4,0,0.2,1); } body.bp-app.sidebar-collapsed .layout { padding-left: var(--bp-sidebar-collapsed-w); } /* Hide old navs that we replaced. Both the JS-applied class (.bp-old-nav) and direct selectors for legacy nav elements ensure the old top nav is hidden even if JS class-add timing races. */ body.bp-app .bp-old-nav { display: none !important; } body.bp-app > nav.topnav, body.bp-app > .topnav, body.bp-app > .mobile-menu, body.bp-app > .hamburger-menu, body.bp-app > .bottom-nav:not(.bp-bottom-nav) { display: none !important; } /* ── Standardized Card / Panel Styling ─────────────────── */ body.bp-app .card, body.bp-app .stat-card, body.bp-app .panel, body.bp-app .widget, body.bp-app .section-card, body.bp-app .detail-card, body.bp-app .info-card, body.bp-app .metric-card, body.bp-app .dashboard-card, body.bp-app .report-card { background: var(--bp-slate); border: var(--bp-border); border-radius: var(--bp-radius); box-shadow: 0 2px 8px rgba(0,0,0,0.15); } /* ── Standardized Table Styling ───────────────────────── */ body.bp-app table { width: 100%; border-collapse: collapse; } body.bp-app th { text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--bp-mist); text-transform: uppercase; letter-spacing: 0.04em; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.06); } body.bp-app td { padding: 0.75rem 1rem; font-size: 0.88rem; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--bp-cloud); } body.bp-app tr:hover td { background: rgba(255,255,255,0.02); } /* ── Standardized Button Styling ─────────────────────── */ body.bp-app .btn-primary, body.bp-app .qa-btn-primary { background: var(--bp-gold); color: var(--bp-ink); border: none; padding: 0.55rem 1.25rem; border-radius: var(--bp-radius-sm); font-weight: 600; font-size: 0.84rem; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: background 0.15s, transform 0.1s; } body.bp-app .btn-primary:hover, body.bp-app .qa-btn-primary:hover { background: var(--bp-gold-light); } body.bp-app .btn-secondary, body.bp-app .qa-btn-ghost { background: rgba(255,255,255,0.05); color: var(--bp-cloud); border: 1px solid rgba(255,255,255,0.1); padding: 0.55rem 1.25rem; border-radius: var(--bp-radius-sm); font-weight: 500; font-size: 0.84rem; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: background 0.15s, border-color 0.15s; } body.bp-app .btn-secondary:hover, body.bp-app .qa-btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); } /* ── Standardized Badge / Pill ───────────────────────── */ body.bp-app .badge, body.bp-app .status-badge, body.bp-app .pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.72rem; font-weight: 600; font-family: 'DM Sans', sans-serif; } /* ── Standardized Form Elements ─────────────────────── */ body.bp-app input[type="text"], body.bp-app input[type="email"], body.bp-app input[type="password"], body.bp-app input[type="number"], body.bp-app input[type="date"], body.bp-app input[type="search"], body.bp-app input[type="tel"], body.bp-app input[type="url"], body.bp-app select, body.bp-app textarea { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--bp-radius-sm); color: var(--bp-white); padding: 0.55rem 0.85rem; font-size: 0.88rem; font-family: 'DM Sans', sans-serif; transition: border-color 0.15s, box-shadow 0.15s; width: 100%; } body.bp-app input:focus, body.bp-app select:focus, body.bp-app textarea:focus { outline: none; border-color: rgba(201,168,76,0.4); box-shadow: 0 0 0 3px rgba(201,168,76,0.08); } body.bp-app label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--bp-mist); margin-bottom: 0.35rem; } /* ── Standardized Modal ─────────────────────────────── */ /* No display property here — each page controls its own modal visibility via .open/.show/.hidden classes. Setting display here overrides page-level rules due to specificity, causing modals to appear on load (POL-1451887). */ body.bp-app .modal-overlay, body.bp-app .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 2000; align-items: center; justify-content: center; padding: 1rem; opacity: 0; pointer-events: none; transition: opacity 0.2s; } body.bp-app .modal-overlay.open, body.bp-app .modal-backdrop.open { opacity: 1; pointer-events: all; } body.bp-app .modal, body.bp-app .modal-content { background: var(--bp-slate); border: 1px solid rgba(201,168,76,0.12); border-radius: 12px; padding: 1.5rem; max-width: 560px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: var(--bp-shadow-lg); transform: translateY(12px); transition: transform 0.2s; } body.bp-app .modal-overlay.open .modal, body.bp-app .modal-overlay.open .modal-content, body.bp-app .modal-backdrop.open .modal, body.bp-app .modal-backdrop.open .modal-content { transform: translateY(0); } /* ── Standardized Spacing Rhythm ────────────────────── */ body.bp-app .page-header { margin-bottom: 1.5rem; } body.bp-app .section { margin-bottom: 2rem; } body.bp-app .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } body.bp-app .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; } body.bp-app .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } /* ── Scrollbar Styling ──────────────────────────────── */ body.bp-app ::-webkit-scrollbar { width: 6px; height: 6px; } body.bp-app ::-webkit-scrollbar-track { background: transparent; } body.bp-app ::-webkit-scrollbar-thumb { background: var(--bp-scrollbar-thumb); border-radius: 3px; } body.bp-app ::-webkit-scrollbar-thumb:hover { background: var(--bp-scrollbar-thumb-hover); } /* ── Theme Toggle Button ────────────────────────────── */ .bp-theme-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: none; border: none; border-radius: var(--bp-radius-sm); color: var(--bp-mist); cursor: pointer; transition: color 0.15s, background 0.15s; flex-shrink: 0; } .bp-theme-btn:hover { color: var(--bp-cloud); background: rgba(128,128,128,0.08); } .bp-theme-btn svg { width: 18px; height: 18px; transition: opacity 0.2s, transform 0.3s; } /* Sun icon: visible in dark mode */ .bp-theme-btn .bp-icon-sun { display: block; } /* Moon icon: visible in light mode */ .bp-theme-btn .bp-icon-moon { display: none; } :root[data-theme="light"] .bp-theme-btn .bp-icon-sun { display: none; } :root[data-theme="light"] .bp-theme-btn .bp-icon-moon { display: block; } /* ── Light theme body overrides ──────────────────────── */ :root[data-theme="light"] body.bp-app { background: var(--bp-ink); color: var(--bp-cloud); } :root[data-theme="light"] body.bp-app h1, :root[data-theme="light"] body.bp-app h2, :root[data-theme="light"] body.bp-app h3, :root[data-theme="light"] body.bp-app h4, :root[data-theme="light"] body.bp-app h5, :root[data-theme="light"] body.bp-app h6 { color: var(--bp-white); } :root[data-theme="light"] body.bp-app input, :root[data-theme="light"] body.bp-app select, :root[data-theme="light"] body.bp-app textarea { background: var(--bp-input-bg); border-color: var(--bp-input-border); color: var(--bp-cloud); } :root[data-theme="light"] body.bp-app .modal, :root[data-theme="light"] body.bp-app .modal-content { background: var(--bp-card-bg); border-color: rgba(184,146,46,0.15); } :root[data-theme="light"] .bp-user-menu { background: var(--bp-card-bg); border-color: rgba(184,146,46,0.15); box-shadow: 0 8px 32px rgba(0,0,0,0.12); } :root[data-theme="light"] .bp-sidebar { background: var(--bp-nav-bg-solid); } :root[data-theme="light"] .bp-user-menu-item:hover { background: rgba(0,0,0,0.04); } :root[data-theme="light"] .bp-nav-item:hover { background: rgba(0,0,0,0.04); } :root[data-theme="light"] .bp-nav-icon-btn:hover { background: rgba(0,0,0,0.05); } :root[data-theme="light"] .bp-user-btn { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); } :root[data-theme="light"] .bp-user-btn:hover { background: rgba(0,0,0,0.07); border-color: rgba(0,0,0,0.12); } :root[data-theme="light"] .bp-user-menu-sep { border-top-color: rgba(0,0,0,0.08); } :root[data-theme="light"] .bp-user-menu-header { border-bottom-color: rgba(0,0,0,0.08); } :root[data-theme="light"] .bp-hamburger span { background: var(--bp-cloud); } :root[data-theme="light"] .bp-topbar { background: var(--bp-nav-bg); } /* Smooth theme transition */ body.bp-app { transition: background 0.25s ease, color 0.25s ease; } .bp-sidebar { transition: width 0.25s cubic-bezier(0.4,0,0.2,1), background 0.25s ease, border-color 0.25s ease; } /* ── Responsive ─────────────────────────────────────── */ @media (max-width: 640px) { body.bp-app h1 { font-size: 1.25rem; } body.bp-app h2 { font-size: 1.1rem; } body.bp-app .grid-2, body.bp-app .grid-3, body.bp-app .grid-4 { grid-template-columns: 1fr; } } /* ── Notification Bell Dropdown ─────────────────────────── */ .bp-notif-dropdown { position: fixed; z-index: 9999; width: 320px; max-height: 480px; background: var(--bp-slate, #1a2332); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--bp-radius, 10px); box-shadow: 0 12px 40px rgba(0,0,0,0.45); display: flex; flex-direction: column; overflow: hidden; animation: bp-notif-in 0.15s ease; } @keyframes bp-notif-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .bp-notif-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.85rem; font-weight: 600; color: var(--bp-cloud, #c4d0e0); flex-shrink: 0; } .bp-notif-mark-all { background: none; border: none; cursor: pointer; font-size: 0.78rem; color: var(--bp-blue, #3498db); padding: 0; } .bp-notif-mark-all:hover { text-decoration: underline; } .bp-notif-list { overflow-y: auto; flex: 1; } .bp-notif-loading, .bp-notif-empty { padding: 20px 16px; text-align: center; font-size: 0.83rem; color: var(--bp-mist, #8a9bb5); } .bp-notif-item { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer; transition: background 0.15s; } .bp-notif-item:last-child { border-bottom: none; } .bp-notif-item:hover { background: rgba(255,255,255,0.04); } .bp-notif-item--unread { background: rgba(52,152,219,0.07); } .bp-notif-item--unread .bp-notif-item-title { font-weight: 600; } .bp-notif-item-title { font-size: 0.83rem; color: var(--bp-pearl, #e8edf4); margin-bottom: 2px; line-height: 1.35; } .bp-notif-item-meta { font-size: 0.75rem; color: var(--bp-mist, #8a9bb5); line-height: 1.3; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bp-notif-item-age { font-size: 0.7rem; color: var(--bp-steel, #3d4f65); } .bp-notif-view-all { display: block; text-align: center; padding: 0.6rem; font-size: 0.78rem; color: var(--bp-blue, #3498db); text-decoration: none; border-top: 1px solid rgba(255,255,255,0.06); transition: background 0.15s; } .bp-notif-view-all:hover { background: rgba(255,255,255,0.04); } /* Mobile: full width dropdown */ @media (max-width: 640px) { .bp-notif-dropdown { width: calc(100vw - 16px); left: 8px !important; } }