/* CCM console shell. Visual system matched to the CloudBridge admin console: deep navy chrome on a near-black page, teal for figures, gold for the wordmark, 240px fixed sidebar with a scrolling nav section. Bootstrap 5.3.3 in dark mode underneath (data-bs-theme="dark" on ), bootstrap-icons for iconography, and no web font: the system stack is what CloudBridge uses, and the two consoles must not render in different typefaces. Token names are kept as --cb-* deliberately. They name the shared design system rather than the product, so any value can be traced back to its source. */ :root { --cb-navy: #0d1b2a; --cb-blue: #1b6ca8; --cb-teal: #0dcaf0; --cb-gold: #ffc107; --cb-page: #111827; --cb-surface: #1e293b; --cb-surface-2: #162032; --cb-border: #334155; --cb-border-navy: #1e3a5f; --cb-text: #e5e7eb; --cb-text-dim: #94a3b8; --cb-text-faint: #64748b; --cb-text-fainter: #475569; --sidebar-w: 240px; } body { background: var(--cb-page); color: var(--cb-text); font-family: 'Segoe UI', system-ui, sans-serif; } .mono, code, .stat-num { font-family: 'Courier New', monospace; } /* ---- Sidebar ---- */ #sidebar { width: var(--sidebar-w); height: 100vh; background: var(--cb-navy); position: fixed; top: 0; left: 0; z-index: 1000; display: flex; flex-direction: column; border-right: 1px solid var(--cb-border-navy); overflow: hidden; } /* The middle nav section scrolls when items overflow the viewport, so the brand block and the version footer stay pinned. */ #sidebar .nav-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--cb-border-navy) var(--cb-navy); } #sidebar .nav-scroll::-webkit-scrollbar { width: 6px; } #sidebar .nav-scroll::-webkit-scrollbar-track { background: var(--cb-navy); } #sidebar .nav-scroll::-webkit-scrollbar-thumb { background: var(--cb-border-navy); border-radius: 3px; } #sidebar .brand { padding: 1.2rem 1rem; border-bottom: 1px solid var(--cb-border-navy); font-weight: 700; font-size: 1.15rem; color: var(--cb-gold); letter-spacing: .04em; } #sidebar .brand small { display: block; font-size: .7rem; color: var(--cb-text-dim); font-weight: 400; } #sidebar .brand .brand-row { display: flex; align-items: center; gap: 6px; } #sidebar .brand .vendor { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--cb-border-navy); display: flex; align-items: center; gap: 6px; } #sidebar .brand .vendor .mark { background: #2E75B6; color: #fff; font-size: .6rem; font-weight: bold; padding: 2px 5px; border-radius: 3px; letter-spacing: .5px; } #sidebar .brand .vendor span { color: var(--cb-text-faint); font-size: .65rem; } #sidebar .nav-link { color: var(--cb-text-dim); padding: .55rem 1.2rem; border-radius: 6px; margin: 1px 8px; font-size: .875rem; display: flex; align-items: center; gap: .6rem; transition: all .15s; } #sidebar .nav-link:hover, #sidebar .nav-link.active { background: var(--cb-border-navy); color: #e2e8f0; } #sidebar .nav-section { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--cb-text-fainter); padding: .8rem 1.2rem .2rem; } #sidebar .sidebar-foot { padding: .8rem 1rem; border-top: 1px solid var(--cb-border-navy); font-size: .75rem; color: var(--cb-text-fainter); } #sidebar .sidebar-foot .vendor-line { font-size: .65rem; } /* ---- Main area ---- */ #main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; } #topbar { background: var(--cb-navy); border-bottom: 1px solid var(--cb-border-navy); padding: .65rem 1.5rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 900; } #topbar h6 { color: var(--cb-text-dim); } .page-content { padding: 1.8rem; flex: 1; } /* ---- Cards ---- */ .cb-card { background: var(--cb-surface); border: 1px solid var(--cb-border); border-radius: 10px; overflow: hidden; } .cb-card .card-header { background: var(--cb-navy); border-bottom: 1px solid var(--cb-border); font-weight: 600; font-size: .9rem; color: var(--cb-text-dim); padding: .85rem 1.2rem; } .stat-card { background: linear-gradient(135deg, var(--cb-surface), var(--cb-navy)); border: 1px solid var(--cb-border); border-radius: 10px; padding: 1.2rem; text-align: center; } .stat-card .stat-num { font-size: 2rem; font-weight: 700; color: var(--cb-teal); line-height: 1.15; } .stat-card .stat-lbl { font-size: .75rem; color: var(--cb-text-dim); text-transform: uppercase; } /* ---- Tables ---- */ .table-dark { --bs-table-bg: var(--cb-surface); --bs-table-striped-bg: var(--cb-surface-2); } .table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cb-text-faint); border-color: var(--cb-border); } .table td { font-size: .875rem; border-color: var(--cb-surface); vertical-align: middle; } /* ---- Badges and status ---- */ .badge-succeeded { background: #064e3b; color: #6ee7b7; } .badge-failed { background: #7f1d1d; color: #fca5a5; } .badge-running { background: var(--cb-border-navy); color: #93c5fd; } .badge-pending { background: #3b2f08; color: #fcd34d; } .badge-cloud-type { font-family: 'Courier New', monospace; font-size: .7rem; text-transform: uppercase; background: var(--cb-border-navy); color: #93c5fd; } /* ---- Misc ---- */ .code-block { background: #0a0e17; border: 1px solid var(--cb-border-navy); border-radius: 6px; padding: 1rem; font-family: 'Courier New', monospace; font-size: .8rem; color: #a5f3fc; white-space: pre-wrap; } .btn-cb-primary { background: var(--cb-blue); border-color: var(--cb-blue); color: #fff; } .btn-cb-primary:hover { background: #1557a0; border-color: #1557a0; color: #fff; } .drilldown-crumb { font-size: .82rem; color: var(--cb-text-faint); } .drilldown-crumb a { color: var(--cb-teal); text-decoration: none; } .drilldown-crumb a:hover { text-decoration: underline; } /* ---- Expandable detail panes (list pages) ---- */ /* Same treatment CloudBridge uses for its tenant and subscription detail rows: a slightly lighter ground with a blue left rule, small uppercase section headings, and muted label columns. */ .detail-heading { font-size: .7rem; font-weight: bold; color: #2E75B6; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; } .detail-label { color: var(--cb-text-faint); padding: 3px 16px 3px 0; white-space: nowrap; vertical-align: top; } /* ---- Sign-in screen ---- */ /* Matched to CloudBridge's own login page, not merely to its palette: same navy ground, same 14px card radius and 420px width, same centred brand icon above a plain white heading, same input groups with a leading icon. Deliberately NOT uppercase or letter-spaced labels, which is what made an earlier version read as a different product. */ .login-page { background: var(--cb-navy); min-height: 100vh; display: flex; align-items: center; justify-content: center; } .login-card { background: var(--cb-surface); border: 1px solid var(--cb-border); border-radius: 14px; padding: 2.5rem; width: 100%; max-width: 420px; box-shadow: 0 25px 50px rgba(0, 0, 0, .6); } .login-card .brand-icon { font-size: 2.8rem; color: var(--cb-teal); } .login-card .form-control { background: var(--cb-navy); border-color: var(--cb-border); color: var(--cb-text); } .login-card .form-control:focus { background: var(--cb-navy); border-color: var(--cb-blue); color: var(--cb-text); box-shadow: 0 0 0 3px rgba(27, 108, 168, .25); } .login-card .btn-login { background: var(--cb-blue); border: none; color: #fff; font-weight: 600; letter-spacing: .04em; } .login-card .btn-login:hover { background: #1557a0; color: #fff; } .at-badge { background: #2E75B6; color: #fff; font-size: .6rem; font-weight: bold; padding: 2px 6px; border-radius: 3px; letter-spacing: .5px; vertical-align: middle; } /* ---- Responsive ---- */ @media (max-width: 768px) { #sidebar { position: static; width: 100%; height: auto; } #sidebar .nav-scroll { max-height: 300px; } #main { margin-left: 0; } #topbar { position: static; } }