/* ═══ BRAND TYPEFACE — Satoshi (self-hosted, CSP-safe) ══════════════════ */
/* Used for the Spinden AI wordmark. Added 2026-04-15 to pair with the
* cube logo: flat-sided bowls + dense construction echo the mark's planes.
* Self-hosted because CSP only allows fonts.gstatic.com (Google Fonts). */
@font-face {
font-family: 'Satoshi';
src: url('/app/fonts/satoshi-500.woff2') format('woff2');
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('/app/fonts/satoshi-700.woff2') format('woff2');
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Clash Display';
src: url('/app/fonts/clash-display-500.woff2') format('woff2');
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Clash Display';
src: url('/app/fonts/clash-display-600.woff2') format('woff2');
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Clash Display';
src: url('/app/fonts/clash-display-700.woff2') format('woff2');
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Cabinet Grotesk';
src: url('/app/fonts/cabinet-grotesk-500.woff2') format('woff2');
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Cabinet Grotesk';
src: url('/app/fonts/cabinet-grotesk-700.woff2') format('woff2');
font-weight: 700; font-style: normal; font-display: swap;
}
/* ═══ ACCESSIBILITY ═══════════════════════════════════════════════════════ */
/* Global focus styles for keyboard navigation */
*:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
}
/* Screen reader only text */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* ─── LOGIN SCREEN · LIVING SYSTEM ─────────────────────────────────────────
Topology-first split: animated pitch (left) + login sidebar (right).
Tokens borrowed from ds/living_system.css. All rules scoped under
`#login-screen.ls-login` so legacy selectors don't leak elsewhere.
--------------------------------------------------------------------------- */
#login-screen.ls-login {
position: fixed; inset: 0; z-index: 1000; overflow: hidden;
display: grid; grid-template-columns: 1fr 440px; min-height: 100vh;
background: #08090C; color: #EEF0F6;
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
.ls-login * { box-sizing: border-box; }
.ls-login a { color: inherit; }
/* LEFT · pitch ------------------------------------------------------------- */
.ls-login .ls-pitch {
position: relative; overflow: hidden;
background:
radial-gradient(900px 600px at 50% 55%, rgba(245,165,36,.10), transparent 60%),
radial-gradient(600px 400px at 15% 15%, rgba(167,139,250,.07), transparent 60%),
radial-gradient(600px 400px at 85% 90%, rgba(45,212,191,.06), transparent 60%),
#0E0F13;
}
.ls-login .ls-pitch-grid {
position: absolute; inset: 0; pointer-events: none; opacity: .35;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
background-size: 60px 60px;
-webkit-mask-image: radial-gradient(ellipse at center, black 55%, transparent 85%);
mask-image: radial-gradient(ellipse at center, black 55%, transparent 85%);
}
.ls-login .ls-pitch-topbar {
position: absolute; top: 22px; left: 28px; right: 28px; z-index: 5;
display: flex; align-items: center; justify-content: space-between;
}
.ls-login .ls-brand { display: flex; align-items: center; gap: 12px; }
.ls-login .ls-brand-mark {
width: 28px; height: 28px; border-radius: 8px;
background: conic-gradient(from 220deg at 50% 50%, #F5A524, #FFE1A3, #A78BFA, #2DD4BF, #F5A524);
box-shadow: 0 0 20px rgba(245,165,36,.35), inset 0 0 0 1px rgba(255,255,255,.25);
position: relative;
}
.ls-login .ls-brand-mark::after {
content: ''; position: absolute; inset: 6px; border-radius: 4px; background: #08090C;
}
/* Variant E monolith caps treatment on login page (matches sidebar) */
.ls-login .ls-brand-name {
font-family: 'Cabinet Grotesk', 'Satoshi', 'Geist', 'Inter', system-ui, sans-serif;
font-size: 14px; letter-spacing: .18em; font-weight: 700;
text-transform: uppercase; color: #fff;
display: inline-flex; align-items: center; gap: 10px;
}
.ls-login .ls-brand-name em {
font-style: normal; color: #FFC560; font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
position: relative; padding-left: 16px;
}
.ls-login .ls-brand-name em::before {
content: ''; position: absolute; left: 2px;
top: calc(50% - 0.07em); /* cap-midline nudge, scales with font-size */
width: 0.4em; height: 0.4em; background: #FFA621;
transform: translateY(-50%) rotate(45deg);
box-shadow: 0 0 6px rgba(255,166,33,.6), inset 0 0 0 0.5px rgba(255,220,180,.4);
}
.ls-login .ls-brand-chips { display: flex; gap: 8px; }
.ls-login .ls-chip {
display: inline-flex; align-items: center; gap: 7px;
padding: 5px 10px; border-radius: 999px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.02);
font-size: 10.5px; color: #A6ABB8; letter-spacing: .3px;
}
.ls-login .ls-chip-sw { width: 7px; height: 7px; border-radius: 99px; }
.ls-login .ls-chip-sw.flow { background: #F5A524; box-shadow: 0 0 10px #F5A524; }
.ls-login .ls-chip-sw.ok { background: #2DD4BF; box-shadow: 0 0 10px #2DD4BF; }
.ls-login .ls-pitch-stage {
position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
}
.ls-login .ls-world { position: relative; width: min(92%, 760px); aspect-ratio: 1 / 1; }
.ls-login .ls-ring {
position: absolute; left: 50%; top: 50%; border-radius: 50%;
border: 1px solid rgba(255,255,255,.06); transform: translate(-50%, -50%);
}
.ls-login .ls-ring.r1 { width: 54%; height: 54%; }
.ls-login .ls-ring.r2 { width: 78%; height: 78%; }
.ls-login .ls-ring.r3 { width: 100%; height: 100%; }
.ls-login .ls-edges {
position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.ls-login .ls-edge {
stroke: rgba(245,165,36,.25); stroke-width: 1; fill: none;
stroke-dasharray: 3 6; animation: lsLoginDash 8s linear infinite;
}
@keyframes lsLoginDash { to { stroke-dashoffset: -100; } }
.ls-login .ls-heart {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 220px; height: 220px; border-radius: 50%;
background:
radial-gradient(circle at 50% 50%, rgba(245,165,36,.35), transparent 55%),
conic-gradient(from 90deg, rgba(245,165,36,.55), rgba(167,139,250,.35), rgba(45,212,191,.40), rgba(245,165,36,.55));
box-shadow: 0 0 120px rgba(245,165,36,.30), inset 0 0 40px rgba(0,0,0,.6);
animation: lsLoginBreathe 7s ease-in-out infinite;
}
.ls-login .ls-heart::before {
content: ''; position: absolute; inset: 22%; border-radius: 50%;
background: radial-gradient(circle at 50% 40%, #1a1513, #08090C 70%);
box-shadow: inset 0 0 35px rgba(245,165,36,.25);
}
.ls-login .ls-heart::after {
content: ''; position: absolute; inset: -18px; border-radius: 50%;
border: 1px dashed rgba(245,165,36,.25);
animation: lsLoginSpin 48s linear infinite;
}
@keyframes lsLoginBreathe {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes lsLoginSpin { to { transform: rotate(360deg); } }
.ls-login .ls-heart-label {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
text-align: center; color: #EEF0F6; pointer-events: none; z-index: 3;
}
.ls-login .ls-heart-label .k {
font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 10px; letter-spacing: 2px; color: #6A7082; text-transform: uppercase;
}
.ls-login .ls-heart-label .v {
font-family: 'Fraunces', Georgia, serif;
font-size: 42px; letter-spacing: -1px; line-height: 1; margin-top: 6px; font-weight: 400;
}
.ls-login .ls-heart-label .v em { font-style: italic; color: #FFC560; font-weight: 300; }
.ls-login .ls-node {
position: absolute; left: 50%; top: 50%;
display: flex; align-items: center; gap: 8px;
padding: 7px 12px; border-radius: 999px;
background: rgba(14,15,19,.78);
border: 1px solid rgba(255,255,255,.10);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
font-size: 11.5px; color: #EEF0F6; letter-spacing: .2px; white-space: nowrap;
box-shadow: 0 6px 22px rgba(0,0,0,.35);
}
.ls-login .ls-node .ls-dot {
width: 7px; height: 7px; border-radius: 99px;
background: #F5A524; box-shadow: 0 0 10px #F5A524;
}
.ls-login .ls-node .ls-dot.g { background: #2DD4BF; box-shadow: 0 0 10px #2DD4BF; }
.ls-login .ls-node .ls-dot.v { background: #A78BFA; box-shadow: 0 0 10px #A78BFA; }
.ls-login .ls-node .ls-dot.r { background: #F87171; box-shadow: 0 0 10px #F87171; }
.ls-login .ls-node .sub {
color: #6A7082;
font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 10px;
}
.ls-login .ls-n1 { transform: translate(-50%, -50%) translate(-310px, -60px); }
.ls-login .ls-n2 { transform: translate(-50%, -50%) translate( 260px,-130px); }
.ls-login .ls-n3 { transform: translate(-50%, -50%) translate( 310px, 80px); }
.ls-login .ls-n4 { transform: translate(-50%, -50%) translate(-260px, 180px); }
.ls-login .ls-n5 { transform: translate(-50%, -50%) translate( 60px, 300px); }
.ls-login .ls-n6 { transform: translate(-50%, -50%) translate(-100px,-290px); }
.ls-login .ls-n7 { transform: translate(-50%, -50%) translate( 170px, 220px); }
.ls-login .ls-pitch-copy {
position: absolute; left: 0; right: 0; bottom: 30px; z-index: 4;
display: flex; justify-content: space-between; align-items: flex-end;
padding: 0 36px; gap: 24px;
}
.ls-login .ls-pitch-lead { max-width: 560px; }
.ls-login .ls-eyebrow {
font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: #6A7082;
}
.ls-login .ls-pitch-h1 {
font-family: 'Fraunces', Georgia, serif; font-weight: 400;
font-size: 40px; line-height: 1.08; letter-spacing: -.8px;
margin: 8px 0 10px; color: #EEF0F6;
}
.ls-login .ls-pitch-h1 em { font-style: italic; color: #FFC560; font-weight: 300; }
.ls-login .ls-pitch-h1 b {
font-weight: 600;
background: linear-gradient(180deg, #FFE1A3, #F5A524);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ls-login .ls-pitch-p {
margin: 0; color: #A6ABB8; font-size: 13.5px; line-height: 1.5; max-width: 500px;
}
.ls-login .ls-pitch-stats { display: flex; gap: 22px; flex-wrap: wrap; }
/* Apsis migration one-liner (subtle footnote) */
.ls-login .ls-pitch-migrate-line {
margin-top: 6px;
font-size: 12px; line-height: 1.5; color: #6A7082;
letter-spacing: .1px;
}
.ls-login .ls-pitch-migrate-line em {
font-family: 'Fraunces', Georgia, serif; font-style: italic;
font-weight: 400; color: #FFC560;
}
.ls-login .ls-stat { min-width: 90px; }
.ls-login .ls-stat .n {
font-family: 'Fraunces', Georgia, serif; font-size: 28px;
letter-spacing: -.5px; color: #EEF0F6; font-weight: 400;
}
.ls-login .ls-stat .l {
font-size: 10.5px; color: #6A7082; letter-spacing: 1.5px;
text-transform: uppercase; margin-top: 2px;
}
/* RIGHT · login sidebar ---------------------------------------------------- */
.ls-login .ls-panel {
position: relative; background: #08090C;
display: flex; flex-direction: column; justify-content: center; align-items: center;
padding: 32px 28px;
border-left: 1px solid rgba(255,255,255,.06);
overflow-y: auto;
}
.ls-login .ls-panel::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(600px 400px at 50% 30%, rgba(245,165,36,.05), transparent 60%);
}
.ls-login .login-card {
position: relative; width: 100%; max-width: 360px;
z-index: 1;
}
.ls-login .login-card-header { margin-bottom: 18px; }
.ls-login .ls-kicker {
font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase;
color: #6A7082; margin-bottom: 10px;
}
.ls-login .login-card-title {
margin: 0 0 6px;
font-family: 'Fraunces', Georgia, serif; font-weight: 400;
font-size: 30px; letter-spacing: -.6px; color: #EEF0F6;
}
.ls-login .login-card-title em { font-style: italic; color: #FFC560; font-weight: 300; }
.ls-login .login-card-sub {
margin: 0 0 18px; color: #A6ABB8; font-size: 13px; line-height: 1.5;
}
/* Tabs */
.ls-login .login-tabs {
display: flex; background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 3px;
margin-bottom: 18px;
}
.ls-login .login-tab {
flex: 1; padding: 8px 12px; border: none; background: transparent;
border-radius: 8px; font-size: 12.5px; font-weight: 500; color: #6A7082;
cursor: pointer; font-family: inherit; transition: background .15s, color .15s;
}
.ls-login .login-tab:hover:not(.is-active) { color: #A6ABB8; }
.ls-login .login-tab.is-active {
background: rgba(245,165,36,.12);
color: #FFE1A3; box-shadow: inset 0 0 0 1px rgba(245,165,36,.28);
}
.ls-login .login-panel { display: none; }
.ls-login .login-panel.is-active { display: block; }
/* SSO buttons — MS + Google side-by-side, SAML below, dark theme */
.ls-login .ls-sso-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 9px;
}
.ls-login .login-sso-btn {
appearance: none; font: inherit; cursor: pointer; width: 100%;
padding: 11px 12px; border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
background: rgba(255,255,255,.03); color: #EEF0F6;
border: 1px solid rgba(255,255,255,.10);
font-size: 13.5px; font-weight: 500; letter-spacing: .1px;
transition: transform .1s, border-color .15s, background .15s;
}
.ls-login .login-sso-btn:hover {
transform: translateY(-1px);
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.16);
}
.ls-login .ls-sso-saml { width: 100%; margin-bottom: 6px; }
/* Divider */
.ls-login .login-divider {
display: flex; align-items: center; gap: 10px;
margin: 18px 0 14px;
color: #6A7082;
font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase;
}
.ls-login .login-divider-line { flex: 1; height: 1px; background: rgba(255,255,255,.10); }
.ls-login .login-divider-text { font-family: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace; font-weight: 400; }
/* Field row + forgot */
.ls-login .login-field-row {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
}
.ls-login .login-field-row label { margin-bottom: 0; }
.ls-login .login-forgot-link {
font-size: 11.5px; color: #A6ABB8; text-decoration: none;
border-bottom: 1px dotted #3E4454; cursor: pointer;
}
.ls-login .login-forgot-link:hover { color: #FFC560; border-color: #FFC560; }
/* Inputs — dark */
.ls-login .form-group { margin-bottom: 12px; }
.ls-login .form-group label {
display: block; font-size: 10.5px; font-weight: 500;
color: #6A7082; margin-bottom: 6px;
text-transform: uppercase; letter-spacing: 1.6px;
}
.ls-login .form-group input,
.ls-login .form-group select,
.ls-login .form-group textarea {
width: 100%; padding: 12px 14px; border-radius: 12px;
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.10);
color: #EEF0F6;
-webkit-text-fill-color: #EEF0F6;
font: inherit; font-size: 14px; outline: none;
transition: border-color .15s, background .15s, box-shadow .15s;
}
.ls-login .form-group input::placeholder,
.ls-login .form-group textarea::placeholder {
color: #6A7082; -webkit-text-fill-color: #6A7082;
}
.ls-login .form-group input:focus,
.ls-login .form-group select:focus,
.ls-login .form-group textarea:focus {
border-color: #F5A524;
background: rgba(245,165,36,.04);
box-shadow: 0 0 0 3px rgba(245,165,36,.12);
}
/* Select: custom caret + dark options */
.ls-login .form-group select {
appearance: none; -webkit-appearance: none; -moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
cursor: pointer;
}
.ls-login .form-group select option,
.ls-login .form-group select optgroup {
background: #0E0F13;
color: #EEF0F6;
}
.ls-login .form-group select option:checked,
.ls-login .form-group select option:hover {
background: #1A1C22;
color: #FFC560;
}
.ls-login input:-webkit-autofill,
.ls-login input:-webkit-autofill:hover,
.ls-login input:-webkit-autofill:focus {
-webkit-text-fill-color: #EEF0F6;
box-shadow: 0 0 0 1000px #0E0F13 inset;
caret-color: #EEF0F6;
}
.ls-login .password-toggle {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
color: #A6ABB8; border-radius: 8px;
font-size: 11px; font-weight: 500;
}
.ls-login .password-toggle:hover { background: rgba(255,255,255,.10); color: #EEF0F6; }
/* Primary submit — amber */
.ls-login .lbtn-signin,
.ls-login .lbtn-signup {
appearance: none; font: inherit; cursor: pointer; width: 100%;
padding: 12px 16px; border-radius: 12px;
border: 1px solid rgba(245,165,36,.55);
background: linear-gradient(180deg, #FFC560, #F5A524);
color: #1a1000; font-weight: 600; letter-spacing: .2px; font-size: 14px;
box-shadow: 0 8px 28px rgba(245,165,36,.25), inset 0 -1px 0 rgba(0,0,0,.15);
transition: transform .1s, box-shadow .15s;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
margin-top: 6px;
}
.ls-login .lbtn-signin:hover,
.ls-login .lbtn-signup:hover {
transform: translateY(-1px);
box-shadow: 0 12px 30px rgba(245,165,36,.35), inset 0 -1px 0 rgba(0,0,0,.15);
}
.ls-login .lbtn-signin:active,
.ls-login .lbtn-signup:active { transform: translateY(0); }
/* Error */
.ls-login #login-error {
color: #FCA5A5; font-size: 12.5px; margin-top: 10px; min-height: 1em;
}
/* PWA tag row */
.ls-login .ls-pwa-row {
margin-top: 18px; display: flex; justify-content: center;
gap: 6px; flex-wrap: wrap;
}
.ls-login .ls-pwa-tag {
font-family: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace;
font-size: 10px; letter-spacing: 1.2px; color: #6A7082;
padding: 3px 10px; border: 1px solid rgba(255,255,255,.06);
border-radius: 999px; text-decoration: none; transition: color .15s, border-color .15s;
}
.ls-login .ls-pwa-tag:hover { color: #FFC560; border-color: rgba(245,165,36,.35); }
/* Footer */
.ls-login .login-footer {
margin-top: 18px; padding-top: 16px;
border-top: 1px solid rgba(255,255,255,.06); text-align: center;
}
.ls-login .login-footer-text { font-size: 11.5px; color: #6A7082; line-height: 1.6; }
.ls-login .login-footer-link { color: #A6ABB8; text-decoration: none; font-weight: 500; }
.ls-login .login-footer-link:hover { color: #FFC560; text-decoration: underline; }
.ls-login .login-security-badge {
display: flex; align-items: center; justify-content: center;
gap: 6px; margin-top: 10px;
}
.ls-login .login-security-badge svg,
.ls-login .login-security-badge span { color: #6A7082; }
.ls-login .login-security-badge span { font-size: 10.5px; font-weight: 500; letter-spacing: .5px; }
/* Copyright — sidebar */
.ls-login .login-copyright {
margin-top: 10px; font-size: 10.5px; color: #4F5460;
letter-spacing: .3px; text-align: center;
}
/* Copyright — pitch panel (bottom-left corner) */
.ls-login .ls-pitch-legal {
margin-top: 22px;
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase;
color: #4F5460;
}
.ls-login .ls-pitch-legal-sep { color: #2F333C; }
/* Responsive — keep side-by-side deep into tablet sizes */
@media (max-width: 1100px) {
#login-screen.ls-login { grid-template-columns: 1fr 400px; }
.ls-login .login-card { max-width: 340px; }
}
@media (max-width: 900px) {
#login-screen.ls-login { grid-template-columns: 1fr 360px; }
.ls-login .ls-pitch-h1 { font-size: 32px; }
}
@media (max-width: 720px) {
#login-screen.ls-login {
grid-template-columns: 1fr; grid-template-rows: 340px 1fr;
}
.ls-login .ls-pitch-stage { transform: scale(.68); }
.ls-login .ls-pitch-copy { position: static; padding: 0 24px 20px; }
.ls-login .ls-panel { border-left: none; border-top: 1px solid rgba(255,255,255,.06); }
}
@media (max-width: 720px) {
.ls-login.ls-login--light .ls-panel { border-top-color: rgba(24,18,8,.10); }
}
/* Phone (portrait) — lead with the sign-in card. The topology and the pitch
copy are desktop eye-candy; the node cloud uses fixed ±310px offsets that
overflow a narrow screen (the "cluttered" phone view), and its continuous
animation pegs the mobile compositor. Drop both, keep a compact brand +
one-line tagline, and put the form front-and-centre above the fold. */
@media (max-width: 560px) {
#login-screen.ls-login {
display: block; grid-template-columns: none; grid-template-rows: none;
overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.ls-login .ls-pitch {
min-height: 0; overflow: visible;
padding: calc(env(safe-area-inset-top) + 18px) 20px 4px;
background:
radial-gradient(700px 380px at 50% -12%, rgba(245,165,36,.10), transparent 60%),
#0E0F13;
}
.ls-login .ls-pitch-grid { display: none; }
.ls-login .ls-pitch-topbar { position: static; padding: 0; }
.ls-login .ls-brand-chips { display: none; }
.ls-login .ls-pitch-stage { display: none; }
.ls-login .ls-pitch-copy { position: static; padding: 12px 0 0; }
.ls-login .ls-pitch-h1 { font-size: 22px; line-height: 1.2; }
.ls-login .ls-pitch-p,
.ls-login .ls-pitch-stats,
.ls-login .ls-pitch-migrate-line,
.ls-login .ls-pitch-legal { display: none; }
.ls-login .ls-panel {
border-left: none; border-top: none; justify-content: flex-start;
padding: 16px 20px calc(env(safe-area-inset-bottom) + 24px);
}
.ls-login .login-card { max-width: none; }
/* 16px inputs stop iOS Safari from zooming the page on field focus */
.ls-login .form-group input,
.ls-login .form-group select,
.ls-login .form-group textarea { font-size: 16px; }
.ls-login .ls-theme-toggle {
top: calc(env(safe-area-inset-top) + 12px); right: 16px;
width: 34px; height: 34px;
}
}
/* =========================================================================
LIGHT THEME · .ls-login--light
Warm paper palette aligned with Living System light tokens.
Toggle via the sun/moon button; dark remains default.
========================================================================= */
/* --- Theme toggle button ------------------------------------------------ */
.ls-login .ls-theme-toggle {
position: absolute; top: 26px; right: 28px; z-index: 20;
width: 38px; height: 38px; border-radius: 12px;
display: grid; place-items: center; cursor: pointer;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
color: #A6ABB8; font-size: 16px;
transition: background .2s, border-color .2s, color .2s, transform .15s;
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ls-login .ls-theme-toggle:hover {
background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18);
color: #FFC560; transform: scale(1.06);
}
.ls-login .ls-theme-toggle svg { width: 18px; height: 18px; }
/* Light-mode overrides for the toggle itself */
.ls-login--light .ls-theme-toggle {
background: rgba(24,18,8,.03);
border-color: rgba(24,18,8,.10);
color: #766D5E;
}
.ls-login--light .ls-theme-toggle:hover {
background: rgba(24,18,8,.06); border-color: rgba(24,18,8,.18);
color: #B45309;
}
/* --- Page base ---------------------------------------------------------- */
.ls-login--light { background: #F3F0E8 !important; color: #1A1812 !important; }
/* --- LEFT · pitch panel ------------------------------------------------- */
.ls-login--light .ls-pitch {
background:
radial-gradient(900px 600px at 50% 55%, rgba(180,83,9,.06), transparent 60%),
radial-gradient(600px 400px at 15% 15%, rgba(109,40,217,.04), transparent 60%),
radial-gradient(600px 400px at 85% 90%, rgba(4,120,87,.035), transparent 60%),
linear-gradient(180deg, #FDFBF5 0%, #F3F0E8 100%) !important;
}
.ls-login--light .ls-pitch-grid {
opacity: .50 !important;
background-image:
linear-gradient(rgba(24,18,8,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(24,18,8,.04) 1px, transparent 1px) !important;
}
/* Brand mark */
.ls-login--light .ls-brand-mark {
box-shadow: 0 0 16px rgba(180,83,9,.20), inset 0 0 0 1px rgba(24,18,8,.10) !important;
}
.ls-login--light .ls-brand-mark::after {
background: #F3F0E8 !important;
}
.ls-login--light .ls-brand-name { color: #1A1812 !important; }
.ls-login--light .ls-brand-name em { color: #B45309 !important; }
.ls-login--light .ls-brand-name em::before {
background: #B45309 !important;
box-shadow: 0 0 6px rgba(180,83,9,.45), inset 0 0 0 0.5px rgba(180,83,9,.3) !important;
}
/* Status chips */
.ls-login--light .ls-chip {
border-color: rgba(24,18,8,.10) !important;
background: rgba(24,18,8,.025) !important;
color: #766D5E !important;
}
/* Rings */
.ls-login--light .ls-ring {
border-color: rgba(24,18,8,.06) !important;
}
/* SVG edges */
.ls-login--light .ls-edge {
stroke: rgba(180,83,9,.20) !important;
}
/* Heart — warm amber glow becomes soft parchment shadow */
.ls-login--light .ls-heart {
background:
radial-gradient(circle at 50% 50%, rgba(180,83,9,.22), transparent 55%),
conic-gradient(from 90deg, rgba(180,83,9,.40), rgba(109,40,217,.22), rgba(4,120,87,.25), rgba(180,83,9,.40)) !important;
box-shadow: 0 0 80px rgba(180,83,9,.18), inset 0 0 40px rgba(255,255,255,.3) !important;
}
.ls-login--light .ls-heart::before {
background: radial-gradient(circle at 50% 40%, #FBF9F3, #F3F0E8 70%) !important;
box-shadow: inset 0 0 30px rgba(180,83,9,.15) !important;
}
.ls-login--light .ls-heart::after {
border-color: rgba(180,83,9,.18) !important;
}
/* Heart label */
.ls-login--light .ls-heart-label { color: #1A1812 !important; }
.ls-login--light .ls-heart-label .k { color: #766D5E !important; }
.ls-login--light .ls-heart-label .v em { color: #B45309 !important; }
/* Nodes */
.ls-login--light .ls-node {
background: rgba(253,251,245,.92) !important;
border-color: rgba(24,18,8,.10) !important;
color: #1A1812 !important;
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset,
0 2px 4px rgba(24,18,8,.04),
0 8px 20px -6px rgba(24,18,8,.14) !important;
backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
}
.ls-login--light .ls-node .sub { color: #766D5E !important; }
/* Dot colors darken slightly for paper contrast */
.ls-login--light .ls-node .ls-dot { background: #D97706 !important; box-shadow: 0 0 8px rgba(217,119,6,.5) !important; }
.ls-login--light .ls-node .ls-dot.g { background: #059669 !important; box-shadow: 0 0 8px rgba(5,150,105,.5) !important; }
.ls-login--light .ls-node .ls-dot.v { background: #7C3AED !important; box-shadow: 0 0 8px rgba(124,58,237,.5) !important; }
.ls-login--light .ls-node .ls-dot.r { background: #DC2626 !important; box-shadow: 0 0 8px rgba(220,38,38,.5) !important; }
/* Pitch copy */
.ls-login--light .ls-eyebrow { color: #766D5E !important; }
.ls-login--light .ls-pitch-h1 { color: #1A1812 !important; }
.ls-login--light .ls-pitch-h1 em { color: #B45309 !important; }
.ls-login--light .ls-pitch-h1 b {
background: linear-gradient(180deg, #D97706, #92400E) !important;
-webkit-background-clip: text !important; background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.ls-login--light .ls-pitch-p { color: #4A4338 !important; }
.ls-login--light .ls-stat .n { color: #1A1812 !important; }
.ls-login--light .ls-stat .l { color: #766D5E !important; }
.ls-login--light .ls-pitch-migrate-line { color: #766D5E !important; }
.ls-login--light .ls-pitch-migrate-line em { color: #B45309 !important; }
.ls-login--light .ls-pitch-legal { color: #B5AD9D !important; }
.ls-login--light .ls-pitch-legal-sep { color: #D5CFBF !important; }
/* --- RIGHT · login sidebar ---------------------------------------------- */
.ls-login--light .ls-panel {
background: #FDFBF5 !important;
border-left-color: rgba(24,18,8,.08) !important;
}
.ls-login--light .ls-panel::before {
background: radial-gradient(600px 400px at 50% 30%, rgba(180,83,9,.035), transparent 60%) !important;
}
/* Header */
.ls-login--light .ls-kicker { color: #766D5E !important; }
.ls-login--light .login-card-title { color: #1A1812 !important; }
.ls-login--light .login-card-title em { color: #B45309 !important; }
.ls-login--light .login-card-sub { color: #4A4338 !important; }
/* Tabs */
.ls-login--light .login-tabs {
background: rgba(24,18,8,.025) !important;
border-color: rgba(24,18,8,.08) !important;
}
.ls-login--light .login-tab {
color: #766D5E !important;
}
.ls-login--light .login-tab:hover:not(.is-active) { color: #4A4338 !important; }
.ls-login--light .login-tab.is-active {
background: rgba(180,83,9,.10) !important;
color: #92400E !important;
box-shadow: inset 0 0 0 1px rgba(180,83,9,.22) !important;
}
/* SSO buttons */
.ls-login--light .login-sso-btn {
background: #FFFFFF !important;
color: #1A1812 !important;
border-color: rgba(24,18,8,.12) !important;
box-shadow: 0 1px 2px rgba(24,18,8,.05) !important;
}
.ls-login--light .login-sso-btn:hover {
background: #FBF9F3 !important;
border-color: rgba(24,18,8,.18) !important;
box-shadow: 0 2px 6px rgba(24,18,8,.08) !important;
}
/* Divider */
.ls-login--light .login-divider { color: #B5AD9D !important; }
.ls-login--light .login-divider-line { background: rgba(24,18,8,.10) !important; }
/* Forgot link */
.ls-login--light .login-forgot-link {
color: #766D5E !important;
border-bottom-color: rgba(24,18,8,.15) !important;
}
.ls-login--light .login-forgot-link:hover {
color: #B45309 !important;
border-color: #B45309 !important;
}
/* Form inputs */
.ls-login--light .form-group label { color: #766D5E !important; }
.ls-login--light .form-group input,
.ls-login--light .form-group select,
.ls-login--light .form-group textarea {
background: #FFFFFF !important;
border-color: rgba(24,18,8,.12) !important;
color: #1A1812 !important;
-webkit-text-fill-color: #1A1812 !important;
box-shadow: 0 1px 2px rgba(24,18,8,.04) !important;
}
.ls-login--light .form-group input::placeholder,
.ls-login--light .form-group textarea::placeholder {
color: #B5AD9D !important;
-webkit-text-fill-color: #B5AD9D !important;
}
.ls-login--light .form-group input:focus,
.ls-login--light .form-group select:focus,
.ls-login--light .form-group textarea:focus {
border-color: #B45309 !important;
background: rgba(180,83,9,.02) !important;
box-shadow: 0 0 0 3px rgba(180,83,9,.10) !important;
}
.ls-login--light .form-group select {
background-image: url("data:image/svg+xml;utf8,") !important;
}
.ls-login--light .form-group select option,
.ls-login--light .form-group select optgroup {
background: #FDFBF5 !important;
color: #1A1812 !important;
}
.ls-login--light .form-group select option:checked,
.ls-login--light .form-group select option:hover {
background: #F3F0E8 !important;
color: #B45309 !important;
}
/* Autofill override for light */
#login-screen.ls-login--light input:-webkit-autofill,
#login-screen.ls-login--light input:-webkit-autofill:hover,
#login-screen.ls-login--light input:-webkit-autofill:focus,
.ls-login--light .form-group input:-webkit-autofill,
.ls-login--light .form-group input:-webkit-autofill:hover,
.ls-login--light .form-group input:-webkit-autofill:focus {
-webkit-text-fill-color: #1A1812 !important;
box-shadow: 0 0 0 1000px #FFFFFF inset !important;
caret-color: #1A1812 !important;
border-color: rgba(24,18,8,.12) !important;
}
/* Password toggle */
.ls-login--light .password-toggle {
background: rgba(24,18,8,.04) !important;
border-color: rgba(24,18,8,.12) !important;
color: #766D5E !important;
}
.ls-login--light .password-toggle:hover {
background: rgba(24,18,8,.08) !important;
color: #1A1812 !important;
}
/* Primary submit — burnt amber on paper */
.ls-login--light .lbtn-signin,
.ls-login--light .lbtn-signup {
border-color: rgba(180,83,9,.45) !important;
background: linear-gradient(180deg, #D97706, #B45309) !important;
color: #FFFCF5 !important;
box-shadow: 0 4px 16px rgba(180,83,9,.25),
0 1px 0 rgba(255,255,255,.15) inset !important;
}
.ls-login--light .lbtn-signin:hover,
.ls-login--light .lbtn-signup:hover {
box-shadow: 0 8px 24px rgba(180,83,9,.30),
0 1px 0 rgba(255,255,255,.15) inset !important;
}
/* Error */
.ls-login--light #login-error { color: #B91C1C !important; }
/* PWA tag row */
.ls-login--light .ls-pwa-tag {
color: #766D5E !important;
border-color: rgba(24,18,8,.08) !important;
}
.ls-login--light .ls-pwa-tag:hover {
color: #B45309 !important;
border-color: rgba(180,83,9,.30) !important;
}
/* Footer */
.ls-login--light .login-footer {
border-top-color: rgba(24,18,8,.08) !important;
}
.ls-login--light .login-footer-text { color: #B5AD9D !important; }
.ls-login--light .login-footer-link { color: #766D5E !important; }
.ls-login--light .login-footer-link:hover { color: #B45309 !important; }
.ls-login--light .login-security-badge svg,
.ls-login--light .login-security-badge span { color: #B5AD9D !important; }
.ls-login--light .login-copyright { color: #D5CFBF !important; }
/* Transition: smooth crossfade between themes */
.ls-login-transitioning,
.ls-login-transitioning *,
.ls-login-transitioning *::before,
.ls-login-transitioning *::after {
transition: background .4s ease, color .3s ease, border-color .3s ease,
box-shadow .4s ease, opacity .3s ease !important;
}
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; }
.form-group input, .form-group select, .form-group textarea {
width: 100%; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 6px;
font-size: 14px; color: var(--text); transition: border-color .2s; outline: none;
}
#login-screen:not(.ls-login) .form-group input,
#login-screen:not(.ls-login) .form-group select,
#login-screen:not(.ls-login) .form-group textarea {
background: #FFFFFF;
border-color: #CBD5E1;
color: #1F2937;
-webkit-text-fill-color: #1F2937;
}
#login-screen:not(.ls-login) .form-group input::placeholder,
#login-screen:not(.ls-login) .form-group textarea::placeholder {
color: #6B7280;
-webkit-text-fill-color: #6B7280;
}
#login-screen:not(.ls-login) .form-group input:focus,
#login-screen:not(.ls-login) .form-group select:focus,
#login-screen:not(.ls-login) .form-group textarea:focus {
border-color: #3B82F6;
box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
#login-screen:not(.ls-login) input:-webkit-autofill,
#login-screen:not(.ls-login) input:-webkit-autofill:hover,
#login-screen:not(.ls-login) input:-webkit-autofill:focus {
-webkit-text-fill-color: #1F2937;
box-shadow: 0 0 0 1000px #FFFFFF inset;
}
/* Living System login: dark autofill */
#login-screen.ls-login input:-webkit-autofill,
#login-screen.ls-login input:-webkit-autofill:hover,
#login-screen.ls-login input:-webkit-autofill:focus,
#login-screen.ls-login input:-webkit-autofill:active {
-webkit-text-fill-color: #EEF0F6 !important;
-webkit-box-shadow: 0 0 0 1000px #0E0F13 inset !important;
box-shadow: 0 0 0 1000px #0E0F13 inset !important;
caret-color: #EEF0F6 !important;
transition: background-color 9999s ease-in-out 0s;
}
.password-field {
position: relative;
}
.password-field input[type="password"],
.password-field input[type="text"] {
padding-right: 80px;
}
.password-toggle {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
border: 1px solid var(--border);
background: #F7FAFF;
color: #2A3E5D;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
padding: 4px 8px;
cursor: pointer;
line-height: 1.2;
}
.password-toggle:hover {
background: #EEF4FF;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--blue); }
.btn {
display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px;
border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity .15s;
}
.btn:hover { opacity: .88; }
.btn-primary { background: var(--navy); color: #fff; width: 100%; justify-content: center; }
.btn-success { background: var(--success); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-outline { background: #fff; color: var(--navy); border: 1.5px solid var(--border); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
#login-error { color: var(--danger); font-size: 13px; margin-top: 12px; text-align: center; min-height: 18px; }
#app .btn {
border: 1px solid rgba(255,255,255,.14);
border-radius: 10px;
background: rgba(255,255,255,.06);
color: #EAF1FF;
box-shadow: 0 8px 20px rgba(3,8,24,.24);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
#app .btn:hover {
opacity: 1;
transform: translateY(-1px);
border-color: rgba(152,198,255,.45);
box-shadow: 0 14px 26px rgba(2,8,26,.34);
}
#app .btn:disabled {
opacity: .7;
transform: none;
cursor: not-allowed;
}
#app .btn-outline {
background: rgba(255,255,255,.04);
color: #DDE7FF;
border: 1px solid rgba(255,255,255,.2);
}
#app .btn-outline:hover {
background: rgba(117,167,255,.12);
color: #F2F7FF;
}
#app .btn-success {
background: linear-gradient(135deg, rgba(48,196,141,.9), rgba(33,145,115,.92));
color: #ECFFF7;
border-color: rgba(111,255,201,.45);
}
#app .btn-primary {
background: linear-gradient(135deg, rgba(98,120,255,.92), rgba(121,76,225,.92));
color: #F2F5FF;
border-color: rgba(161,180,255,.5);
width: auto;
justify-content: center;
}
#app .btn-amber {
background: rgba(245, 158, 11, .85);
color: #1a1d23;
border-color: rgba(251, 191, 36, .5);
font-weight: 600;
width: auto;
justify-content: center;
}
#app .btn-danger {
background: linear-gradient(135deg, rgba(238,93,99,.92), rgba(192,63,80,.92));
color: #FFF1F2;
border-color: rgba(255,150,160,.45);
}
#app .form-group input,
#app .form-group select,
#app .form-group textarea,
#app input[type="text"],
#app input[type="email"],
#app input[type="number"],
#app input[type="date"],
#app input[type="datetime-local"],
#app input[type="password"],
#app select,
#app textarea {
background: var(--app-field-bg);
border: 1.5px solid var(--app-field-border);
color: var(--app-field-text);
border-radius: 8px;
}
#app .form-group input::placeholder,
#app .form-group textarea::placeholder,
#app input::placeholder,
#app textarea::placeholder {
color: var(--app-field-placeholder);
}
#app .form-group input:focus,
#app .form-group select:focus,
#app .form-group textarea:focus,
#app input:focus,
#app select:focus,
#app textarea:focus {
border-color: var(--app-field-focus);
box-shadow: 0 0 0 3px rgba(127, 168, 255, .16);
outline: none;
}
#app,
#app .card-title,
#app td,
#app .stat-value {
color: var(--app-text-primary);
}
#app .stat-label,
#app .topbar-subtitle,
#app .empty-state,
#app .loading,
#app .form-group label,
#app th {
color: var(--app-text-muted);
}
#app select option {
color: #1F2937;
background: #FFFFFF;
}
#section-estimating a,
#section-estimating a:visited {
color: #CFE0FF;
-webkit-text-fill-color: #CFE0FF;
text-decoration-color: rgba(207,224,255,.72);
}
#section-estimating a:hover,
#section-estimating a:focus {
color: #E9F1FF;
-webkit-text-fill-color: #E9F1FF;
text-decoration-color: rgba(233,241,255,.9);
}
#section-partner_matching a,
#section-partner_matching a:visited,
#section-documents a,
#section-documents a:visited {
color: #CFE0FF;
-webkit-text-fill-color: #CFE0FF;
text-decoration-color: rgba(207,224,255,.72);
}
#section-partner_matching a:hover,
#section-partner_matching a:focus,
#section-documents a:hover,
#section-documents a:focus {
color: #E9F1FF;
-webkit-text-fill-color: #E9F1FF;
text-decoration-color: rgba(233,241,255,.9);
}
#app [style*="background:#fff"],
#app [style*="background: #fff"],
#app [style*="background:#ffffff"],
#app [style*="background: #ffffff"] {
background: var(--app-field-bg) !important;
}
#app [style*="background:#fff"][style*="border"],
#app [style*="background: #fff"][style*="border"],
#app [style*="background:#ffffff"][style*="border"],
#app [style*="background: #ffffff"][style*="border"] {
border-color: var(--app-field-border) !important;
}
#section-finance #fin-int-provider,
#section-finance #fin-int-auth-type,
#section-finance #fin-int-ext-tenant,
#section-finance #fin-int-api-key,
#section-finance #fin-int-client-id,
#section-finance #fin-int-client-secret,
#section-finance #fin-int-realm {
color: #EAF2FF !important;
-webkit-text-fill-color: #EAF2FF !important;
background: rgba(29, 43, 78, .92) !important;
border: 1.5px solid rgba(151, 186, 255, .38) !important;
}
#section-finance #fin-int-provider::placeholder,
#section-finance #fin-int-auth-type::placeholder,
#section-finance #fin-int-api-key::placeholder {
color: #BFD1F3 !important;
-webkit-text-fill-color: #BFD1F3 !important;
}
#section-finance #fin-int-provider:focus,
#section-finance #fin-int-auth-type:focus,
#section-finance #fin-int-api-key:focus {
border-color: rgba(169, 203, 255, .72) !important;
box-shadow: 0 0 0 3px rgba(138, 176, 245, .24) !important;
}
#section-finance #fin-int-provider option,
#section-finance #fin-int-auth-type option {
color: #111827 !important;
background: #FFFFFF !important;
}
#section-finance #fin-int-editor-status,
#section-finance [id^="fin-int-"] + label,
#section-finance #fin-int-auth-label,
#section-finance #fin-int-tenant-label,
#section-finance #fin-int-api-label,
#section-finance #fin-int-client-id-label,
#section-finance #fin-int-client-secret-label,
#section-finance #fin-int-realm-label {
color: var(--app-text-primary) !important;
}
#section-finance #fin-int-api-key:-webkit-autofill,
#section-finance #fin-int-api-key:-webkit-autofill:hover,
#section-finance #fin-int-api-key:-webkit-autofill:focus,
#section-finance #fin-int-provider:-webkit-autofill,
#section-finance #fin-int-auth-type:-webkit-autofill {
-webkit-text-fill-color: #EAF2FF !important;
box-shadow: 0 0 0 1000px rgba(29, 43, 78, .92) inset !important;
transition: background-color 9999s ease-in-out 0s;
}
/* Financial Reporting Styles */
.finance-table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; background: white; color: black; }
.finance-table th, .finance-table td { padding: 0.75rem 1rem; border-bottom: 1px solid #e5e7eb; }
.finance-table th { text-align: left; color: #4b5563; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
.finance-row-indent { padding-left: 2.5rem !important; }
.finance-num { text-align: right; font-family: 'Courier New', monospace; font-size: 1.05rem; }
.finance-total-row td { font-weight: bold; border-top: 2px solid #9ca3af; border-bottom: 3px double #4b5563; }
.finance-section-title { font-weight: bold; color: var(--blue); padding-top: 1.5rem !important; font-size: 1.1rem; }
#fin-int-editor-panel {
background: rgba(13, 24, 46, .92) !important;
border: 1.5px solid rgba(147, 183, 255, .34) !important;
box-shadow: inset 0 1px 0 rgba(210, 226, 255, .08), 0 12px 24px rgba(1, 10, 28, .34);
}
#fin-int-editor-panel label,
#fin-int-editor-panel #fin-int-editor-status,
#fin-int-editor-panel #fin-int-auth-label,
#fin-int-editor-panel #fin-int-tenant-label,
#fin-int-editor-panel #fin-int-api-label,
#fin-int-editor-panel #fin-int-client-id-label,
#fin-int-editor-panel #fin-int-client-secret-label,
#fin-int-editor-panel #fin-int-realm-label {
color: #EAF2FF !important;
-webkit-text-fill-color: #EAF2FF !important;
}
#fin-int-editor-panel #fin-int-provider,
#fin-int-editor-panel #fin-int-auth-type,
#fin-int-editor-panel #fin-int-ext-tenant,
#fin-int-editor-panel #fin-int-api-key,
#fin-int-editor-panel #fin-int-client-id,
#fin-int-editor-panel #fin-int-client-secret,
#fin-int-editor-panel #fin-int-realm {
color: #EEF4FF !important;
-webkit-text-fill-color: #EEF4FF !important;
background: rgba(24, 39, 71, .96) !important;
border: 1.5px solid rgba(159, 196, 255, .45) !important;
}
#fin-int-editor-panel #fin-int-provider::placeholder,
#fin-int-editor-panel #fin-int-auth-type::placeholder,
#fin-int-editor-panel #fin-int-ext-tenant::placeholder,
#fin-int-editor-panel #fin-int-api-key::placeholder,
#fin-int-editor-panel #fin-int-client-id::placeholder,
#fin-int-editor-panel #fin-int-client-secret::placeholder,
#fin-int-editor-panel #fin-int-realm::placeholder {
color: #C2D3F2 !important;
-webkit-text-fill-color: #C2D3F2 !important;
}
#fin-int-editor-panel #fin-int-provider:focus,
#fin-int-editor-panel #fin-int-auth-type:focus,
#fin-int-editor-panel #fin-int-ext-tenant:focus,
#fin-int-editor-panel #fin-int-api-key:focus,
#fin-int-editor-panel #fin-int-client-id:focus,
#fin-int-editor-panel #fin-int-client-secret:focus,
#fin-int-editor-panel #fin-int-realm:focus {
border-color: rgba(180, 211, 255, .82) !important;
box-shadow: 0 0 0 3px rgba(139, 174, 240, .26) !important;
}
#fin-int-editor-panel #fin-int-provider option,
#fin-int-editor-panel #fin-int-auth-type option {
color: #111827 !important;
background: #FFFFFF !important;
}
#ws-theme-presets {
background: var(--app-field-bg) !important;
border-color: var(--app-field-border) !important;
}
#ws-theme-presets label,
#ws-theme-presets span,
#ws-theme-presets strong {
color: var(--app-text-primary) !important;
}
#ws-site-theme {
background: var(--app-field-bg) !important;
border: 1.5px solid var(--app-field-border) !important;
color: var(--app-field-text) !important;
-webkit-text-fill-color: var(--app-field-text) !important;
}
#ws-theme-studio {
background: var(--app-field-bg) !important;
border-color: var(--app-field-border) !important;
color: var(--app-text-primary) !important;
}
#ws-theme-studio label,
#ws-theme-studio strong,
#ws-theme-studio span {
color: var(--app-text-primary) !important;
}
#ws-theme-studio #ws-theme-region,
#ws-theme-studio #ws-theme-mode,
#ws-theme-studio #ws-theme-editor-mode,
#ws-theme-studio #ws-theme-overall-color,
#ws-theme-studio #ws-theme-sidebar-color,
#ws-theme-studio input[type="number"] {
background: var(--app-field-bg) !important;
border: 1.5px solid var(--app-field-border) !important;
color: var(--app-field-text) !important;
-webkit-text-fill-color: var(--app-field-text) !important;
}
#ws-theme-studio input[type="number"]::placeholder {
color: var(--app-text-muted) !important;
-webkit-text-fill-color: var(--app-text-muted) !important;
}
#ws-theme-studio #ws-theme-region option,
#ws-theme-studio #ws-theme-mode option,
#ws-theme-studio #ws-theme-editor-mode option {
color: #111827 !important;
background: #FFFFFF !important;
}
#ws-theme-preview {
border-color: var(--app-field-border) !important;
}
/* ── OFFICE SUITE ─────────────────────────────────────── */
/* Shared toolbar button "” inherits theme automatically */
.de-tb-btn {
background: var(--app-field-bg); border: 1px solid var(--app-field-border); border-radius: 4px;
padding: 3px 8px; font-size: 12px; cursor: pointer; white-space: nowrap;
color: var(--app-text-primary); line-height: 1.5; height: 27px;
transition: background .15s, color .15s;
}
.de-tb-btn:hover { background: rgba(var(--navy-rgb,31,73,125),.15); color: var(--app-text-primary); border-color: var(--navy); }
/* Shared office select/input/textarea inherit */
#section-doc_editor select, #section-spreadsheet select, #section-presentations select,
#section-email_calendar select {
background: var(--app-field-bg); color: var(--app-field-text);
border-color: var(--app-field-border); border-radius: 4px;
}
#section-doc_editor input:not([type="color"]):not([type="checkbox"]),
#section-spreadsheet input:not([type="color"]):not([type="checkbox"]),
#section-presentations input:not([type="color"]):not([type="checkbox"]),
#section-email_calendar input:not([type="color"]):not([type="checkbox"]) {
background: var(--app-field-bg); color: var(--app-field-text);
}
#section-doc_editor textarea,
#section-spreadsheet textarea,
#section-presentations textarea,
#section-email_calendar textarea {
background: var(--app-field-bg); color: var(--app-field-text);
border-color: var(--app-field-border);
}
/* ── Office panel chrome "” sidebars, toolbars, title bars ── */
/* Explicit color on all office chrome panels so text is always readable
regardless of which --grey value the active theme produces. */
#de-sidebar,
#de-toolbar,
#de-title-bar,
#de-erp-panel {
color: var(--app-text-primary);
}
#de-sidebar strong, #de-sidebar span, #de-sidebar label, #de-sidebar b,
#de-toolbar span, #de-toolbar label, #de-toolbar b,
#de-title-bar span,
#de-erp-panel strong, #de-erp-panel span, #de-erp-panel label, #de-erp-panel b {
color: var(--app-text-primary);
}
/* ── Document Editor ── */
/* Canvas is intentionally light (document paper metaphor) but adapts to theme */
#de-canvas-wrap { background: var(--app-field-bg); }
#de-editor {
background: var(--app-field-bg); color: var(--app-field-text);
font-family: 'Georgia', 'Times New Roman', serif;
border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.12);
padding: 32px 40px;
}
#de-editor h1, #de-editor h2, #de-editor h3, #de-editor h4 { color: var(--app-text-primary); }
#de-editor h1 { font-size: 2em; margin: .5em 0; font-weight: 700; }
#de-editor h2 { font-size: 1.6em; margin: .5em 0; font-weight: 700; }
#de-editor h3 { font-size: 1.3em; margin: .5em 0; font-weight: 700; }
#de-editor h4 { font-size: 1.1em; margin: .5em 0; font-weight: 700; }
#de-editor pre { background: var(--grey); border: 1px solid var(--border); padding: 10px; border-radius: 4px; font-family: Consolas, monospace; color: var(--app-text-primary); }
#de-editor table { border-collapse: collapse; margin: 8px 0; }
#de-editor table td, #de-editor table th { border: 1px solid var(--border); padding: 6px 10px; min-width: 60px; color: var(--app-field-text); }
#de-editor blockquote { border-left: 4px solid var(--navy); margin: 8px 0; padding: 4px 12px; color: var(--app-text-muted); }
#de-editor a { color: var(--blue); }
.de-doc-item { padding: 6px 8px; border-radius: 5px; cursor: pointer; border: 1.5px solid transparent; margin-bottom: 4px; color: var(--app-text-primary); }
.de-doc-item:hover { background: var(--app-field-bg); border-color: var(--app-field-border); }
.de-doc-item.active { border-color: var(--navy); background: var(--app-field-bg); }
.de-doc-item .de-doc-date { font-size: 10px; color: var(--app-text-muted); }
.de-template-item { padding: 5px 8px; border-radius: 5px; cursor: pointer; color: var(--app-text-primary); }
.de-template-item:hover { background: var(--app-field-bg); }
.de-erp-item { padding: 5px 8px; border-radius: 5px; cursor: pointer; border-bottom: 1px solid var(--border); color: var(--app-text-primary); }
.de-erp-item:hover { background: var(--app-field-bg); }
/* ── Spreadsheet ── */
.ss-grid { border-collapse: collapse; font-size: 12px; font-family: Consolas, monospace; table-layout: fixed; }
.ss-grid th {
background: var(--grey); border: 1px solid var(--border); padding: 3px 8px;
text-align: center; font-size: 11px; cursor: pointer;
position: sticky; top: 0; z-index: 2; color: var(--app-text-primary);
overflow: hidden; white-space: nowrap;
}
.ss-grid th.ss-corner-header { width: 42px; min-width: 42px; max-width: 42px; cursor: default; }
.ss-grid td { border: 1px solid var(--border); padding: 0; background: var(--app-field-bg); overflow: hidden; }
.ss-grid td.selected { outline: 2px solid var(--navy); outline-offset: -2px; background: var(--app-field-bg); }
.ss-grid td input {
width: 100%; border: none; padding: 3px 6px; font-size: 12px;
font-family: Consolas, monospace; outline: none;
background: transparent; color: var(--app-field-text);
box-sizing: border-box; height: 24px;
}
.ss-grid td.formula { background: rgba(var(--navy-rgb,31,73,125),.08); }
/* Column resize handles */
.ss-col-resize {
position: absolute; top: 0; right: -2px; width: 5px; height: 100%;
cursor: col-resize; z-index: 3;
}
.ss-col-resize:hover { background: var(--navy); opacity: 0.4; }
/* Roofing Worksheet formula column "” hidden until toggled */
.rw-formula-col { display: none !important; }
.rw-formulas-on .rw-formula-col { display: table-cell !important; }
#section-roofing_estimator .card {
overflow: visible;
}
#section-roofing_estimator .card .card-header {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
#section-roofing_estimator #roofing-form-body {
padding: 18px 20px 22px;
}
#section-roofing_estimator #roofing-form-body .form-row {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
}
#section-roofing_estimator #roof-engine-toolbar {
display: flex !important;
flex-wrap: wrap;
align-items: center;
width: 100%;
gap: 8px 10px !important;
margin-top: 2px;
}
#section-roofing_estimator #roof-engine-toolbar .btn,
#section-roofing_estimator #rw-toolbar-actions button {
min-height: 36px;
padding: 7px 12px;
}
#section-roofing_estimator #roof-engine-toolbar #roofing-map-resources,
#section-roofing_estimator #roof-engine-toolbar #roof-out-total-top {
justify-self: start;
}
#section-roofing_estimator #rw-toolbar-metrics {
display: flex;
flex-wrap: wrap;
gap: 8px 16px !important;
margin-top: 4px;
}
#section-roofing_estimator #rw-toolbar-actions {
display: flex !important;
flex-wrap: wrap;
align-items: center;
width: 100%;
gap: 8px 10px !important;
margin-top: 8px !important;
}
#section-roofing_estimator #rw-toolbar-actions span {
flex: 1 1 100%;
}
#section-roofing_estimator .rw-table-wrap {
width: 100%;
overflow-x: auto;
}
#section-roofing_estimator #tbl-roofing-ws-table {
width: 100%;
min-width: 960px;
table-layout: fixed;
}
#section-roofing_estimator #tbl-roofing-ws-table th,
#section-roofing_estimator #tbl-roofing-ws-table td {
white-space: nowrap;
}
#section-roofing_estimator #tbl-roofing-ws-table th:nth-child(2),
#section-roofing_estimator #tbl-roofing-ws-table td:nth-child(2) {
width: 220px;
}
#section-roofing_estimator #tbl-roofing-ws-table.rw-formulas-on th:nth-child(3),
#section-roofing_estimator #tbl-roofing-ws-table.rw-formulas-on td:nth-child(3) {
width: 210px;
}
#section-roofing_estimator .stat-grid {
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
}
@media (max-width: 1360px) {
#section-roofing_estimator #tbl-roofing-ws-table {
min-width: 860px;
}
}
@media (max-width: 980px) {
#section-roofing_estimator #roofing-form-body {
padding: 14px;
}
#section-roofing_estimator #roofing-form-body .form-row {
grid-template-columns: 1fr;
}
#section-roofing_estimator #tbl-roofing-ws-table {
min-width: 760px;
}
}
#roofing-form-body.roofing-editor-mode .form-group input,
#roofing-form-body.roofing-editor-mode .form-group select,
#roofing-form-body.roofing-editor-mode .form-group textarea {
border-color: var(--blue) !important;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 35%, transparent);
}
/* ── Roofing Estimator v2 Tabbed Layout ──────────────── */
.re-tabs { display:flex; gap:0; border-bottom:2px solid rgba(184,204,255,.15); margin-bottom:0; background:rgba(11,20,44,.35); border-radius:10px 10px 0 0; padding:0 8px; }
.re-tab { padding:12px 20px; font-size:13px; font-weight:600; color:rgba(184,204,255,.5); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s; white-space:nowrap; user-select:none; }
.re-tab:hover { color:rgba(184,204,255,.8); background:rgba(184,204,255,.04); }
.re-tab.active { color:#93c5fd; border-bottom-color:#93c5fd; background:rgba(147,197,253,.06); }
.re-tab-panel { display:none !important; }
.re-tab-panel.active { display:block !important; }
.re-section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:rgba(184,204,255,.4); margin:16px 0 8px; padding-bottom:6px; border-bottom:1px solid rgba(184,204,255,.08); }
.re-summary-bar { display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; padding:14px 20px; background:rgba(11,20,44,.5); border-bottom:1px solid rgba(184,204,255,.1); }
.re-summary-bar .re-stat { font-size:12px; color:var(--app-text-muted); }
.re-summary-bar .re-stat strong { color:#93c5fd; }
.re-summary-bar .re-total { font-size:15px; font-weight:700; color:#34d399; padding:5px 14px; border-radius:8px; background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.3); }
.re-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 20px; background:rgba(11,20,44,.25); border-bottom:1px solid rgba(184,204,255,.08); }
.re-toolbar .btn { min-height:34px; font-size:12px; }
.re-form-section { padding:18px 20px; }
.re-form-section .form-row { grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; }
.re-ws-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:8px 16px; background:rgba(11,20,44,.2); border-bottom:1px solid rgba(184,204,255,.08); }
.re-ws-toolbar button { font-size:11px; padding:4px 10px; border-radius:4px; cursor:pointer; }
.re-pitch-visual { display:inline-flex; align-items:center; gap:8px; padding:4px 10px; background:rgba(147,197,253,.08); border:1px solid rgba(147,197,253,.2); border-radius:6px; font-size:12px; color:#93c5fd; }
.re-waste-presets { display:flex; gap:6px; margin-top:4px; }
.re-waste-presets button { font-size:10px; padding:2px 8px; border-radius:4px; border:1px solid rgba(184,204,255,.2); background:rgba(184,204,255,.06); color:var(--app-text-muted); cursor:pointer; }
.re-waste-presets button:hover { background:rgba(147,197,253,.15); color:#93c5fd; }
.re-proposal-frame { background:var(--app-field-bg); border:1.5px solid var(--app-field-border); border-radius:10px; padding:32px; max-width:900px; margin:20px auto; color:var(--app-field-text); }
.re-proposal-frame h2 { margin:0 0 4px; font-size:22px; }
.re-proposal-frame .prop-label { font-size:11px; color:var(--app-text-muted); text-transform:uppercase; letter-spacing:1px; margin-top:18px; margin-bottom:6px; }
.re-proposal-frame table { width:100%; border-collapse:collapse; margin:8px 0; }
.re-proposal-frame th { text-align:left; font-size:11px; padding:6px 10px; border-bottom:2px solid rgba(184,204,255,.15); color:var(--app-text-muted); }
.re-proposal-frame td { padding:6px 10px; border-bottom:1px solid rgba(184,204,255,.06); font-size:12px; }
.re-proposal-total-row td { font-weight:700; border-top:2px solid rgba(52,211,153,.3); font-size:14px; }
@media (max-width:768px) {
.re-tabs { overflow-x:auto; padding:0 4px; }
.re-tab { padding:10px 14px; font-size:12px; }
.re-form-section .form-row { grid-template-columns:1fr; }
.re-summary-bar { padding:10px 14px; }
}
/* ── End Roofing Estimator v2 ────────────────────────── */
.ss-grid .row-header {
background: var(--grey); font-size: 11px; text-align: center;
width: 42px; min-width: 42px; max-width: 42px;
cursor: pointer; border: 1px solid var(--border);
color: var(--app-text-muted); overflow: hidden;
}
.ss-sheet-tab {
padding: 4px 12px; border: 1px solid var(--border); border-bottom: none;
border-radius: 4px 4px 0 0; cursor: pointer; font-size: 12px;
background: var(--grey); white-space: nowrap; color: var(--app-text-primary);
}
.ss-sheet-tab.active { background: var(--app-field-bg); border-bottom-color: var(--app-field-bg); font-weight: 600; }
.ss-sheet-tab:hover { background: var(--app-field-bg); }
/* ── Presentations ── */
/* Thumbnails use a paper-white face (slides are content, not chrome) */
.pres-thumb { border: 2px solid var(--border); border-radius: 4px; cursor: pointer; overflow: hidden; background: var(--app-field-bg); aspect-ratio: 16/9; position: relative; min-height: 60px; }
.pres-thumb.active { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(var(--navy-rgb,31,73,125),.25); }
.pres-thumb:hover { border-color: var(--blue); }
.pres-slide-title { position: absolute; bottom: 4px; left: 4px; right: 4px; font-size: 9px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--app-text-primary); }
/* ── Email / Calendar ── */
.ec-email-row { display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; gap: 10px; color: var(--app-text-primary); }
.ec-email-row:hover { background: var(--app-field-bg); }
.ec-email-row.unread { font-weight: 600; }
.ec-email-from { font-size: 13px; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-email-subject { font-size: 13px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-email-date { font-size: 11px; color: var(--app-text-muted); min-width: 70px; text-align: right; }
.ec-priority-high { color: #EF4444; font-size: 10px; font-weight: 700; }
.ec-priority-low { color: var(--app-text-muted); font-size: 10px; }
.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-grid th { background: var(--grey); border: 1px solid var(--border); padding: 8px 6px; text-align: center; font-size: 12px; font-weight: 600; color: var(--app-text-primary); }
.cal-grid td { border: 1px solid var(--border); vertical-align: top; padding: 6px; min-height: 110px; height: 110px; font-size: 11px; cursor: pointer; color: var(--app-text-primary); background: var(--app-field-bg); width: calc(100% / 7); transition: background .15s; }
.cal-grid td:hover { background: rgba(var(--navy-rgb,31,73,125),.08); }
.cal-grid td.today { background: rgba(var(--navy-rgb,31,73,125),.12); outline: 2px solid var(--navy); z-index: 1; position: relative; }
.cal-grid td.other-month { background: var(--grey); color: var(--app-text-muted); }
.cal-grid td.cal-day-selected { background: rgba(59,130,246,.10); outline: 2px solid #3B82F6; z-index: 2; position: relative; }
.cal-day-num { font-size: 13px; font-weight: 700; margin-bottom: 4px; color: var(--app-text-primary); }
.cal-event-pill { border-radius: 4px; padding: 2px 5px; margin-bottom: 3px; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; color: #fff; line-height: 1.4; }
/* Day detail panel */
.cal-day-panel { border-top: 2px solid var(--border); padding: 18px; background: var(--app-field-bg); }
.cal-day-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.cal-day-panel-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--app-text-primary); }
.cal-day-panel-events { display: flex; flex-direction: column; gap: 8px; }
.cal-day-event-card { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--grey); cursor: pointer; transition: background .15s, border-color .15s; }
.cal-day-event-card:hover { background: rgba(var(--navy-rgb,31,73,125),.08); border-color: var(--navy); }
.cal-day-event-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.cal-day-event-info { flex: 1; min-width: 0; }
.cal-day-event-title { font-weight: 600; font-size: 13px; color: var(--app-text-primary); }
.cal-day-event-time { font-size: 11px; color: var(--app-text-muted); margin-top: 2px; }
.cal-day-event-meta { font-size: 11px; color: var(--app-text-muted); margin-top: 2px; display: flex; gap: 10px; }
.cal-day-event-type { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; text-transform: uppercase; color: #fff; }
.cal-day-no-events { text-align: center; padding: 24px; color: var(--app-text-muted); font-size: 13px; }
/* ── APP SHELL ─────────────────────────────────────────── */
#app { display: none; height: 100vh; position: relative; z-index: 1; border-radius: 18px; overflow: hidden; }
#app.layout-centered .content { width: 100%; max-width: 1240px; margin: 0 auto; }
#app.layout-fluid .content,
#app.layout-tiles .content { width: 100%; max-width: none; }
#app.layout-node_canvas #main {
display: grid;
grid-template-columns: minmax(0, 1fr) 440px;
grid-template-rows: 64px minmax(0, 1fr);
min-height: 100vh;
max-height: 100vh;
}
#app.layout-node_canvas .topbar {
grid-column: 1 / span 2;
grid-row: 1;
}
#app.layout-node_canvas .content {
grid-column: 1;
grid-row: 2;
min-width: 0;
overflow: auto;
}
#global-node-canvas-shell {
display: none;
grid-column: 2;
grid-row: 2;
min-width: 0;
border-left: 1px solid var(--border);
background: rgba(8, 12, 24, .72);
backdrop-filter: blur(8px);
flex-direction: column;
}
#global-node-canvas-shell .node-canvas-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
font-size: 12px;
color: var(--app-text-primary);
}
#global-node-canvas-shell .node-canvas-frame {
width: 100%;
height: 100%;
border: none;
background: #0B1020;
}
@media (max-width: 1200px) {
#app.layout-node_canvas #main {
grid-template-columns: 1fr;
grid-template-rows: 64px minmax(0, 1fr) 42vh;
max-height: none;
}
#app.layout-node_canvas .topbar {
grid-column: 1;
}
#app.layout-node_canvas .content {
grid-row: 2;
overflow: auto;
}
#global-node-canvas-shell {
grid-column: 1;
grid-row: 3;
border-left: none;
border-top: 1px solid var(--border);
min-height: 280px;
}
}
/* ── LAYOUT CLASSIC alias ───────────────────────────────── */
#app.layout-classic .content { width: 100%; max-width: none; }
/* ── TILE HUB LAYOUT ─────────────────────────────────────── */
#app.layout-tile_hub #sidebar { display: none !important; }
#app.layout-tile_hub #main { margin-left: 0 !important; }
/* Hub home page */
#section-tile_hub_home {
min-height: calc(100vh - 64px);
background: var(--app-bg, #0b1120);
display: flex;
flex-direction: column;
padding: 0;
}
.hub-hero {
text-align: center;
padding: 44px 40px 28px;
background: linear-gradient(180deg, rgba(66,87,255,.07) 0%, transparent 100%);
border-bottom: 1px solid rgba(255,255,255,.06);
}
.hub-hero h1 {
font-size: 26px;
font-weight: 700;
color: var(--app-text-primary);
margin-bottom: 6px;
}
.hub-hero p {
font-size: 14px;
color: var(--app-text-muted);
margin-bottom: 22px;
}
.hub-search-wrap {
max-width: 460px;
margin: 0 auto;
position: relative;
}
.hub-search-wrap input {
width: 100%;
padding: 10px 18px 10px 42px;
border-radius: 24px;
border: 1px solid var(--border);
background: var(--app-field-bg);
color: var(--app-field-text);
font-size: 14px;
outline: none;
transition: border-color .15s, box-shadow .15s;
}
.hub-search-wrap input:focus {
border-color: var(--blue, #4257ff);
box-shadow: 0 0 0 3px rgba(66,87,255,.15);
}
.hub-search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 15px;
pointer-events: none;
opacity: .55;
}
.hub-body {
flex: 1;
padding: 28px 44px 48px;
overflow-y: auto;
}
.hub-category-title {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--app-text-muted);
margin: 0 0 14px;
padding-bottom: 7px;
border-bottom: 1px solid var(--border);
}
.hub-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
gap: 16px;
margin-bottom: 36px;
}
.hub-card {
background: var(--app-field-bg);
border: 1.5px solid var(--border);
border-radius: 16px;
padding: 26px 16px 22px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 11px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
user-select: none;
position: relative;
overflow: hidden;
}
.hub-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(66,87,255,.05) 0%, transparent 70%);
opacity: 0;
transition: opacity .18s;
}
.hub-card:hover { transform: translateY(-5px) scale(1.018); box-shadow: 0 14px 40px rgba(66,87,255,.22); border-color: rgba(66,87,255,.55); }
.hub-card:hover::before { opacity: 1; }
.hub-card:active { transform: translateY(-2px) scale(1.008); }
.hub-icon-wrap {
width: 62px;
height: 62px;
border-radius: 15px;
background: linear-gradient(135deg, rgba(66,87,255,.16) 0%, rgba(84,46,163,.16) 100%);
border: 1px solid rgba(66,87,255,.22);
display: flex;
align-items: center;
justify-content: center;
font-size: 27px;
transition: background .18s, border-color .18s;
flex-shrink: 0;
}
.hub-card:hover .hub-icon-wrap {
background: linear-gradient(135deg, rgba(66,87,255,.32) 0%, rgba(84,46,163,.32) 100%);
border-color: rgba(66,87,255,.5);
}
.hub-card-name {
font-size: 13.5px;
font-weight: 600;
color: var(--app-text-primary);
text-align: center;
line-height: 1.3;
}
.hub-card-desc {
font-size: 11.5px;
color: var(--app-text-muted);
text-align: center;
line-height: 1.45;
}
.hub-card.hub-card-hidden { display: none !important; }
/* Hub topbar back button */
.hub-back-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 14px 5px 10px;
border-radius: 20px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.16);
color: var(--app-text-primary);
font-size: 13px;
cursor: pointer;
transition: background .15s;
}
.hub-back-btn:hover { background: rgba(255,255,255,.16); }
@media (max-width: 768px) {
.hub-body { padding: 20px 16px 32px; }
.hub-hero { padding: 32px 20px 22px; }
.hub-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; }
}
/* ── SIDEBAR ───────────────────────────────────────────── */
#sidebar {
position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
background: linear-gradient(165deg, rgba(66,87,255,.94) 0%, rgba(84,46,163,.94) 52%, rgba(24,18,56,.98) 100%);
display: flex; flex-direction: column; z-index: 100;
box-shadow: inset -1px 0 0 rgba(255,255,255,.08);
border-radius: 18px 0 0 18px;
}
.sidebar-brand {
padding: 11px 20px 9px; border-bottom: 1px solid rgba(255,255,255,.1);
display: flex; flex-direction: column; align-items: center; text-align: center;
}
.sidebar-logo { height: 56px; width: auto; max-width: 126px; display: block; margin: 0 auto 2px; object-fit: contain; }
/* ── Variant E: monolith caps + amber diamond separator (2026-04-15) ──
* Custom wordmark that extends the cube mark into the wordmark system.
* SPINDEN in Cabinet Grotesk 700 engineered caps, amber-diamond pivot,
* AI in amber caps — no pill. Pill styles below are kept as legacy
* for anywhere else that renders `.sidebar-wordmark-ai` outside the
* sidebar, but the sidebar/login scope overrides them. */
.sidebar-wordmark {
display: inline-flex; align-items: center; gap: 10px;
justify-content: center; width: 100%;
margin-top: 6px; line-height: 1;
}
.sidebar-wordmark .sidebar-wordmark-name,
.sidebar-brand .sidebar-wordmark-name {
font-family: 'Cabinet Grotesk', 'Satoshi', 'Geist', 'Inter', system-ui, sans-serif !important;
font-weight: 700 !important; font-style: normal !important;
font-size: 15px !important; letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: #fff !important;
}
.sidebar-wordmark .sidebar-wordmark-ai {
font-family: 'Cabinet Grotesk', 'Satoshi', 'Geist', 'Inter', system-ui, sans-serif;
font-weight: 700; font-style: normal;
font-size: 15px; letter-spacing: 0.18em;
text-transform: uppercase;
color: #FFC560;
background: transparent;
padding: 0; border-radius: 0;
box-shadow: none;
transform: none;
position: relative;
padding-left: 16px;
}
.sidebar-wordmark .sidebar-wordmark-ai::before {
content: '';
position: absolute;
left: 2px;
/* em-based offset: line-box 50% sits below cap-midline in caps,
* so lift by 0.07em to center on the visual middle of the letters.
* Scales automatically with font-size. */
top: calc(50% - 0.07em);
width: 0.4em; height: 0.4em;
background: #FFA621;
transform: translateY(-50%) rotate(45deg);
box-shadow: 0 0 6px rgba(255,166,33,.6),
inset 0 0 0 0.5px rgba(255,220,180,.4);
}
/* Legacy pill styling — preserved for any non-sidebar renders */
.sidebar-wordmark-ai {
font-family: 'Geist', 'Inter', system-ui, sans-serif;
font-weight: 800; font-style: normal;
font-size: 11px; letter-spacing: 0.08em;
text-transform: uppercase;
padding: 2px 6px; border-radius: 4px;
background: linear-gradient(135deg, #ffb347 0%, #ff8c1a 100%);
color: #1a0f00;
box-shadow: 0 0 8px rgba(255,165,50,0.45), inset 0 0 0 1px rgba(255,220,180,0.5);
transform: translateY(-2px);
}
.sidebar-brand p { color: rgba(255,255,255,.5); font-size: 11px; margin-top: 0; }
.site-health-badge {
margin-top: 4px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.2);
background: rgba(255,255,255,.13);
color: rgba(255,255,255,.9);
font-size: 10px;
font-weight: 600;
letter-spacing: .2px;
}
.site-health-scale {
position: relative;
width: 44px;
height: 6px;
border-radius: 999px;
background: linear-gradient(90deg, #27AE60 0%, #F39C12 55%, #E74C3C 100%);
overflow: hidden;
}
.site-health-dot {
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
border: 1px solid rgba(0,0,0,.2);
transform: translate(-50%, -50%);
transition: left .2s ease;
}
.site-health-badge.calm { box-shadow: 0 0 18px rgba(62, 181, 255, .35); }
.site-health-badge.amber { box-shadow: 0 0 18px rgba(255, 170, 55, .35); }
.smart-sidebar-ghost {
position: relative;
margin-top: 8px;
width: 100%;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.2);
background: linear-gradient(155deg, rgba(8,18,39,.58) 0%, rgba(27,40,74,.48) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 18px rgba(3,8,25,.35);
backdrop-filter: blur(10px);
padding: 8px 9px;
text-align: left;
transition: opacity .25s ease, max-height .3s ease, margin .25s ease, padding .25s ease;
max-height: 300px;
overflow: hidden;
}
.smart-sidebar-ghost.dismissed {
opacity: 0;
max-height: 0;
margin-top: 0;
padding: 0 9px;
border-color: transparent;
pointer-events: none;
}
.smart-sidebar-dismiss {
position: absolute;
top: 5px;
right: 5px;
width: 18px;
height: 18px;
border: none;
background: none;
color: rgba(255,255,255,.45);
font-size: 14px;
line-height: 1;
border-radius: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: color .15s;
padding: 0;
}
.smart-sidebar-dismiss:hover {
background: none;
color: rgba(255,255,255,.9);
}
.smart-sidebar-collapsed {
margin-top: 8px;
width: 100%;
display: none;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,.15);
background: rgba(255,255,255,.06);
cursor: pointer;
transition: background .15s, border-color .15s, opacity .25s ease;
user-select: none;
}
.smart-sidebar-collapsed.visible {
display: flex;
}
.smart-sidebar-collapsed:hover {
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.25);
}
.smart-sidebar-collapsed-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--success);
flex-shrink: 0;
box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent);
animation: smart-sidebar-dot-pulse 2s ease-out infinite;
}
.smart-sidebar-collapsed-label {
font-size: 10px;
font-weight: 600;
color: rgba(205,224,255,.78);
letter-spacing: .3px;
}
.smart-sidebar-collapsed-chevron {
margin-left: auto;
font-size: 10px;
color: rgba(255,255,255,.35);
transition: transform .2s;
}
.smart-sidebar-collapsed:hover .smart-sidebar-collapsed-chevron {
color: rgba(255,255,255,.6);
}
.smart-sidebar-kicker {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 9px;
letter-spacing: .85px;
text-transform: uppercase;
color: rgba(205,224,255,.82);
font-weight: 700;
}
.smart-sidebar-kicker-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--success);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent);
animation: smart-sidebar-dot-pulse 2s ease-out infinite;
}
.smart-sidebar-title {
margin-top: 6px;
font-size: 11px;
font-weight: 700;
color: rgba(243,248,255,.98);
line-height: 1.35;
}
.smart-sidebar-body {
margin-top: 4px;
font-size: 10px;
line-height: 1.35;
color: rgba(202,218,248,.84);
}
.smart-sidebar-chips {
margin-top: 6px;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.smart-sidebar-chips span {
display: inline-flex;
align-items: center;
padding: 2px 6px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.17);
background: rgba(255,255,255,.09);
color: rgba(226,238,255,.9);
font-size: 9px;
font-weight: 600;
}
.smart-sidebar-action {
margin-top: 7px;
width: 100%;
border-radius: 8px;
border: 1px solid rgba(163,196,255,.42);
background: linear-gradient(135deg, color-mix(in srgb, var(--navy) 62%, transparent), color-mix(in srgb, var(--blue) 68%, transparent));
color: var(--app-text-primary);
font-size: 10px;
font-weight: 700;
padding: 5px 7px;
cursor: pointer;
transition: transform .15s ease, filter .15s ease;
}
.smart-sidebar-action:hover {
transform: translateY(-1px);
filter: brightness(1.06);
}
.smart-sidebar-ghost.state-warning {
border-color: color-mix(in srgb, var(--warning) 52%, rgba(255,255,255,.2));
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 20px color-mix(in srgb, var(--warning) 25%, rgba(3,8,25,.25));
}
.smart-sidebar-ghost.state-warning .smart-sidebar-kicker-dot {
background: var(--warning);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning) 52%, transparent);
}
.smart-sidebar-ghost.state-critical {
border-color: color-mix(in srgb, var(--danger) 55%, rgba(255,255,255,.2));
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 12px 22px color-mix(in srgb, var(--danger) 30%, rgba(3,8,25,.25));
}
.smart-sidebar-ghost.state-critical .smart-sidebar-kicker-dot {
background: var(--danger);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 52%, transparent);
}
@keyframes smart-sidebar-dot-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); }
70% { box-shadow: 0 0 0 7px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
.sidebar-nav { flex: 1; padding: 16px 0; overflow-y: auto; }
.sidebar-nav,
.table-wrap,
#ai-messages {
scrollbar-width: thin;
scrollbar-color: rgba(150,178,246,.62) rgba(255,255,255,.05);
}
.nav-section { padding: 8px 20px 4px; color: rgba(255,255,255,.35); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.nav-group-header {
display: flex; align-items: center; gap: 10px; padding: 8px 20px 4px;
color: rgba(255,255,255,.35); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
cursor: pointer; user-select: none; transition: color .15s;
}
.nav-group-header:hover { color: rgba(255,255,255,.65); }
.nav-group-header .nav-group-chevron { margin-left: auto; font-size: 12px; opacity: .5; transition: transform .2s; }
.nav-group.collapsed .nav-group-chevron { transform: rotate(-90deg); }
.nav-group-items { overflow: hidden; }
.nav-group.collapsed .nav-group-items { display: none; }
.nav-item {
display: flex; align-items: center; gap: 10px; padding: 10px 20px;
color: rgba(255,255,255,.7); cursor: pointer; transition: all .15s; font-size: 13px; font-weight: 500;
border-left: 3px solid transparent;
}
body[data-sidebar-focus="ops"] .nav-item[data-focus-related="0"] { opacity: .34; filter: saturate(.62); }
body[data-sidebar-focus="ops"] .nav-item[data-focus-related="1"] { opacity: .98; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active { background: rgba(255,255,255,.12); color: #fff; border-left-color: var(--accent); }
.nav-item.nav-state-warning { border-left-color: color-mix(in srgb, var(--warning) 72%, transparent); }
.nav-item.nav-state-critical { border-left-color: color-mix(in srgb, var(--danger) 75%, transparent); }
.nav-item .icon {
width: 24px;
height: 24px;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 7px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18);
color: rgba(232,241,255,.95);
position: relative;
}
.nav-context-badge {
margin-left: auto;
min-width: 20px;
height: 18px;
padding: 0 6px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.22);
background: rgba(110,192,255,.2);
color: rgba(237,247,255,.98);
font-size: 10px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.nav-context-badge.state-warning {
background: color-mix(in srgb, var(--warning) 44%, transparent);
border-color: color-mix(in srgb, var(--warning) 62%, rgba(255,255,255,.2));
}
.nav-context-badge.state-critical {
background: color-mix(in srgb, var(--danger) 48%, transparent);
border-color: color-mix(in srgb, var(--danger) 66%, rgba(255,255,255,.2));
}
.nav-item .icon .live-pip {
position: absolute;
top: -4px;
right: -4px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #61F2B0;
border: 1px solid rgba(2,13,10,.45);
box-shadow: 0 0 0 0 rgba(97,242,176,.46);
opacity: 0;
pointer-events: none;
}
.nav-item .icon.has-live-pulse .live-pip { opacity: 1; animation: nav-pip-pulse 1.6s ease-out infinite; }
.nav-item .icon.has-pulse-shimmer {
animation: nav-icon-shimmer 1.25s linear 2;
}
.nav-item .icon.has-progress-ring::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 10px;
background: conic-gradient(from -90deg, rgba(111,214,255,.9) var(--ring-progress, 0deg), rgba(111,214,255,.18) 0deg);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
pointer-events: none;
}
@keyframes nav-pip-pulse {
0% { box-shadow: 0 0 0 0 rgba(97,242,176,.5); }
70% { box-shadow: 0 0 0 9px rgba(97,242,176,0); }
100% { box-shadow: 0 0 0 0 rgba(97,242,176,0); }
}
@keyframes nav-icon-shimmer {
0% { filter: brightness(1); }
40% { filter: brightness(1.26) drop-shadow(0 0 8px rgba(124, 210, 255, .38)); }
100% { filter: brightness(1); }
}
.sidebar-footer {
padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.1);
}
.user-info { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.user-avatar { width: 32px; height: 32px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; }
.user-name { color: #fff; font-size: 13px; font-weight: 600; }
.user-email { color: rgba(255,255,255,.5); font-size: 11px; }
.btn-logout { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); border: none; width: 100%; padding: 8px; border-radius: 6px; cursor: pointer; font-size: 12px; transition: background .15s; }
.btn-logout:hover { background: rgba(255,255,255,.2); color: #fff; }
/* ── My Profile page ─────────────────────────────────────────────── */
.prof-page { max-width: 860px; margin: 0 auto; padding: 8px 0; }
.prof-hero {
display: flex;
align-items: center;
gap: 20px;
padding: 24px;
background: var(--app-field-bg);
border: 1px solid var(--border);
border-radius: 14px;
margin-bottom: 0;
position: relative;
}
.prof-avatar-wrap {
position: relative;
flex-shrink: 0;
}
.prof-avatar-lg {
width: 88px;
height: 88px;
border-radius: 50%;
background: var(--navy);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 700;
color: #fff;
overflow: hidden;
border: 3px solid var(--border);
transition: border-color .2s;
}
.prof-avatar-wrap:hover .prof-avatar-lg { border-color: var(--blue); }
.prof-photo-btn {
position: absolute;
bottom: 2px;
right: 2px;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--blue);
color: #fff;
border: 2px solid var(--app-field-bg);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 13px;
transition: transform .15s, background .15s;
}
.prof-photo-btn:hover { transform: scale(1.12); background: var(--accent); }
.prof-hero-text { flex: 1; min-width: 0; }
.prof-hero-text .prof-name { font-size: 1.3rem; font-weight: 700; color: var(--app-text-primary); }
.prof-hero-text .prof-title { font-size: 13px; color: var(--app-text-muted); margin-top: 3px; }
.prof-hero-text .prof-meta { font-size: 12px; color: var(--app-text-muted); margin-top: 4px; opacity: .75; }
.prof-hero-actions { flex-shrink: 0; }
/* Completion badge */
.prof-completion-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 48px; padding: 4px 12px;
border-radius: 20px; font-size: 12px; font-weight: 700;
background: var(--app-field-bg); border: 1.5px solid var(--border);
color: var(--app-text-muted);
}
.prof-badge-low { border-color: var(--danger); color: var(--danger); background: rgba(239,68,68,.08); }
.prof-badge-mid { border-color: var(--warning); color: var(--warning); background: rgba(245,158,11,.08); }
.prof-badge-high { border-color: var(--success); color: var(--success); background: rgba(34,197,94,.08); }
/* Tabs */
.prof-tabs {
display: flex;
gap: 0;
border-bottom: 2px solid var(--border);
margin-bottom: 20px;
margin-top: 16px;
overflow-x: auto;
}
.prof-tab {
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 18px;
border: none; background: none;
font-size: 13px; font-weight: 600;
color: var(--app-text-muted);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
white-space: nowrap;
transition: color .15s, border-color .15s;
}
.prof-tab:hover { color: var(--app-text-primary); }
.prof-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.prof-tab .material-symbols-outlined { font-size: 18px; }
/* Tab content */
.prof-tab-content { display: none; }
.prof-tab-content.active { display: block; animation: profFadeIn .2s ease; }
@keyframes profFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* Info grid */
.prof-info-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
.prof-info-item label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--app-text-muted); margin-bottom: 4px; display: block; }
.prof-info-item .prof-val { font-size: 14px; color: var(--app-text-primary); font-weight: 500; }
/* Form grid */
.prof-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.prof-field label {
font-size: 12px;
color: var(--app-text-muted);
display: block;
margin-bottom: 4px;
font-weight: 500;
}
.prof-field textarea.form-control { resize: vertical; min-height: 60px; }
.prof-char-count {
font-size: 11px;
color: var(--app-text-muted);
text-align: right;
margin-top: 4px;
opacity: .7;
}
/* Password form */
.prof-password-form { max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.prof-pw-wrap {
position: relative;
display: flex;
align-items: center;
}
.prof-pw-wrap .form-control { padding-right: 40px; }
.prof-pw-toggle {
position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
background: none; border: none; cursor: pointer;
color: var(--app-text-muted); padding: 2px;
display: flex; align-items: center; justify-content: center;
}
.prof-pw-toggle:hover { color: var(--app-text-primary); }
.prof-pw-toggle .material-symbols-outlined { font-size: 18px; }
/* Password strength bar */
.prof-pw-strength {
height: 4px;
background: var(--border);
border-radius: 2px;
margin-top: 8px;
overflow: hidden;
}
.prof-pw-bar {
height: 100%;
border-radius: 2px;
width: 0;
transition: width .3s, background .3s;
}
.prof-pw-bar.pw-weak { background: var(--danger); }
.prof-pw-bar.pw-fair { background: var(--warning); }
.prof-pw-bar.pw-good { background: var(--blue); }
.prof-pw-bar.pw-strong { background: var(--success); }
.prof-pw-hint {
font-size: 11px;
margin-top: 4px;
font-weight: 600;
}
.prof-pw-hint.pw-weak { color: var(--danger); }
.prof-pw-hint.pw-fair { color: var(--warning); }
.prof-pw-hint.pw-good { color: var(--blue); }
.prof-pw-hint.pw-strong { color: var(--success); }
/* Actions row */
.prof-actions { display: flex; align-items: center; }
/* Ghost button */
.btn-ghost {
background: transparent;
color: var(--app-text-muted);
border: 1px solid var(--border);
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
transition: background .15s, color .15s;
}
.btn-ghost:hover { background: var(--app-field-bg); color: var(--app-text-primary); }
/* Mobile responsiveness */
@media (max-width: 640px) {
.prof-hero { flex-direction: column; text-align: center; gap: 12px; padding: 16px; }
.prof-hero-text .prof-meta { text-align: center; }
.prof-hero-actions { position: static; }
.prof-form-grid { grid-template-columns: 1fr; }
.prof-tabs { gap: 0; }
.prof-tab { padding: 8px 12px; font-size: 12px; }
.prof-tab .material-symbols-outlined { display: none; }
}
.user-info:hover .user-name { color: var(--accent); }
#section-crm.crm-theme-restaurant .card-header { border-left: 4px solid var(--success); padding-left: 12px; }
#section-crm.crm-theme-casino .card-header { border-left: 4px solid var(--warning); padding-left: 12px; }
#section-crm.crm-theme-retail .card-header { border-left: 4px solid var(--blue); padding-left: 12px; }
#section-crm.crm-theme-construction .card-header { border-left: 4px solid var(--navy); padding-left: 12px; }
#section-crm.crm-theme-hospitality .card-header { border-left: 4px solid var(--accent); padding-left: 12px; }
#section-crm.crm-theme-service .card-header { border-left: 4px solid var(--danger); padding-left: 12px; }
#section-crm.crm-theme-online_retailer .card-header { border-left: 4px solid var(--purple, var(--blue)); padding-left: 12px; }
.crm-tool-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px; }
.crm-tool-btn { justify-content:center; }
/* CRM Kanban Board */
.kanban-board {
display: flex;
gap: 1rem;
overflow-x: auto;
padding-bottom: 1rem;
height: calc(100vh - 180px);
align-items: flex-start;
}
.kanban-column {
flex: 0 0 300px;
background: var(--grey);
border-radius: 8px;
display: flex;
flex-direction: column;
max-height: 100%;
}
.kanban-column-header {
padding: 1rem;
font-weight: bold;
border-bottom: 2px solid var(--border);
text-transform: capitalize;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--app-text-primary);
}
.kanban-cards {
flex: 1;
padding: 0.75rem;
overflow-y: auto;
min-height: 150px;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.kanban-card {
background: var(--app-field-bg);
border: 1px solid var(--border);
border-radius: 6px;
padding: 1rem;
cursor: grab;
color: var(--app-text-primary);
transition: transform 0.1s, box-shadow 0.1s;
}
.kanban-card:hover {
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
border-color: var(--blue);
}
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging { opacity: 0.5; transform: scale(0.98); }
.kanban-card-title { font-weight: bold; margin-bottom: 0.25rem; font-size: 1.05rem; }
.kanban-card-subtitle { color: var(--app-text-muted); font-size: 0.85rem; margin-bottom: 0.75rem; }
.kanban-card-value { color: var(--blue); font-weight: bold; font-size: 1.1rem; }
/* ── JOB BOARD ───────────────────────────────────────────── */
.jb-date-col {
min-width: 160px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--grey);
overflow: hidden;
}
.jb-date-header {
padding: 6px 10px;
border-bottom: 1px solid var(--border);
font-size: 11px;
font-weight: 700;
text-align: center;
color: var(--app-text-muted);
text-transform: uppercase;
letter-spacing: .05em;
}
.jb-date-header.jb-today {
color: var(--blue);
border-bottom-color: var(--blue);
}
.jb-cell {
min-height: 80px;
padding: 6px;
}
.jb-cell.jb-drag-over {
background: rgba(100,160,255,.10);
border-radius: 6px;
outline: 2px dashed var(--blue);
}
.jb-card {
background: var(--app-field-bg);
border: 1px solid var(--border);
border-radius: 7px;
padding: 7px 9px;
margin-bottom: 6px;
cursor: grab;
font-size: 12px;
transition: box-shadow .15s ease, border-color .15s ease;
user-select: none;
}
.jb-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.25); border-color: var(--blue); }
.jb-card.jb-dragging { opacity: .45; transform: scale(.96); }
.jb-card-wo { font-weight: 700; font-size: 11px; color: var(--blue); margin-bottom: 2px; }
.jb-card-summary { font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
.jb-card-meta { font-size: 11px; color: var(--app-text-muted); }
.jb-card-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.jb-badge {
font-size: 10px; padding: 1px 6px; border-radius: 8px; font-weight: 600;
}
.jb-badge-travel { background: rgba(100,200,255,.15); color: #7ab4ff; border: 1px solid rgba(100,200,255,.3); }
.jb-badge-sms { background: rgba(80,220,120,.15); color: #52d68a; border: 1px solid rgba(80,220,120,.3); }
.jb-badge-status { background: rgba(255,255,255,.08); color: var(--app-text-muted); border: 1px solid var(--border); }
.jb-badge-priority-urgent { background: rgba(255,80,80,.15); color: #ff7070; border: 1px solid rgba(255,80,80,.3); }
.jb-badge-priority-high { background: rgba(255,180,50,.15); color: #f0c040; border: 1px solid rgba(255,180,50,.3); }
.jb-card-actions { display: flex; gap: 4px; margin-top: 6px; }
.jb-btn {
font-size: 10px; padding: 2px 7px; border-radius: 5px; border: 1px solid var(--border);
cursor: pointer; background: transparent; color: var(--app-text-muted);
transition: background .12s, color .12s;
}
.jb-btn:hover { background: rgba(255,255,255,.08); color: var(--app-text-primary); }
.jb-btn-enroute { border-color: rgba(80,220,120,.5); color: #52d68a; }
.jb-btn-enroute:hover { background: rgba(80,220,120,.15); }
.jb-tech-label {
font-size: 12px; font-weight: 600; padding: 8px 10px;
border-bottom: 1px solid var(--border); white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; max-width: 160px;
color: var(--app-text-primary);
}
/* ── MAIN CONTENT ──────────────────────────────────────── */
#main { margin-left: var(--sidebar-w); height: 100vh; display: flex; flex-direction: column; border-radius: 0 18px 18px 0; overflow: hidden; background: #060C1B; }
.topbar {
background: rgba(12,17,33,.82); padding: 0 28px; height: 64px; display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid rgba(255,255,255,.07); position: sticky; top: 0; z-index: 50;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.topbar-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--grey);
color: var(--text);
font-size: 11px;
font-weight: 600;
line-height: 1;
}
.topbar-right {
display: inline-flex;
align-items: center;
gap: 6px;
}
.topbar-timeclock {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 6px;
border: 1px solid var(--border);
border-radius: 999px;
background: rgba(255,255,255,.04);
}
.topbar-timeclock-status {
font-size: 11px;
color: var(--app-text-muted);
white-space: nowrap;
padding: 0 4px;
}
.topbar-timeclock-btn {
border: 1px solid var(--border);
border-radius: 999px;
background: var(--grey);
color: var(--app-text-primary);
font-size: 11px;
font-weight: 600;
line-height: 1;
padding: 6px 10px;
cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.topbar-timeclock-btn:hover {
border-color: var(--app-field-focus);
}
.topbar-timeclock-btn:disabled {
opacity: .55;
cursor: not-allowed;
}
.topbar-timeclock-btn.is-in {
background: rgba(16, 185, 129, .18);
border-color: rgba(16, 185, 129, .45);
color: #b9ffe4;
}
.topbar-timeclock-btn.is-out {
background: rgba(239, 68, 68, .15);
border-color: rgba(239, 68, 68, .4);
color: #ffd3d3;
}
.topbar-timeclock.is-clocked-in .topbar-timeclock-status {
color: #b9ffe4;
}
.topbar-timeclock.is-blocked .topbar-timeclock-status {
color: var(--app-text-muted);
}
.topbar-icon-group {
display: inline-flex;
align-items: center;
gap: 8px;
height: 44px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
border-radius: 999px;
padding: 0 12px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #94A3B8;
}
.topbar-icon-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: none;
border-radius: 999px;
background: transparent;
color: inherit !important;
cursor: pointer;
transition: background .15s ease, color .15s ease, filter .15s ease, transform .15s ease;
flex-shrink: 0;
}
.topbar-icon-svg {
width: 21px;
height: 21px;
stroke: currentColor !important;
stroke-width: 1.5;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.topbar-icon-svg path,
.topbar-icon-svg circle,
.topbar-icon-svg rect,
.topbar-icon-svg line,
.topbar-icon-svg polyline,
.topbar-icon-svg polygon {
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.topbar-icon-btn:hover {
background: rgba(255,255,255,.06);
color: #22D3EE !important;
filter: drop-shadow(0 0 3px rgba(34, 211, 238, .16));
transform: translateY(-0.5px);
}
.topbar-icon-btn:active {
background: rgba(255,255,255,.1);
}
.topbar-icon-btn.is-ai-active {
filter: drop-shadow(0 0 3px rgba(56, 189, 248, .15));
}
.topbar-icon-btn.is-ai-active .topbar-icon-svg-ai {
stroke: url(#topbar-ai-icon-gradient);
}
.topbar-icon-btn.is-ai-active .topbar-icon-svg-ai path,
.topbar-icon-btn.is-ai-active .topbar-icon-svg-ai rect,
.topbar-icon-btn.is-ai-active .topbar-icon-svg-ai circle,
.topbar-icon-btn.is-ai-active .topbar-icon-svg-ai line,
.topbar-icon-btn.is-ai-active .topbar-icon-svg-ai polyline,
.topbar-icon-btn.is-ai-active .topbar-icon-svg-ai polygon {
stroke: url(#topbar-ai-icon-gradient) !important;
}
.topbar-notifications {
position: relative;
}
.topbar-notify-badge {
position: absolute;
top: 3px;
right: 3px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--blue);
color: #fff;
font-size: 9px;
font-weight: 700;
line-height: 1;
pointer-events: none;
box-shadow: 0 0 0 2px var(--app-field-bg);
}
.topbar-notify-led-dot {
position: absolute;
top: 6px;
right: 5px;
width: 8px;
height: 8px;
border-radius: 999px;
background: #EF4444;
pointer-events: none;
box-shadow: 0 0 8px rgba(239,68,68,0.8);
}
.topbar-notify-led-ping {
position: absolute;
top: 6px;
right: 5px;
width: 8px;
height: 8px;
border-radius: 999px;
background: rgba(239,68,68,.65);
pointer-events: none;
animation: topbar-notify-led-ping 1.35s cubic-bezier(.2, .9, .2, 1) infinite;
}
@keyframes topbar-notify-led-ping {
0% {
transform: scale(1);
opacity: .75;
}
100% {
transform: scale(2.3);
opacity: 0;
}
}
.topbar-notify-menu {
position: absolute;
right: 0;
top: calc(100% + 10px);
width: min(460px, calc(100vw - 28px));
max-height: min(68vh, 560px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
/* Solid opaque background — fixes prior over-transparent field var */
background: #0f1626;
background: linear-gradient(180deg, #131b2e 0%, #0d1422 100%);
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.45);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
overflow: hidden;
display: none;
z-index: 2300;
}
@media (max-width: 1200px) {
.topbar-timeclock-status {
display: none;
}
}
.topbar-notifications.open .topbar-notify-menu {
display: flex;
flex-direction: column;
}
.topbar-notify-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
color: var(--app-text-primary);
}
.topbar-notify-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 12px;
border-bottom: 1px solid var(--border);
}
.topbar-notify-check {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--app-text-muted);
font-size: 12px;
}
.topbar-notify-mutes {
display: flex;
align-items: center;
gap: 7px;
padding: 8px 12px;
border-bottom: 1px solid var(--border);
}
.topbar-mute-chip {
border: 1px solid var(--border);
border-radius: 999px;
background: var(--grey);
color: var(--app-text-muted);
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
cursor: pointer;
transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.topbar-mute-chip:hover {
border-color: var(--app-field-focus);
color: var(--app-text-primary);
}
.topbar-mute-chip.muted {
background: rgba(148, 163, 184, .2);
color: var(--app-text-muted);
border-color: rgba(148, 163, 184, .55);
text-decoration: line-through;
}
.topbar-notify-list {
overflow: auto;
padding: 10px;
display: flex;
flex-direction: column;
gap: 9px;
}
.topbar-notify-item {
border: 1px solid var(--border);
border-radius: 11px;
background: var(--grey);
padding: 10px;
}
.topbar-notify-message {
border-left: 3px solid rgba(59, 130, 246, .75);
}
.topbar-notify-message.is-read {
opacity: .72;
border-left-color: rgba(148, 163, 184, .52);
}
.topbar-notify-insight {
border-left: 3px solid var(--blue);
}
.topbar-notify-incident {
border-left: 3px solid var(--warning, #f59e0b);
}
.topbar-notify-title {
font-size: 11px;
color: var(--app-text-muted);
text-transform: uppercase;
letter-spacing: .35px;
margin-bottom: 4px;
}
.topbar-notify-summary {
color: var(--app-text-primary);
font-size: 13px;
font-weight: 600;
line-height: 1.35;
}
.topbar-notify-detail {
color: var(--app-text-muted);
font-size: 12px;
margin-top: 3px;
line-height: 1.35;
}
.topbar-notify-meta {
color: var(--app-text-muted);
font-size: 11px;
margin-top: 7px;
}
.topbar-notify-actions {
display: flex;
align-items: center;
gap: 7px;
margin-top: 9px;
}
.topbar-inline-reply {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--border);
}
.topbar-inline-reply-input {
width: 100%;
resize: vertical;
min-height: 48px;
border: 1px solid var(--app-field-border);
border-radius: 8px;
padding: 7px 9px;
background: var(--app-field-bg);
color: var(--app-field-text);
}
.topbar-inline-reply-input:focus {
border-color: var(--app-field-focus);
box-shadow: 0 0 0 2px rgba(var(--navy-rgb, 31, 73, 125), .18);
outline: none;
}
.topbar-inline-reply-actions {
margin-top: 7px;
display: flex;
gap: 7px;
justify-content: flex-end;
}
.topbar-notify-empty {
border: 1px dashed var(--border);
border-radius: 10px;
padding: 14px;
color: var(--app-text-muted);
text-align: center;
font-size: 12px;
}
.topbar-search {
position: relative;
width: min(44vw, 500px);
min-width: 260px;
}
.topbar-search-icon {
position: absolute;
left: 11px;
top: 50%;
transform: translateY(-50%);
color: var(--app-text-muted);
font-size: 13px;
pointer-events: none;
}
.topbar-search-input {
width: 100%;
height: 36px;
padding: 8px 10px 8px 30px;
border-radius: 999px;
border: 1px solid var(--app-field-border);
background: var(--app-field-bg);
color: var(--app-field-text);
}
.topbar-search-input:focus {
border-color: var(--app-field-focus);
box-shadow: 0 0 0 2px rgba(var(--navy-rgb, 31, 73, 125), .18);
outline: none;
}
.topbar-search-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 100%;
z-index: 2000;
padding: 8px;
max-height: 420px;
overflow-y: auto;
}
.global-search-msg {
padding: 8px;
color: var(--app-text-muted);
font-size: 12px;
}
.global-search-ai {
margin-bottom: 10px;
border-left: 3px solid var(--blue);
background: var(--grey);
border-radius: 8px;
padding: 8px 10px;
}
.global-search-ai-label {
color: var(--blue);
font-size: 11px;
font-weight: 700;
letter-spacing: .2px;
text-transform: uppercase;
}
.global-search-ai-text {
margin-top: 3px;
font-size: 13px;
color: var(--app-text-primary);
line-height: 1.35;
}
.global-search-group-title {
margin: 10px 2px 6px;
color: var(--app-text-muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .25px;
}
.global-search-item {
padding: 8px;
border-radius: 8px;
cursor: pointer;
}
.global-search-item:hover {
background: var(--grey);
}
.global-search-item-title {
color: var(--app-text-primary);
font-size: 13px;
font-weight: 600;
}
.global-search-item-subtitle {
color: var(--app-text-muted);
font-size: 11px;
margin-top: 1px;
}
.topbar-layout-switch {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 9px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--grey);
color: var(--app-text-muted);
font-size: 11px;
font-weight: 700;
letter-spacing: .2px;
}
.topbar-layout-switch select {
border: 1px solid var(--border);
border-radius: 999px;
background: var(--app-field-bg);
color: var(--app-text-primary);
font-size: 11px;
font-weight: 600;
padding: 3px 9px;
outline: none;
}
.topbar-layout-switch select:focus {
border-color: var(--app-field-focus);
box-shadow: 0 0 0 2px rgba(var(--navy-rgb, 31, 73, 125), .18);
}
.topbar-title { font-size: 18px; font-weight: 700; color: #F4F7FF; }
.topbar-subtitle { font-size: 12px; color: #9AA6D1; }
.content { padding: 28px; flex: 1; min-height: 0; overflow-y: auto; }
@media screen and (max-width: 980px) {
.topbar-search {
width: min(40vw, 360px);
min-width: 180px;
}
}
@media screen and (max-width: 768px) {
.topbar-search {
display: none;
}
.topbar-notify-menu {
right: -8px;
width: min(430px, calc(100vw - 14px));
}
.topbar-notify-controls {
flex-wrap: wrap;
}
.topbar-notify-mutes {
flex-wrap: wrap;
}
}
/* ── CARDS ─────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; }
.stat-card {
background: var(--surface-2);
border-radius: 14px;
padding: 20px;
border: 1px solid var(--surface-border);
display: flex;
align-items: center;
gap: 16px;
backdrop-filter: blur(var(--surface-blur));
-webkit-backdrop-filter: blur(var(--surface-blur));
box-shadow: var(--surface-shadow-md);
position: relative;
isolation: isolate;
overflow: hidden;
transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s cubic-bezier(.2,.7,.3,1), border-color .22s ease;
}
.stat-card::before {
content: '';
position: absolute;
inset: 0;
background: var(--surface-shine);
pointer-events: none;
z-index: -1;
}
.stat-card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: var(--surface-rim);
pointer-events: none;
}
.stat-card:hover {
transform: translateY(-3px);
border-color: var(--surface-border-accent);
box-shadow: var(--surface-shadow-hover);
}
.stat-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.stat-icon.blue { background: linear-gradient(135deg, rgba(95,180,255,.3), rgba(66,112,240,.22)); border: 1px solid rgba(126,188,255,.38); color: #DBEEFF; }
.stat-icon.green { background: linear-gradient(135deg, rgba(79,229,170,.26), rgba(50,176,132,.22)); border: 1px solid rgba(109,239,186,.35); color: #E1FFF3; }
.stat-icon.orange { background: linear-gradient(135deg, rgba(255,188,110,.3), rgba(231,123,69,.22)); border: 1px solid rgba(255,197,126,.35); color: #FFF1DD; }
.stat-icon.purple { background: linear-gradient(135deg, rgba(185,137,255,.3), rgba(118,93,236,.22)); border: 1px solid rgba(197,156,255,.34); color: #F2E9FF; }
.stat-icon.campaign { background: linear-gradient(135deg, rgba(201,74,89,.4), rgba(143,43,58,.32)); border: 1px solid rgba(212,102,116,.42); color: #FFE9ED; }
.stat-value { font-size: 28px; font-weight: 700; color: #F2F6FF; line-height: 1; }
.stat-label { font-size: 12px; color: #9CA8D0; margin-top: 4px; }
.stat-trend { font-size: 11px; margin-top: 4px; font-weight: 600; line-height: 1.2; }
.stat-trend-up { color: color-mix(in srgb, var(--app-success, #4ade80) 85%, var(--app-text-primary)); }
.stat-trend-dn { color: color-mix(in srgb, var(--app-danger, #f87171) 85%, var(--app-text-primary)); }
.stat-trend-neutral { color: var(--app-text-muted); }
/* ── SECTIONS ──────────────────────────────────────────── */
.section { display: none !important; }
.section.active { display: block !important; }
.section.active[class*="floorplan"] { display: flex !important; }
.card {
background: var(--surface-2);
border-radius: 14px;
border: 1px solid var(--surface-border);
margin-bottom: 24px;
backdrop-filter: blur(var(--surface-blur));
-webkit-backdrop-filter: blur(var(--surface-blur));
box-shadow: var(--surface-shadow-md);
position: relative;
isolation: isolate;
overflow: hidden;
transition: transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s cubic-bezier(.2,.7,.3,1), border-color .24s ease;
}
.card::before {
content: '';
position: absolute;
inset: 0;
background: var(--surface-shine);
pointer-events: none;
z-index: -1;
}
.card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: var(--surface-rim);
pointer-events: none;
z-index: 1;
}
.card:hover {
transform: translateY(-2px);
border-color: var(--surface-border-accent);
box-shadow: var(--surface-shadow-hover);
}
.card-header { padding: 16px 20px; border-bottom: 1px solid var(--surface-border); display: flex; align-items: center; justify-content: space-between; }
.card-title { font-size: 15px; font-weight: 700; color: var(--app-text-primary); }
.card-body { padding: 20px; }
#dash-health-hero,
#dash-active-signal-hero {
box-shadow: 0 24px 56px rgba(96, 132, 255, .08), 0 0 60px rgba(93, 230, 215, .08);
}
#dash-health-score {
filter: drop-shadow(0 0 24px rgba(121, 255, 201, .22));
}
#dash-ws-widget-cards .card {
border-color: transparent;
background: linear-gradient(155deg, rgba(23,31,54,.72), rgba(16,22,40,.52));
box-shadow: 0 12px 24px rgba(2,5,16,.24);
}
#dash-ws-widget-cards .card .card-header {
border-bottom: none;
padding-bottom: 8px;
}
.dm-quickstart {
border: 1px solid var(--app-field-border);
background: var(--app-field-bg);
border-radius: 10px;
padding: 10px 12px;
margin-bottom: 12px;
}
.dm-quickstart strong { color: var(--app-text-primary); }
.dm-quickstart p { margin: 0; font-size: 12px; color: var(--app-text-muted); line-height: 1.45; }
.dm-selected-row {
box-shadow: inset 0 0 0 1.5px rgba(124, 210, 255, .65);
background: rgba(124, 210, 255, .08);
}
#dm-selected-note {
padding: 8px 10px;
border-radius: 8px;
border: 1px solid var(--app-field-border);
background: var(--app-field-bg);
}
.dm-helper {
font-size: 11px;
color: var(--app-text-muted);
margin-top: 4px;
}
/* Document Management Dropzone */
.dm-dropzone {
border: 2px dashed var(--border);
border-radius: 8px;
padding: 3rem 1rem;
text-align: center;
color: var(--app-text-muted);
cursor: pointer;
background-color: var(--app-field-bg);
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.dm-dropzone:hover {
border-color: var(--app-text-muted);
}
.dm-dropzone.dragover {
background-color: var(--grey);
border-color: var(--blue);
color: var(--blue);
}
.widget-draggable {
cursor: grab;
}
.widget-draggable.dragging {
opacity: .6;
transform: scale(.99);
}
.widget-drop-target {
outline: 1.5px dashed rgba(137, 196, 255, .5);
outline-offset: 2px;
}
/* ── Dashboard Tile System ─────────────────────────────────────── */
.dash-toolbar {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 0 14px; flex-wrap: wrap; gap: 8px;
}
.dash-toolbar-left { display: flex; align-items: center; gap: 10px; }
.dash-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-board-title { font-size: 16px; font-weight: 700; color: var(--app-text-primary); }
.dash-live-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #22c55e; box-shadow: 0 0 6px #22c55e88;
animation: dash-pulse 2s infinite;
}
@keyframes dash-pulse {
0%,100% { opacity:1; transform:scale(1); }
50% { opacity:.5; transform:scale(1.35); }
}
.dash-tile-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 14px;
margin-bottom: 20px;
}
.dash-tile {
background: var(--app-field-bg);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
display: flex; flex-direction: column;
transition: box-shadow .15s, opacity .2s;
position: relative;
}
.dash-tile.tile-dragging { opacity: .4; transform: scale(.98); }
.dash-tile.tile-drag-over { box-shadow: 0 0 0 2px var(--blue); }
.dash-tile-header {
display: flex; align-items: center; gap: 6px;
padding: 10px 12px 8px;
border-bottom: 1px solid var(--border);
}
.dash-tile-drag-handle {
cursor: grab; color: var(--muted); font-size: 14px;
line-height: 1; user-select: none; padding: 2px 3px; opacity: 0;
transition: opacity .15s;
}
.dash-edit-mode .dash-tile-drag-handle { opacity: 1; }
.dash-tile-drag-handle:active { cursor: grabbing; }
.dash-tile-icon {
font-family: 'Material Symbols Outlined';
font-weight: 500;
font-style: normal;
font-size: 16px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
color: #7eb8f7;
opacity: 0.85;
flex-shrink: 0;
}
.dash-tile-title { flex: 1; font-size: 12px; font-weight: 600; color: var(--app-text-primary); }
.dash-tile-category {
font-size: 10px; padding: 1px 6px; border-radius: 8px;
background: rgba(46,117,182,.18); color: #7eb8f7; font-weight: 500;
}
.dash-tile-remove {
cursor: pointer; color: var(--muted); font-size: 16px;
padding: 1px 5px; border-radius: 5px;
display: none; line-height: 1;
}
.dash-tile-remove:hover { background: rgba(239,68,68,.15); color: #ef4444; }
.dash-edit-mode .dash-tile-remove { display: block; }
.dash-tile-body { padding: 12px; flex: 1; }
.dash-tile-value { font-size: 26px; font-weight: 800; color: var(--app-text-primary); line-height: 1; margin-bottom: 3px; }
.dash-tile-delta { font-size: 11px; color: #4ade80; margin-bottom: 6px; }
.dash-tile-sub { font-size: 11px; color: var(--muted); }
.dash-tile-list { margin: 6px 0 0; }
.dash-tile-list-item {
display: flex; justify-content: space-between; align-items: center;
padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 11px;
color: var(--app-text-primary);
}
.dash-tile-list-item:last-child { border-bottom: none; }
.dash-tile-footer {
padding: 5px 12px 8px;
display: flex; align-items: center; justify-content: space-between;
}
.dash-tile-ts { font-size: 10px; color: var(--muted); }
.dash-tile-refresh {
font-size: 10px; color: var(--muted); cursor: pointer;
padding: 1px 5px; border-radius: 4px;
}
.dash-tile-refresh:hover { background: var(--border); color: var(--app-text-primary); }
.dash-add-panel {
background: var(--app-field-bg);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 16px;
}
.dash-add-panel-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px;
}
.dash-add-panel-title { font-size: 13px; font-weight: 700; color: var(--app-text-primary); }
.widget-catalog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 8px;
}
.widget-catalog-item {
background: var(--grey);
border: 1px solid var(--border);
border-radius: 8px;
padding: 9px 12px;
cursor: pointer;
transition: border-color .12s, background .12s;
}
.widget-catalog-item:hover { border-color: var(--blue); background: rgba(46,117,182,.1); }
.widget-catalog-item.already-added { opacity: .4; pointer-events: none; }
.widget-catalog-item-name { font-size: 11px; font-weight: 600; color: var(--app-text-primary); margin-bottom: 2px; }
.widget-catalog-item-cat { font-size: 10px; color: var(--muted); }
.dash-preset-bar {
display: flex; align-items: center; gap: 6px;
margin-bottom: 14px; flex-wrap: wrap;
}
.dash-preset-btn {
font-size: 11px; padding: 4px 10px; border-radius: 20px;
border: 1px solid var(--border);
background: var(--grey); color: var(--app-text-muted);
cursor: pointer; transition: all .12s; white-space: nowrap;
}
.dash-preset-btn:hover, .dash-preset-btn.active {
border-color: var(--blue); background: rgba(46,117,182,.18); color: var(--app-text-primary);
}
.dash-section-label {
font-size: 11px; letter-spacing: .7px; text-transform: uppercase;
color: var(--muted); margin-bottom: 10px; margin-top: 20px;
}
/* ── Dashboard Layout Modes ─────────────────────────────────────── */
.dash-tile-grid.dash-layout-compact {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.dash-tile-grid.dash-layout-focus {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
@media (max-width: 900px) {
.dash-tile-grid.dash-layout-focus { grid-template-columns: 1fr; }
}
/* Vision Layout */
/* Mobile-first Phase 1 foundation */
/* Touch-friendly interactive defaults */
button,
.btn,
input,
select,
textarea {
min-height: 44px;
}
/* Mobile-first modal sizing */
.modal-box,
.modal .modal-box {
width: min(90vw, 520px);
}
/* Mobile-first grid behavior */
.stat-grid,
.kpi-grid,
.hub-grid,
.tile-grid,
.dashboard-tiles,
.evm-kpi-grid,
#bill-plans-container {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
/* Mobile-first app shell: off-canvas sidebar + full-width main */
#sidebar {
position: fixed;
top: 0;
left: -260px;
width: 260px;
height: 100vh;
z-index: 1000;
transition: left .28s ease;
}
#sidebar.open {
left: 0;
}
#main {
margin-left: 0 !important;
}
/* Mobile-first topbar action collapse */
.topbar-actions {
display: flex;
gap: 8px;
}
.topbar-actions > :not(:first-child) {
display: none;
}
.topbar-more,
.topbar-more-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
border-radius: 10px;
}
/* Mobile-first table card-stack with data-label */
table,
table thead,
table tbody,
table tr,
table th,
table td {
display: block;
width: 100%;
}
table thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
table tr {
margin: 0 0 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--grey);
overflow: hidden;
}
table td {
position: relative;
display: flex;
align-items: center;
min-height: 44px;
padding: 10px 10px 10px 48%;
border-bottom: 1px solid var(--border);
white-space: normal;
}
table td:last-child {
border-bottom: 0;
}
table td::before {
content: attr(data-label);
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 44%;
color: var(--app-text-muted);
font-size: 11px;
font-weight: 600;
letter-spacing: .02em;
text-transform: uppercase;
}
/* Desktop scale-up 1: restore tables + topbar actions */
@media (min-width: 768px) {
table {
display: table;
width: 100%;
}
table thead {
/* display MUST be restored here: the mobile base sets thead to
`display: block` (card-stack), and without resetting it the thead
spins up its own anonymous shrink-to-fit table whose columns no
longer align with the full-width tbody — headers cluster left,
data right-aligns far right. */
display: table-header-group;
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
table tbody {
display: table-row-group;
width: auto;
}
table tr {
display: table-row;
margin: 0;
border: 0;
border-radius: 0;
background: transparent;
overflow: visible;
}
table th,
table td {
display: table-cell;
width: auto;
padding: 12px;
min-height: 0;
border-bottom: 1px solid var(--border);
}
table td::before {
content: none;
}
.topbar-actions > :not(:first-child) {
display: inline-flex;
}
.topbar-more,
.topbar-more-btn {
display: none;
}
}
/* Desktop scale-up 2: restore fixed left sidebar + spacing */
@media (min-width: 1024px) {
#sidebar {
left: 0;
width: var(--sidebar-w);
position: fixed;
height: 100vh;
}
#main {
margin-left: var(--sidebar-w) !important;
}
.content {
padding: 24px;
}
.card {
padding: 20px;
}
}
.dash-vision-layout { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.dash-vision-top-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dash-vision-kpi-card {
background: var(--app-field-bg); border: 1px solid var(--border);
border-radius: 12px; padding: 14px 16px;
display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.dash-vision-kpi-icon {
width: 38px; height: 38px; border-radius: 10px;
display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.dash-vision-kpi-val { font-size: 20px; font-weight: 800; color: var(--app-text-primary); line-height: 1; }
.dash-vision-kpi-label { font-size: 11px; color: var(--muted); margin-top: 2px; }
.dash-vision-kpi-up { font-size: 11px; color: #4ade80; font-weight: 600; }
.dash-vision-kpi-dn { font-size: 11px; color: #f87171; font-weight: 600; }
.dash-vision-mid-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.dash-vision-welcome-card {
background: linear-gradient(135deg, rgba(10,22,55,.95), rgba(18,42,90,.9));
border: 1px solid rgba(100,150,255,.25); border-radius: 16px;
padding: 24px 28px; position: relative; overflow: hidden; min-height: 170px;
display: flex; flex-direction: column; justify-content: flex-end;
}
.dash-vision-welcome-glow {
position: absolute; inset: 0;
background: radial-gradient(ellipse at 80% 40%, rgba(80,120,255,.22), transparent 65%);
pointer-events: none;
}
.dash-vision-welcome-tag {
font-size: 11px; letter-spacing: .7px; text-transform: uppercase;
color: #A8B5DC; margin-bottom: 6px;
}
.dash-vision-welcome-name { font-size: 24px; font-weight: 800; color: #F7FBFF; margin-bottom: 6px; line-height: 1.15; }
.dash-vision-welcome-sub { font-size: 12px; color: #8BA4D8; line-height: 1.5; margin-bottom: 14px; }
.dash-vision-gauge-card, .dash-vision-score-card {
background: var(--app-field-bg); border: 1px solid var(--border);
border-radius: 16px; padding: 16px 14px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.dash-vision-gauge-label { font-size: 11px; color: var(--muted); text-align: center; }
.dash-vision-gauge-val { font-size: 22px; font-weight: 800; color: var(--app-text-primary); }
.dash-vision-bot-row { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; }
.dash-vision-area-card, .dash-vision-bars-card {
background: var(--app-field-bg); border: 1px solid var(--border);
border-radius: 16px; padding: 16px;
}
.dash-vision-section-kicker {
font-size: 11px; letter-spacing: .6px; text-transform: uppercase;
color: var(--muted); margin-bottom: 2px;
}
.dash-vision-section-title { font-size: 14px; font-weight: 700; color: var(--app-text-primary); margin-bottom: 12px; }
.dash-vision-delta-tag { font-size: 11px; color: #4ade80; font-weight: 500; margin-bottom: 10px; }
.dash-vision-bar-row {
display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
font-size: 11px; color: var(--app-text-primary);
}
.dash-vision-bar-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-vision-bar-label { flex: 1; color: var(--muted); }
.dash-vision-bar-val { font-weight: 600; }
/* Layout preview thumbnails */
.layout-preview-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 700px) {
.layout-preview-row { grid-template-columns: repeat(2, 1fr); }
.dash-vision-top-strip { grid-template-columns: repeat(2, 1fr); }
.dash-vision-mid-row { grid-template-columns: 1fr; }
.dash-vision-bot-row { grid-template-columns: 1fr; }
}
.layout-preview-card {
border: 2px solid var(--border); border-radius: 10px;
padding: 10px 8px; cursor: pointer; transition: border-color .12s, background .12s;
background: var(--grey); text-align: center;
}
.layout-preview-card:hover { border-color: var(--blue); }
.layout-preview-card.lp-selected { border-color: var(--blue); background: rgba(46,117,182,.12); }
.layout-preview-card-name { font-size: 11px; font-weight: 600; color: var(--app-text-primary); margin-top: 7px; }
.layout-preview-card-desc { font-size: 10px; color: var(--muted); margin-top: 2px; }
@supports (view-transition-name: none) {
#dash-health-hero { view-transition-name: health-hero; }
#dash-health-score { view-transition-name: health-score; }
}
.ai-insight-card {
margin-bottom: 16px;
background: linear-gradient(135deg, rgba(77,101,201,.3), rgba(39,130,146,.22));
border: 1px solid rgba(150,186,255,.25);
border-radius: 12px;
padding: 12px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.ai-insight-card .insight-title { font-size: 11px; letter-spacing: .8px; color: #A9C1F3; text-transform: uppercase; margin-bottom: 4px; }
.ai-insight-card .insight-text { font-size: 13px; color: #E6F0FF; line-height: 1.5; }
.module-tile-board {
margin-bottom: 16px;
background: linear-gradient(140deg, rgba(44, 83, 171, .24), rgba(18, 125, 138, .2));
border: 1px solid rgba(145, 190, 255, .24);
border-radius: 12px;
padding: 12px 14px;
}
.module-tile-board .module-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
gap: 8px;
margin-top: 10px;
}
.module-tile-chip {
border: 1px solid rgba(167, 198, 255, .35);
background: rgba(8, 21, 46, .54);
color: #E3EEFF;
border-radius: 10px;
padding: 7px 10px;
text-align: left;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: transform .12s ease, border-color .12s ease;
}
.module-tile-chip:hover {
transform: translateY(-1px);
border-color: rgba(181, 216, 255, .7);
}
/* Budget vs Actual (EVM) widget */
.db-evm-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
color: var(--app-text-primary);
}
.db-evm-table th,
.db-evm-table td {
border: 1px solid var(--border);
padding: 8px 10px;
text-align: left;
vertical-align: middle;
background: var(--app-field-bg);
}
.db-evm-table th {
font-weight: 700;
background: var(--grey);
}
.db-evm-table td.num {
text-align: right;
white-space: nowrap;
}
.db-evm-table td.project {
min-width: 180px;
font-weight: 600;
}
.db-evm-empty {
text-align: center;
color: var(--muted);
padding: 14px 10px;
}
.db-evm-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
border-radius: 999px;
padding: 2px 8px;
border: 1px solid var(--border);
background: var(--grey);
}
.db-evm-status .arrow {
font-size: 10px;
line-height: 1;
}
.status-green { color: var(--success); }
.status-red { color: var(--danger); }
.db-evm-health-track {
width: 130px;
height: 8px;
border-radius: 999px;
overflow: hidden;
background: var(--grey);
border: 1px solid var(--border);
position: relative;
}
.db-evm-health-fill {
height: 100%;
width: var(--db-evm-cpi-pct, 0%);
transition: width .35s ease;
}
.db-evm-health-fill.status-green { background: var(--success); }
.db-evm-health-fill.status-red { background: var(--danger); }
.db-evm-health-meta {
margin-top: 4px;
font-size: 11px;
color: var(--muted);
}
#ws-module-tiles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 8px;
margin-top: 10px;
}
.ws-module-tile-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--app-field-bg);
cursor: grab;
}
.ws-module-tile-item:active {
cursor: grabbing;
}
.ws-module-tile-item.dragging {
opacity: .55;
}
.ws-module-tile-item.drop-target {
outline: 1.5px dashed rgba(148, 196, 255, .65);
outline-offset: 2px;
}
#section-settings #ws-my-json,
#section-settings #ws-effective-json,
#section-settings #ws-role-json {
backdrop-filter: blur(10px);
border-radius: 10px;
}
#section-settings #ws-my-json {
background: rgba(164, 194, 255, .16);
border: 1.5px solid rgba(171, 206, 255, .38);
box-shadow: 0 10px 24px rgba(8, 16, 34, .22);
}
#section-settings #ws-effective-json {
background: rgba(156, 177, 221, .09);
border: 1.5px solid rgba(154, 182, 236, .26);
}
#section-settings #ws-role-json {
background: rgba(150, 167, 210, .08);
border: 1.5px solid rgba(148, 171, 219, .24);
}
#command-bar-overlay {
position: fixed;
inset: 0;
background: rgba(6, 10, 20, .45);
display: none;
align-items: flex-start;
justify-content: center;
padding-top: 10vh;
z-index: 1200;
}
#command-bar-overlay.open { display: flex; }
.command-bar-shell {
width: min(760px, calc(100vw - 22px));
border-radius: 16px;
background: rgba(16, 24, 44, .88);
border: 1px solid var(--app-field-border);
box-shadow: 0 24px 56px rgba(2, 7, 20, .58);
overflow: hidden;
}
#command-bar-input {
width: 100%;
border: none;
background: transparent;
color: var(--app-text-primary);
padding: 15px 16px;
font-size: 16px;
outline: none;
border-bottom: 1px solid var(--app-field-border);
}
#command-bar-results {
max-height: min(54vh, 460px);
overflow-y: auto;
padding: 8px 0;
}
.command-empty {
padding: 20px 22px;
color: var(--app-text-muted);
font-size: 13px;
}
.command-empty-error {
color: var(--danger);
}
.command-ai-insight {
margin: 8px 14px 12px;
border-left: 3px solid var(--blue);
background: var(--grey);
border-radius: 9px;
padding: 9px 11px;
}
.command-ai-label {
color: var(--blue);
font-size: 11px;
font-weight: 700;
letter-spacing: .2px;
text-transform: uppercase;
}
.command-ai-text {
margin-top: 4px;
font-size: 13px;
line-height: 1.35;
color: var(--app-text-primary);
}
.command-group-title {
padding: 10px 16px 6px;
color: var(--app-text-muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .35px;
}
.command-item {
margin: 0 8px 4px;
padding: 9px 10px;
border-radius: 10px;
color: var(--app-text-primary);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.command-item:hover,
.command-item.active {
background: var(--grey);
}
.command-item-main {
min-width: 0;
}
.command-item-title {
color: var(--app-text-primary);
font-size: 13px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.command-item-subtitle {
color: var(--app-text-muted);
margin-top: 2px;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.command-item-meta {
margin-left: auto;
display: inline-flex;
align-items: center;
}
.command-item-arrow {
font-size: 15px;
color: var(--app-text-muted);
margin-left: 6px;
opacity: 0;
transition: opacity .15s, transform .15s;
}
.command-item:hover .command-item-arrow,
.command-item.active .command-item-arrow {
opacity: 1;
transform: translateX(2px);
}
.command-item-badge {
font-size: 11px;
font-weight: 700;
color: var(--blue);
border: 1px solid var(--app-field-border);
background: rgba(40, 150, 255, .10);
border-radius: 999px;
padding: 4px 8px;
white-space: nowrap;
}
.command-bar-footer {
border-top: 1px solid var(--app-field-border);
padding: 10px 14px;
display: flex;
gap: 14px;
color: var(--app-text-muted);
font-size: 11px;
background: rgba(255, 255, 255, .02);
}
.command-bar-footer kbd {
border: 1px solid var(--app-field-border);
border-radius: 5px;
padding: 2px 5px;
background: var(--grey);
color: var(--app-text-primary);
font-size: 10px;
}
@keyframes commandBarEntityPulse {
0% {
box-shadow: 0 0 0 0 rgba(96, 165, 250, .0);
outline: 0 solid transparent;
background-color: transparent;
}
25% {
box-shadow: 0 0 0 3px rgba(96, 165, 250, .22);
outline: 1px solid rgba(96, 165, 250, .55);
background-color: rgba(96, 165, 250, .10);
}
100% {
box-shadow: 0 0 0 0 rgba(96, 165, 250, .0);
outline: 0 solid transparent;
background-color: transparent;
}
}
.command-bar-entity-highlight {
animation: commandBarEntityPulse 1.8s ease-out;
border-radius: 8px;
}
/* ── TABLE ─────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { background: rgba(102,126,234,.09); padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #A9B4D9; border-bottom: 1px solid rgba(255,255,255,.08); }
th.sortable {
cursor: pointer;
position: relative;
}
th.sortable:hover {
background: var(--grey);
}
th.sortable::after {
content: ' ';
position: absolute;
right: 8px;
opacity: 0.3;
}
th.sortable.sorted-asc::after {
content: ' â–²';
opacity: 1;
}
th.sortable.sorted-desc::after {
content: ' â–¼';
opacity: 1;
}
td { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 13px; vertical-align: middle; color: #D5DEFA; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,.04); }
/* ── BADGE ─────────────────────────────────────────────── */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge-success { background: #EAFAF1; color: var(--success); }
.badge-warning { background: #FEF9E7; color: var(--warning); }
.badge-danger { background: #FDEDEC; color: var(--danger); }
.badge-neon-violet,
.badge-neon-blue,
.badge-neon-amber,
.badge-neon-emerald {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.22);
box-shadow: 0 0 14px rgba(255,255,255,.16);
color: #EEF4FF;
}
.badge-neon-violet { border-color: rgba(199,150,255,.85); box-shadow: 0 0 16px rgba(176,112,255,.45); }
.badge-neon-blue { border-color: rgba(137,201,255,.85); box-shadow: 0 0 16px rgba(88,174,255,.42); }
.badge-neon-amber { border-color: rgba(255,194,111,.85); box-shadow: 0 0 16px rgba(255,179,77,.42); }
.badge-neon-emerald{ border-color: rgba(128,255,203,.85); box-shadow: 0 0 16px rgba(63,219,154,.42); }
/* Dark-theme readability for Users & Roles status chips */
/* ── AI CHAT ────────────────────────────────────────────── */
.ai-msg {
padding: 10px 13px; border-radius: 10px; font-size: 13px; line-height: 1.55;
max-width: 90%; word-break: break-word; white-space: pre-wrap;
}
.ai-msg-user { background: linear-gradient(135deg, rgba(94,118,255,.9), rgba(119,82,232,.9)); color: #F8FAFF; align-self: flex-end; border-radius: 10px 10px 2px 10px; border: 1px solid rgba(170,183,255,.35); }
.ai-msg-assistant { background: rgba(255,255,255,.06); color: #E5EDFF; align-self: flex-start; border-radius: 10px 10px 10px 2px; border: 1px solid rgba(255,255,255,.14); }
.ai-msg-thinking { background: rgba(182,145,255,.16); color: #D9C4FF; align-self: flex-start; border-radius: 10px 10px 10px 2px; font-style: italic; font-size: 12px; border: 1px solid rgba(190,152,255,.28); }
.ai-quick-btn {
padding: 6px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 20px;
background: rgba(255,255,255,.06); color: #DEE8FF; font-size: 11px; cursor: pointer; transition: all .15s;
}
.ai-quick-btn:hover { background: rgba(124,170,255,.16); border-color: rgba(158,195,255,.52); color: #F2F7FF; }
.ai-score-bar { display: inline-block; height: 6px; border-radius: 3px; vertical-align: middle; margin-left: 6px; }
.ai-brand-icon {
width: 16px;
height: 16px;
display: inline-block;
vertical-align: middle;
object-fit: contain;
object-position: center;
flex-shrink: 0;
border-radius: 3px;
}
.ai-brand-icon.lg { width: 24px; height: 24px; }
.ai-brand-icon.sm { width: 16px; height: 16px; }
#ai-chat-panel {
display: none;
position: fixed;
bottom: 96px;
right: 28px;
width: 390px;
height: 530px;
background: rgba(10,16,34,.78);
border-radius: 16px;
box-shadow: 0 22px 52px rgba(1,6,21,.56);
z-index: 499;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(18px);
}
.ai-chat-header {
background: linear-gradient(135deg, rgba(95,118,255,.9), rgba(120,74,230,.9));
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255,255,255,.16);
}
.ai-chat-close {
background: none;
border: none;
color: rgba(255,255,255,.6);
border-radius: 0;
width: 28px;
height: 28px;
cursor: pointer;
font-size: 14px;
}
#ai-messages {
flex: 1;
overflow-y: auto;
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
background: linear-gradient(180deg, rgba(11,18,38,.38), rgba(8,13,30,.74));
}
.ai-quick-row {
padding: 8px 14px;
border-top: 1px solid rgba(255,255,255,.12);
display: flex;
gap: 6px;
flex-wrap: wrap;
background: rgba(255,255,255,.03);
}
.ai-input-row {
padding: 10px 14px;
border-top: 1px solid rgba(255,255,255,.12);
display: flex;
gap: 8px;
background: rgba(8,13,28,.66);
}
#ai-input {
flex: 1;
padding: 9px 12px;
border: 1.5px solid rgba(255,255,255,.18);
border-radius: 9px;
font-size: 13px;
outline: none;
background: rgba(255,255,255,.06);
color: #EDF3FF;
}
#ai-input:focus { border-color: rgba(146,191,255,.62); }
#ai-input::placeholder { color: #A8B6DC; }
.ai-send-btn {
background: linear-gradient(135deg, rgba(96,118,255,.95), rgba(122,82,236,.95));
color: #fff;
border: 1px solid rgba(173,189,255,.44);
border-radius: 9px;
padding: 0 14px;
cursor: pointer;
font-size: 16px;
box-shadow: 0 10px 20px rgba(71,86,196,.35);
}
.ai-send-btn:hover { filter: brightness(1.08); }
/* ── ENROLL MODE TOGGLE ────────────────────────────────── */
.enroll-mode-btn {
flex: 1; padding: 8px 4px; border: none; background: #fff; color: var(--muted);
font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s;
border-right: 1px solid var(--border);
}
.enroll-mode-btn:last-child { border-right: none; }
.enroll-mode-btn:hover { background: var(--light-blue); color: var(--navy); }
.enroll-mode-btn.active { background: var(--navy); color: #fff; }
.badge-blue { background: #EBF5FF; color: var(--blue); }
.badge-green { background: #EAFAF1; color: var(--success); }
.badge-orange { background: #FEF9E7; color: var(--warning); }
.badge-red { background: #FDEDEC; color: var(--danger); }
.badge-grey { background: #F2F3F4; color: #3D4852; } /* WCAG AA contrast 6.6:1 */
.badge-connected-dark {
background: #0F3A2B;
color: #C9F7E6;
border: 1px solid #1D7A5A;
box-shadow: 0 0 0 1px rgba(19, 99, 73, .22) inset;
}
.badge-disconnected-dark {
background: #3E1216;
color: #FFD8DE;
border: 1px solid #8F2E3A;
box-shadow: 0 0 0 1px rgba(143, 46, 58, .24) inset;
}
/* ── LIVING WORKSPACE (DASHBOARD REDESIGN) ─────────────────────────────── */
/* ── LIVING WORKSPACE / COMMAND HEADER ──────────────────────────────────── */
/* Matrix backdrop — wraps hero frame + RBAC panels, contains matrix canvas */
.cmd-matrix-backdrop {
position: relative;
overflow: hidden;
border-radius: 0;
background: #060C1B;
margin-bottom: 18px;
margin-top: -24px; /* pull up into .content padding to meet the topbar */
padding: 42px 0 0 0; /* 24px reclaimed + 18px visible matrix area above hero */
}
/* Matrix rain canvas — fills the backdrop */
.cmd-matrix-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0.55;
pointer-events: none;
}
/* Subtle grid overlay */
.cmd-matrix-backdrop::after {
content: '';
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 44px),
repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 44px);
pointer-events: none;
z-index: 1;
}
/* Hero frame — glass panel sitting over the matrix backdrop */
.cmd-hero-frame {
position: relative;
overflow: hidden;
border-radius: 14px;
border: 1px solid rgba(96,165,250,.18);
margin-bottom: 54px;
box-shadow: 0 4px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
animation: workspace-rise .5s cubic-bezier(.2,.7,.3,1);
z-index: 2;
}
/* RBAC panels inside the backdrop sit above the matrix canvas */
.cmd-matrix-backdrop > #rbac-finance-panel,
.cmd-matrix-backdrop > #rbac-field-panel {
position: relative;
z-index: 2;
border-radius: 14px !important;
background: rgba(10, 18, 42, .92) !important;
}
.workspace-hero {
display: flex;
align-items: stretch;
gap: 18px;
margin-bottom: 0;
position: relative;
z-index: 2;
}
/* Glass panel — original dark overlay */
.hero-panel {
background: linear-gradient(145deg, rgba(4,10,28,.82) 0%, rgba(6,14,38,.88) 100%);
border: none;
border-radius: 0;
padding: 14px 16px 12px;
position: relative;
overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.hero-panel::before { display: none; } /* grid handled by frame::after */
.hero-panel > * { position: relative; z-index: 1; }
/* Vertical separator between gauge and signal panels */
.cmd-hero-divider {
width: 1px;
align-self: stretch;
background: linear-gradient(180deg,
transparent 5%,
rgba(96,165,250,.22) 20%,
rgba(96,165,250,.22) 80%,
transparent 95%);
flex-shrink: 0;
position: relative;
z-index: 2;
}
.hero-kicker {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .9px;
color: var(--app-text-muted);
margin-bottom: 6px;
}
/* ── Arc gauge ──────────────────────────────────────────────────── */
.cmd-gauge-panel { display: flex; flex-direction: column; align-items: center; padding: 10px 14px 8px; width: 310px; flex-shrink: 0; }
/* Score inside SVG foreignObject */
.cmd-ring-score {
font-size: 2.2rem;
font-weight: 900;
line-height: 1;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
color: #FFFFFF;
text-shadow: none;
transition: color .5s ease, text-shadow .5s ease;
letter-spacing: -.5px;
}
.cmd-ring-sub {
font-size: 8px;
text-transform: uppercase;
letter-spacing: .6px;
color: rgba(255,255,255,.38);
margin-top: 2px;
}
.cmd-dept-badge {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px;
border-radius: 20px;
font-size: 9px;
font-weight: 600;
white-space: nowrap;
line-height: 1.5;
}
.cmd-dept-badge.finance { color: #60A5FA; border: 1px solid rgba(96,165,250,.4); background: rgba(96,165,250,.15); }
.cmd-dept-badge.hr { color: #34D399; border: 1px solid rgba(52,211,153,.4); background: rgba(52,211,153,.15); }
.cmd-dept-badge.ops { color: #F97316; border: 1px solid rgba(249,115,22,.4); background: rgba(249,115,22,.15); }
.cmd-dept-badge.alert { animation: cmd-badge-pulse 2s ease-in-out infinite; }
@keyframes cmd-badge-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
50% { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}
#cmd-sparkline-line { stroke: var(--health-score-color, #06B6D4); }
/* ── Finance Signal panel ───────────────────────────────────────── */
.cmd-signal-panel { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.cmd-signal-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.cmd-signal-top .hero-kicker { margin-bottom: 0; white-space: nowrap; }
.cmd-quickfix-row { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.cmd-qf-label { font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: var(--app-text-muted); white-space: nowrap; }
/* div-based buttons bypass the global button{min-height:44px} rule */
.cmd-qf-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 11px;
border-radius: 7px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: background .15s;
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.9);
border: 1px solid rgba(255,255,255,.15);
user-select: none;
white-space: nowrap;
line-height: 1;
}
.cmd-qf-btn:hover { background: rgba(255,255,255,.15); }
.cmd-qf-btn .ms-icon { font-size: 13px; }
.cmd-qf-btn.amber { background: rgba(245,158,11,.14); color: #FCD34D; border-color: rgba(245,158,11,.4); }
.cmd-qf-btn.amber:hover { background: rgba(245,158,11,.24); }
.cmd-waveform-wrap { flex-shrink: 0; }
.cmd-metrics-row {
display: flex;
align-items: center;
gap: 6px;
padding-top: 6px;
border-top: 1px solid rgba(255,255,255,.07);
overflow-x: auto;
scrollbar-width: none;
flex-wrap: nowrap;
}
.cmd-metrics-row::-webkit-scrollbar { display: none; }
.cmd-metric-chip {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
white-space: nowrap;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 7px;
padding: 4px 9px;
flex-shrink: 0;
}
.cmd-metric-label { color: rgba(255,255,255,.45); font-size: 10px; }
.cmd-metric-pill {
padding: 1px 7px;
border-radius: 20px;
font-size: 10px;
font-weight: 700;
font-family: 'Courier New', monospace;
}
.cmd-metric-pill.med { background: rgba(245,158,11,.2); color: #FBBF24; border: 1px solid rgba(245,158,11,.4); }
.cmd-metric-pill.low { background: rgba(52,211,153,.16); color: #34D399; border: 1px solid rgba(52,211,153,.4); }
.cmd-metric-pill.high { background: rgba(239,68,68,.18); color: #F87171; border: 1px solid rgba(239,68,68,.4); }
.cmd-metric-val { font-weight: 700; font-family: 'Courier New', monospace; font-size: 11px; }
.cmd-metric-val.red { color: #F87171; }
.cmd-demand-dots { display: inline-flex; align-items: center; position: relative; width: 28px; height: 18px; }
.cmd-demand-dots svg { display: block; }
/* legacy dot classes kept for compat */
.cmd-dot { display: none; }
/* div-based Sync button */
.cmd-sync-btn {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 11px;
border-radius: 7px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
background: rgba(52,211,153,.15);
color: #34D399;
border: 1px solid rgba(52,211,153,.35);
transition: background .15s;
flex-shrink: 0;
user-select: none;
white-space: nowrap;
line-height: 1;
}
.cmd-sync-btn:hover { background: rgba(52,211,153,.26); }
.cmd-sync-spin { animation: cmd-spin 3s linear infinite; font-size: 13px; }
@keyframes cmd-spin { to { transform: rotate(360deg); } }
.hero-updated { margin-top: 4px; font-size: 10px; color: var(--app-text-muted); }
@keyframes pulse-live {
0%, 100% { opacity: 1; }
50% { opacity: .86; }
}
@keyframes breathe-soft {
0%, 100% { opacity: .94; }
50% { opacity: 1; }
}
#dash-discovery-radar .radar-sweep {
opacity: .2;
}
.glass-visual {
background: linear-gradient(145deg, rgba(34,47,88,.58) 0%, rgba(23,19,47,.78) 100%);
border: 1px solid rgba(255,255,255,.09);
border-radius: 14px;
padding: 14px;
min-height: 220px;
}
.visual-caption { color: #A6B2D8; font-size: 12px; margin-top: 10px; line-height: 1.5; }
.presence-strip {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
flex-wrap: wrap;
}
.avatar-stack { display: flex; align-items: center; }
.employee-photo-thumb {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--border);
background: var(--app-field-bg);
}
.presence-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,.34);
margin-left: -6px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
color: #F3F7FF;
background: linear-gradient(135deg, rgba(121,168,255,.75), rgba(110,76,223,.78));
position: relative;
object-fit: cover;
overflow: hidden;
}
.presence-avatar:first-child { margin-left: 0; }
.presence-avatar.online::after {
content: '';
position: absolute;
right: -1px;
bottom: -1px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #34D399;
border: 1.5px solid #08111f;
box-shadow: 0 0 8px rgba(52,211,153,.55);
}
.presence-text {
font-size: 11px;
color: #AAB7DF;
white-space: normal;
line-height: 1.25;
}
.ai-summary-shimmer {
background: linear-gradient(90deg, rgba(255,255,255,.03) 0%, rgba(152,197,255,.28) 50%, rgba(255,255,255,.03) 100%);
background-size: 240% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
animation: ai-shimmer 1.3s linear infinite;
}
.ai-summary-fade {
animation: ai-fade-in .45s ease;
}
#ai-summary-btn {
background: linear-gradient(135deg, rgba(96,118,255,.9), rgba(112,80,226,.9));
border-color: rgba(166,184,255,.5) !important;
color: #F2F6FF !important;
box-shadow: 0 10px 24px rgba(67,84,196,.35);
}
#ai-summary-btn:hover {
background: linear-gradient(135deg, rgba(112,133,255,.95), rgba(128,94,237,.95));
}
#ai-summary-output {
color: #BED0FF;
}
@keyframes ai-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -40% 0; }
}
@keyframes ai-fade-in {
from { opacity: .35; transform: translateY(3px); }
to { opacity: 1; transform: translateY(0); }
}
.urgency-list {
display: grid;
gap: 8px;
}
.urgency-row {
border: 1px solid rgba(255,255,255,.1);
border-radius: 10px;
padding: 10px 12px;
background: rgba(255,255,255,.03);
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
transition: transform .2s ease, box-shadow .2s ease;
}
.urgency-row:hover { transform: translateY(-1px); }
.skeleton-shimmer {
position: relative;
overflow: hidden;
}
.skeleton-shimmer::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 0%, rgba(180, 208, 255, .16) 50%, transparent 100%);
transform: translateX(-100%);
animation: dashboard-skeleton-shimmer 1.2s linear infinite;
}
@keyframes dashboard-skeleton-shimmer {
to { transform: translateX(100%); }
}
.skeleton-meta {
color: #90A0CD;
font-size: 12px;
margin-top: 10px;
opacity: .9;
}
.skeleton-list {
display: grid;
gap: 8px;
}
.skeleton-row {
border: 1px solid rgba(255,255,255,.08);
border-radius: 10px;
padding: 10px 12px;
background: rgba(255,255,255,.03);
position: relative;
}
.skeleton-bar {
height: 10px;
border-radius: 6px;
background: rgba(255,255,255,.12);
margin-bottom: 7px;
}
.skeleton-bar.wide { width: 68%; }
.skeleton-bar.mid { width: 46%; margin-bottom: 0; }
.urgency-row .meta { font-size: 11px; color: #9EABD4; margin-top: 3px; }
.urgency-high {
background: linear-gradient(90deg, rgba(255,72,72,.26) 0%, rgba(255,72,72,.06) 72%);
box-shadow: inset 0 0 18px rgba(255,72,72,.2), 0 0 16px rgba(255,72,72,.22);
}
.urgency-medium {
background: linear-gradient(90deg, rgba(255,168,82,.18) 0%, rgba(255,168,82,.05) 72%);
box-shadow: inset 0 0 14px rgba(255,168,82,.14);
}
.urgency-low {
background: rgba(255,255,255,.025);
opacity: .92;
}
.dash-visual-row { display: flex; gap: 16px; }
@media (max-width: 768px) { .dash-visual-row { flex-direction: column; } }
#dash-cashflow-wave { width: 100%; height: 150px; display: block; }
/* Discovery Radar redesign */
.discovery-radar-panel { padding: 16px; }
.discovery-radar-layout { display: flex; align-items: center; gap: 20px; }
.discovery-radar-chart { flex: 0 0 auto; width: 45%; max-width: 240px; }
#dash-discovery-radar { width: 100%; height: auto; display: block; aspect-ratio: 1; }
.discovery-radar-stats { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.radar-stat-row { display: flex; align-items: center; gap: 10px; }
.radar-stat-label { font-size: 12px; font-weight: 600; width: 68px; flex-shrink: 0; letter-spacing: 0.02em; }
.radar-stat-bar-track { flex: 1; height: 8px; background: rgba(255,255,255,.12); border-radius: 4px; overflow: hidden; min-width: 40px; }
.radar-stat-bar-fill { height: 100%; border-radius: 4px; transition: width .6s ease; opacity: .85; }
.radar-stat-value { font-size: 12px; color: #8B9BC4; width: 28px; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
.discovery-radar-layout { flex-direction: column; }
.discovery-radar-chart { width: 70%; max-width: 220px; }
}
.ai-aura-fab {
position: fixed;
bottom: 28px;
right: 28px;
width: 56px;
height: 56px;
border-radius: 50%;
color: #fff;
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 500;
transition: transform .2s, box-shadow .25s, background .25s;
border: 1px solid rgba(255,255,255,.22);
animation: aura-breathe 2.2s ease-in-out infinite;
}
.ai-aura-fab:hover { transform: translateY(-2px) scale(1.06); }
.ai-aura-fab.calm {
background: radial-gradient(circle at 25% 20%, #66c6ff 0%, #2f74ff 55%, #1f2e87 100%);
box-shadow: 0 0 26px rgba(89, 183, 255, .55);
}
.ai-aura-fab.amber {
background: radial-gradient(circle at 25% 20%, #ffd17f 0%, #ff9f4f 52%, #8f3f1a 100%);
box-shadow: 0 0 26px rgba(255, 167, 79, .6);
}
@keyframes aura-breathe {
0%,100% { transform: scale(1); }
50% { transform: scale(1.03); }
}
.pm-kanban-task-card {
background: rgba(14,19,38,.78);
border: 1px solid rgba(255,255,255,.1);
border-radius: 10px;
padding: 10px;
margin-bottom: 8px;
font-size: 12px;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
cursor: grab;
}
.pm-kanban-task-card.dragging {
opacity: .6;
transform: scale(.99);
}
.pm-kanban-task-card:hover {
transform: translateY(-4px);
border-color: rgba(127,188,255,.62);
box-shadow: 0 14px 24px rgba(1, 6, 20, .45);
}
.pm-kanban-col {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.09);
border-radius: 10px;
padding: 10px;
}
.pm-kanban-col.drop-active {
border-color: rgba(126, 197, 255, .56);
box-shadow: inset 0 0 0 1px rgba(126, 197, 255, .35);
background: rgba(90, 144, 255, .08);
}
@media (max-width: 900px) {
.workspace-hero { flex-direction: column; }
.cmd-gauge-panel { width: 100%; }
.cmd-hero-divider { width: 100%; height: 1px; align-self: auto;
background: linear-gradient(90deg, transparent 5%, rgba(96,165,250,.22) 20%, rgba(96,165,250,.22) 80%, transparent 95%);
}
}
@keyframes workspace-rise {
from { opacity: .2; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
#section-dashboard .card,
#section-dashboard .stat-card {
animation: workspace-rise .48s cubic-bezier(.2,.7,.3,1);
}
#section-dashboard .stat-grid .stat-card:nth-child(1) { animation-delay: .02s; }
#section-dashboard .stat-grid .stat-card:nth-child(2) { animation-delay: .05s; }
#section-dashboard .stat-grid .stat-card:nth-child(3) { animation-delay: .08s; }
#section-dashboard .stat-grid .stat-card:nth-child(4) { animation-delay: .11s; }
#section-dashboard .stat-grid .stat-card:nth-child(5) { animation-delay: .14s; }
@media (prefers-reduced-motion: reduce) {
.cmd-hero-frame,
.workspace-hero,
.card,
.stat-card,
.cmd-arc-fill,
.cmd-ring-score,
.cmd-sync-spin,
.urgency-row,
.ai-aura-fab {
animation: none !important;
transition: none !important;
}
}
/* ── MODAL ─────────────────────────────────────────────── */
.modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 500;
display: none; align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal { background: #fff; border-radius: 12px; width: 520px; max-width: 95vw; max-height: 90vh; overflow-y: auto; }
.modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { font-size: 16px; font-weight: 700; color: var(--navy); }
.modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--muted); line-height: 1; }
.modal-body { padding: 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* ── TOAST ─────────────────────────────────────────────── */
#toast {
position: fixed; bottom: 24px; right: 24px; z-index: 9999;
padding: 12px 20px; border-radius: 8px; font-size: 13px; font-weight: 600;
box-shadow: 0 4px 20px rgba(0,0,0,.2); transition: opacity .3s;
pointer-events: none; opacity: 0;
}
#toast.show { opacity: 1; }
#toast.success { background: var(--success); color: #fff; }
#toast.error { background: var(--danger); color: #fff; }
/* ── EMPTY STATE ───────────────────────────────────────── */
.empty-state { text-align: center; padding: 48px; color: var(--muted); }
.empty-state .empty-icon {
font-size: 48px;
width: 56px;
height: 56px;
margin: 0 auto 12px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
color: #D8E5FF;
}
.empty-state p { font-size: 14px; }
.loading { text-align: center; padding: 32px; color: var(--muted); font-size: 13px; }
/* ── TABS ──────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 24px; }
.tab { padding: 10px 18px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; display:inline-flex; align-items:center; gap:8px; }
.tab:hover { color: var(--navy); }
.tab.active { color: var(--navy); border-bottom-color: var(--navy); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* ── POS LAYOUT ────────────────────────────────────────────────── */
/* Terminal header bar */
.pos-terminal-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 16px;
background: var(--navy);
color: white;
border-radius: 8px;
margin-bottom: 0.75rem;
min-height: 48px;
gap: 1rem;
}
.pos-terminal-bar h2 {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
white-space: nowrap;
}
.pos-terminal-bar .pos-status-group {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.pos-terminal-bar .pos-status-pill {
padding: 4px 12px;
background: rgba(255,255,255,0.15);
border-radius: 50px;
font-weight: 600;
font-size: 0.78rem;
border: 1px solid rgba(255,255,255,0.25);
display: inline-flex;
align-items: center;
gap: 5px;
}
.pos-terminal-bar .pos-shift-indicator {
padding: 4px 12px;
border-radius: 50px;
font-weight: 600;
font-size: 0.78rem;
display: inline-flex;
align-items: center;
gap: 5px;
}
.pos-shift-indicator.open {
background: rgba(34,197,94,0.15);
color: #4ade80;
border: 1px solid rgba(34,197,94,0.3);
}
.pos-shift-indicator.closed {
background: rgba(245,158,11,0.15);
color: #fbbf24;
border: 1px solid rgba(245,158,11,0.3);
}
/* POS tabs - larger touch targets */
#section-pos .tabs {
margin-bottom: 0;
position: relative;
z-index: 1;
}
#section-pos .tabs .tab {
min-height: 48px;
padding: 12px 20px;
font-size: 0.9rem;
}
#section-pos .tabs .tab .material-symbols-outlined {
font-size: 20px;
vertical-align: middle;
}
/* Register layout - two panel split */
#section-pos .tab-panel.active.pos-register-layout {
display: flex;
gap: 1rem;
min-height: calc(100vh - 260px);
}
/* Left panel - menu/products */
.pos-menu-panel {
flex: 3;
display: flex;
flex-direction: column;
min-width: 0;
}
/* Category filter bar */
.pos-category-bar {
display: flex;
gap: 6px;
margin-bottom: 0.75rem;
overflow-x: auto;
padding-bottom: 4px;
flex-shrink: 0;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.pos-cat-chip {
padding: 8px 16px;
border-radius: 20px;
font-size: 0.82rem;
font-weight: 600;
border: 1.5px solid var(--border);
background: transparent;
color: var(--app-text-muted);
cursor: pointer;
white-space: nowrap;
transition: all 0.15s;
min-height: 38px;
display: inline-flex;
align-items: center;
}
.pos-cat-chip:hover {
border-color: var(--blue);
color: var(--app-text-primary);
}
.pos-cat-chip.active {
background: var(--navy);
color: white;
border-color: var(--navy);
}
/* Search input */
.pos-search-input {
height: 48px !important;
font-size: 1rem !important;
border-radius: 8px;
}
/* Product grid - cleaner tiles */
#section-pos .pos-product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 0.65rem;
overflow-y: auto;
padding-right: 0.25rem;
flex: 1;
align-content: start;
}
.pos-product-tile {
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 14px 10px;
text-align: center;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
user-select: none;
background: var(--grey);
min-height: 90px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
}
.pos-product-tile:hover {
border-color: var(--blue);
background: var(--grey);
}
.pos-product-tile:active {
transform: scale(0.95);
}
.pos-product-tile .pos-tile-name {
font-weight: 600;
font-size: 0.88rem;
line-height: 1.2;
color: var(--app-text-primary);
}
.pos-product-tile .pos-tile-price {
font-weight: 700;
font-size: 0.92rem;
color: var(--blue);
font-family: 'DM Mono', monospace;
}
.pos-product-tile .pos-tile-cat-dot {
width: 6px;
height: 6px;
border-radius: 50%;
position: absolute;
top: 8px;
left: 8px;
}
/* Right panel - order/cart */
.pos-order-panel {
flex: 2;
display: flex;
flex-direction: column;
min-width: 280px;
max-width: 420px;
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 14px;
background: var(--grey);
}
/* Ticket header */
.pos-ticket-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1.5px solid var(--border);
}
/* Cart items scrollable area */
.pos-cart-items {
flex: 1;
overflow-y: auto;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin: 0.5rem 0;
padding: 0.5rem 0;
min-height: 120px;
font-size: 0.95rem;
}
.pos-cart-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 4px;
border-radius: 6px;
transition: background 0.1s;
min-height: 44px;
}
.pos-cart-row:hover {
background: rgba(0,0,0,0.03);
}
/* Totals section */
.pos-totals {
padding: 8px 0;
flex-shrink: 0;
}
.pos-totals-row {
display: flex;
justify-content: space-between;
color: var(--app-text-muted);
font-size: 0.9rem;
padding: 2px 0;
}
.pos-totals-total {
display: flex;
justify-content: space-between;
font-size: 1.8rem;
font-weight: 800;
color: var(--app-text-primary);
padding-top: 6px;
margin-top: 4px;
border-top: 2px solid var(--border);
font-family: 'DM Mono', monospace;
}
/* Action buttons */
.pos-actions {
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
}
.pos-btn-pay {
width: 100%;
min-height: 56px;
border-radius: 10px;
border: none;
background: var(--navy);
color: white;
font-size: 1.15rem;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: opacity 0.15s, transform 0.1s;
}
.pos-btn-pay:hover { opacity: 0.9; }
.pos-btn-pay:active { transform: scale(0.98); }
.pos-btn-pay .material-symbols-outlined { font-size: 22px; }
.pos-btn-secondary {
width: 100%;
min-height: 44px;
border-radius: 8px;
border: 1.5px solid var(--border);
background: transparent;
color: var(--app-text-primary);
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: border-color 0.15s;
}
.pos-btn-secondary:hover { border-color: var(--blue); }
.pos-btn-row {
display: flex;
gap: 6px;
}
.pos-btn-outline {
flex: 1;
min-height: 40px;
border-radius: 8px;
border: 1.5px solid var(--border);
background: transparent;
color: var(--app-text-muted);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
transition: all 0.15s;
}
.pos-btn-outline:hover {
border-color: var(--blue);
color: var(--app-text-primary);
}
.pos-btn-danger {
color: var(--danger) !important;
}
.pos-btn-danger:hover {
border-color: var(--danger) !important;
}
/* KPI strip for Shifts tab */
.pos-kpi-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
margin-bottom: 1rem;
}
.pos-kpi-card {
border: 1.5px solid var(--border);
border-radius: 8px;
padding: 12px 14px;
text-align: center;
background: var(--grey);
}
.pos-kpi-label {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--app-text-muted);
margin-bottom: 4px;
}
.pos-kpi-value {
font-size: 1.35rem;
font-weight: 800;
color: var(--app-text-primary);
font-family: 'DM Mono', monospace;
}
/* Responsive */
@media (max-width: 1100px) {
#section-pos .tab-panel.active.pos-register-layout {
flex-direction: column;
min-height: auto;
}
.pos-order-panel {
max-width: none;
}
.pos-kpi-strip {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.pos-kpi-strip {
grid-template-columns: 1fr 1fr;
}
#section-pos .tabs .tab {
padding: 10px 12px;
font-size: 0.8rem;
}
.pos-category-bar {
gap: 4px;
}
.pos-cat-chip {
padding: 6px 12px;
font-size: 0.78rem;
}
}
.ms-icon {
font-family: 'Material Symbols Outlined';
font-weight: 500;
font-style: normal;
font-size: 19px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
font-feature-settings: 'liga';
vertical-align: middle;
}
.tab-ms-icon {
width: 20px;
height: 20px;
border-radius: 6px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.15);
color: #D9E7FF;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.tab-ms-icon .ms-icon { font-size: 16px; }
/* ── PERMISSION GRID ───────────────────────────────────── */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; padding: 4px; }
.perm-check { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 6px; cursor: pointer; transition: border-color .15s; }
.perm-check:hover { border-color: var(--blue); }
.perm-check input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--navy); }
.perm-check label { cursor: pointer; font-size: 12px; color: var(--text); line-height: 1.3; }
.perm-check label small { display: block; color: var(--muted); font-size: 11px; }
.perm-module-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 12px 0 6px; grid-column: 1/-1; }
/* ── EXECUTIVE DASHBOARD FLEX CHART ───────────────────── */
.dash-chart-wrapper {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 220px;
padding: 1rem 0;
gap: 4px;
border-bottom: 2px solid var(--border);
}
.dash-bar-container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
height: 100%;
position: relative;
}
.dash-bar {
width: 100%;
background-color: var(--blue);
border-radius: 4px 4px 0 0;
transition: height .6s cubic-bezier(.25, 1, .5, 1);
min-height: 2px;
cursor: pointer;
}
.dash-bar:hover { background-color: var(--navy); }
.dash-bar::after {
content: attr(data-tooltip);
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
background: var(--app-field-text);
color: var(--app-field-bg);
padding: 4px 8px;
border-radius: 4px;
font-size: .75rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .2s;
z-index: 10;
}
.dash-bar:hover::after { opacity: 1; }
.dash-kpi-value {
font-size: 2.2rem;
font-weight: bold;
margin: .5rem 0;
}
/* Dashboard Workspace */
.dash-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.5rem;
}
.dash-widget {
background: var(--app-field-bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.5rem;
color: var(--app-text-primary);
position: relative;
transition: box-shadow 0.2s;
}
.dash-widget:hover {
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.dash-widget.col-3 { grid-column: span 3; }
.dash-widget.col-4 { grid-column: span 4; }
.dash-widget.col-6 { grid-column: span 6; }
.dash-widget.col-8 { grid-column: span 8; }
.dash-widget.col-12 { grid-column: span 12; }
.dash-widget-header {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
margin-bottom: 1rem;
border-bottom: 1px solid var(--border);
padding-bottom: 0.5rem;
}
.dash-kpi-value {
font-size: 2.2rem;
font-weight: bold;
color: var(--blue);
}
.dash-kpi-trend {
font-size: 0.9rem;
margin-top: 0.5rem;
}
.trend-up { color: var(--success); }
.trend-down { color: var(--danger); }
@media (max-width: 1100px) {
.dash-widget.col-3,
.dash-widget.col-4,
.dash-widget.col-6 { grid-column: span 6; }
.dash-widget.col-8,
.dash-widget.col-12 { grid-column: span 12; }
}
@media (max-width: 700px) {
.dash-widget.col-3,
.dash-widget.col-4,
.dash-widget.col-6,
.dash-widget.col-8,
.dash-widget.col-12 { grid-column: span 12; }
}
/* CRM Kanban Board Styles */
.kanban-board {
display: flex;
gap: 1.5rem;
overflow-x: auto;
padding-bottom: 1.5rem;
min-height: 65vh;
align-items: flex-start;
}
.kanban-col {
background: var(--grey);
border-radius: 8px;
min-width: 320px;
max-width: 320px;
display: flex;
flex-direction: column;
border: 1px solid var(--border);
}
.kanban-col-header {
padding: 1rem;
font-weight: bold;
border-bottom: 2px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.kb-dropzone {
padding: 1rem;
flex: 1;
min-height: 200px;
display: flex;
flex-direction: column;
gap: 1rem;
}
.kanban-card {
background: var(--app-field-bg);
border: 1px solid var(--border);
padding: 1rem;
border-radius: 6px;
cursor: grab;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
transition: transform 0.1s, border-color 0.2s;
}
.kanban-card:active {
cursor: grabbing;
transform: scale(0.98);
}
.kanban-card:hover {
border-color: var(--blue);
}
.kb-card-title { font-weight: bold; color: var(--app-text-primary); margin-bottom: 0.25rem; }
.kb-card-sub { font-size: 0.85rem; color: var(--app-text-muted); }
.kb-card-value { margin-top: 0.75rem; font-family: monospace; color: var(--blue); font-weight: bold; font-size: 1.1rem; }
/* ═══ DEAL PIPELINE REDESIGN ══════════════════════════════════════════════ */
/* ── Toolbar ── */
.dp-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-lg);
margin-bottom: var(--space-xl);
flex-wrap: wrap;
}
.dp-toolbar-left { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.dp-toolbar-right { display: flex; align-items: center; gap: var(--space-md); }
.dp-search {
display: flex;
align-items: center;
gap: var(--space-sm);
background: var(--color-field-bg);
border: 1px solid var(--color-field-border);
border-radius: var(--radius-md);
padding: 6px 12px;
transition: border-color 0.2s;
}
.dp-search:focus-within { border-color: var(--color-field-focus); }
.dp-search input {
border: none;
background: transparent;
color: var(--color-text);
font-size: var(--text-sm);
outline: none;
width: 180px;
}
.dp-search input::placeholder { color: var(--color-field-placeholder); }
.dp-filter-group { display: flex; gap: var(--space-sm); }
.dp-filter-select {
background: var(--color-field-bg);
border: 1px solid var(--color-field-border);
border-radius: var(--radius-md);
padding: 6px 10px;
color: var(--color-text);
font-size: var(--text-sm);
cursor: pointer;
outline: none;
}
.dp-filter-select option { background: var(--color-bg-2); color: var(--color-text); }
.dp-filter-select:focus { border-color: var(--color-field-focus); }
.dp-view-toggle {
display: flex;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.dp-view-btn {
background: transparent;
border: none;
padding: 6px 10px;
color: var(--color-text-muted);
cursor: pointer;
display: flex;
align-items: center;
transition: all 0.15s;
}
.dp-view-btn .material-symbols-outlined { font-size: 20px; }
.dp-view-btn:hover { color: var(--color-text); background: rgba(255,255,255,.05); }
.dp-view-btn.active {
color: var(--color-accent);
background: rgba(245,158,11,.1);
}
/* ── KPI Cards ── */
.dp-kpi-strip {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.dp-kpi {
display: flex;
align-items: flex-start;
gap: var(--space-md);
border-left: 3px solid var(--kpi-accent, var(--color-primary));
}
.dp-kpi-icon-wrap {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.dp-kpi-icon-wrap .material-symbols-outlined { font-size: 22px; }
.dp-kpi-body { flex: 1; min-width: 0; }
.dp-kpi-label {
display: block;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.dp-kpi-value {
display: block;
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--color-text);
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
/* ── Funnel Distribution Bar ── */
.dp-funnel-bar {
display: flex;
height: 8px;
border-radius: var(--radius-full);
overflow: hidden;
margin-bottom: var(--space-xl);
background: var(--color-surface);
}
.dp-funnel-segment {
height: 100%;
transition: width 0.5s ease;
position: relative;
cursor: pointer;
}
.dp-funnel-segment:hover { filter: brightness(1.2); }
.dp-funnel-segment:first-child { border-radius: var(--radius-full) 0 0 var(--radius-full); }
.dp-funnel-segment:last-child { border-radius: 0 var(--radius-full) var(--radius-full) 0; }
/* ── Kanban Board ── */
.dp-kanban-board {
display: flex;
gap: var(--space-md);
overflow-x: auto;
padding-bottom: var(--space-lg);
align-items: flex-start;
min-height: 55vh;
scroll-behavior: smooth;
}
.dp-kanban-board::-webkit-scrollbar { height: 6px; }
.dp-kanban-board::-webkit-scrollbar-track { background: transparent; }
.dp-kanban-board::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: var(--radius-full);
}
.dp-kanban-col {
flex: 1 1 0;
min-width: 220px;
max-width: 320px;
display: flex;
flex-direction: column;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
transition: border-color 0.2s, box-shadow 0.2s;
}
.dp-kanban-col.drag-over {
border-color: var(--color-accent);
box-shadow: 0 0 0 2px rgba(245,158,11,.2), var(--shadow-md);
}
/* ── Column Header ── */
.dp-col-header {
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--color-border);
}
.dp-col-header-top {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: 4px;
}
.dp-col-dot {
width: 10px;
height: 10px;
border-radius: var(--radius-full);
flex-shrink: 0;
}
.dp-col-title {
font-weight: var(--weight-semibold);
font-size: var(--text-sm);
color: var(--color-text);
flex: 1;
}
.dp-col-count {
font-size: var(--text-xs);
font-weight: var(--weight-bold);
color: var(--color-text-muted);
background: rgba(255,255,255,.08);
padding: 2px 8px;
border-radius: var(--radius-full);
font-variant-numeric: tabular-nums;
}
.dp-col-value {
font-size: var(--text-xs);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
margin-bottom: 6px;
}
.dp-col-bar-track {
height: 3px;
background: rgba(255,255,255,.06);
border-radius: var(--radius-full);
overflow: hidden;
}
.dp-col-bar-fill {
height: 100%;
border-radius: var(--radius-full);
transition: width 0.5s ease;
}
/* ── Kanban Cards Drop Zone ── */
.dp-kanban-cards {
flex: 1;
padding: var(--space-sm);
min-height: 120px;
display: flex;
flex-direction: column;
gap: var(--space-sm);
overflow-y: auto;
max-height: calc(100vh - 420px);
}
.dp-kanban-cards::-webkit-scrollbar { width: 4px; }
.dp-kanban-cards::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: var(--radius-full);
}
/* ── Deal Card ── */
.dp-deal-card {
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-md);
cursor: grab;
transition: transform 0.1s, box-shadow 0.2s, border-color 0.2s;
position: relative;
}
.dp-deal-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.dp-deal-card:hover .dp-card-actions { opacity: 1; }
.dp-deal-card:active { cursor: grabbing; transform: scale(0.98); }
.dp-deal-card.dragging { opacity: 0.4; transform: scale(0.95); }
.dp-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-sm);
margin-bottom: var(--space-sm);
}
.dp-card-title {
font-weight: var(--weight-semibold);
font-size: var(--text-sm);
color: var(--color-text);
line-height: var(--leading-tight);
flex: 1;
}
.dp-card-actions {
display: flex;
gap: 2px;
opacity: 0;
transition: opacity 0.15s;
}
.dp-card-action-btn {
width: 24px;
height: 24px;
border-radius: var(--radius-sm);
border: none;
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.1s;
}
.dp-card-action-btn:hover {
background: rgba(255,255,255,.1);
color: var(--color-text);
}
.dp-card-action-btn .material-symbols-outlined { font-size: 16px; }
.dp-card-contact {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-sm);
}
.dp-card-avatar {
width: 22px;
height: 22px;
border-radius: var(--radius-full);
background: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: var(--weight-bold);
color: #fff;
flex-shrink: 0;
text-transform: uppercase;
}
.dp-card-contact-name {
font-size: var(--text-xs);
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dp-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
}
.dp-card-value {
font-weight: var(--weight-bold);
font-size: var(--text-base);
color: var(--color-primary);
font-variant-numeric: tabular-nums;
}
.dp-card-meta {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.dp-card-prob {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: 2px 7px;
border-radius: var(--radius-full);
font-variant-numeric: tabular-nums;
}
.dp-card-prob.prob-high { background: rgba(39,174,96,.15); color: var(--color-success); }
.dp-card-prob.prob-med { background: rgba(245,158,11,.15); color: var(--color-warning); }
.dp-card-prob.prob-low { background: rgba(231,76,60,.15); color: var(--color-danger); }
.dp-card-age {
font-size: var(--text-xs);
color: var(--color-text-muted);
display: flex;
align-items: center;
gap: 2px;
}
.dp-card-age .material-symbols-outlined { font-size: 13px; }
/* ── Empty State ── */
.dp-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-16) var(--space-xl);
text-align: center;
}
.dp-empty-illustration {
margin-bottom: var(--space-xl);
opacity: 0.8;
}
/* ── Funnel View ── */
.dp-funnel-container {
display: flex;
flex-direction: column;
gap: var(--space-sm);
max-width: 800px;
margin: 0 auto;
padding: var(--space-xl) 0;
}
.dp-funnel-stage {
display: flex;
align-items: center;
gap: var(--space-lg);
padding: var(--space-lg);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: border-color 0.2s;
}
.dp-funnel-stage:hover { border-color: var(--color-primary); }
.dp-funnel-stage-left {
display: flex;
align-items: center;
gap: var(--space-md);
min-width: 140px;
}
.dp-funnel-stage-dot {
width: 12px;
height: 12px;
border-radius: var(--radius-full);
flex-shrink: 0;
}
.dp-funnel-stage-name {
font-weight: var(--weight-semibold);
font-size: var(--text-base);
color: var(--color-text);
}
.dp-funnel-bar-wrap {
flex: 1;
height: 28px;
background: rgba(255,255,255,.04);
border-radius: var(--radius-sm);
overflow: hidden;
position: relative;
}
.dp-funnel-bar-inner {
height: 100%;
border-radius: var(--radius-sm);
transition: width 0.6s ease;
display: flex;
align-items: center;
padding-left: var(--space-sm);
min-width: fit-content;
}
.dp-funnel-bar-label {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: rgba(255,255,255,.9);
white-space: nowrap;
padding: 0 var(--space-sm);
}
.dp-funnel-stage-stats {
display: flex;
flex-direction: column;
align-items: flex-end;
min-width: 100px;
}
.dp-funnel-stage-value {
font-weight: var(--weight-bold);
font-size: var(--text-base);
color: var(--color-text);
font-variant-numeric: tabular-nums;
}
.dp-funnel-stage-count {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.dp-funnel-conversion {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: 2px var(--space-lg);
color: var(--color-text-muted);
font-size: var(--text-xs);
}
.dp-funnel-conversion .material-symbols-outlined { font-size: 16px; }
/* ── Project Controls & EVM ───────────────────────────────────────────── */
.evm-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.evm-card { background: var(--app-field-bg); padding: 1.5rem; border: 1px solid var(--border); border-radius: 8px; text-align: center; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.evm-card-title { font-size: 0.85rem; color: var(--app-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.evm-card-value { font-size: 2rem; font-weight: bold; font-family: monospace; margin-bottom: 0.5rem; }
.evm-health-healthy { color: #10b981; }
.evm-health-warning { color: #f59e0b; }
.evm-health-critical { color: #ef4444; }
.evm-variance-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
/* ── RBAC Role-Based Dashboard Hero Panels ─────────────────────────────────── */
@keyframes rbac-pulse {
0%, 100% { box-shadow: 0 0 6px rgba(52,211,153,.6); }
50% { box-shadow: 0 0 14px rgba(52,211,153,1); }
}
.rbac-role-panel {
background: var(--app-field-bg);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.rbac-panel-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
padding: 18px 20px 14px;
border-bottom: 1px solid var(--border);
background: rgba(0,0,0,.12);
}
.rbac-panel-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--app-text-primary);
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.rbac-panel-subtitle {
font-size: 11px;
letter-spacing: .6px;
color: var(--app-text-muted);
text-transform: uppercase;
}
.rbac-kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
@media (max-width: 900px) {
.rbac-kpi-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.rbac-kpi-row { grid-template-columns: 1fr; }
.rbac-panel-header { flex-direction: column; }
}
.rbac-kpi-card {
padding: 18px 20px;
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
}
.rbac-kpi-card:last-child { border-right: none; }
.rbac-kpi-card.rbac-kpi-highlight {
background: rgba(96,165,250,.04);
}
.rbac-kpi-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--app-text-muted);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
}
.rbac-kpi-badge {
background: rgba(255,255,255,.08);
padding: 1px 6px;
border-radius: 4px;
font-size: 9px;
letter-spacing: .4px;
color: var(--app-text-muted);
font-weight: 600;
}
.rbac-kpi-value {
font-size: 1.9rem;
font-weight: 700;
color: var(--app-text-primary);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.rbac-kpi-sub {
font-size: 11px;
color: var(--app-text-muted);
margin-top: 6px;
}
.rbac-live-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: #34D399;
box-shadow: 0 0 6px rgba(52,211,153,.6);
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { box-shadow: 0 0 6px rgba(52,211,153,.6); }
50% { box-shadow: 0 0 12px rgba(52,211,153,1); }
}
/* Brand standing rule: top-left reads "Spinden AI", never "AITOPIA".
Class was named .rbac-aitopia-callout pre-2026-05-26; the alias is
kept on the same rule for backwards compat in case stale HTML still
references it, but new markup must use .rbac-agentic-callout. */
.rbac-agentic-callout,
.rbac-aitopia-callout {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 20px;
border-top: 1px solid var(--border);
background: rgba(167,139,250,.04);
flex-wrap: wrap;
}
@media (max-width: 900px) {
#rbac-finance-panel > div:nth-child(3) { grid-template-columns: 1fr 1fr !important; }
#rbac-finance-panel > div:nth-child(4) { grid-template-columns: 1fr !important; }
#rbac-field-panel > div:nth-child(2) { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
#rbac-finance-panel > div:nth-child(3) { grid-template-columns: 1fr 1fr !important; }
#rbac-finance-panel > div:nth-child(4) { grid-template-columns: 1fr !important; }
}
/* ── /RBAC Role-Based Dashboard Hero Panels ─────────────────────────────────── */
/* ── SKELETON LOADING SCREENS ────────────────────────────────────────────────── */
.skeleton-loader {
display: flex;
flex-direction: column;
gap: 12px;
}
.skeleton-item {
height: 16px;
border-radius: 6px;
background: linear-gradient(
90deg,
var(--border) 0%,
rgba(255, 255, 255, 0.2) 50%,
var(--border) 100%
);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skeleton-active {
opacity: 0.7;
}
/* ── /SKELETON LOADING SCREENS ────────────────────────────────────────────── */
/* ── CARD & PANEL HOVER EFFECTS ─────────────────────────────────────────────── */
.card, .panel {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover, .panel:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transition: all 0.2s ease;
}
/* ── /CARD & PANEL HOVER EFFECTS ─────────────────────────────────────────────── */
/* ── EMPTY STATE ────────────────────────────────────────────────────────────────── */
.empty-state {
text-align: center;
padding: 3rem 1.5rem;
color: var(--app-text-muted);
}
.empty-state h3 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.empty-state p {
font-size: 0.9rem;
}
/* ── /EMPTY STATE ────────────────────────────────────────────────────────────────── */
/* ── STATUS INDICATOR ───────────────────────────────────────────────────────────── */
.status-indicator {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 6px;
}
.status-indicator.green {
background: #4caf50;
}
.status-indicator.yellow {
background: #ff9800;
}
.status-indicator.red {
background: #f44336;
}
.status-indicator.grey {
background: #9e9e9e;
}
.status-indicator.pulse {
animation: status-pulse 2s infinite;
}
@keyframes status-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* ── /STATUS INDICATOR ───────────────────────────────────────────────────────────── */
/* ── PROGRESS BAR ───────────────────────────────────────────────────────────────── */
.progress-bar-container {
width: 100%;
background: var(--app-field-bg);
border-radius: 4px;
overflow: hidden;
height: 8px;
}
.progress-bar-fill {
height: 100%;
border-radius: 4px;
transition: width 0.3s ease;
background: var(--blue);
}
/* ── /PROGRESS BAR ───────────────────────────────────────────────────────────────── */
/* ── METRIC CARD ───────────────────────────────────────────────────────────────── */
.metric-card {
padding: 1.25rem;
border-radius: 8px;
background: var(--app-field-bg);
border: 1px solid var(--border);
}
.metric-card .metric-value {
font-size: 1.75rem;
font-weight: 700;
line-height: 1.2;
}
.metric-card .metric-label {
font-size: 0.8rem;
color: var(--app-text-muted);
margin-top: 0.25rem;
}
.metric-card .metric-trend {
font-size: 0.75rem;
margin-top: 0.5rem;
}
.metric-card .metric-trend.up {
color: #4caf50;
}
.metric-card .metric-trend.down {
color: #f44336;
}
/* ── /METRIC CARD ───────────────────────────────────────────────────────────────── */
/* ── VIEW TRANSITION ANIMATIONS ─────────────────────────────────────────────────── */
::view-transition-old(root) {
animation: fade-out 0.15s ease-out;
}
::view-transition-new(root) {
animation: fade-in 0.15s ease-in;
}
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* ── /VIEW TRANSITION ANIMATIONS ─────────────────────────────────────────────────── */
/* ═══ GL REPORTS — KPI ORBS ══════════════════════════════════════════════════ */
.gl-orb-row {
display: flex;
justify-content: space-around;
align-items: center;
padding: 2.5rem 1.5rem;
gap: 1.5rem;
background: var(--card-bg, rgba(10, 22, 40, 0.6));
border-radius: 12px;
border: 1px solid var(--border);
}
.gl-orb {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.gl-orb__label {
font-size: 0.85rem;
color: var(--app-text-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.6px;
}
.gl-orb__sphere {
--orb-color: #60A5FA;
--orb-r: 96;
--orb-g: 165;
--orb-b: 250;
width: 170px;
height: 170px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
/* Multi-layer radial gradient for 3D depth */
background:
radial-gradient(ellipse 55% 40% at 35% 25%, rgba(255,255,255,0.12) 0%, transparent 70%),
radial-gradient(ellipse 80% 80% at 50% 50%, rgba(var(--orb-r),var(--orb-g),var(--orb-b),0.08) 0%, transparent 60%),
radial-gradient(circle at 50% 110%, rgba(var(--orb-r),var(--orb-g),var(--orb-b),0.12) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(6, 12, 27, 0.95) 0%, rgba(10, 22, 40, 0.85) 100%);
border: 2px solid rgba(var(--orb-r),var(--orb-g),var(--orb-b), 0.6);
box-shadow:
0 0 40px 8px rgba(var(--orb-r),var(--orb-g),var(--orb-b), 0.18),
0 0 80px 16px rgba(var(--orb-r),var(--orb-g),var(--orb-b), 0.08),
inset 0 0 30px 5px rgba(var(--orb-r),var(--orb-g),var(--orb-b), 0.1),
inset 0 -20px 40px -10px rgba(var(--orb-r),var(--orb-g),var(--orb-b), 0.08);
transition: box-shadow 0.4s ease, transform 0.3s ease;
}
.gl-orb__sphere:hover {
transform: scale(1.03);
box-shadow:
0 0 50px 12px rgba(var(--orb-r),var(--orb-g),var(--orb-b), 0.25),
0 0 100px 24px rgba(var(--orb-r),var(--orb-g),var(--orb-b), 0.1),
inset 0 0 35px 8px rgba(var(--orb-r),var(--orb-g),var(--orb-b), 0.14),
inset 0 -20px 40px -10px rgba(var(--orb-r),var(--orb-g),var(--orb-b), 0.1);
}
.gl-orb__sphere--green {
--orb-color: #34D399;
--orb-r: 52;
--orb-g: 211;
--orb-b: 153;
}
.gl-orb__sphere--red {
--orb-color: #EF4444;
--orb-r: 239;
--orb-g: 68;
--orb-b: 68;
}
.gl-orb__sphere--blue {
--orb-color: #60A5FA;
--orb-r: 96;
--orb-g: 165;
--orb-b: 250;
}
/* Primary specular highlight — top-left crescent */
.gl-orb__highlight {
position: absolute;
top: 14px;
left: 22px;
width: 50px;
height: 30px;
background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.08) 50%, transparent 75%);
border-radius: 50%;
transform: rotate(-35deg);
pointer-events: none;
}
/* Secondary rim light — bottom arc reflection */
.gl-orb__highlight::after {
content: '';
position: absolute;
bottom: -105px;
left: 10px;
width: 80px;
height: 25px;
background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.06) 0%, transparent 70%);
border-radius: 50%;
transform: rotate(35deg);
}
.gl-orb__amount {
font-size: 1.55rem;
font-weight: bold;
color: #fff;
font-family: 'DM Mono', 'Fira Code', monospace;
text-shadow: 0 0 12px rgba(var(--orb-r),var(--orb-g),var(--orb-b), 0.4);
position: relative;
z-index: 1;
}
.gl-orb__badge {
font-size: 0.7rem;
margin-top: 4px;
padding: 2px 10px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.7);
position: relative;
z-index: 1;
}
/* ═══ GL REPORTS — SANKEY DIAGRAM ════════════════════════════════════════════ */
#gl-sankey-card {
background: var(--card-bg, rgba(10, 22, 40, 0.6));
}
.gl-sankey-node {
position: absolute;
padding: 8px 16px;
border-radius: 6px;
font-size: 0.82rem;
font-weight: 500;
color: #fff;
white-space: nowrap;
pointer-events: auto;
transition: transform 0.15s ease, box-shadow 0.15s ease;
z-index: 2;
}
.gl-sankey-node:hover {
transform: scale(1.04);
}
.gl-sankey-node--revenue {
background: rgba(52, 211, 153, 0.12);
border: 1px solid rgba(52, 211, 153, 0.45);
}
.gl-sankey-node--cogs {
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.45);
}
.gl-sankey-node--opex {
background: rgba(167, 139, 250, 0.12);
border: 1px solid rgba(167, 139, 250, 0.45);
}
.gl-sankey-node--net {
background: rgba(96, 165, 250, 0.12);
border: 1px solid rgba(96, 165, 250, 0.45);
}
.gl-sankey-node__value {
display: block;
font-size: 0.72rem;
color: var(--app-text-muted);
margin-top: 2px;
font-family: 'DM Mono', monospace;
}
@media (max-width: 768px) {
.gl-orb-row { flex-direction: column; }
.gl-orb__sphere { width: 120px; height: 120px; }
.gl-orb__amount { font-size: 1.1rem; }
}
/* ==========================================================================
DESIGN SYSTEM v2 — Overhaul Layer
Added: 2026-03-26
This section progressively enhances existing components using the expanded
token system. It sits at the end of core.css to override defaults.
========================================================================== */
/* ── GLOBAL TYPOGRAPHY ──────────────────────────────────────────────────── */
body {
font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
font-size: var(--text-base);
line-height: var(--leading-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; /* Inter stylistic sets */
}
/* ── FLOORPLAN SYSTEM ───────────────────────────────────────────────────── */
/* Each module section can add a floorplan class to its root .section div.
Floorplans standardize layout without touching per-module content. */
/* Command Center: KPI row → 2-col card grid → optional full-width detail */
.floorplan-command-center {
display: flex;
flex-direction: column;
gap: var(--space-xl);
max-width: var(--layout-content-max);
margin: 0 auto;
padding: var(--space-xl);
}
.floorplan-command-center .kpi-row,
.floorplan-command-center .fp-kpi-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-lg);
}
.floorplan-command-center .card-grid,
.floorplan-command-center .fp-card-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
}
.floorplan-command-center .fp-full-width {
grid-column: 1 / -1;
}
@media (max-width: 900px) {
.floorplan-command-center .card-grid,
.floorplan-command-center .fp-card-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.floorplan-command-center .kpi-row,
.floorplan-command-center .fp-kpi-row {
grid-template-columns: repeat(2, 1fr);
}
.floorplan-command-center { padding: var(--space-lg); gap: var(--space-lg); }
}
/* List + Detail: filter bar → scrollable list (60%) + detail panel (40%) */
.floorplan-list-detail {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.floorplan-list-detail .fp-filter-bar {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-xl);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.floorplan-list-detail .fp-split {
display: flex;
flex: 1;
overflow: hidden;
}
.floorplan-list-detail .fp-list-pane {
flex: 3;
overflow-y: auto;
border-right: 1px solid var(--color-border);
}
.floorplan-list-detail .fp-detail-pane {
flex: 2;
overflow-y: auto;
background: var(--color-surface-2);
}
@media (max-width: 900px) {
.floorplan-list-detail .fp-split { flex-direction: column; }
.floorplan-list-detail .fp-list-pane { border-right: none; border-bottom: 1px solid var(--color-border); }
.floorplan-list-detail .fp-detail-pane { min-height: 300px; }
}
@media (max-width: 600px) {
.floorplan-list-detail .fp-detail-pane { display: none; }
}
/* Tabbed Workspace: tab bar at top → each tab contains a sub-floorplan */
.floorplan-tabbed {
display: flex;
flex-direction: column;
height: 100%;
}
.floorplan-tabbed .fp-tab-bar {
display: flex;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-xl);
border-bottom: 1px solid var(--color-border);
overflow-x: auto;
flex-shrink: 0;
scrollbar-width: none;
}
.floorplan-tabbed .fp-tab-bar::-webkit-scrollbar { display: none; }
.floorplan-tabbed .fp-tab-panel {
flex: 1;
overflow-y: auto;
padding: var(--space-xl);
}
/* Form / Editor: header → grouped form sections → sticky footer */
.floorplan-form {
display: flex;
flex-direction: column;
height: 100%;
max-width: 960px;
margin: 0 auto;
width: 100%;
}
.floorplan-form .fp-form-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-lg) var(--space-xl);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.floorplan-form .fp-form-body {
flex: 1;
overflow-y: auto;
padding: var(--space-xl);
}
.floorplan-form .fp-form-section {
margin-bottom: var(--space-8);
}
.floorplan-form .fp-form-section-title {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: .6px;
color: var(--color-text-muted);
margin-bottom: var(--space-lg);
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--color-border);
}
.floorplan-form .fp-form-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-sm);
padding: var(--space-md) var(--space-xl);
border-top: 1px solid var(--color-border);
flex-shrink: 0;
}
/* Fullscreen Canvas: minimal chrome, full viewport */
.floorplan-canvas {
position: relative;
height: 100%;
overflow: hidden;
}
.floorplan-canvas .fp-canvas-header {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.floorplan-canvas .fp-canvas-body {
flex: 1;
overflow: auto;
}
/* ── ENHANCED CARDS ─────────────────────────────────────────────────────── */
.card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--card-radius, var(--radius-md));
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.card:hover {
border-color: var(--card-hover-border);
}
.card-header {
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--table-border);
display: flex;
align-items: center;
justify-content: space-between;
}
.card-title {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--color-text);
}
.card-body {
padding: var(--space-lg);
}
.card-footer {
padding: var(--space-md) var(--space-lg);
border-top: 1px solid var(--table-border);
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-sm);
}
/* KPI Card variant */
.kpi-card,
.stat-card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
padding: var(--space-lg) var(--space-5);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.kpi-card:hover,
.stat-card:hover {
border-color: var(--card-hover-border);
box-shadow: var(--card-hover-shadow);
}
.kpi-card .kpi-value,
.stat-card .stat-value {
font-size: var(--kpi-number-size);
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
letter-spacing: -.5px;
line-height: 1.2;
}
.kpi-card .kpi-label,
.stat-card .stat-label {
font-size: var(--kpi-label-size);
font-weight: var(--weight-medium);
color: var(--color-text-muted);
margin-bottom: var(--space-sm);
}
/* ── ENHANCED TABLES ────────────────────────────────────────────────────── */
/* Sticky headers, striping, hover actions, tabular-nums */
table thead th {
position: sticky;
top: 0;
z-index: 10;
background: var(--table-header-bg);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: .5px;
color: var(--table-header-text);
padding: var(--table-cell-padding);
border-bottom: 1px solid var(--color-border);
white-space: nowrap;
}
table tbody tr {
border-bottom: 1px solid var(--table-border);
transition: background var(--transition-fast);
}
table tbody tr:nth-child(even) {
background: var(--table-stripe);
}
table tbody tr:hover {
background: var(--table-row-hover);
}
table tbody td {
padding: var(--table-cell-padding);
font-size: var(--text-sm);
vertical-align: middle;
}
/* Right-align numeric columns */
table td.num,
table th.num,
table td[data-type="number"],
table th[data-type="number"] {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Inline row actions — appear on hover */
.row-actions {
opacity: 0;
transition: opacity var(--transition-fast);
display: flex;
gap: var(--space-xs);
}
tr:hover .row-actions { opacity: 1; }
/* ── ENHANCED BUTTONS ───────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
height: var(--btn-height);
padding: var(--btn-padding);
border-radius: var(--btn-radius);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--btn-font-weight);
cursor: pointer;
border: 1px solid transparent;
transition: all var(--transition-fast);
white-space: nowrap;
line-height: 1;
text-decoration: none;
}
.btn-sm { height: var(--btn-height-sm); font-size: var(--text-xs); padding: var(--space-1) var(--space-3); }
.btn-lg { height: var(--btn-height-lg); font-size: var(--text-base); padding: var(--space-3) var(--space-6); }
.btn-primary {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
.btn-primary:hover { background: #3580C2; border-color: #3580C2; }
.btn-primary:active { background: #265F96; }
.btn-amber {
background: rgba(245, 158, 11, .85);
color: #1a1d23;
border-color: rgba(251, 191, 36, .5);
font-weight: 600;
}
.btn-amber:hover { background: rgba(245, 158, 11, .95); border-color: rgba(251, 191, 36, .7); box-shadow: 0 4px 16px rgba(245, 158, 11, .25); }
.btn-amber:active { background: rgba(217, 119, 6, .95); }
.btn-secondary,
.btn-outline {
background: transparent;
color: var(--color-text-muted);
border-color: var(--color-border);
}
.btn-secondary:hover,
.btn-outline:hover { border-color: var(--color-text-muted); color: var(--color-text); background: var(--color-surface); }
.btn-success { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.btn-success:hover { background: #2ECC71; }
.btn-danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.btn-danger:hover { background: #C0392B; }
.btn-ghost {
background: transparent;
color: var(--color-text-muted);
border-color: transparent;
}
.btn-ghost:hover { background: var(--color-surface); color: var(--color-text); }
/* ── ENHANCED FORMS ─────────────────────────────────────────────────────── */
.form-group {
margin-bottom: var(--space-lg);
}
.form-group label,
.form-label {
display: block;
font-size: var(--field-label-size);
font-weight: var(--field-label-weight);
color: var(--field-label-color);
margin-bottom: var(--space-xs);
}
.form-group label .required,
.form-label .required {
color: var(--field-error-color);
margin-left: 2px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
select,
textarea {
width: 100%;
height: var(--field-height);
padding: var(--field-padding);
background: var(--color-field-bg);
border: 1px solid var(--color-field-border);
border-radius: var(--field-radius);
color: var(--color-field-text);
font-family: var(--font-sans);
font-size: var(--text-base);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
outline: none;
}
textarea { height: auto; min-height: 80px; resize: vertical; }
select { cursor: pointer; }
input:focus, select:focus, textarea:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(46,117,182,.15);
}
/* Inline validation */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
border-color: var(--field-error-color);
box-shadow: 0 0 0 3px rgba(231,76,60,.12);
}
.form-error {
display: block;
font-size: var(--text-xs);
color: var(--field-error-color);
margin-top: var(--space-xs);
}
/* Form grid — responsive 2-col */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
.form-grid .full-width { grid-column: 1 / -1; }
@media (max-width: 600px) {
.form-grid { grid-template-columns: 1fr; }
}
/* ── STATUS BADGES ──────────────────────────────────────────────────────── */
.badge,
.status-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: var(--badge-padding);
border-radius: var(--badge-radius);
font-size: var(--badge-font-size);
font-weight: var(--badge-font-weight);
line-height: 1;
white-space: nowrap;
}
.badge-success, .status-badge.paid, .status-badge.active, .status-badge.complete { background: rgba(39,174,96,.12); color: #4ADE80; }
.badge-warning, .status-badge.pending, .status-badge.review, .status-badge.in-progress { background: rgba(245,158,11,.12); color: #FBBF24; }
.badge-danger, .status-badge.overdue, .status-badge.expired, .status-badge.failed { background: rgba(231,76,60,.12); color: #F87171; }
.badge-info, .status-badge.draft, .status-badge.new { background: rgba(46,117,182,.12); color: #60A5FA; }
.badge-neutral, .status-badge.closed, .status-badge.archived { background: var(--color-surface); color: var(--color-text-muted); }
/* ── SIDEBAR SEARCH ─────────────────────────────────────────────────────── */
.sidebar-search {
padding: var(--space-md) var(--space-lg);
flex-shrink: 0;
}
.sidebar-search-wrap {
position: relative;
display: flex;
align-items: center;
}
.sidebar-search-icon {
position: absolute;
left: 10px;
color: var(--color-text-muted);
pointer-events: none;
opacity: .6;
}
.sidebar-search-wrap {
border-radius: 9px;
transition: box-shadow .22s ease;
}
.sidebar-search-wrap input {
width: 100%;
padding: 7px 44px 7px 30px;
background:
linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
rgba(14,16,22,.45);
backdrop-filter: blur(8px) saturate(135%);
-webkit-backdrop-filter: blur(8px) saturate(135%);
border: 1px solid rgba(255,255,255,.06);
border-radius: 9px;
color: var(--color-sidebar-text);
font-size: 12.5px;
font-family: var(--font-sans);
letter-spacing: -0.1px;
outline: none;
height: 32px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
0 1px 2px rgba(0,0,0,.18);
transition: background .18s ease, border-color .18s ease, box-shadow .22s ease;
caret-color: var(--ls-amber-2, #FFC560);
}
.sidebar-search-wrap input::placeholder {
color: rgba(200,216,255,.38);
transition: color .18s ease;
}
.sidebar-search-wrap input:hover {
background:
linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)),
rgba(14,16,22,.55);
border-color: rgba(255,255,255,.1);
}
.sidebar-search-wrap input:hover::placeholder { color: rgba(200,216,255,.52); }
.sidebar-search-wrap input:focus {
border-color: rgba(245,165,36,.32);
background:
linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.02)),
rgba(14,16,22,.7);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
0 0 0 3px rgba(245,165,36,.12),
0 4px 12px rgba(0,0,0,.28);
}
.sidebar-search-icon {
left: 10px;
opacity: .45;
transition: color .18s ease, opacity .18s ease;
}
.sidebar-search-wrap:focus-within .sidebar-search-icon {
color: var(--ls-amber-2, #FFC560);
opacity: 1;
}
.sidebar-search-kbd {
position: absolute;
right: 8px;
font-size: 9px;
font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
font-weight: 500;
color: rgba(200,216,255,.4);
background: rgba(255,255,255,.02);
padding: 2px 5px;
border-radius: 4px;
border: 1px solid rgba(255,255,255,.07);
pointer-events: none;
line-height: 1.2;
letter-spacing: .3px;
transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.sidebar-search-wrap:focus-within .sidebar-search-kbd {
color: var(--ls-amber-2, #FFC560);
border-color: rgba(245,165,36,.28);
background: rgba(245,165,36,.06);
}
/* Hide Ctrl-K hint on narrow mobile widths — it's a desktop shortcut cue */
@media (max-width: 640px) {
.sidebar-search-kbd { display: none; }
.sidebar-search-wrap input { padding-right: 14px; }
}
/* ── BREADCRUMB ─────────────────────────────────────────────────────────── */
.topbar-breadcrumb {
display: flex;
align-items: center;
gap: 4px;
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: 2px;
}
.topbar-breadcrumb a {
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--transition-fast);
}
.topbar-breadcrumb a:hover { color: var(--color-text); }
.breadcrumb-sep { display: flex; align-items: center; color: var(--color-text-muted); opacity: .5; }
.breadcrumb-group { color: var(--color-text-muted); }
#breadcrumb-current { color: var(--color-text); font-weight: var(--weight-medium); }
@media (max-width: 768px) {
.topbar-breadcrumb { display: none; }
}
/* ── ENHANCED NAV ITEMS ─────────────────────────────────────────────────── */
#sidebar .nav-item {
padding: var(--nav-item-padding);
border-radius: var(--nav-item-radius);
transition: background var(--transition-fast), color var(--transition-fast);
}
#sidebar .nav-item:hover {
background: var(--nav-item-hover);
}
#sidebar .nav-item.active {
background: var(--nav-active-bg);
color: var(--nav-active-text);
border-left: 2.5px solid var(--nav-active-border);
}
/* ── ENHANCED MODALS ────────────────────────────────────────────────────── */
.modal-overlay {
background: var(--modal-overlay);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.modal {
background: var(--modal-bg);
border: 1px solid var(--modal-border);
border-radius: var(--modal-radius);
box-shadow: var(--modal-shadow);
}
/* ── GLOBAL FOCUS RING UPGRADE ──────────────────────────────────────────── */
*:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* ── UTILITY: TABULAR-NUMS ──────────────────────────────────────────────── */
.tabular-nums { font-variant-numeric: tabular-nums; }
.text-right { text-align: right; }
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.font-mono { font-family: var(--font-mono); }
/* ═══════════════════════════════════════════════════════════════════════════════
PLATFORM-WIDE NORMALIZATION
Progressive enhancement to unify ALL modules without breaking existing layouts.
Uses design tokens for colors, spacing, typography, and component tokens.
═══════════════════════════════════════════════════════════════════════════════ */
/* ── 1. UNIVERSAL SECTION PADDING & LAYOUT ──────────────────────────────────── */
.section {
padding: var(--space-lg) var(--space-xl);
}
.section[class*="floorplan"] {
max-width: 100%;
margin: 0 auto;
}
/* ── 2. KPI CARDS NORMALIZATION ─────────────────────────────────────────────── */
.kpi-strip,
.fin-cc-kpis,
.fin-cc-grid-kpi {
display: grid;
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
.kpi-strip {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* KPI card base styles */
.kpi-strip > *,
.fin-cc-kpi,
[style*="grid-template-columns: repeat(4"] > * {
padding: var(--space-lg);
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
border-left: 3px solid var(--color-primary);
transition: all var(--transition-fast);
}
.kpi-strip > *:hover,
.fin-cc-kpi:hover {
border-color: var(--card-hover-border);
box-shadow: var(--shadow-sm);
}
/* KPI label: muted, uppercase, small */
.kpi-strip [class*="label"],
.kpi-strip [class*="title"],
.fin-cc-kpi span:first-child {
display: block;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--space-sm);
}
/* KPI value: large, bold, tabular numerals */
.kpi-strip [class*="value"],
.fin-cc-kpi span:last-child {
display: block;
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--color-text);
font-variant-numeric: tabular-nums;
}
/* ── 3. MODULE HEADER NORMALIZATION ─────────────────────────────────────────── */
.module-header,
.fin-cc-header,
.section > .row:first-child {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: var(--space-lg) var(--space-xl);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-lg);
gap: var(--space-md);
}
.module-header > h1,
.module-header > h2,
.fin-cc-header > div:first-child {
margin: 0;
font-size: var(--text-xl);
font-weight: var(--weight-bold);
color: var(--color-text);
}
.module-header > p,
.module-header > .subtitle {
margin: 0;
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.module-header-actions {
display: flex;
gap: var(--space-md);
align-items: center;
}
/* ── 4. TAB BAR NORMALIZATION ────────────────────────────────────────────────── */
.tabs,
[class*="tab-bar"] {
display: flex;
gap: 0;
border-bottom: 1px solid var(--color-border);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
display: none;
}
.tab,
.tabs button,
[class*="tab-item"] {
height: 40px;
padding: 0 var(--space-md);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-muted);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
}
.tab:hover,
.tabs button:hover {
color: var(--color-text);
background: rgba(0, 0, 0, 0.02);
}
.tab.active,
.tabs button.active,
[class*="tab-item"].active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
/* ── 5. TABLE NORMALIZATION ─────────────────────────────────────────────────── */
table,
.table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: var(--space-lg) 0;
}
table thead,
.table thead {
background: var(--table-header-bg);
}
table thead th,
.table thead th {
position: sticky;
top: 0;
padding: var(--space-sm) var(--space-md);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-muted);
border-bottom: 2px solid var(--color-border);
background: var(--table-header-bg);
z-index: 10;
}
table tbody tr,
.table tbody tr {
transition: background-color var(--transition-fast);
}
table tbody tr:nth-child(even),
.table tbody tr:nth-child(even) {
background: var(--table-stripe);
}
table tbody tr:hover,
.table tbody tr:hover {
background: var(--table-row-hover);
}
table td,
.table td {
padding: var(--space-sm) var(--space-md);
font-size: var(--text-sm);
color: var(--color-text);
border-bottom: 1px solid var(--color-border);
}
table td:last-child,
.table td:last-child,
table td.num,
.table td.num {
font-variant-numeric: tabular-nums;
}
/* ── 6. CARD GRID NORMALIZATION ─────────────────────────────────────────────── */
.card-grid,
.fin-cc-grid-main,
[class*="grid-cards"],
[class*="-grid"] {
display: grid;
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
.card-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.card-grid .card,
.fin-cc-grid-main .card,
[class*="grid-cards"] .card {
border-radius: var(--card-radius);
border: 1px solid var(--card-border);
background: var(--card-bg);
transition: all var(--transition-fast);
}
.card-grid .card:hover,
.fin-cc-grid-main .card:hover {
border-color: var(--card-hover-border);
box-shadow: var(--shadow-sm);
}
/* ── 7. ACTION BUTTON NORMALIZATION ─────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--btn-height, 36px);
padding: 0 var(--space-lg);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
border-radius: var(--radius-sm);
border: none;
cursor: pointer;
transition: all var(--transition-fast);
gap: var(--space-sm);
}
.btn:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Button variants */
.btn-primary {
background: var(--color-primary);
color: white;
}
.btn-primary:hover {
opacity: 0.9;
box-shadow: var(--shadow-md);
}
.btn-amber {
background: rgba(245, 158, 11, .85);
color: #1a1d23;
font-weight: 600;
}
.btn-amber:hover {
opacity: 1;
background: rgba(245, 158, 11, .95);
box-shadow: 0 4px 16px rgba(245, 158, 11, .25);
}
.btn-outline {
background: transparent;
border: 1px solid var(--color-border);
color: var(--color-text);
}
.btn-outline:hover {
background: var(--color-surface);
border-color: var(--color-primary);
}
.btn-success {
background: var(--color-success);
color: white;
}
.btn-danger {
background: var(--color-danger);
color: white;
}
.btn-ghost {
background: transparent;
border: none;
color: var(--color-primary);
}
.btn-ghost:hover {
background: rgba(0, 0, 0, 0.02);
}
/* Button sizes */
.btn-sm {
height: 30px;
padding: 0 var(--space-md);
font-size: var(--text-xs);
}
/* ── 8. FORM INPUT NORMALIZATION ────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
height: var(--field-height, 36px);
padding: var(--space-sm) var(--space-md);
font-size: var(--text-sm);
font-family: var(--font-sans);
background: var(--color-field-bg, var(--color-surface-2));
border: 1px solid var(--color-field-border, var(--color-border));
border-radius: var(--radius-sm);
color: var(--color-text);
transition: all var(--transition-fast);
}
textarea {
height: auto;
min-height: 100px;
resize: vertical;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
border-color: var(--color-primary);
background: var(--color-surface);
box-shadow: 0 0 0 3px rgba(46,117,182,.15);
outline: none;
}
input::placeholder {
color: var(--color-text-muted);
opacity: 0.7;
}
.form-group {
margin-bottom: var(--space-lg);
}
.form-group label {
display: block;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--color-text-muted);
margin-bottom: var(--space-1);
text-transform: none;
}
/* ── 9. EMPTY STATE NORMALIZATION ────────────────────────────────────────────── */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-2xl);
text-align: center;
gap: var(--space-lg);
}
.empty-state-icon {
font-size: 3rem;
color: var(--color-text-muted);
opacity: 0.4;
}
.empty-state h3 {
margin: 0;
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-text);
}
.empty-state p {
margin: 0;
font-size: var(--text-sm);
color: var(--color-text-muted);
max-width: 400px;
}
.empty-state .btn {
margin-top: var(--space-md);
}
/* ── 10. MOBILE RESPONSIVENESS ──────────────────────────────────────────────── */
@media (max-width: 768px) {
.section {
padding: var(--space-md) var(--space-lg);
}
/* KPI strips: 2 columns on mobile */
.kpi-strip,
[style*="grid-template-columns: repeat(4"] {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
/* Card grids: 1 column on mobile */
.card-grid,
.fin-cc-grid-main,
[class*="grid-cards"] {
grid-template-columns: 1fr;
}
/* Tab bars: scrollable, hide scrollbar */
.tabs,
[class*="tab-bar"] {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
/* Tables: smaller font, horizontal scroll */
table,
.table {
font-size: var(--text-xs);
}
table th,
.table th {
font-size: var(--text-xs);
padding: var(--space-1) var(--space-sm);
}
table td,
.table td {
padding: var(--space-1) var(--space-sm);
font-size: var(--text-xs);
}
/* Module header: stack on mobile */
.module-header,
.fin-cc-header {
flex-direction: column;
align-items: flex-start;
padding: var(--space-md) var(--space-lg);
gap: var(--space-md);
}
/* Buttons: full width in certain contexts */
.btn-group .btn {
flex: 1;
}
/* Form inputs: full width on mobile */
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
}
}
/* ── 11. PRINT-FRIENDLY STYLES ──────────────────────────────────────────────── */
@media print {
/* Hide layout elements */
.sidebar,
.topbar,
[class*="nav"],
[class*="bottom-nav"],
.btn-group,
button:not(.print-visible) {
display: none !important;
}
/* Cards: clean, minimal */
.card,
[class*="panel"] {
box-shadow: none;
border: 1px solid var(--color-border);
page-break-inside: avoid;
}
/* Tables: print-optimized */
table,
.table {
margin: var(--space-lg) 0;
}
table tbody tr:nth-child(even) {
background: transparent;
}
table tbody tr:hover {
background: transparent;
}
/* Full width layout */
.section,
.container,
[class*="content"] {
max-width: 100%;
width: 100%;
}
/* Typography for printing */
body {
color: #000;
background: #fff;
}
/* Hide scrollable elements */
.tabs,
[class*="tab-bar"] {
overflow: visible;
}
}
/* ─── ROLE-BASED DASHBOARD STRIP ──────────────────────────────────────── */
.role-dashboard-strip {
padding: var(--space-xl);
background: linear-gradient(135deg, var(--card-bg) 0%, rgba(46,117,182,.02) 100%);
border-bottom: 1px solid var(--card-border);
margin-bottom: var(--space-xl);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.role-dashboard-greeting {
margin-bottom: var(--space-lg);
}
.role-dashboard-greeting-text {
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
color: var(--color-text);
margin-bottom: var(--space-xs);
}
.role-dashboard-greeting-text strong {
font-weight: var(--weight-bold);
color: var(--color-primary);
}
.role-dashboard-subtitle {
font-size: var(--text-sm);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: var(--weight-medium);
}
/* KPI Row Grid */
.role-kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
margin-bottom: var(--space-lg);
}
/* KPI Card */
.role-kpi-card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--radius-md);
padding: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-sm);
transition: all 0.2s ease;
border-left: 3px solid var(--color-border);
}
.role-kpi-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* KPI Card color variants */
.role-kpi-card--primary {
border-left-color: var(--color-primary);
}
.role-kpi-card--success {
border-left-color: var(--success);
}
.role-kpi-card--warning {
border-left-color: var(--warning);
}
.role-kpi-card--danger {
border-left-color: var(--danger);
}
.role-kpi-card--info {
border-left-color: var(--color-primary);
}
/* KPI Header (icon) */
.role-kpi-header {
display: flex;
align-items: center;
justify-content: flex-start;
}
.role-kpi-icon {
font-size: var(--text-lg);
color: var(--color-text-muted);
}
.role-kpi-card--primary .role-kpi-icon {
color: var(--color-primary);
}
.role-kpi-card--success .role-kpi-icon {
color: var(--success);
}
.role-kpi-card--warning .role-kpi-icon {
color: var(--warning);
}
.role-kpi-card--danger .role-kpi-icon {
color: var(--danger);
}
.role-kpi-card--info .role-kpi-icon {
color: var(--color-primary);
}
/* KPI Label */
.role-kpi-label {
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-muted);
font-weight: var(--weight-medium);
margin-top: auto;
}
/* KPI Value */
.role-kpi-value {
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
color: var(--color-text);
}
/* Quick Actions */
.role-quick-actions {
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
}
.role-quick-action {
padding: var(--space-sm) var(--space-md);
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.role-quick-action:hover {
background: var(--nav-active-bg);
border-color: var(--color-primary);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.role-quick-action:active {
transform: translateY(0);
box-shadow: none;
}
/* Responsive: tablet */
@media (max-width: 1024px) {
.role-kpi-row {
grid-template-columns: repeat(2, 1fr);
}
}
/* Responsive: mobile */
@media (max-width: 768px) {
.role-dashboard-strip {
padding: var(--space-lg);
margin-bottom: var(--space-lg);
}
.role-dashboard-greeting-text {
font-size: var(--text-lg);
}
.role-kpi-row {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
.role-kpi-card {
padding: var(--space-md);
}
.role-kpi-label {
font-size: var(--text-xs);
}
.role-kpi-value {
font-size: var(--text-xl);
}
.role-quick-actions {
gap: var(--space-xs);
}
.role-quick-action {
padding: var(--space-xs) var(--space-sm);
font-size: var(--text-xs);
flex: 1;
min-width: calc(50% - var(--space-xs));
}
}
/* Responsive: small mobile */
@media (max-width: 480px) {
.role-dashboard-strip {
padding: var(--space-md);
margin-bottom: var(--space-md);
}
.role-dashboard-greeting-text {
font-size: var(--text-base);
}
.role-kpi-row {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.role-kpi-card {
padding: var(--space-md);
flex-direction: row;
align-items: center;
gap: var(--space-md);
}
.role-kpi-header {
flex-shrink: 0;
}
.role-kpi-label {
font-size: var(--text-xs);
margin-top: 0;
}
.role-kpi-value {
font-size: var(--text-base);
}
.role-quick-action {
flex: 1;
min-width: unset;
font-size: var(--text-xs);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
LAYOUT DENSITY PRESETS
Applied via body.density-{compact|standard|comfortable}
═══════════════════════════════════════════════════════════════════════════ */
body.density-compact {
--space-xs: 2px;
--space-sm: 4px;
--space-md: 8px;
--space-lg: 12px;
--space-xl: 16px;
--text-xs: 10px;
--text-sm: 11px;
--text-base: 13px;
--field-height: 32px;
--btn-height: 30px;
}
body.density-compact .card { padding: 10px; }
body.density-compact table th,
body.density-compact table td { padding: 4px 8px; }
body.density-compact .tabs .tab { height: 34px; font-size: 11px; }
body.density-compact .kpi-strip > * { padding: 10px 12px; }
body.density-compact .role-kpi-card { padding: 10px 12px; }
body.density-comfortable {
--space-xs: 6px;
--space-sm: 10px;
--space-md: 16px;
--space-lg: 20px;
--space-xl: 28px;
--text-xs: 12px;
--text-sm: 13px;
--text-base: 15px;
--field-height: 44px;
--btn-height: 42px;
}
body.density-comfortable .card { padding: 22px; }
body.density-comfortable table th,
body.density-comfortable table td { padding: 12px 16px; }
body.density-comfortable .tabs .tab { height: 48px; font-size: 14px; }
body.density-comfortable .kpi-strip > * { padding: 20px 22px; }
body.density-comfortable .role-kpi-card { padding: 20px 22px; }
/* Standard density is the default — no overrides needed */
/* ═══════════════════════════════════════════════════════════════════════
TOPBAR SEARCH BAR — Full inline search with dropdown results
═══════════════════════════════════════════════════════════════════════ */
.topbar-left {
min-width: 0;
flex-shrink: 1;
}
.topbar-search-wrap {
position: relative;
flex: 0 1 420px;
min-width: 180px;
margin: 0 16px;
z-index: 60;
}
.topbar-search-bar {
display: flex;
align-items: center;
gap: 10px;
height: 38px;
padding: 0 6px 0 13px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.07);
background:
linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)),
rgba(14,16,22,.55);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.04),
0 1px 2px rgba(0,0,0,.25);
transition: border-color .18s ease, background .18s ease, box-shadow .22s ease, transform .18s ease;
cursor: text;
position: relative;
overflow: hidden;
}
.topbar-search-bar::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(140deg, rgba(245,165,36,0) 0%, rgba(245,165,36,0) 55%, rgba(245,165,36,.22) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity .2s ease;
pointer-events: none;
}
.topbar-search-bar:hover {
border-color: rgba(255,255,255,.11);
background:
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
rgba(14,16,22,.65);
}
.topbar-search-bar:hover::before { opacity: .6; }
.topbar-search-wrap.is-active .topbar-search-bar {
border-color: rgba(245,165,36,.32);
background:
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
rgba(14,16,22,.78);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 0 0 3px rgba(245,165,36,.12),
0 6px 18px rgba(0,0,0,.35);
}
.topbar-search-wrap.is-active .topbar-search-bar::before { opacity: 1; }
.topbar-search-icon {
width: 15px;
height: 15px;
flex-shrink: 0;
color: rgba(230,235,255,.38);
transition: color .18s ease, transform .18s ease;
}
.topbar-search-bar:hover .topbar-search-icon { color: rgba(230,235,255,.55); }
.topbar-search-wrap.is-active .topbar-search-icon {
color: var(--ls-amber-2, #FFC560);
}
#topbar-search-input {
flex: 1;
border: none;
background: transparent;
color: var(--color-text, #E6EBFF);
font-size: 13px;
font-family: var(--font-sans);
letter-spacing: -0.1px;
line-height: 38px;
outline: none;
min-width: 0;
caret-color: var(--ls-amber-2, #FFC560);
}
#topbar-search-input::placeholder {
color: rgba(230,235,255,.38);
opacity: 1;
transition: color .18s ease;
}
.topbar-search-bar:hover #topbar-search-input::placeholder { color: rgba(230,235,255,.5); }
.topbar-search-kbd {
flex-shrink: 0;
font-size: 9.5px;
font-weight: 500;
font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
letter-spacing: .3px;
color: rgba(230,235,255,.45);
border: 1px solid rgba(255,255,255,.08);
border-radius: 5px;
padding: 2px 6px;
background: rgba(255,255,255,.025);
pointer-events: none;
line-height: 1.3;
transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.topbar-search-wrap.is-active .topbar-search-kbd {
color: var(--ls-amber-2, #FFC560);
border-color: rgba(245,165,36,.28);
background: rgba(245,165,36,.06);
}
@media (max-width: 640px) {
.topbar-search-kbd { display: none; }
.topbar-search-bar { padding-right: 12px; }
}
/* ── Search Dropdown ── */
.topbar-search-dropdown {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
min-width: 100%;
width: max(100%, 520px);
max-width: min(760px, calc(100vw - 40px));
border-radius: 14px;
background:
radial-gradient(120% 80% at 0% 0%, rgba(245,165,36,.04) 0%, transparent 55%),
radial-gradient(120% 80% at 100% 100%, rgba(167,139,250,.03) 0%, transparent 55%),
linear-gradient(180deg, rgba(22,24,32,.92), rgba(12,14,20,.94));
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
border: 1px solid rgba(255,255,255,.07);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
0 24px 64px rgba(0,0,0,.55),
0 0 0 1px rgba(245,165,36,.04);
overflow: hidden;
opacity: 0;
transform: translateY(-4px);
transition: opacity .18s ease, transform .18s ease;
pointer-events: none;
}
.topbar-search-dropdown::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(160deg, rgba(245,165,36,.22) 0%, rgba(245,165,36,0) 35%, rgba(167,139,250,0) 65%, rgba(167,139,250,.14) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: .7;
}
.topbar-search-wrap.is-active .topbar-search-dropdown {
display: block;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.topbar-search-dropdown #command-bar-input {
width: 100%;
border: none;
background: transparent;
color: var(--color-text, #E6EBFF);
padding: 14px 18px;
font-size: 14px;
font-family: var(--font-sans);
letter-spacing: -0.1px;
outline: none;
border-bottom: 1px solid rgba(255,255,255,.06);
caret-color: var(--ls-amber-2, #FFC560);
}
.topbar-search-dropdown #command-bar-input::placeholder {
color: rgba(230,235,255,.38);
font-style: normal;
}
.topbar-search-dropdown #command-bar-results {
max-height: min(54vh, 460px);
overflow-y: auto;
padding: 6px 0 8px;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.1) transparent;
}
.topbar-search-dropdown #command-bar-results::-webkit-scrollbar { width: 8px; }
.topbar-search-dropdown #command-bar-results::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.08);
border-radius: 4px;
}
.topbar-search-dropdown #command-bar-results::-webkit-scrollbar-thumb:hover {
background: rgba(245,165,36,.22);
}
.topbar-search-dropdown .command-group-title {
padding: 12px 18px 6px;
color: rgba(230,235,255,.42);
font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
font-size: 10px;
font-weight: 500;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.topbar-search-dropdown .command-item {
margin: 0 8px 2px;
padding: 9px 12px;
border-radius: 9px;
color: var(--color-text, #E6EBFF);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
border: 1px solid transparent;
transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.topbar-search-dropdown .command-item:hover,
.topbar-search-dropdown .command-item.active {
background:
linear-gradient(180deg, rgba(245,165,36,.08), rgba(245,165,36,.03));
border-color: rgba(245,165,36,.18);
}
.topbar-search-dropdown .command-item.active {
box-shadow: inset 2px 0 0 var(--ls-amber-2, #FFC560);
}
.topbar-search-dropdown .command-item-title {
font-size: 13px;
font-weight: 500;
letter-spacing: -0.1px;
}
.topbar-search-dropdown .command-item-subtitle {
font-size: 11px;
color: rgba(230,235,255,.42);
margin-top: 2px;
font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
letter-spacing: .2px;
}
.topbar-search-dropdown .command-item-arrow {
color: var(--ls-amber-2, #FFC560);
}
.topbar-search-dropdown .command-item-badge {
font-size: 9.5px;
font-weight: 500;
font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
letter-spacing: .6px;
text-transform: uppercase;
color: rgba(230,235,255,.55);
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.025);
border-radius: 999px;
padding: 3px 9px;
white-space: nowrap;
transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.topbar-search-dropdown .command-item:hover .command-item-badge,
.topbar-search-dropdown .command-item.active .command-item-badge {
color: var(--ls-amber-2, #FFC560);
border-color: rgba(245,165,36,.3);
background: rgba(245,165,36,.08);
}
.topbar-search-dropdown .command-bar-footer {
border-top: 1px solid rgba(255,255,255,.05);
padding: 9px 16px;
display: flex;
gap: 14px;
color: rgba(230,235,255,.42);
font-size: 10.5px;
font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
letter-spacing: .3px;
background: rgba(0,0,0,.18);
}
.topbar-search-dropdown .command-bar-footer kbd {
border: 1px solid rgba(255,255,255,.08);
border-radius: 4px;
padding: 1px 5px;
background: rgba(255,255,255,.035);
color: rgba(230,235,255,.7);
font-size: 9.5px;
font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
}
/* ── Backdrop overlay when search is active ──
Reparented into #app at openSearchBar() time so it shares #app's
z-index:1 stacking context with the topbar (z:50). Overlay at z:49
stays below the topbar/dropdown, so the dropdown is NOT dimmed while
the rest of the app is. pointer-events:none — outside-click closing
is handled by the document mousedown listener in initCommandBar. */
#command-bar-overlay {
position: fixed;
inset: 0;
background: rgba(6,10,20,.45);
display: none;
z-index: 49;
pointer-events: none;
}
#command-bar-overlay.open {
display: block;
}
/* ── Badge colors for different action types ── */
.command-item-badge[data-type="Theme"],
.command-item-badge.badge-theme {
color: #A78BFA;
border-color: rgba(167,139,250,.3);
background: rgba(167,139,250,.1);
}
.command-item-badge[data-type="Density"],
.command-item-badge.badge-density {
color: #34D399;
border-color: rgba(52,211,153,.3);
background: rgba(52,211,153,.1);
}
.command-item-badge[data-type="Layout"],
.command-item-badge.badge-layout {
color: #FB923C;
border-color: rgba(251,146,60,.3);
background: rgba(251,146,60,.1);
}
/* ── Mobile: collapse search bar to icon ── */
@media (max-width: 768px) {
.topbar-search-wrap {
flex: 0 0 auto;
min-width: auto;
margin: 0 8px;
}
.topbar-search-bar {
width: 38px;
padding: 0;
justify-content: center;
border-radius: 999px;
overflow: hidden;
}
#topbar-search-input,
.topbar-search-kbd {
display: none;
}
.topbar-search-icon {
width: 18px;
height: 18px;
}
/* Expand when active */
.topbar-search-wrap.is-active {
position: fixed;
top: 8px;
left: 8px;
right: 8px;
margin: 0;
z-index: 1300;
}
.topbar-search-wrap.is-active .topbar-search-bar {
width: 100%;
padding: 0 12px;
border-radius: 10px;
}
.topbar-search-wrap.is-active #topbar-search-input {
display: block;
}
.topbar-search-wrap.is-active .topbar-search-dropdown {
width: calc(100vw - 16px);
max-width: calc(100vw - 16px);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
PHASE 5-7 ADDITIONS — KPI trends, topbar user menu, favorites, polish
═══════════════════════════════════════════════════════════════════════════ */
/* ─── KPI Trend Indicators ──────────────────────────────────────────────── */
.role-kpi-trend {
font-size: var(--text-xs, 11px);
font-weight: 600;
padding: 2px 6px;
border-radius: var(--radius-sm, 4px);
margin-left: auto;
white-space: nowrap;
}
.role-kpi-trend.trend-up {
color: var(--color-success, #27AE60);
background: rgba(39, 174, 96, 0.12);
}
.role-kpi-trend.trend-down {
color: var(--color-danger, #E74C3C);
background: rgba(231, 76, 60, 0.12);
}
.role-kpi-header {
display: flex;
align-items: center;
gap: var(--space-xs, 4px);
}
.role-kpi-value.kpi-loaded {
animation: kpiValueFadeIn 0.3s ease-out;
}
.role-kpi-value.kpi-error {
color: var(--color-text-muted, #888);
font-style: italic;
}
@keyframes kpiValueFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ─── Topbar User Avatar Menu ───────────────────────────────────────────── */
.topbar-user-menu {
position: relative;
}
.topbar-avatar-btn {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 2px solid transparent;
border-radius: 50%;
padding: 0;
cursor: pointer;
transition: border-color var(--theme-transition, 0.2s ease);
}
.topbar-avatar-btn:hover,
.topbar-avatar-btn[aria-expanded="true"] {
border-color: var(--color-primary, #4A90D9);
}
.topbar-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--color-primary, #4A90D9);
color: #fff;
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0.5px;
}
.topbar-user-dropdown {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 220px;
/* Solid opaque background — fixes prior over-transparent surface var */
background: #0f1626;
background: linear-gradient(180deg, #131b2e 0%, #0d1422 100%);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-md, 8px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 1000;
overflow: hidden;
animation: dropdownSlideIn 0.15s ease-out;
}
.topbar-user-dropdown.open {
display: block;
}
@keyframes dropdownSlideIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.topbar-user-dropdown-header {
padding: 12px 16px;
border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.08));
}
.topbar-user-dropdown-name {
font-weight: 600;
font-size: var(--text-sm, 13px);
color: var(--color-text, #E0E6ED);
}
.topbar-user-dropdown-role {
font-size: var(--text-xs, 11px);
color: var(--color-text-muted, #888);
margin-top: 2px;
}
.topbar-user-dropdown-divider {
height: 1px;
background: var(--color-border, rgba(255,255,255,0.08));
margin: 4px 0;
}
.topbar-user-dropdown-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 16px;
background: none;
border: none;
color: var(--color-text, #E0E6ED);
font-size: var(--text-sm, 13px);
cursor: pointer;
text-align: left;
transition: background var(--theme-transition, 0.15s ease);
}
.topbar-user-dropdown-item:hover {
background: var(--color-hover, rgba(255,255,255,0.06));
}
.topbar-user-dropdown-item .material-symbols-outlined {
font-size: 18px;
color: var(--color-text-muted, #888);
}
.topbar-user-dropdown-item--danger {
color: var(--color-danger, #E74C3C);
}
.topbar-user-dropdown-item--danger .material-symbols-outlined {
color: var(--color-danger, #E74C3C);
}
/* ─── Notification Tabs ─────────────────────────────────────────────────── */
.topbar-notify-tabs {
display: flex;
gap: 2px;
padding: 6px 12px;
border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.08));
}
.topbar-notify-tab {
flex: 1;
padding: 6px 8px;
background: none;
border: none;
border-radius: var(--radius-sm, 4px);
color: var(--color-text-muted, #888);
font-size: var(--text-xs, 11px);
font-weight: 500;
cursor: pointer;
transition: all var(--theme-transition, 0.15s ease);
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.topbar-notify-tab:hover {
background: var(--color-hover, rgba(255,255,255,0.06));
color: var(--color-text, #E0E6ED);
}
.topbar-notify-tab.active {
background: var(--color-primary, #4A90D9);
color: #fff;
}
.topbar-notify-tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 8px;
background: var(--color-danger, #E74C3C);
color: #fff;
font-size: 10px;
font-weight: 700;
}
/* ─── Sidebar Favorites ─────────────────────────────────────────────────── */
.sidebar-favorites {
margin-bottom: var(--space-sm, 8px);
padding-bottom: var(--space-sm, 8px);
border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.08));
}
.sidebar-favorites-header {
display: flex !important;
align-items: center;
justify-content: space-between;
}
.sidebar-favorites-toggle {
background: none;
border: none;
color: var(--color-text-muted, #888);
cursor: pointer;
opacity: 0;
transition: opacity var(--theme-transition, 0.15s ease);
padding: 2px;
border-radius: var(--radius-sm, 4px);
}
.sidebar-favorites:hover .sidebar-favorites-toggle {
opacity: 0.7;
}
.sidebar-favorites-toggle:hover {
opacity: 1 !important;
color: var(--color-primary, #4A90D9);
}
.sidebar-fav-item {
position: relative;
}
.sidebar-fav-remove {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--color-danger, #E74C3C);
cursor: pointer;
opacity: 0.7;
padding: 2px;
border-radius: var(--radius-sm, 4px);
line-height: 1;
}
.sidebar-fav-remove:hover {
opacity: 1;
background: rgba(231, 76, 60, 0.15);
}
.sidebar-favorites-empty {
padding: 6px 16px;
font-size: var(--text-xs, 11px);
color: var(--color-text-muted, #888);
font-style: italic;
}
/* ─── Phase 7: Reduced Motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ─── Phase 7: Focus Visible Enhancements ───────────────────────────────── */
*:focus-visible {
outline: 2px solid var(--color-primary, #4A90D9);
outline-offset: 2px;
}
.topbar-icon-btn:focus-visible,
.topbar-avatar-btn:focus-visible,
.topbar-notify-tab:focus-visible,
.topbar-user-dropdown-item:focus-visible,
.nav-item:focus-visible,
.sidebar-fav-item:focus-visible,
.role-quick-action:focus-visible {
outline: 2px solid var(--color-primary, #4A90D9);
outline-offset: 2px;
border-radius: var(--radius-sm, 4px);
}
/* ─── Phase 7: Transition Consistency (all reference --theme-transition) ── */
.card,
.btn,
.nav-item,
.nav-group-header,
.modal,
.topbar-icon-btn,
.tab,
.role-kpi-card,
.badge,
.sidebar-fav-item {
transition-property: background, color, border-color, box-shadow, opacity, transform;
transition-duration: var(--theme-transition-duration, 0.2s);
transition-timing-function: ease;
}
/* ─── Phase 7: WCAG AA — Status color + icon pairing defaults ──────────── */
.badge-success::before { content: '\2713 '; /* checkmark */ }
.badge-warning::before { content: '\26A0 '; /* warning triangle */ }
.badge-danger::before { content: '\2717 '; /* x mark */ }
.badge-info::before { content: '\2139 '; /* info */ }
/* ─── Phase 7: Print Styles Enhancement ─────────────────────────────────── */
@media print {
.topbar-user-dropdown,
.topbar-notify-menu,
.mobile-bottom-nav,
.mobile-more-overlay,
.sidebar-favorites-toggle,
.sidebar-fav-remove,
.ai-cmd-overlay {
display: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
HUB-AND-SPOKE LAYOUT (data-layout="hubspoke")
Switchable alternative to the flat sidebar nav.
L1: Domain hub cards → L2: Domain modules → L3: Module page
═══════════════════════════════════════════════════════════════════════════ */
/* ── Visibility toggles ────────────────────────────────────────────────── */
.sidebar-hub { display: none; }
body[data-layout="hubspoke"] .sidebar-nav { display: none !important; }
body[data-layout="hubspoke"] .sidebar-hub {
display: flex;
flex-direction: column;
flex: 1;
overflow-y: auto;
padding: var(--space-3);
gap: var(--space-3);
}
/* ── L1: Greeting + SPINIQ hint ──────────────────────────────────────── */
.hub-greeting {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-text);
padding: var(--space-1) 0;
}
.hub-spiniq {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: var(--color-ai-surface);
border: 1px solid var(--color-ai-border);
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.hub-spiniq:hover {
background: rgba(139, 92, 246, .14);
border-color: var(--color-ai);
}
.hub-spiniq-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--color-ai);
box-shadow: var(--color-ai-glow);
flex-shrink: 0;
animation: hubSpiniqPulse 2.5s ease-in-out infinite;
}
@keyframes hubSpiniqPulse {
0%, 100% { opacity: 1; }
50% { opacity: .5; }
}
.hub-spiniq-label {
font-size: var(--text-xs);
font-weight: var(--weight-bold);
color: var(--color-ai-light);
letter-spacing: .5px;
text-transform: uppercase;
}
.hub-spiniq-text {
font-size: var(--text-sm);
color: var(--color-text-muted);
flex: 1;
}
/* ── L1: Domain Hub Cards ────────────────────────────────────────────── */
.hub-cards {
display: flex;
flex-direction: column;
gap: 2px;
}
.hub-card {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--transition-fast);
position: relative;
}
.hub-card:hover {
background: var(--nav-item-hover);
}
.hub-card-icon {
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
border-radius: var(--radius-md);
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-primary);
font-size: 18px;
flex-shrink: 0;
}
.hub-card-info { flex: 1; min-width: 0; }
.hub-card-title {
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-text);
line-height: 1.3;
}
.hub-card-desc {
font-size: var(--text-xs);
color: var(--color-text-muted);
line-height: 1.3;
}
.hub-card-badge {
font-size: 10px;
font-weight: var(--weight-bold);
padding: 1px 7px;
border-radius: var(--radius-full);
background: var(--color-danger);
color: #fff;
display: none; /* shown via JS when count > 0 */
}
.hub-card-badge[data-count]:not([data-count=""]):not([data-count="0"]) {
display: inline-block;
}
/* ── L1: Quick Links ─────────────────────────────────────────────────── */
.hub-quick-links {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
padding-top: var(--space-2);
border-top: 1px solid var(--color-border);
margin-top: auto;
overflow-x: hidden;
}
.hub-quick-link {
min-width: 0;
white-space: nowrap;
}
.hub-quick-link {
display: flex;
align-items: center;
gap: 4px;
font-size: var(--text-xs);
color: var(--color-text-muted);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
cursor: pointer;
transition: color var(--transition-fast), background var(--transition-fast);
}
.hub-quick-link:hover {
color: var(--color-text);
background: var(--nav-item-hover);
}
.hub-quick-link .material-symbols-outlined {
font-size: 14px;
}
/* ── L2: Domain Detail (uplifted 2026-04-14 — Living System amber glass) ─ */
.hub-l2 {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 2px;
animation: hubL2In .28s cubic-bezier(.22,.8,.36,1);
}
@keyframes hubL2In {
from { opacity: 0; transform: translateX(6px); }
to { opacity: 1; transform: translateX(0); }
}
.hub-back {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
font-size: 11px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 999px;
cursor: pointer;
padding: 5px 11px 5px 8px;
font-family: inherit;
transition: color .18s, background .18s, border-color .18s, transform .18s;
}
.hub-back:hover {
color: var(--amber, #F5A524);
background: rgba(245,165,36,.08);
border-color: rgba(245,165,36,.28);
transform: translateX(-1px);
}
.hub-back svg { transition: transform .18s; }
.hub-back:hover svg { transform: translateX(-2px); }
/* Glassy amber-accented domain header card */
.hub-l2-header {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
margin: 0;
border-radius: 13px;
cursor: pointer;
user-select: none;
background: linear-gradient(180deg, rgba(245,165,36,0.08), rgba(245,165,36,0.015));
border: 1px solid rgba(245,165,36,0.22);
overflow: hidden;
isolation: isolate;
transition: border-color .2s, transform .2s, box-shadow .2s;
}
.hub-l2-header::before {
content: '';
position: absolute; inset: -40%;
background: radial-gradient(circle at 18% 20%, rgba(245,165,36,0.22), transparent 45%);
pointer-events: none;
z-index: 0;
opacity: .9;
}
.hub-l2-header > * { position: relative; z-index: 1; }
.hub-l2-header:hover {
border-color: rgba(245,165,36,0.42);
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(245,165,36,0.14);
}
.hub-l2-header:focus-visible {
outline: 2px solid var(--amber, #F5A524);
outline-offset: 2px;
}
.hub-l2-icon {
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
border-radius: 10px;
background: linear-gradient(135deg, rgba(245,165,36,.22), rgba(245,165,36,.08));
border: 1px solid rgba(245,165,36,.35);
color: var(--amber, #F5A524);
font-size: 20px;
box-shadow: 0 0 18px rgba(245,165,36,.18), inset 0 1px 0 rgba(255,255,255,.08);
flex-shrink: 0;
}
.hub-l2-title {
font-size: 15px;
font-weight: 650;
letter-spacing: -.01em;
color: #fff;
line-height: 1.2;
}
.hub-l2-desc {
font-size: 11px;
color: rgba(255,255,255,.5);
letter-spacing: .02em;
margin-top: 2px;
}
/* Module list — rail with left-accent indicator + icon tiles */
.hub-l2-modules {
display: flex;
flex-direction: column;
gap: 2px;
padding: 6px 0 0;
position: relative;
}
.hub-l2-modules::before {
content: '';
position: absolute;
left: 19px; top: 10px; bottom: 4px;
width: 1px;
background: linear-gradient(180deg, rgba(245,165,36,.22), rgba(245,165,36,.02));
pointer-events: none;
}
.hub-l2-module {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 9px 12px 9px 10px;
margin-left: 4px;
border-radius: 10px;
cursor: pointer;
font-size: 13.5px;
font-weight: 500;
color: rgba(255,255,255,.78);
border: 1px solid transparent;
transition: background .18s, color .18s, border-color .18s, transform .18s, padding-left .18s;
}
.hub-l2-module::before {
content: '';
position: absolute;
left: 5px; top: 50%;
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(245,165,36,.0);
box-shadow: 0 0 0 0 rgba(245,165,36,.0);
transform: translateY(-50%) scale(.6);
transition: background .18s, box-shadow .18s, transform .2s;
z-index: 2;
}
.hub-l2-module .material-symbols-outlined {
font-size: 18px;
opacity: .62;
color: rgba(255,255,255,.82);
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.05);
transition: background .18s, color .18s, border-color .18s, opacity .18s, transform .18s;
flex-shrink: 0;
}
.hub-l2-module:hover {
background: rgba(245,165,36,.06);
color: #fff;
border-color: rgba(245,165,36,.14);
transform: translateX(2px);
}
.hub-l2-module:hover .material-symbols-outlined {
color: var(--amber, #F5A524);
background: rgba(245,165,36,.12);
border-color: rgba(245,165,36,.28);
opacity: 1;
}
.hub-l2-module:hover::before {
background: rgba(245,165,36,.85);
box-shadow: 0 0 10px rgba(245,165,36,.55);
transform: translateY(-50%) scale(1);
}
.hub-l2-module.active {
background: linear-gradient(90deg, rgba(245,165,36,.16), rgba(245,165,36,.03) 80%);
color: #fff;
border-color: rgba(245,165,36,.32);
}
.hub-l2-module.active .material-symbols-outlined {
color: var(--amber, #F5A524);
background: rgba(245,165,36,.2);
border-color: rgba(245,165,36,.45);
opacity: 1;
box-shadow: 0 0 14px rgba(245,165,36,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.hub-l2-module.active::before {
background: var(--amber, #F5A524);
box-shadow: 0 0 12px rgba(245,165,36,.75);
transform: translateY(-50%) scale(1.1);
}
.hub-l2-module:focus-visible {
outline: 2px solid var(--amber, #F5A524);
outline-offset: 2px;
}
/* ═══════════════════════════════════════════════════════════════════════════
HUB-AND-SPOKE — OPTION C "COMMAND RAIL" (2026-04-14)
Overrides legacy hub-greeting / hub-spiniq / hub-cards block with a
glowing AI hero card + compact module pills + health dots.
Keeps all existing element IDs (#hub-spiniq, #hub-spiniq-text,
#hub-greeting, #hub-badge-*) so JS hooks stay wired.
═══════════════════════════════════════════════════════════════════════════ */
/* Scope the new look to the rail variant so fallbacks stay intact */
.hub-l1--rail { gap: 14px; padding-top: 4px; }
/* ── Hero AI briefing card ─────────────────────────────────────────────── */
.hub-l1--rail .hub-hero {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 14px 12px;
border-radius: 13px;
background: linear-gradient(180deg, rgba(245,165,36,0.09), rgba(245,165,36,0.02));
border: 1px solid rgba(245,165,36,0.22);
overflow: hidden;
cursor: pointer;
transition: border-color .18s, transform .18s, box-shadow .18s;
isolation: isolate;
}
.hub-l1--rail .hub-hero:hover {
border-color: rgba(245,165,36,0.4);
transform: translateY(-1px);
box-shadow: 0 10px 32px rgba(245,165,36,0.16);
}
.hub-l1--rail .hub-hero:focus-visible {
outline: 2px solid var(--amber, #F5A524);
outline-offset: 2px;
}
.hub-hero-glow {
position: absolute; inset: -40%;
background: radial-gradient(circle at 22% 20%, rgba(245,165,36,0.28), transparent 42%);
pointer-events: none; z-index: 0;
}
.hub-hero > *:not(.hub-hero-glow) { position: relative; z-index: 1; }
.hub-hero-tag {
display: flex; align-items: center; gap: 7px;
font-family: var(--font-mono, 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--amber-2, #FFC560);
}
.hub-hero-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--amber-2, #FFC560);
box-shadow: 0 0 8px rgba(255,197,96,0.8);
animation: hubHeroBlink 2s ease-in-out infinite;
}
@keyframes hubHeroBlink { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.hub-hero-msg {
font-family: var(--font-display, 'Fraunces', Georgia, serif);
font-size: 14.5px;
font-weight: 400;
letter-spacing: -0.2px;
line-height: 1.38;
color: var(--color-text, #EEF0F6);
}
.hub-hero-msg em {
font-style: italic;
color: var(--amber-2, #FFC560);
}
.hub-hero-cta {
display: flex; align-items: center; justify-content: space-between;
margin-top: 2px;
font-size: 11.5px;
color: var(--color-text-muted, #A6ABB8);
}
.hub-hero-cta-main {
color: var(--amber-2, #FFC560);
font-weight: 500;
}
.hub-hero-cta-meta {
font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
font-size: 10px;
color: var(--color-text-subtle, #6A7082);
}
/* Neutralize legacy hub-spiniq styling when used as hero */
.hub-l1--rail .hub-hero.hub-spiniq,
.hub-l1--rail .hub-hero:is(.hub-spiniq) {
background: linear-gradient(180deg, rgba(245,165,36,0.09), rgba(245,165,36,0.02));
}
.hub-l1--rail .hub-hero .hub-spiniq-label {
color: inherit;
font-weight: inherit;
}
/* ── Compact module pills ──────────────────────────────────────────────── */
.hub-l1--rail .hub-pills {
gap: 3px;
}
.hub-l1--rail .hub-pill {
display: flex;
flex-direction: row; /* override .hub-card column leak */
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 7px 10px;
border-radius: 8px;
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
color: var(--color-text-muted, #A6ABB8);
min-height: 0; /* override hub-card default spacing */
background: transparent; /* override .hub-card app-field-bg leak */
border: 1px solid transparent; /* override .hub-card 1.5px border leak */
box-shadow: none;
text-align: left;
overflow: visible;
}
.hub-l1--rail .hub-pill::before { display: none; } /* kill .hub-card gradient overlay */
.hub-l1--rail .hub-pill:hover {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.06);
color: var(--color-text, #EEF0F6);
transform: none; /* kill .hub-card translateY/scale */
box-shadow: none;
}
.hub-l1--rail .hub-pill.active {
background: rgba(245,165,36,0.08);
border-color: rgba(245,165,36,0.22);
color: var(--amber-2, #FFC560);
}
/* Hide the legacy icon wrapper (we use a dot instead) */
.hub-l1--rail .hub-pill .hub-card-icon { display: none; }
/* Hide legacy desc line */
.hub-l1--rail .hub-pill .hub-card-desc { display: none; }
.hub-pill-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--color-text-subtle, #3E4454);
flex: 0 0 7px;
transition: background .2s, box-shadow .2s;
}
.hub-l1--rail .hub-pill.ok .hub-pill-dot {
background: var(--color-success, #2DD4BF);
}
.hub-l1--rail .hub-pill.warn .hub-pill-dot {
background: var(--amber-2, #FFC560);
box-shadow: 0 0 6px rgba(255,197,96,0.7);
}
.hub-l1--rail .hub-pill.crit .hub-pill-dot {
background: var(--color-danger, #F87171);
box-shadow: 0 0 6px rgba(248,113,113,0.7);
}
.hub-l1--rail .hub-pill .hub-card-info { flex: 1; min-width: 0; }
.hub-l1--rail .hub-pill-title {
font-size: 12.5px;
font-weight: 500;
line-height: 1.2;
color: inherit;
letter-spacing: -0.1px;
}
.hub-pill-score {
font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
font-size: 10px;
color: var(--color-text-subtle, #6A7082);
font-variant-numeric: tabular-nums;
}
.hub-l1--rail .hub-pill.warn .hub-pill-score { color: var(--amber-2, #FFC560); }
.hub-l1--rail .hub-pill.crit .hub-pill-score { color: var(--color-danger, #F87171); }
.hub-l1--rail .hub-pill:hover .hub-pill-score { color: var(--color-text, #EEF0F6); }
/* Keep the red badge count floating to the right when JS sets it */
.hub-l1--rail .hub-pill .hub-card-badge {
margin-left: 4px;
}
/* Tighten quick-links block to match */
.hub-l1--rail .hub-quick-links {
padding-top: 12px;
border-top: 1px solid var(--color-border, rgba(255,255,255,0.06));
}
/* Hero severity tints — driven by /api/v1/dashboards/decisions severity */
.hub-l1--rail .hub-hero.spiniq-ok {
background: linear-gradient(180deg, rgba(45,212,191,0.08), rgba(45,212,191,0.02));
border-color: rgba(45,212,191,0.22);
}
.hub-l1--rail .hub-hero.spiniq-ok .hub-hero-tag { color: #86F1E1; }
.hub-l1--rail .hub-hero.spiniq-ok .hub-hero-dot {
background: #2DD4BF;
box-shadow: 0 0 8px rgba(45,212,191,0.7);
}
.hub-l1--rail .hub-hero.spiniq-ok .hub-hero-cta-main { color: #86F1E1; }
.hub-l1--rail .hub-hero.spiniq-ok .hub-hero-msg em { color: #86F1E1; font-style: normal; }
.hub-l1--rail .hub-hero.spiniq-ok .hub-hero-glow {
background: radial-gradient(circle at 22% 20%, rgba(45,212,191,0.22), transparent 42%);
}
.hub-l1--rail .hub-hero.spiniq-hot {
background: linear-gradient(180deg, rgba(248,113,113,0.08), rgba(248,113,113,0.02));
border-color: rgba(248,113,113,0.28);
}
.hub-l1--rail .hub-hero.spiniq-hot .hub-hero-tag { color: #FCA5A5; }
.hub-l1--rail .hub-hero.spiniq-hot .hub-hero-dot {
background: #F87171;
box-shadow: 0 0 8px rgba(248,113,113,0.8);
}
.hub-l1--rail .hub-hero.spiniq-hot .hub-hero-cta-main { color: #FCA5A5; }
.hub-l1--rail .hub-hero.spiniq-hot .hub-hero-msg em { color: #FCA5A5; font-style: italic; }
.hub-l1--rail .hub-hero.spiniq-hot .hub-hero-glow {
background: radial-gradient(circle at 22% 20%, rgba(248,113,113,0.25), transparent 42%);
}
/* Disabled state for dashboard AI node "Approve all" button when count = 0 */
.ls-node.n-ai .ls-act[disabled] {
opacity: 0.5;
cursor: default;
pointer-events: none;
}
/* ── Layout Toggle Pills (in user dropdown) ──────────────────────────── */
.topbar-user-dropdown-layout-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
}
.layout-toggle-label {
font-size: var(--text-sm);
color: var(--color-text-muted);
font-weight: var(--weight-medium);
}
.layout-toggle-pills {
display: flex;
gap: 2px;
background: var(--color-surface);
border-radius: var(--radius-sm);
padding: 2px;
}
.layout-pill {
display: flex;
align-items: center;
justify-content: center;
width: 32px; height: 28px;
border: none;
border-radius: var(--radius-xs);
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
font-family: inherit;
transition: all var(--transition-fast);
}
.layout-pill:hover {
color: var(--color-text);
background: var(--nav-item-hover);
}
.layout-pill.active {
background: var(--nav-active-bg);
color: var(--nav-active-text);
}
.layout-pill .material-symbols-outlined {
font-size: 16px;
}
/* ═══════════════════════════════════════════════════════════════════════════
PRINT INFRASTRUCTURE — Enhanced print support for receipt + document
═══════════════════════════════════════════════════════════════════════════ */
/* ── No-print utility — hide elements when printing ──────────────────────── */
.no-print { /* visible on screen, hidden in print */ }
/* ── Print button group styling ──────────────────────────────────────────── */
.print-btn-group {
display: inline-flex;
gap: var(--space-1);
align-items: center;
}
.print-btn-group .btn {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-sm);
padding: var(--space-1) var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text-secondary);
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.print-btn-group .btn:hover {
background: var(--card-bg);
border-color: var(--blue);
color: var(--blue);
}
/* ── Enhanced @media print rules ─────────────────────────────────────────── */
@media print {
/* Hide all non-printable UI */
.no-print,
.print-btn-group,
.sidebar,
.topbar,
.mobile-bottom-nav,
.mobile-more-overlay,
.ai-cmd-overlay,
.toast,
#toast,
[class*="nav"]:not(.doc-nav),
[class*="bottom-nav"],
.btn-group:not(.print-visible),
button:not(.print-visible),
.topbar-user-dropdown,
.topbar-notify-menu,
.sidebar-favorites-toggle,
.sidebar-fav-remove,
.sidebar-hub,
.tab-bar,
.modal,
.modal-overlay,
.modal-backdrop {
display: none !important;
}
/* Reset layout */
body {
color: #000 !important;
background: #fff !important;
margin: 0 !important;
padding: 0 !important;
}
.section,
.container,
.main-content,
.page-wrapper,
[class*="content"] {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Cards: clean print */
.card,
[class*="panel"] {
box-shadow: none !important;
border: 1px solid #ddd !important;
page-break-inside: avoid;
break-inside: avoid;
}
/* Tables: print-optimized */
table, .table {
margin: 8pt 0;
}
table thead { display: table-header-group; }
table tbody tr {
page-break-inside: avoid;
break-inside: avoid;
}
table tbody tr:nth-child(even) { background: transparent !important; }
table tbody tr:hover { background: transparent !important; }
/* Links: show URLs */
a[href]:after {
content: none; /* Don't show URLs in ERP prints — too noisy */
}
/* Scrollable containers: show full content */
.tabs, [class*="tab-bar"] { overflow: visible !important; }
[style*="overflow"] { overflow: visible !important; }
[style*="max-height"] { max-height: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
TOPBAR ICON DROPDOWNS — Living System glass treatment
Applies to: settings/bell/avatar icon buttons, notify menu panel, user dropdown
═══════════════════════════════════════════════════════════════════════════ */
/* Icon buttons — amber hover (overrides earlier cyan) */
.topbar-icon-btn {
transition: background .18s ease, color .18s ease, filter .18s ease, transform .18s ease;
}
.topbar-icon-btn:hover {
background: rgba(245,165,36,.08) !important;
color: var(--ls-amber-2, #FFC560) !important;
filter: drop-shadow(0 0 6px rgba(245,165,36,.18));
transform: translateY(-0.5px);
}
.topbar-icon-btn:active {
background: rgba(245,165,36,.14) !important;
}
.topbar-icon-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(245,165,36,.4);
}
.topbar-notifications.open .topbar-icon-btn,
.topbar-user-menu.open .topbar-avatar-btn {
background: rgba(245,165,36,.1);
color: var(--ls-amber-2, #FFC560) !important;
}
/* Notification LED dot — amber with glow */
.topbar-notify-led-dot {
background: var(--ls-amber-2, #FFC560) !important;
box-shadow: 0 0 8px rgba(245,165,36,.6);
}
/* ─── Notify menu panel ─────────────────────────────────────────────────── */
.topbar-notify-menu {
border: 1px solid rgba(255,255,255,.07) !important;
border-radius: 14px !important;
background:
radial-gradient(120% 80% at 0% 0%, rgba(245,165,36,.05) 0%, transparent 55%),
radial-gradient(120% 80% at 100% 100%, rgba(167,139,250,.035) 0%, transparent 55%),
linear-gradient(180deg, rgba(22,24,32,.94), rgba(12,14,20,.96)) !important;
backdrop-filter: blur(20px) saturate(150%) !important;
-webkit-backdrop-filter: blur(20px) saturate(150%) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
0 26px 64px rgba(0,0,0,.6),
0 0 0 1px rgba(245,165,36,.04) !important;
overflow: hidden !important;
position: absolute !important;
top: calc(100% + 8px) !important;
}
.topbar-notify-menu::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(160deg, rgba(245,165,36,.22) 0%, rgba(245,165,36,0) 35%, rgba(167,139,250,0) 65%, rgba(167,139,250,.14) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: .65;
z-index: 1;
}
.topbar-notify-menu > * { position: relative; z-index: 2; }
.topbar-notify-head {
padding: 12px 14px !important;
border-bottom: 1px solid rgba(255,255,255,.05) !important;
background: transparent !important;
}
.topbar-notify-head strong {
font-size: 13px;
font-weight: 500;
letter-spacing: -.1px;
color: var(--color-text, #E6EBFF);
}
.topbar-notify-head .btn,
.topbar-notify-controls .btn {
background: rgba(255,255,255,.03) !important;
border: 1px solid rgba(255,255,255,.08) !important;
color: rgba(230,235,255,.7) !important;
font-size: 10.5px !important;
font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace) !important;
letter-spacing: .3px;
text-transform: uppercase;
border-radius: 6px !important;
padding: 4px 9px !important;
transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.topbar-notify-head .btn:hover,
.topbar-notify-controls .btn:hover {
color: var(--ls-amber-2, #FFC560) !important;
border-color: rgba(245,165,36,.3) !important;
background: rgba(245,165,36,.06) !important;
}
.topbar-notify-tabs {
padding: 8px 12px !important;
border-bottom: 1px solid rgba(255,255,255,.05) !important;
gap: 4px !important;
}
.topbar-notify-tab {
border-radius: 7px !important;
padding: 6px 10px !important;
font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
font-size: 10.5px !important;
font-weight: 500 !important;
letter-spacing: .3px;
text-transform: uppercase;
color: rgba(230,235,255,.45) !important;
border: 1px solid transparent !important;
background: transparent !important;
transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.topbar-notify-tab:hover {
color: rgba(230,235,255,.8) !important;
background: rgba(255,255,255,.03) !important;
border-color: rgba(255,255,255,.06) !important;
}
.topbar-notify-tab.active {
color: var(--ls-amber-2, #FFC560) !important;
background: rgba(245,165,36,.08) !important;
border-color: rgba(245,165,36,.25) !important;
}
.topbar-notify-tab-badge {
background: rgba(245,165,36,.2) !important;
color: var(--ls-amber-2, #FFC560) !important;
font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
font-weight: 500 !important;
min-width: 18px !important;
height: 16px !important;
border: 1px solid rgba(245,165,36,.35);
}
.topbar-notify-controls {
padding: 8px 14px !important;
border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
.topbar-notify-check {
font-size: 11px !important;
color: rgba(230,235,255,.55) !important;
font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
letter-spacing: .2px;
}
.topbar-notify-check input[type="checkbox"] {
accent-color: var(--ls-amber-2, #FFC560);
}
.topbar-notify-mutes {
padding: 8px 14px !important;
border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
.topbar-mute-chip {
font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: .4px;
text-transform: uppercase;
color: rgba(230,235,255,.5) !important;
background: rgba(255,255,255,.025) !important;
border: 1px solid rgba(255,255,255,.07) !important;
padding: 3px 9px !important;
transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.topbar-mute-chip:hover {
color: var(--ls-amber-2, #FFC560) !important;
border-color: rgba(245,165,36,.28) !important;
background: rgba(245,165,36,.06) !important;
}
.topbar-mute-chip.muted {
color: rgba(230,235,255,.3) !important;
background: rgba(255,255,255,.015) !important;
border-color: rgba(255,255,255,.05) !important;
}
.topbar-notify-list {
padding: 10px !important;
gap: 8px !important;
}
.topbar-notify-list::-webkit-scrollbar { width: 8px; }
.topbar-notify-list::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.08);
border-radius: 4px;
}
.topbar-notify-list::-webkit-scrollbar-thumb:hover { background: rgba(245,165,36,.22); }
.topbar-notify-item {
background:
linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008)) !important;
border: 1px solid rgba(255,255,255,.06) !important;
border-radius: 10px !important;
padding: 11px 12px !important;
transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.topbar-notify-item:hover {
border-color: rgba(245,165,36,.22) !important;
background:
linear-gradient(180deg, rgba(245,165,36,.05), rgba(245,165,36,.015)) !important;
transform: translateY(-0.5px);
}
.topbar-notify-message { border-left: 2px solid rgba(167,139,250,.7) !important; }
.topbar-notify-insight { border-left: 2px solid var(--ls-amber-2, #FFC560) !important; }
.topbar-notify-incident { border-left: 2px solid var(--color-danger, #F87171) !important; }
.topbar-notify-message.is-read {
opacity: .6;
border-left-color: rgba(148,163,184,.4) !important;
}
.topbar-notify-title {
font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
font-size: 10px !important;
letter-spacing: .8px !important;
color: rgba(230,235,255,.4) !important;
}
.topbar-notify-summary {
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: -.1px;
color: var(--color-text, #E6EBFF) !important;
}
.topbar-notify-detail {
font-size: 12px !important;
color: rgba(230,235,255,.5) !important;
}
.topbar-notify-meta {
font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
font-size: 10.5px !important;
color: rgba(230,235,255,.38) !important;
letter-spacing: .2px;
}
.topbar-notify-empty {
border: 1px dashed rgba(255,255,255,.08) !important;
background: rgba(255,255,255,.01);
color: rgba(230,235,255,.4) !important;
font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
font-size: 11px !important;
letter-spacing: .3px;
padding: 18px 14px !important;
}
/* ─── User avatar dropdown ──────────────────────────────────────────────── */
.topbar-avatar-btn {
transition: transform .18s ease, box-shadow .18s ease;
}
.topbar-avatar-btn:hover {
transform: translateY(-0.5px);
box-shadow: 0 0 0 2px rgba(245,165,36,.28), 0 4px 14px rgba(245,165,36,.18);
}
.topbar-user-menu.open .topbar-avatar-btn {
box-shadow: 0 0 0 2px rgba(245,165,36,.4), 0 6px 18px rgba(245,165,36,.22);
}
.topbar-user-dropdown {
min-width: 240px !important;
border: 1px solid rgba(255,255,255,.07) !important;
border-radius: 14px !important;
background:
radial-gradient(120% 80% at 0% 0%, rgba(245,165,36,.05) 0%, transparent 55%),
radial-gradient(120% 80% at 100% 100%, rgba(167,139,250,.035) 0%, transparent 55%),
linear-gradient(180deg, rgba(22,24,32,.94), rgba(12,14,20,.96)) !important;
backdrop-filter: blur(20px) saturate(150%) !important;
-webkit-backdrop-filter: blur(20px) saturate(150%) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
0 26px 64px rgba(0,0,0,.6),
0 0 0 1px rgba(245,165,36,.04) !important;
overflow: hidden !important;
padding: 6px !important;
top: calc(100% + 8px) !important;
}
.topbar-user-dropdown::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(160deg, rgba(245,165,36,.22) 0%, rgba(245,165,36,0) 35%, rgba(167,139,250,0) 65%, rgba(167,139,250,.14) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: .65;
}
.topbar-user-dropdown > * { position: relative; }
.topbar-user-dropdown-header {
padding: 12px 14px 10px !important;
border-bottom: 1px solid rgba(255,255,255,.05) !important;
margin-bottom: 4px;
}
.topbar-user-dropdown-name {
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: -.1px;
color: var(--color-text, #E6EBFF) !important;
}
.topbar-user-dropdown-role {
font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
font-size: 10px !important;
letter-spacing: .8px !important;
text-transform: uppercase;
color: rgba(230,235,255,.4) !important;
margin-top: 3px !important;
}
.topbar-user-dropdown-divider {
background: rgba(255,255,255,.05) !important;
margin: 4px 8px !important;
}
.topbar-user-dropdown-item {
padding: 9px 12px !important;
border-radius: 8px !important;
margin: 1px 0;
border: 1px solid transparent !important;
font-size: 12.5px !important;
letter-spacing: -.1px;
color: var(--color-text, #E6EBFF) !important;
transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
position: relative;
}
.topbar-user-dropdown-item:hover {
background:
linear-gradient(180deg, rgba(245,165,36,.08), rgba(245,165,36,.03)) !important;
border-color: rgba(245,165,36,.18) !important;
color: var(--ls-amber-2, #FFC560) !important;
}
.topbar-user-dropdown-item:hover .material-symbols-outlined {
color: var(--ls-amber-2, #FFC560) !important;
}
.topbar-user-dropdown-item:focus-visible {
outline: none;
background: rgba(245,165,36,.08);
border-color: rgba(245,165,36,.25) !important;
}
.topbar-user-dropdown-item .material-symbols-outlined {
font-size: 17px !important;
color: rgba(230,235,255,.5) !important;
transition: color .15s ease;
}
.topbar-user-dropdown-item--danger {
color: #F87171 !important;
}
.topbar-user-dropdown-item--danger .material-symbols-outlined {
color: #F87171 !important;
}
.topbar-user-dropdown-item--danger:hover {
background:
linear-gradient(180deg, rgba(248,113,113,.1), rgba(248,113,113,.03)) !important;
border-color: rgba(248,113,113,.25) !important;
color: #FCA5A5 !important;
}
.topbar-user-dropdown-item--danger:hover .material-symbols-outlined {
color: #FCA5A5 !important;
}
/* Sharper entrance animation on both */
@keyframes topbarDropdownRise {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.topbar-notifications.open .topbar-notify-menu,
.topbar-user-dropdown.open {
animation: topbarDropdownRise .2s cubic-bezier(.2,.9,.3,1) both;
}
/* =============================================================================
PAPER (LIVING SYSTEM LIGHT) · core.css overrides (2026-04-16)
=============================================================================
Comprehensive overrides for every hardcoded white-text / dark-surface rule
in core.css. Scoped to body.ls-active[data-mode="light"] so they only fire
when the LS chrome is active AND the user is in light mode.
============================================================================= */
/* ── Sidebar internals ─────────────────────────────────────────────────────── */
/* Sidebar keeps its purple gradient in both modes — but interior chrome
(borders, inset shadows) needs warm-alpha instead of white-alpha. */
body.ls-active[data-mode="light"] .sidebar-brand,
body.ls-active[data-site-theme="classic"] .sidebar-brand {
border-bottom-color: rgba(255,255,255,0.18);
}
/* Site health badge — readable on dark sidebar but was using white-alpha */
body.ls-active[data-mode="light"] .site-health-badge,
body.ls-active[data-site-theme="classic"] .site-health-badge {
background: rgba(255,255,255,0.22);
border-color: rgba(255,255,255,0.35);
color: #fff;
}
/* Smart sidebar ghost (AI briefing card in sidebar) */
body.ls-active[data-mode="light"] .smart-sidebar-ghost,
body.ls-active[data-site-theme="classic"] .smart-sidebar-ghost {
background: linear-gradient(155deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%);
border-color: rgba(255,255,255,0.28);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 8px 16px rgba(0,0,0,0.15);
}
body.ls-active[data-mode="light"] .smart-sidebar-dismiss,
body.ls-active[data-site-theme="classic"] .smart-sidebar-dismiss {
color: rgba(255,255,255,0.65);
}
body.ls-active[data-mode="light"] .smart-sidebar-dismiss:hover,
body.ls-active[data-site-theme="classic"] .smart-sidebar-dismiss:hover {
color: #fff;
}
body.ls-active[data-mode="light"] .smart-sidebar-collapsed,
body.ls-active[data-site-theme="classic"] .smart-sidebar-collapsed {
border-color: rgba(255,255,255,0.25);
background: rgba(255,255,255,0.1);
}
body.ls-active[data-mode="light"] .smart-sidebar-collapsed:hover,
body.ls-active[data-site-theme="classic"] .smart-sidebar-collapsed:hover {
background: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.38);
}
/* Nav section headers and items — these are on the dark sidebar, keep white text */
/* Sidebar footer / user info */
body.ls-active[data-mode="light"] .sidebar-footer,
body.ls-active[data-site-theme="classic"] .sidebar-footer {
border-top-color: rgba(255,255,255,0.15);
}
/* Sidebar scrollbar */
body.ls-active[data-mode="light"] .sidebar-nav,
body.ls-active[data-site-theme="classic"] .sidebar-nav {
scrollbar-color: rgba(255,255,255,0.3) rgba(255,255,255,0.08);
}
/* ── Hub L1: Hero + Pills + Quick Links (content area — PAPER) ─────────── */
/* The hub-hero card sits in the sidebar (dark), so keep its amber glow.
But hub-pills and hub-quick-links are in the CONTENT area. */
body.ls-active[data-mode="light"] .hub-l1--rail .hub-pill:hover,
body.ls-active[data-site-theme="classic"] .hub-l1--rail .hub-pill:hover {
background: rgba(180,83,9,0.06);
border-color: rgba(180,83,9,0.14);
color: #1A1812;
}
body.ls-active[data-mode="light"] .hub-l1--rail .hub-pill.active,
body.ls-active[data-site-theme="classic"] .hub-l1--rail .hub-pill.active {
background: rgba(180,83,9,0.10);
border-color: rgba(180,83,9,0.28);
color: #B45309;
}
body.ls-active[data-mode="light"] .hub-l1--rail .hub-pill:hover .hub-pill-score,
body.ls-active[data-site-theme="classic"] .hub-l1--rail .hub-pill:hover .hub-pill-score {
color: #1A1812;
}
body.ls-active[data-mode="light"] .hub-l1--rail .hub-quick-links,
body.ls-active[data-site-theme="classic"] .hub-l1--rail .hub-quick-links {
border-top-color: rgba(24,18,8,0.08);
}
/* ── Content area generic overrides ────────────────────────────────────────── */
/* Modal overlay */
body.ls-active[data-mode="light"] .modal-overlay,
body.ls-active[data-site-theme="classic"] .modal-overlay {
background: rgba(24,18,8,0.35);
}
body.ls-active[data-mode="light"] .modal,
body.ls-active[data-site-theme="classic"] .modal {
background: #FDFBF5;
color: #1A1812;
}
/* Toast override */
body.ls-active[data-mode="light"] #toast,
body.ls-active[data-site-theme="classic"] #toast {
background: #FDFBF5;
color: #1A1812;
border: 1px solid rgba(24,18,8,0.12);
box-shadow: 0 8px 24px rgba(24,18,8,0.12);
}
body.ls-active[data-mode="light"] #toast.success,
body.ls-active[data-site-theme="classic"] #toast.success {
background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
border-color: rgba(22,163,74,0.25);
color: #065F46;
}
body.ls-active[data-mode="light"] #toast.error,
body.ls-active[data-site-theme="classic"] #toast.error {
background: linear-gradient(135deg, #FEF2F2, #FECACA);
border-color: rgba(220,38,38,0.25);
color: #991B1B;
}
/* Profile page avatar keeps white text on colored bg — safe */
/* Badge/neon badges — keep their colored backgrounds + white text — safe */
/* Calendar event pills — keep their colored backgrounds + white text — safe */
/* ── Kanban, job board, data table cards ───────────────────────────────────── */
body.ls-active[data-mode="light"] .kanban-card,
body.ls-active[data-site-theme="classic"] .kanban-card {
background: #FBF9F3;
border-color: rgba(24,18,8,0.10);
color: #1A1812;
}
body.ls-active[data-mode="light"] .kanban-card:hover,
body.ls-active[data-site-theme="classic"] .kanban-card:hover {
box-shadow: 0 4px 12px rgba(24,18,8,0.08);
}
body.ls-active[data-mode="light"] .jb-card,
body.ls-active[data-site-theme="classic"] .jb-card {
background: #FBF9F3;
border-color: rgba(24,18,8,0.10);
color: #1A1812;
}
/* ── RBAC panel ────────────────────────────────────────────────────────────── */
body.ls-active[data-mode="light"] .rbac-panel-header,
body.ls-active[data-site-theme="classic"] .rbac-panel-header {
background: rgba(24,18,8,0.04);
}
/* ── EVM / stats cards ─────────────────────────────────────────────────────── */
body.ls-active[data-mode="light"] .evm-card,
body.ls-active[data-site-theme="classic"] .evm-card {
background: #FBF9F3;
border-color: rgba(24,18,8,0.10);
color: #1A1812;
}
/* ── Workspace context panel (AI) ──────────────────────────────────────────── */
body.ls-active[data-mode="light"] .workspace-context,
body.ls-active[data-site-theme="classic"] .workspace-context {
background: #FDFBF5;
border-color: rgba(24,18,8,0.12);
box-shadow: 0 4px 40px rgba(24,18,8,0.10);
color: #1A1812;
}
/* ── Stat/dash widgets ─────────────────────────────────────────────────────── */
body.ls-active[data-mode="light"] .dash-widget,
body.ls-active[data-site-theme="classic"] .dash-widget {
background: #FBF9F3;
border-color: rgba(24,18,8,0.10);
color: #1A1812;
}
body.ls-active[data-mode="light"] .dash-widget:hover,
body.ls-active[data-site-theme="classic"] .dash-widget:hover {
box-shadow: 0 4px 12px rgba(24,18,8,0.06);
}
/* ── Hero panel (used by some module overviews) ────────────────────────────── */
body.ls-active[data-mode="light"] .hero-panel,
body.ls-active[data-site-theme="classic"] .hero-panel {
background: #FBF9F3;
box-shadow: 0 2px 10px rgba(24,18,8,0.04);
color: #1A1812;
}
/* ── Sidebar search (inside dark sidebar — keep light appearance) ──────── */
body.ls-active[data-mode="light"] .sidebar-search input,
body.ls-active[data-site-theme="classic"] .sidebar-search input {
border-color: rgba(255,255,255,0.2);
}
/* ── Clock-in/Clock-out buttons in topbar ──────────────────────────────── */
body.ls-active[data-mode="light"] .topbar-timeclock,
body.ls-active[data-site-theme="classic"] .topbar-timeclock {
background: rgba(253,251,245,0.8) !important;
border: 1px solid rgba(24,18,8,0.10) !important;
color: #4A4338 !important;
}
/* ── Legend/indicator dots (data flow, friction, healthy) ───────────────── */
/* These are in the LS topology content area with colored dots + text.
The text following dots uses var(--color-text) which we've already overridden
in tokens. This covers any inline or class-based white text near them. */
body.ls-active[data-mode="light"] .ls-root [class*="legend"],
body.ls-active[data-mode="light"] .ls-root .ls-caption,
body.ls-active[data-site-theme="classic"] .ls-root [class*="legend"],
body.ls-active[data-site-theme="classic"] .ls-root .ls-caption {
color: #4A4338 !important;
}