/* ══════════════════════════════════════════════════════════════
DORA PORTAL — Prestige Design System v4
Inspired by: Linear, Clerk, Vercel, Liveblocks
══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..900;1,14..32,300..900&family=Space+Grotesk:wght@500;600;700&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
/* — Color Primitives — */
--teal: #14B8A6;
--teal-light: #2DD4BF;
--teal-bright: #5EEAD4;
--teal-dim: rgba(20,184,166,.1);
--teal-mid: rgba(20,184,166,.2);
--teal-glow: rgba(20,184,166,.45);
--teal-glow2: rgba(20,184,166,.15);
--navy-deep: #030712;
--navy-mid: #05101E;
--navy-surface: #071426;
/* — Glass — */
--glass-bg: rgba(5,13,30,.72);
--glass-bg2: rgba(3,8,20,.85);
--glass-bg3: rgba(7,16,36,.58);
--glass-border: rgba(20,184,166,.11);
--glass-hi: rgba(20,184,166,.26);
--glass-ultra: rgba(20,184,166,.50);
/* — Status — */
--green: #34D399;
--green-dim: rgba(52,211,153,.1);
--red: #F87171;
--red-dim: rgba(248,113,113,.1);
--amber: #FBBF24;
--amber-dim: rgba(251,191,36,.1);
--blue: #60A5FA;
--blue-dim: rgba(96,165,250,.1);
--purple: #A78BFA;
--purple-dim: rgba(167,139,250,.1);
/* — Text — */
--text: #F0F6F4;
--text-dim: rgba(240,246,244,.68);
--muted: rgba(240,246,244,.48);
--muted2: rgba(240,246,244,.22);
/* — Layout — */
--sidebar-w: 260px;
--gap: 12px;
--topbar-h: 60px;
--r: 10px;
--r-lg: 14px;
--r-xl: 20px;
--r-pill: 100px;
/* — Typography — */
--font-display: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
}
html { font-size: 16px; }
body {
background: var(--navy-deep);
color: var(--text);
/* Inter variable font — full optical sizing range */
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
font-optical-sizing: auto;
font-feature-settings: 'cv01','cv02','cv03','ss01','ss02','tnum';
line-height: 1.6;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
/* SVG noise grain — adds material tactility (technique from top Awwwards sites) */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.80' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.032'/%3E%3C/svg%3E");
}
/* ── Deep space ambient — static warm/cool zones ─────────── */
body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(ellipse 100% 60% at -8% -5%, rgba(20,184,166,.085) 0%, transparent 48%),
radial-gradient(ellipse 70% 80% at 108% 108%, rgba(10,32,100,.55) 0%, transparent 55%),
radial-gradient(ellipse 50% 40% at 50% -8%, rgba(45,212,191,.05) 0%, transparent 50%),
radial-gradient(ellipse 40% 40% at 90% 10%, rgba(167,139,250,.04) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
/* ── Fine dot grid ────────────────────────────────────────── */
body::after {
content: '';
position: fixed;
inset: 0;
background-image: radial-gradient(circle, rgba(20,184,166,.22) 1px, transparent 1px);
background-size: 28px 28px;
opacity: .11;
pointer-events: none;
z-index: 0;
}
/* ── Animated aurora blobs — breathe slowly ──────────────── */
.layout::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse 520px 420px at 12% 22%, rgba(20,184,166,.06) 0%, transparent 65%),
radial-gradient(ellipse 640px 520px at 88% 72%, rgba(8,32,100,.2) 0%, transparent 65%),
radial-gradient(ellipse 360px 320px at 65% 8%, rgba(45,212,191,.045) 0%, transparent 60%),
radial-gradient(ellipse 280px 280px at 30% 90%, rgba(167,139,250,.03) 0%, transparent 60%);
animation: aurora 20s ease-in-out infinite alternate;
}
@keyframes aurora {
0% { transform: translate(0,0) scale(1); opacity: .9; }
25% { transform: translate(-14px,9px) scale(1.02); opacity: 1; }
50% { transform: translate(9px,-12px) scale(.98); opacity: .85; }
75% { transform: translate(-6px,16px) scale(1.01); opacity: .95; }
100% { transform: translate(12px,-6px) scale(1.03); opacity: .9; }
}
/* ── Ultra-fine scanline texture ─────────────────────────── */
.layout::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0,0,0,.025) 2px,
rgba(0,0,0,.025) 4px
);
}
.layout, .login-wrap { position: relative; z-index: 2; }
a { color: var(--teal); text-decoration: none; transition: color .15s; }
a:hover { color: var(--teal-bright); }
/* ── Scrollbars ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(20,184,166,.15); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(20,184,166,.32); }
/* ══════════════════════════════════════════════════════════════
LOGIN — cinematic entrance
══════════════════════════════════════════════════════════════ */
.login-wrap {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
/* Extra ambient glow centered on the login box */
background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(20,184,166,.06) 0%, transparent 60%);
}
.login-box {
background: var(--glass-bg2);
backdrop-filter: blur(44px) saturate(190%) brightness(1.06);
-webkit-backdrop-filter: blur(44px) saturate(190%) brightness(1.06);
border: 1px solid var(--glass-hi);
border-radius: var(--r-xl);
padding: 58px 54px 50px;
width: 440px;
position: relative;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(20,184,166,.07),
0 32px 90px rgba(0,0,0,.75),
0 0 140px rgba(20,184,166,.05),
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 -1px 0 rgba(0,0,0,.15);
animation: loginIn .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes loginIn {
from { opacity: 0; transform: translateY(30px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Top shimmer */
.login-box::before {
content: '';
position: absolute;
top: 0; left: 8%; right: 8%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--teal-bright), transparent);
opacity: .75;
}
/* Ambient glow orb */
.login-box::after {
content: '';
position: absolute;
top: -80px; left: 50%;
transform: translateX(-50%);
width: 340px; height: 140px;
background: radial-gradient(ellipse, rgba(20,184,166,.1) 0%, transparent 70%);
pointer-events: none;
}
.login-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-bottom: 10px;
}
.login-logo-text {
font-size: 46px;
font-weight: 900;
letter-spacing: 11px;
background: linear-gradient(145deg, #fff 30%, var(--teal-light) 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
}
.login-sub {
color: var(--muted);
font-size: 9.5px;
font-weight: 600;
margin-bottom: 46px;
text-align: center;
letter-spacing: 4px;
text-transform: uppercase;
}
.login-box .form-group { margin-bottom: 20px; }
.login-box label {
display: block;
font-size: 10.5px;
font-weight: 600;
color: rgba(240,246,244,.55);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
}
.login-box input {
width: 100%;
background: rgba(2,5,14,.62);
border: 1px solid var(--glass-border);
border-radius: var(--r);
padding: 12px 16px;
color: var(--text);
font-size: 14px;
font-family: inherit;
outline: none;
transition: border-color .2s, box-shadow .2s, background .2s;
}
.login-box input:focus {
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(20,184,166,.15), 0 0 24px rgba(20,184,166,.1);
background: rgba(2,5,14,.85);
}
.login-box .btn-primary {
width: 100%; margin-top: 14px; padding: 14px; font-size: 15px; font-weight: 800; letter-spacing: .3px;
}
.error-msg {
background: var(--red-dim);
border: 1px solid rgba(248,113,113,.25);
border-left: 3px solid var(--red);
border-radius: var(--r);
color: var(--red);
padding: 12px 16px;
font-size: 13px;
margin-bottom: 20px;
}
/* ══════════════════════════════════════════════════════════════
LAYOUT
══════════════════════════════════════════════════════════════ */
.layout { display: flex; min-height: 100vh; }
/* ══════════════════════════════════════════════════════════════
SIDEBAR — world-class floating panel
══════════════════════════════════════════════════════════════ */
.sidebar {
width: var(--sidebar-w);
position: fixed;
top: var(--gap);
left: var(--gap);
bottom: var(--gap);
z-index: 100;
display: flex;
flex-direction: column;
background: linear-gradient(175deg,
rgba(6,15,36,.90) 0%,
rgba(4,10,24,.94) 50%,
rgba(3,8,20,.97) 100%
);
backdrop-filter: blur(40px) saturate(200%) brightness(1.02);
-webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.02);
border: 1px solid var(--glass-border);
border-radius: var(--r-xl);
overflow: hidden;
box-shadow:
0 0 0 1px rgba(20,184,166,.06),
0 10px 60px rgba(0,0,0,.65),
0 2px 12px rgba(0,0,0,.4),
inset 1px 0 0 rgba(255,255,255,.04),
inset 0 1px 0 rgba(255,255,255,.06);
animation: sidebarIn .5s cubic-bezier(.16,1,.3,1) .05s both;
}
@keyframes sidebarIn {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
/* Top shimmer line */
.sidebar::before {
content: '';
position: absolute;
top: 0; left: 12%; right: 12%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(20,184,166,.6), transparent);
z-index: 2;
}
/* Bottom ambient glow */
.sidebar::after {
content: '';
position: absolute;
bottom: -20px; left: 20%; right: 20%;
height: 60px;
background: radial-gradient(ellipse, rgba(20,184,166,.07) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.sidebar-logo {
padding: 22px 18px 16px;
border-bottom: 1px solid rgba(20,184,166,.08);
position: relative;
z-index: 1;
}
.logo-lockup {
display: flex;
align-items: center;
gap: 12px;
}
.logo-wordmark {
font-size: 19px;
font-weight: 900;
letter-spacing: 5px;
color: #fff;
line-height: 1;
}
.logo-sub {
font-size: 7.5px;
font-weight: 700;
color: var(--teal);
text-transform: uppercase;
letter-spacing: 2.5px;
opacity: .45;
margin-top: 5px;
}
.logo-lockup svg {
flex-shrink: 0;
filter: drop-shadow(0 0 10px rgba(20,184,166,.4));
}
.company-name {
font-size: 11.5px;
font-weight: 500;
color: var(--text-dim);
margin-top: 13px;
padding-top: 11px;
border-top: 1px solid rgba(20,184,166,.07);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
gap: 8px;
}
.company-name::before {
content: '';
width: 7px; height: 7px;
border-radius: 50%;
background: var(--green);
flex-shrink: 0;
animation: pulse 2.8s ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(52,211,153,.6);
}
@keyframes pulse {
0%,100% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); }
50% { box-shadow: 0 0 0 6px rgba(52,211,153,0); }
}
/* ── Nav ─────────────────────────────────────────────────── */
.sidebar-nav { flex: 1; padding: 8px 10px; overflow-y: auto; position: relative; z-index: 1; }
.nav-section { margin-bottom: 2px; }
/* Decorative section label with flanking lines */
.nav-label {
font-size: 8px;
font-weight: 800;
color: var(--muted2);
text-transform: uppercase;
letter-spacing: 2.2px;
padding: 16px 10px 6px;
display: flex;
align-items: center;
gap: 8px;
}
.nav-label::before,
.nav-label::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(20,184,166,.12));
}
.nav-label::after {
background: linear-gradient(90deg, rgba(20,184,166,.12), transparent);
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--r);
color: rgba(240,246,244,.58);
font-size: 13.5px;
font-weight: 500;
transition: all .18s cubic-bezier(.2,.8,.3,1);
cursor: pointer;
text-decoration: none;
position: relative;
margin-bottom: 2px;
overflow: hidden;
border: 1px solid transparent;
}
/* Hover sweep shimmer */
.nav-item::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 25%, rgba(20,184,166,.07) 50%, transparent 75%);
opacity: 0;
transform: translateX(-100%);
transition: transform .4s ease, opacity .2s;
}
.nav-item:hover {
background: rgba(20,184,166,.07);
color: rgba(240,246,244,.85);
text-decoration: none;
transform: translateX(3px);
}
.nav-item:hover::after {
opacity: 1;
transform: translateX(100%);
}
.nav-item.active {
background: linear-gradient(110deg, rgba(20,184,166,.16) 0%, rgba(20,184,166,.07) 100%);
color: var(--teal-bright);
font-weight: 600;
border-color: rgba(20,184,166,.16);
box-shadow:
0 2px 18px rgba(20,184,166,.1),
inset 0 1px 0 rgba(255,255,255,.05);
}
/* Glowing active indicator bar */
.nav-item.active::before {
content: '';
position: absolute;
left: 0; top: 18%; bottom: 18%;
width: 3px;
background: linear-gradient(180deg, var(--teal-bright), var(--teal));
border-radius: 0 3px 3px 0;
box-shadow: 0 0 18px var(--teal-glow), 0 0 6px var(--teal);
}
/* Icon pill container */
.nav-icon {
font-size: 13px;
width: 28px;
height: 28px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: rgba(238,244,242,.05);
border: 1px solid rgba(238,244,242,.06);
transition: background .18s, border-color .18s, box-shadow .18s;
}
.nav-item:hover .nav-icon {
background: rgba(20,184,166,.1);
border-color: rgba(20,184,166,.15);
}
.nav-item.active .nav-icon {
background: rgba(20,184,166,.18);
border-color: rgba(20,184,166,.25);
box-shadow: 0 0 14px rgba(20,184,166,.2);
}
.sidebar-footer {
padding: 12px 18px 16px;
border-top: 1px solid rgba(20,184,166,.07);
font-size: 11.5px;
color: var(--muted);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 4px;
position: relative;
z-index: 1;
}
.sidebar-footer-user {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.sidebar-footer a { color: var(--muted); transition: color .15s; }
.sidebar-footer a:hover { color: var(--red); }
/* ══════════════════════════════════════════════════════════════
MAIN — sweeps in from right
══════════════════════════════════════════════════════════════ */
.main {
margin-left: calc(var(--sidebar-w) + var(--gap) + 14px);
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
padding-right: 20px;
animation: mainIn .5s cubic-bezier(.16,1,.3,1) .08s both;
}
@keyframes mainIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ══════════════════════════════════════════════════════════════
TOPBAR — premium floating pill
══════════════════════════════════════════════════════════════ */
.topbar {
height: var(--topbar-h);
background: linear-gradient(135deg,
rgba(5,13,30,.78) 0%,
rgba(4,10,24,.88) 100%
);
backdrop-filter: blur(32px) saturate(190%) brightness(1.05);
-webkit-backdrop-filter: blur(32px) saturate(190%) brightness(1.05);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: var(--gap);
z-index: 50;
margin-top: var(--gap);
box-shadow:
0 0 0 1px rgba(20,184,166,.05),
0 4px 28px rgba(0,0,0,.5),
inset 0 1px 0 rgba(255,255,255,.06);
overflow: hidden;
}
.topbar::before {
content: '';
position: absolute;
top: 0; left: 12%; right: 12%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(20,184,166,.3), transparent);
}
/* Left side: live indicator */
.topbar-left {
display: flex;
align-items: center;
gap: 10px;
}
.topbar-live {
display: flex;
align-items: center;
gap: 6px;
font-size: 9.5px;
font-weight: 700;
color: var(--green);
letter-spacing: 1.8px;
text-transform: uppercase;
background: rgba(52,211,153,.08);
border: 1px solid rgba(52,211,153,.18);
border-radius: var(--r-pill);
padding: 4px 10px;
}
.topbar-live::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 0 rgba(52,211,153,.6);
animation: pulse 2.8s ease-in-out infinite;
}
.topbar-right {
display: flex;
align-items: center;
gap: 10px;
}
.topbar-company {
font-size: 11.5px;
font-weight: 700;
color: var(--teal);
background: rgba(20,184,166,.1);
border: 1px solid rgba(20,184,166,.2);
border-radius: var(--r-pill);
padding: 5px 18px;
letter-spacing: .4px;
box-shadow: 0 0 20px rgba(20,184,166,.1), inset 0 1px 0 rgba(255,255,255,.06);
transition: all .2s;
}
.topbar-company:hover {
background: rgba(20,184,166,.16);
box-shadow: 0 0 28px rgba(20,184,166,.2);
}
/* ══════════════════════════════════════════════════════════════
CONTENT AREA
══════════════════════════════════════════════════════════════ */
.content { padding: 0; flex: 1; }
.page-header-bar {
padding: 32px 34px 20px;
position: relative;
}
/* Decorative accent line below page title */
.page-header-bar::after {
content: '';
position: absolute;
bottom: 0; left: 34px;
width: 52px; height: 2px;
background: linear-gradient(90deg, var(--teal), transparent);
border-radius: 2px;
box-shadow: 0 0 10px rgba(20,184,166,.4);
}
.page-title {
font-size: 28px;
font-weight: 800;
letter-spacing: -.6px;
line-height: 1.2;
/* Gradient only at large size where it renders crisply */
background: linear-gradient(135deg, #fff 40%, var(--teal-light) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-wrap: balance;
}
.page-body {
padding: 28px 34px 52px;
max-width: 1440px;
}
/* ══════════════════════════════════════════════════════════════
FLASH MESSAGES
══════════════════════════════════════════════════════════════ */
.flash-list { list-style: none; margin-bottom: 26px; }
.flash-success {
background: var(--green-dim);
border: 1px solid rgba(52,211,153,.2);
border-left: 3px solid var(--green);
border-radius: var(--r);
color: var(--green);
padding: 13px 18px;
margin-bottom: 8px;
font-size: 13px;
font-weight: 500;
backdrop-filter: blur(8px);
animation: flashIn .3s ease both;
}
.flash-error {
background: var(--red-dim);
border: 1px solid rgba(248,113,113,.2);
border-left: 3px solid var(--red);
border-radius: var(--r);
color: var(--red);
padding: 13px 18px;
margin-bottom: 8px;
font-size: 13px;
font-weight: 500;
backdrop-filter: blur(8px);
animation: flashIn .3s ease both;
}
@keyframes flashIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ══════════════════════════════════════════════════════════════
STAT TILES — each with unique accent
══════════════════════════════════════════════════════════════ */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.stat-tile {
background: var(--glass-bg3);
backdrop-filter: blur(22px) saturate(170%) brightness(1.04);
-webkit-backdrop-filter: blur(22px) saturate(170%) brightness(1.04);
border: 1px solid var(--glass-border);
border-radius: var(--r-xl);
padding: 28px 24px 22px;
position: relative;
overflow: hidden;
transition: border-color .24s, transform .24s cubic-bezier(.2,.8,.3,1), box-shadow .24s;
box-shadow:
0 4px 28px rgba(0,0,0,.38),
inset 0 1px 0 rgba(255,255,255,.055),
inset 0 -1px 0 rgba(0,0,0,.12);
cursor: default;
}
/* Stagger entrance animations */
.stat-tile:nth-child(1) { animation: tileIn .5s cubic-bezier(.16,1,.3,1) .12s both; }
.stat-tile:nth-child(2) { animation: tileIn .5s cubic-bezier(.16,1,.3,1) .19s both; }
.stat-tile:nth-child(3) { animation: tileIn .5s cubic-bezier(.16,1,.3,1) .26s both; }
.stat-tile:nth-child(4) { animation: tileIn .5s cubic-bezier(.16,1,.3,1) .33s both; }
@keyframes tileIn {
from { opacity: 0; transform: translateY(20px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Top accent line — per-tile color via nth-child */
.stat-tile::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
opacity: .45;
transition: opacity .25s;
}
.stat-tile:nth-child(1)::before { background: linear-gradient(90deg, transparent, var(--teal), transparent); }
.stat-tile:nth-child(2)::before { background: linear-gradient(90deg, transparent, var(--blue), transparent); }
.stat-tile:nth-child(3)::before { background: linear-gradient(90deg, transparent, var(--purple), transparent); }
.stat-tile:nth-child(4)::before { background: linear-gradient(90deg, transparent, var(--green), transparent); }
/* Corner glow orb */
.stat-tile::after {
content: '';
position: absolute;
bottom: -24px; right: -24px;
width: 110px; height: 110px;
border-radius: 50%;
opacity: .8;
transition: transform .32s, opacity .32s;
}
.stat-tile:nth-child(1)::after { background: radial-gradient(circle, rgba(20,184,166,.12) 0%, transparent 65%); }
.stat-tile:nth-child(2)::after { background: radial-gradient(circle, rgba(96,165,250,.1) 0%, transparent 65%); }
.stat-tile:nth-child(3)::after { background: radial-gradient(circle, rgba(167,139,250,.1) 0%, transparent 65%); }
.stat-tile:nth-child(4)::after { background: radial-gradient(circle, rgba(52,211,153,.1) 0%, transparent 65%); }
.stat-tile:hover {
border-color: rgba(20,184,166,.26);
transform: translateY(-6px) scale(1.015);
box-shadow:
0 18px 54px rgba(0,0,0,.55),
0 0 0 1px rgba(20,184,166,.13),
0 0 50px rgba(20,184,166,.06);
}
.stat-tile:hover::before { opacity: .8; }
.stat-tile:hover::after { transform: scale(1.7); opacity: 1; }
.stat-label {
font-size: 9.5px;
font-weight: 700;
color: rgba(240,246,244,.5);
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 14px;
}
.stat-value {
font-size: 54px;
font-weight: 900;
line-height: 1;
letter-spacing: -4px;
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum','ss01';
background: linear-gradient(145deg, #fff 0%, var(--teal-light) 70%, var(--teal-bright) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 20px rgba(20,184,166,.22));
}
.stat-sub {
font-size: 11.5px;
color: var(--muted);
margin-top: 12px;
line-height: 1.4;
}
.stat-sub a { color: var(--teal); font-weight: 600; transition: color .12s; }
.stat-sub a:hover { color: var(--teal-bright); }
/* ══════════════════════════════════════════════════════════════
CARDS — floating glass panels
══════════════════════════════════════════════════════════════ */
.card {
background: var(--glass-bg);
backdrop-filter: blur(22px) saturate(160%) brightness(1.02);
-webkit-backdrop-filter: blur(22px) saturate(160%) brightness(1.02);
border: 1px solid var(--glass-border);
border-radius: var(--r-xl);
padding: 0;
margin-bottom: 20px;
position: relative;
overflow: hidden;
box-shadow:
0 4px 30px rgba(0,0,0,.38),
inset 0 1px 0 rgba(255,255,255,.055),
inset 0 -1px 0 rgba(0,0,0,.08);
transition: border-color .22s, box-shadow .22s, transform .22s;
animation: cardIn .5s cubic-bezier(.16,1,.3,1) .1s both;
}
.card:nth-child(1) { animation-delay: .10s; }
.card:nth-child(2) { animation-delay: .16s; }
.card:nth-child(3) { animation-delay: .22s; }
.card:nth-child(4) { animation-delay: .28s; }
@keyframes cardIn {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
.card::before {
content: '';
position: absolute;
top: 0; left: 5%; right: 5%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(20,184,166,.38), transparent);
opacity: .5;
transition: opacity .22s;
}
.card:hover {
border-color: rgba(20,184,166,.2);
box-shadow: 0 8px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(20,184,166,.08);
transform: translateY(-2px);
}
.card:hover::before { opacity: .8; }
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 26px;
border-bottom: 1px solid rgba(20,184,166,.07);
background: rgba(2,6,16,.22);
}
.card-title {
font-size: 13.5px;
font-weight: 700;
color: var(--text);
letter-spacing: -.1px;
display: flex;
align-items: center;
gap: 10px;
}
.card-title::before {
content: '';
display: inline-block;
width: 3px;
height: 14px;
background: linear-gradient(180deg, var(--teal-bright), var(--teal));
border-radius: 2px;
flex-shrink: 0;
box-shadow: 0 0 12px rgba(20,184,166,.6);
}
.card-subtitle { font-size: 12px; color: var(--muted); margin-top: 3px; }
.card form { padding: 24px 26px; }
.card .city-pills { padding: 22px 26px; }
.card .empty-state { padding: 56px 20px; }
.card > p, .card-desc-text { padding: 16px 26px; font-size: 13px; color: var(--muted); line-height: 1.65; }
.card-body { padding: 24px 26px; }
/* Grid of form fields inside a card — used on settings, connections, etc. */
.card-fields { padding: 16px 26px 24px; }
/* ══════════════════════════════════════════════════════════════
TABLES — with row stagger
══════════════════════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
background: rgba(2,6,16,.48);
color: rgba(238,244,242,.22);
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.6px;
padding: 13px 18px;
text-align: left;
border-bottom: 1px solid rgba(20,184,166,.08);
white-space: nowrap;
}
thead th:first-child { padding-left: 26px; }
thead th:last-child { padding-right: 26px; }
tbody tr {
border-bottom: 1px solid rgba(20,184,166,.045);
transition: background .14s;
animation: rowIn .35s ease both;
}
/* Row stagger via nth-child */
tbody tr:nth-child(1) { animation-delay: .08s; }
tbody tr:nth-child(2) { animation-delay: .11s; }
tbody tr:nth-child(3) { animation-delay: .14s; }
tbody tr:nth-child(4) { animation-delay: .17s; }
tbody tr:nth-child(5) { animation-delay: .20s; }
tbody tr:nth-child(6) { animation-delay: .23s; }
tbody tr:nth-child(7) { animation-delay: .26s; }
tbody tr:nth-child(8) { animation-delay: .29s; }
tbody tr:nth-child(9) { animation-delay: .32s; }
tbody tr:nth-child(10) { animation-delay: .35s; }
tbody tr:nth-child(11) { animation-delay: .38s; }
tbody tr:nth-child(12) { animation-delay: .41s; }
@keyframes rowIn {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: translateX(0); }
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: rgba(20,184,166,.052); }
/* Left accent on row hover */
tbody tr:hover td:first-child {
box-shadow: inset 3px 0 0 var(--teal);
}
tbody td { padding: 14px 18px; color: #E8F2F0; vertical-align: middle; font-size: 13.5px; }
tbody td:first-child { padding-left: 26px; }
tbody td:last-child { padding-right: 26px; }
td.muted { color: rgba(240,246,244,.52); font-size: 13px; }
td.mono { font-family: "SF Mono","JetBrains Mono","Fira Code",monospace; font-size: 12px; color: var(--text-dim); }
/* ══════════════════════════════════════════════════════════════
BUTTONS — with shimmer sweep
══════════════════════════════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 18px;
border-radius: var(--r);
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
transition: all .18s cubic-bezier(.2,.8,.3,1);
text-decoration: none;
white-space: nowrap;
line-height: 1.4;
position: relative;
overflow: hidden;
font-family: inherit;
letter-spacing: .1px;
}
/* Shimmer sweep on hover */
.btn::after {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(105deg,
transparent 25%,
rgba(255,255,255,.15) 50%,
transparent 75%
);
transition: left .45s ease;
}
.btn:hover::after { left: 100%; }
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.99); transition-duration: .08s; }
.btn:disabled { opacity: .3; cursor: not-allowed; transform: none; }
/* Focus ring */
.btn:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 3px;
}
.btn-primary {
background: linear-gradient(140deg, var(--teal-light) 0%, var(--teal) 50%, #0D9488 100%);
color: #011018;
font-weight: 800;
border: none;
box-shadow:
0 2px 18px rgba(20,184,166,.42),
0 0 0 1px rgba(20,184,166,.22),
inset 0 1px 0 rgba(255,255,255,.22);
letter-spacing: .2px;
}
.btn-primary:hover {
background: linear-gradient(140deg, var(--teal-bright) 0%, var(--teal-light) 60%, var(--teal) 100%);
box-shadow:
0 6px 30px rgba(20,184,166,.58),
0 0 0 1px rgba(20,184,166,.32),
inset 0 1px 0 rgba(255,255,255,.22);
color: #011018;
}
.btn-secondary {
background: rgba(238,244,242,.04);
color: var(--text-dim);
border-color: var(--glass-border);
backdrop-filter: blur(8px);
}
.btn-secondary:hover {
background: rgba(20,184,166,.1);
color: var(--text);
border-color: rgba(20,184,166,.28);
box-shadow: 0 0 20px rgba(20,184,166,.12);
}
.btn-danger {
background: var(--red-dim);
color: var(--red);
border-color: rgba(248,113,113,.2);
}
.btn-danger:hover {
background: rgba(248,113,113,.16);
box-shadow: 0 4px 18px rgba(248,113,113,.22);
}
.btn-success {
background: var(--green-dim);
color: var(--green);
border-color: rgba(52,211,153,.2);
}
.btn-success:hover { background: rgba(52,211,153,.16); }
.btn-sm { padding: 5px 13px; font-size: 12px; border-radius: 8px; }
.btn-lg { padding: 13px 28px; font-size: 15px; }
/* ══════════════════════════════════════════════════════════════
FORMS
══════════════════════════════════════════════════════════════ */
.form-group { margin-bottom: 20px; }
label {
display: block;
font-size: 10.5px;
font-weight: 600;
color: rgba(240,246,244,.55);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
}
input[type=text],
input[type=password],
input[type=number],
input[type=search],
input[type=email],
select,
textarea {
background: rgba(2,5,14,.6);
border: 1px solid var(--glass-border);
border-radius: var(--r);
padding: 10px 14px;
color: var(--text);
font-size: 13.5px;
width: 100%;
outline: none;
transition: border-color .18s, box-shadow .18s, background .18s;
font-family: inherit;
backdrop-filter: blur(12px);
}
input:focus, select:focus, textarea:focus {
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(20,184,166,.13), 0 0 26px rgba(20,184,166,.08);
background: rgba(2,5,14,.82);
}
input::placeholder { color: var(--muted); opacity: .5; }
select option { background: #07142A; color: var(--text); }
textarea { resize: vertical; min-height: 84px; }
.input-row { display: flex; gap: 14px; align-items: flex-start; }
.input-row .form-group { flex: 1; margin-bottom: 0; }
.form-hint { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
/* ══════════════════════════════════════════════════════════════
MODAL
══════════════════════════════════════════════════════════════ */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(20,184,166,.07) 0%, rgba(2,5,15,.82) 55%);
z-index: 200;
align-items: center;
justify-content: center;
backdrop-filter: blur(14px) saturate(80%);
-webkit-backdrop-filter: blur(14px) saturate(80%);
}
.modal-overlay.open { display: flex; }
.modal {
background: var(--glass-bg2);
backdrop-filter: blur(44px) saturate(200%) brightness(1.06);
-webkit-backdrop-filter: blur(44px) saturate(200%) brightness(1.06);
border: 1px solid var(--glass-hi);
border-radius: var(--r-xl);
padding: 0;
width: 520px;
max-width: 95vw;
box-shadow:
0 0 0 1px rgba(20,184,166,.08),
0 56px 130px rgba(0,0,0,.88),
0 0 70px rgba(20,184,166,.06),
inset 0 1px 0 rgba(255,255,255,.08);
animation: modalIn .24s cubic-bezier(.16,1,.3,1);
overflow: hidden;
position: relative;
}
.modal::before {
content: '';
position: absolute;
top: 0; left: 12%; right: 12%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--teal-bright), transparent);
opacity: .65;
}
.modal-header {
padding: 24px 30px 20px;
border-bottom: 1px solid rgba(20,184,166,.08);
background: rgba(2,6,16,.3);
}
.modal h3 {
font-size: 16px;
font-weight: 700;
color: var(--text);
display: flex;
align-items: center;
gap: 11px;
}
.modal h3::before {
content: '';
display: inline-block;
width: 3px; height: 18px;
background: linear-gradient(180deg, var(--teal-bright), var(--teal));
border-radius: 2px;
box-shadow: 0 0 14px rgba(20,184,166,.65);
}
.modal form { padding: 26px 30px; }
@keyframes modalIn {
from { opacity: 0; transform: scale(.92) translateY(20px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 26px;
padding-top: 18px;
border-top: 1px solid rgba(20,184,166,.08);
}
/* ══════════════════════════════════════════════════════════════
BADGES — with inner glow
══════════════════════════════════════════════════════════════ */
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: var(--r-pill);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .3px;
backdrop-filter: blur(8px);
}
.badge-green { background: var(--green-dim); color: var(--green); border: 1px solid rgba(52,211,153,.22); box-shadow: inset 0 1px 0 rgba(52,211,153,.06); }
.badge-teal { background: var(--teal-dim); color: var(--teal); border: 1px solid rgba(20,184,166,.2); box-shadow: inset 0 1px 0 rgba(20,184,166,.06); }
.badge-orange { background: var(--teal-dim); color: var(--teal); border: 1px solid rgba(20,184,166,.2); }
.badge-blue { background: var(--blue-dim); color: var(--blue); border: 1px solid rgba(96,165,250,.22); box-shadow: inset 0 1px 0 rgba(96,165,250,.06); }
.badge-gray { background: rgba(238,244,242,.06); color: var(--muted); border: 1px solid var(--glass-border); }
.badge-red { background: var(--red-dim); color: var(--red); border: 1px solid rgba(248,113,113,.22); box-shadow: inset 0 1px 0 rgba(248,113,113,.06); }
.badge-purple { background: var(--purple-dim); color: var(--purple); border: 1px solid rgba(167,139,250,.22); }
/* ══════════════════════════════════════════════════════════════
MISC COMPONENTS
══════════════════════════════════════════════════════════════ */
.section-title {
font-size: 9.5px;
font-weight: 800;
color: var(--teal);
text-transform: uppercase;
letter-spacing: 1.7px;
padding-bottom: 13px;
border-bottom: 1px solid rgba(20,184,166,.1);
margin: 30px 0 20px;
opacity: .65;
display: flex;
align-items: center;
gap: 10px;
}
.section-title::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(20,184,166,.15), transparent);
}
.city-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.city-pill {
background: rgba(20,184,166,.08);
border: 1px solid var(--glass-border);
border-radius: var(--r);
padding: 8px 20px;
font-size: 13px;
font-weight: 700;
color: var(--teal);
letter-spacing: .5px;
transition: all .18s cubic-bezier(.2,.8,.3,1);
cursor: default;
}
.city-pill:hover {
background: rgba(20,184,166,.15);
border-color: rgba(20,184,166,.3);
box-shadow: 0 0 22px rgba(20,184,166,.14);
transform: translateY(-2px);
}
.esc-header-row {
display: flex; gap: 10px; align-items: center;
padding: 0 0 6px 0; margin-bottom: 4px;
border-bottom: 1px solid var(--border);
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--muted);
}
.esc-col-level { width: 26px; flex-shrink: 0; text-align: center; }
.esc-col-name { flex: 2; }
.esc-col-phone { flex: 2; }
.esc-col-delay { width: 82px; flex-shrink: 0; text-align: center; }
.esc-col-remove { width: 32px; flex-shrink: 0; }
.esc-row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.esc-row input[type="text"] { flex: 2; }
.esc-delay-input {
width: 82px; flex-shrink: 0;
text-align: center;
border: 1px solid var(--border);
border-radius: 7px;
padding: 7px 8px;
font-size: 13px;
background: var(--surface);
color: var(--text);
}
.esc-hint {
font-size: 12px; color: var(--muted);
margin: 4px 0 12px 0; line-height: 1.5;
}
.esc-order {
width: 26px; height: 26px;
border-radius: 50%;
background: linear-gradient(140deg, var(--teal-light), var(--teal));
color: #011018;
font-size: 11px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 0 16px rgba(20,184,166,.48);
}
.search-bar { display: flex; gap: 10px; margin-bottom: 22px; align-items: flex-end; }
.search-bar input { max-width: 340px; }
.empty-state { text-align: center; padding: 68px 20px; color: var(--muted); }
.empty-state .empty-icon {
font-size: 42px;
margin-bottom: 16px;
opacity: .15;
display: block;
animation: iconFloat 3s ease-in-out infinite;
}
@keyframes iconFloat {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.empty-state p { font-size: 13.5px; line-height: 1.7; }
.transcript-box {
background: rgba(2,5,14,.75);
backdrop-filter: blur(8px);
border: 1px solid var(--glass-border);
border-radius: var(--r);
padding: 22px 26px;
font-size: 13.5px;
line-height: 2;
white-space: pre-wrap;
color: var(--text);
max-height: 540px;
overflow-y: auto;
font-family: "SF Mono","JetBrains Mono","Fira Code",monospace;
}
.info-note {
background: rgba(20,184,166,.065);
border: 1px solid var(--glass-border);
border-left: 3px solid var(--teal);
border-radius: var(--r);
padding: 13px 18px;
font-size: 13px;
color: rgba(238,244,242,.8);
margin-bottom: 20px;
line-height: 1.5;
}
.warning-note {
background: var(--amber-dim);
border: 1px solid rgba(251,191,36,.18);
border-left: 3px solid var(--amber);
border-radius: var(--r);
padding: 13px 18px;
font-size: 13px;
color: var(--amber);
margin-top: 10px;
line-height: 1.5;
}
.add-form {
background: rgba(2,5,14,.45);
backdrop-filter: blur(14px);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
padding: 22px 26px;
margin-bottom: 26px;
}
.add-form-title {
font-size: 9.5px;
font-weight: 800;
color: var(--teal);
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: .9px;
opacity: .65;
}
/* ══════════════════════════════════════════════════════════════
PAGE HEADER & GRIDS
══════════════════════════════════════════════════════════════ */
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 28px;
}
.page-header h2 {
font-size: 22px;
font-weight: 800;
color: var(--text);
letter-spacing: -.4px;
}
.page-header p { font-size: 13px; color: var(--muted); margin-top: 4px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.danger-card { border-color: rgba(248,113,113,.28) !important; }
.danger-card .card-title { color: var(--red) !important; }
.danger-card .card-title::before {
background: linear-gradient(180deg, #fc8585, var(--red)) !important;
box-shadow: 0 0 10px rgba(248,113,113,.5) !important;
}
/* ══════════════════════════════════════════════════════════════
INTERACTIVE ROWS & CLICKABLE TILES
══════════════════════════════════════════════════════════════ */
/* stat-tile as — reset link styles, keep all tile styles */
a.stat-tile {
display: block;
text-decoration: none;
color: inherit;
cursor: pointer;
}
a.stat-tile:hover {
text-decoration: none;
color: inherit;
}
a.stat-tile .stat-sub {
color: var(--teal);
font-weight: 600;
font-size: 12px;
transition: color .15s;
}
a.stat-tile:hover .stat-sub {
color: var(--teal-bright);
}
/* City pill as */
a.city-pill {
display: inline-flex;
text-decoration: none;
}
a.city-pill:hover {
text-decoration: none;
color: var(--teal-bright);
}
/* Clickable table rows */
tr[data-href],
tr.row-clickable {
cursor: pointer;
}
/* Row hover: stronger highlight + left glow accent */
tr[data-href]:hover td,
tr.row-clickable:hover td {
background: rgba(20,184,166,.065);
}
tr[data-href]:hover td:first-child,
tr.row-clickable:hover td:first-child {
box-shadow: inset 3px 0 0 var(--teal);
}
/* Focus ring for keyboard nav */
tr[data-href]:focus,
tr.row-clickable:focus {
outline: none;
}
tr[data-href]:focus td,
tr.row-clickable:focus td {
background: rgba(20,184,166,.08);
box-shadow: inset 0 0 0 1px rgba(20,184,166,.2);
}
/* Subtle "arrow" indicator in last column of clickable rows */
tr[data-href] td:last-child::after {
content: '›';
float: right;
font-size: 16px;
color: var(--muted);
opacity: 0;
transform: translateX(-4px);
transition: opacity .15s, transform .15s;
}
tr[data-href]:hover td:last-child::after {
opacity: 1;
transform: translateX(0);
}
/* ══════════════════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.two-col, .three-col { grid-template-columns: 1fr; }
}
/* ── Mobile hamburger button ─────────────────────── */
.mobile-menu-btn {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 36px;
height: 36px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
border-radius: 8px;
flex-shrink: 0;
}
.mobile-menu-btn span {
display: block;
height: 2px;
background: var(--text);
border-radius: 2px;
transition: transform .2s, opacity .2s, width .2s;
width: 20px;
}
.mobile-menu-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.is-open span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ── Mobile overlay ──────────────────────────────── */
.mobile-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.5);
z-index: 9999;
touch-action: none;
overscroll-behavior: none;
-webkit-tap-highlight-color: transparent;
}
.mobile-overlay.mobile-overlay-visible { display: block; }
@media (max-width: 768px) {
/* Show hamburger */
.mobile-menu-btn { display: flex; }
/* Sidebar: fullscreen takeover when open */
.sidebar {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%;
border-radius: 0;
z-index: 10000;
transform: translateX(-100%);
transition: transform .22s ease-in-out;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: #0b1526 !important;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.sidebar.mobile-open {
transform: translateX(0);
}
/* Main content full width */
.main { margin-left: 0 !important; padding-right: 0; }
.content { padding: 0; }
.page-body { padding: 0 12px 32px; }
.page-header-bar { padding: 16px 12px 8px; }
/* Topbar */
.topbar { margin: 8px 8px 0; border-radius: 12px; }
.topbar-live { display: none; }
.topbar-company { display: none; }
.topbar-search span, .topbar-search kbd { display: none; }
.topbar-search { min-width: unset; padding: 6px 10px; }
/* Cards */
.card { border-radius: 12px; margin-bottom: 12px; }
.card-header { padding: 14px 16px; flex-wrap: wrap; gap: 8px; }
.card-fields { padding: 0 16px 16px; }
/* Stats grid → 2 columns */
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
/* Tables → horizontal scroll */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { min-width: 520px; }
/* Forms */
.input-row { flex-direction: column; gap: 12px; }
.form-group { min-width: unset !important; width: 100%; }
select, input[type="text"], input[type="search"], input[type="tel"], input[type="email"] {
font-size: 16px;
}
.btn { touch-action: manipulation; }
.meta-grid { grid-template-columns: repeat(2, 1fr); }
/* Hide overlay — not needed with fullscreen approach */
.mobile-overlay { display: none !important; }
}
@media (max-width: 420px) {
.stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.meta-grid { grid-template-columns: 1fr; }
.page-body { padding: 0 8px 24px; }
}
/* ══════════════════════════════════════════════════════════════
PAGE PROGRESS BAR
══════════════════════════════════════════════════════════════ */
#pageProgressBar {
position: fixed;
top: 0; left: 0;
height: 2px;
width: 0%;
background: linear-gradient(90deg, var(--teal), var(--teal-bright), var(--teal));
z-index: 9999;
opacity: 0;
box-shadow: 0 0 12px var(--teal-glow), 0 0 4px var(--teal);
transition: width 1.2s cubic-bezier(.1,.6,.2,1), opacity .3s;
pointer-events: none;
}
/* ══════════════════════════════════════════════════════════════
TOAST NOTIFICATIONS
══════════════════════════════════════════════════════════════ */
.toast-container {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 8000;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
}
.toast {
background: rgba(4,11,26,.93);
backdrop-filter: blur(36px) saturate(200%);
-webkit-backdrop-filter: blur(36px) saturate(200%);
border: 1px solid var(--glass-hi);
border-radius: 14px;
padding: 14px 16px 14px 14px;
display: flex;
align-items: center;
gap: 12px;
min-width: 300px;
max-width: 420px;
pointer-events: all;
box-shadow:
0 0 0 1px rgba(20,184,166,.06),
0 12px 40px rgba(0,0,0,.6),
inset 0 1px 0 rgba(255,255,255,.06);
transform: translateX(calc(100% + 40px));
opacity: 0;
transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .3s;
position: relative;
overflow: hidden;
}
.toast::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(20,184,166,.4), transparent);
}
.toast.visible {
transform: translateX(0);
opacity: 1;
}
.toast.hiding {
transform: translateX(calc(100% + 40px));
opacity: 0;
}
.toast-icon {
width: 26px; height: 26px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 800;
flex-shrink: 0;
}
.toast-success .toast-icon {
background: var(--green-dim); color: var(--green);
border: 1px solid rgba(52,211,153,.3);
box-shadow: 0 0 12px rgba(52,211,153,.2);
}
.toast-error .toast-icon {
background: var(--red-dim); color: var(--red);
border: 1px solid rgba(248,113,113,.3);
}
.toast-info .toast-icon {
background: var(--blue-dim); color: var(--blue);
border: 1px solid rgba(96,165,250,.3);
}
.toast-warning .toast-icon {
background: var(--amber-dim); color: var(--amber);
border: 1px solid rgba(251,191,36,.3);
}
.toast-msg {
flex: 1;
font-size: 13.5px;
font-weight: 500;
color: var(--text);
line-height: 1.4;
}
.toast-close {
background: none; border: none;
color: var(--muted); cursor: pointer;
font-size: 12px; padding: 2px 4px;
transition: color .15s; border-radius: 4px;
line-height: 1;
}
.toast-close:hover { color: var(--text); background: rgba(255,255,255,.06); }
/* Toast — light mode overrides */
body.old-man-mode .toast {
background: #ffffff;
border-color: rgba(0,0,0,0.12);
box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
}
body.old-man-mode .toast::before {
background: linear-gradient(90deg, transparent, rgba(20,184,166,.35), transparent);
}
body.old-man-mode .toast-msg { color: #1a1a2e; }
body.old-man-mode .toast-close { color: #666; }
body.old-man-mode .toast-close:hover { color: #111; background: rgba(0,0,0,.05); }
/* ══════════════════════════════════════════════════════════════
COMMAND PALETTE
══════════════════════════════════════════════════════════════ */
.cmd-overlay {
position: fixed;
inset: 0;
background: rgba(1,4,14,.82);
backdrop-filter: blur(18px) saturate(80%);
-webkit-backdrop-filter: blur(18px) saturate(80%);
z-index: 9000;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: clamp(60px, 14vh, 160px);
opacity: 0;
pointer-events: none;
transition: opacity .18s;
}
.cmd-overlay.open {
opacity: 1;
pointer-events: all;
}
.cmd-box {
background: rgba(3,9,22,.95);
backdrop-filter: blur(48px) saturate(220%);
-webkit-backdrop-filter: blur(48px) saturate(220%);
border: 1px solid var(--glass-hi);
border-radius: 22px;
width: 580px;
max-width: 92vw;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(20,184,166,.07),
0 50px 140px rgba(0,0,0,.92),
0 0 100px rgba(20,184,166,.04);
transform: scale(.96) translateY(-12px);
transition: transform .24s cubic-bezier(.16,1,.3,1);
position: relative;
}
.cmd-box::before {
content: '';
position: absolute;
top: 0; left: 10%; right: 10%; height: 1px;
background: linear-gradient(90deg, transparent, var(--teal-bright), transparent);
opacity: .55;
}
.cmd-overlay.open .cmd-box {
transform: scale(1) translateY(0);
}
.cmd-search {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 22px;
border-bottom: 1px solid rgba(20,184,166,.09);
background: rgba(2,6,18,.4);
}
.cmd-search-icon {
color: var(--muted);
flex-shrink: 0;
font-size: 16px;
}
#cmdInput {
flex: 1;
background: none;
border: none;
outline: none;
color: var(--text);
font-size: 16px;
font-family: inherit;
font-weight: 400;
width: 100%;
caret-color: var(--teal);
}
#cmdInput::placeholder { color: var(--muted); opacity: .6; }
.cmd-esc {
font-size: 10px;
font-weight: 700;
color: var(--muted);
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 6px;
padding: 3px 7px;
letter-spacing: .5px;
flex-shrink: 0;
}
.cmd-results {
max-height: 360px;
overflow-y: auto;
padding: 8px;
}
.cmd-item {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
border-radius: 11px;
cursor: pointer;
transition: background .1s;
text-decoration: none;
color: var(--text);
position: relative;
overflow: hidden;
}
.cmd-item:hover,
.cmd-item.active {
background: rgba(20,184,166,.1);
text-decoration: none;
color: var(--text);
}
.cmd-item.active .cmd-item-arrow { opacity: 1; }
.cmd-item-icon {
font-size: 16px;
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
background: rgba(20,184,166,.09);
border: 1px solid rgba(20,184,166,.12);
border-radius: 10px;
flex-shrink: 0;
transition: background .1s;
}
.cmd-item.active .cmd-item-icon {
background: rgba(20,184,166,.18);
box-shadow: 0 0 14px rgba(20,184,166,.2);
}
.cmd-item-body {
flex: 1;
min-width: 0;
}
.cmd-item-label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text);
line-height: 1.3;
}
.cmd-item-desc {
display: block;
font-size: 12px;
color: var(--muted);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cmd-item-arrow {
font-size: 13px;
color: var(--teal);
opacity: 0;
background: rgba(20,184,166,.1);
border: 1px solid rgba(20,184,166,.2);
border-radius: 6px;
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: opacity .1s;
}
.cmd-footer {
display: flex;
align-items: center;
gap: 16px;
padding: 10px 22px;
border-top: 1px solid rgba(20,184,166,.07);
background: rgba(2,6,18,.3);
}
.cmd-footer-hint {
display: flex;
align-items: center;
gap: 5px;
font-size: 10.5px;
color: var(--muted);
font-weight: 500;
}
.cmd-empty {
text-align: center;
padding: 32px 20px;
color: var(--muted);
font-size: 13.5px;
}
kbd {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-family: inherit;
font-weight: 700;
color: var(--muted);
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 5px;
padding: 2px 6px;
letter-spacing: .3px;
}
/* ══════════════════════════════════════════════════════════════
TOPBAR SEARCH BUTTON
══════════════════════════════════════════════════════════════ */
.topbar-search {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,.04);
border: 1px solid var(--glass-border);
border-radius: var(--r-pill);
padding: 7px 14px 7px 12px;
cursor: pointer;
color: var(--muted);
font-size: 13px;
font-family: inherit;
transition: all .18s;
flex: 1;
max-width: 280px;
text-align: left;
}
.topbar-search:hover {
background: rgba(20,184,166,.08);
border-color: rgba(20,184,166,.22);
color: var(--text-dim);
}
.topbar-search-icon { font-size: 14px; flex-shrink: 0; }
.topbar-search-text { flex: 1; }
.topbar-search kbd { margin-left: auto; }
.topbar-clock {
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--muted);
letter-spacing: .3px;
white-space: nowrap;
}
/* ══════════════════════════════════════════════════════════════
BUTTON RIPPLE
══════════════════════════════════════════════════════════════ */
.btn-ripple {
position: absolute;
border-radius: 50%;
background: rgba(255,255,255,.18);
pointer-events: none;
transform: scale(0);
animation: rippleOut .65s ease-out forwards;
}
@keyframes rippleOut {
to { transform: scale(1); opacity: 0; }
}
/* ══════════════════════════════════════════════════════════════
SCROLL REVEAL
══════════════════════════════════════════════════════════════ */
.reveal-card {
opacity: 0;
transform: translateY(18px);
transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
}
.reveal-card.revealed {
opacity: 1;
transform: translateY(0);
}
/* ══════════════════════════════════════════════════════════════
DASHBOARD — GREETING BAR
══════════════════════════════════════════════════════════════ */
.greeting-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 28px;
flex-wrap: wrap;
gap: 16px;
}
.greeting-text {
font-size: 22px;
font-weight: 800;
color: var(--text);
letter-spacing: -.4px;
line-height: 1.2;
}
.greeting-sub {
font-size: 13px;
color: var(--muted);
margin-top: 4px;
}
.greeting-status {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
color: var(--green);
background: rgba(52,211,153,.08);
border: 1px solid rgba(52,211,153,.18);
border-radius: var(--r-pill);
padding: 7px 14px;
letter-spacing: .3px;
}
.greeting-status::before {
content: '';
width: 7px; height: 7px; border-radius: 50%;
background: var(--green);
animation: pulse 2.8s ease-in-out infinite;
}
.quick-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.quick-action {
display: flex;
align-items: center;
gap: 7px;
background: var(--glass-bg3);
border: 1px solid var(--glass-border);
border-radius: var(--r);
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
color: var(--text-dim);
cursor: pointer;
text-decoration: none;
transition: all .18s cubic-bezier(.2,.8,.3,1);
backdrop-filter: blur(12px);
position: relative;
overflow: hidden;
}
.quick-action::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 30%, rgba(20,184,166,.08) 50%, transparent 70%);
opacity: 0;
transform: translateX(-100%);
transition: transform .4s ease, opacity .2s;
}
.quick-action:hover {
background: rgba(20,184,166,.1);
border-color: rgba(20,184,166,.25);
color: var(--text);
transform: translateY(-2px);
text-decoration: none;
box-shadow: 0 6px 20px rgba(20,184,166,.12);
}
.quick-action:hover::after {
opacity: 1;
transform: translateX(100%);
}
.qa-icon { font-size: 15px; }
/* ══════════════════════════════════════════════════════════════
DRIVER / CONTACT AVATAR INITIALS
══════════════════════════════════════════════════════════════ */
.row-avatar {
width: 32px; height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11.5px;
font-weight: 800;
flex-shrink: 0;
letter-spacing: .5px;
border: 1px solid rgba(20,184,166,.25);
}
.row-avatar-teal { background: rgba(20,184,166,.14); color: var(--teal-bright); }
.row-avatar-blue { background: rgba(96,165,250,.14); color: var(--blue); }
.row-avatar-purple { background: rgba(167,139,250,.14); color: var(--purple); }
.row-avatar-green { background: rgba(52,211,153,.14); color: var(--green); }
.row-name-wrap {
display: flex;
align-items: center;
gap: 10px;
}
/* ══════════════════════════════════════════════════════════════
TRANSCRIPT CONVERSATION VIEW
══════════════════════════════════════════════════════════════ */
.transcript-box.tx-rendered {
background: rgba(2,5,14,.6);
padding: 24px;
font-family: inherit;
white-space: normal;
line-height: 1;
}
.tx-line {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 18px;
}
.tx-line:last-child { margin-bottom: 0; }
.tx-avatar {
width: 34px; height: 34px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 800;
flex-shrink: 0;
margin-top: 2px;
}
.tx-dora .tx-avatar { background: rgba(20,184,166,.15); color: var(--teal-bright); border: 1px solid rgba(20,184,166,.25); }
.tx-caller .tx-avatar { background: rgba(96,165,250,.12); color: var(--blue); border: 1px solid rgba(96,165,250,.2); }
.tx-driver .tx-avatar { background: rgba(167,139,250,.12); color: var(--purple); border: 1px solid rgba(167,139,250,.2); }
.tx-bubble { flex: 1; min-width: 0; }
.tx-bubble-header {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 6px;
}
.tx-who {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.2px;
}
.tx-time {
font-size: 10px;
font-weight: 500;
color: var(--muted);
font-family: 'SF Mono', 'Fira Code', monospace;
opacity: 0.7;
}
.tx-dora .tx-who { color: var(--teal); }
.tx-caller .tx-who { color: var(--blue); }
.tx-driver .tx-who { color: var(--purple); }
.tx-text {
font-size: 14px;
line-height: 1.65;
color: var(--text);
background: rgba(255,255,255,.035);
border: 1px solid rgba(255,255,255,.06);
border-radius: 0 12px 12px 12px;
padding: 10px 14px;
}
.tx-dora .tx-text {
background: rgba(20,184,166,.08);
border-color: rgba(20,184,166,.14);
border-radius: 12px 12px 12px 0;
}
.tx-event {
justify-content: center;
}
.tx-event .tx-text {
background: transparent;
border: none;
color: var(--muted);
font-size: 12px;
text-align: center;
font-style: italic;
padding: 4px 0;
}
/* ══════════════════════════════════════════════════════════════
ESCALATION BANNER
══════════════════════════════════════════════════════════════ */
.escalation-banner {
background: rgba(240,192,96,.12);
border: 1px solid rgba(240,192,96,.35);
border-radius: var(--r);
padding: 18px 22px;
margin-bottom: 16px;
}
.escalation-banner-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.escalation-banner-icon {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(240,192,96,.3);
display: flex; align-items: center; justify-content: center;
font-size: 17px; flex-shrink: 0;
}
.escalation-banner-title {
font-size: 14px; font-weight: 700;
color: var(--amber, #f0c060);
}
.escalation-banner-sub {
font-size: 12px;
color: var(--muted);
margin-top: 2px;
}
.escalation-banner-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.escalation-banner-stat {
background: rgba(2,5,14,.4);
border: 1px solid rgba(240,192,96,.2);
border-radius: 8px;
padding: 10px 12px;
}
.escalation-banner-stat-label {
font-size: 9px; font-weight: 800;
text-transform: uppercase; letter-spacing: 1px;
color: rgba(240,192,96,.7);
margin-bottom: 4px;
}
.escalation-banner-stat-value {
font-size: 13px; font-weight: 600;
color: var(--text);
}
/* ── Escalation divider inside conversation ─────────────────── */
.tx-escalation-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 22px 0;
}
.tx-escalation-divider::before,
.tx-escalation-divider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(240,192,96,.35);
}
.tx-escalation-label {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
border: 1px solid rgba(240,192,96,.4);
border-radius: 20px;
font-size: 11px; font-weight: 700;
color: var(--amber, #f0c060);
white-space: nowrap;
}
/* ── Post-escalation section header ─────────────────────────── */
.tx-post-label {
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: .8px;
color: var(--muted);
margin-bottom: 14px;
}
/* ── Manager bubble (purple) ─────────────────────────────────── */
.tx-manager .tx-avatar {
background: rgba(167,139,250,.12);
color: var(--purple);
border: 1px solid rgba(167,139,250,.2);
}
.tx-manager .tx-who { color: var(--purple); }
/* ══════════════════════════════════════════════════════════════
TRANSCRIPT DETAIL — META GRID
══════════════════════════════════════════════════════════════ */
.meta-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 14px;
padding: 24px 26px;
}
.meta-item {
background: rgba(2,6,18,.5);
border: 1px solid var(--glass-border);
border-radius: var(--r);
padding: 14px 16px;
transition: border-color .2s;
}
.meta-item:hover { border-color: var(--glass-hi); }
.meta-label {
font-size: 9px;
font-weight: 800;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1.4px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 5px;
}
.meta-value {
font-size: 14.5px;
font-weight: 600;
color: var(--text);
line-height: 1.3;
}
.meta-value.mono {
font-family: "SF Mono","JetBrains Mono","Fira Code",monospace;
font-size: 13px;
color: var(--text-dim);
}
/* ══════════════════════════════════════════════════════════════
STAT TILE — COPY PHONE
══════════════════════════════════════════════════════════════ */
.copy-phone {
transition: color .15s;
}
.copy-phone:hover {
color: var(--teal-bright) !important;
text-decoration: underline;
}
/* ══════════════════════════════════════════════════════════════
STAT TILE — ICON
══════════════════════════════════════════════════════════════ */
.stat-tile-icon {
font-size: 22px;
margin-bottom: 8px;
display: block;
opacity: .7;
filter: saturate(0.85);
transition: opacity .2s, transform .2s;
}
a.stat-tile:hover .stat-tile-icon {
opacity: 1;
transform: scale(1.1);
}
/* ══════════════════════════════════════════════════════════════
CITY PILL — STATUS DOT
══════════════════════════════════════════════════════════════ */
.city-pill-dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 6px var(--green);
animation: pulse 3s ease-in-out infinite;
flex-shrink: 0;
}
/* ══════════════════════════════════════════════════════════════
GREETING BAR — LAYOUT FIX
══════════════════════════════════════════════════════════════ */
.greeting-left {
display: flex;
flex-direction: column;
gap: 4px;
}
.greeting-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* ══════════════════════════════════════════════════════════════
TOPBAR SEARCH — SVG ICON ALIGN
══════════════════════════════════════════════════════════════ */
.topbar-search svg {
flex-shrink: 0;
opacity: .7;
}
.topbar-search span {
flex: 1;
}
.topbar-search kbd {
margin-left: auto;
flex-shrink: 0;
}
/* ══════════════════════════════════════════════════════════════
PAGE PROGRESS BAR
══════════════════════════════════════════════════════════════ */
#pageProgressBar {
position: fixed;
top: 0; left: 0;
height: 2px;
width: 0;
background: linear-gradient(90deg, var(--teal), var(--teal-bright), rgba(94,234,212,.4));
box-shadow: 0 0 12px var(--teal-glow);
z-index: 10000;
pointer-events: none;
opacity: 0;
}
/* ══════════════════════════════════════════════════════════════
STAFF PAGE — CITY GROUP BLOCKS
══════════════════════════════════════════════════════════════ */
.city-group-block {
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
margin-bottom: 16px;
overflow: hidden;
transition: border-color .2s;
}
.city-group-block:last-child { margin-bottom: 0; }
.city-group-block:hover {
border-color: rgba(20,184,166,.2);
}
.city-group-header {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
background: rgba(2,6,18,.55);
border-bottom: 1px solid var(--glass-border);
}
.city-group-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 800;
letter-spacing: .5px;
color: var(--teal-bright);
background: rgba(20,184,166,.12);
border: 1px solid rgba(20,184,166,.25);
border-radius: var(--r-pill);
padding: 6px 16px;
white-space: nowrap;
min-width: 90px;
justify-content: center;
}
.city-group-badge-system {
color: var(--amber);
background: rgba(251,191,36,.1);
border-color: rgba(251,191,36,.25);
}
.city-group-desc {
font-size: 12.5px;
color: var(--muted);
font-weight: 500;
}
.city-group-form {
padding: 18px 20px;
}
.city-group-actions {
display: flex;
gap: 8px;
margin-top: 12px;
}
/* ══════════════════════════════════════════════════════════════
STAFF PAGE — KEY BADGE
══════════════════════════════════════════════════════════════ */
code.key-badge {
font-family: "SF Mono","JetBrains Mono","Fira Code",ui-monospace,monospace;
font-size: 11.5px;
font-weight: 600;
color: var(--teal-bright);
background: rgba(20,184,166,.08);
border: 1px solid rgba(20,184,166,.18);
border-radius: 5px;
padding: 2px 8px;
letter-spacing: .2px;
}
/* ══════════════════════════════════════════════════════════════
SETTINGS PAGE — BOT INFO BANNER
══════════════════════════════════════════════════════════════ */
.bot-schedule-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
padding: 4px 0 8px;
}
.bot-schedule-item {
display: flex;
align-items: flex-start;
gap: 12px;
background: rgba(2,6,18,.5);
border: 1px solid var(--glass-border);
border-radius: var(--r);
padding: 14px 16px;
}
.bot-schedule-icon {
font-size: 20px;
flex-shrink: 0;
margin-top: 1px;
opacity: .8;
}
.bot-schedule-name {
font-size: 13px;
font-weight: 700;
color: var(--text);
line-height: 1.3;
margin-bottom: 4px;
}
.bot-schedule-interval {
font-size: 11px;
font-weight: 700;
font-family: "SF Mono","JetBrains Mono",monospace;
color: var(--teal);
background: rgba(20,184,166,.1);
border: 1px solid rgba(20,184,166,.2);
border-radius: var(--r-pill);
padding: 2px 8px;
display: inline-block;
margin-bottom: 5px;
}
.bot-schedule-desc {
font-size: 11.5px;
color: var(--muted);
line-height: 1.45;
}
.locked-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 9.5px;
font-weight: 700;
color: var(--muted);
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--r-pill);
padding: 2px 7px;
letter-spacing: .5px;
text-transform: uppercase;
margin-left: 6px;
}
/* ══════════════════════════════════════════════════════════════
CONNECTIONS PAGE
══════════════════════════════════════════════════════════════ */
.conn-header-left {
display: flex;
align-items: center;
gap: 14px;
flex: 1;
min-width: 0;
}
.conn-icon {
width: 42px; height: 42px;
border-radius: var(--r);
display: flex; align-items: center; justify-content: center;
font-size: 20px;
flex-shrink: 0;
border: 1px solid var(--glass-border);
}
.conn-icon-dart { background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.2); }
.conn-icon-gmail { background: rgba(96,165,250,.1); border-color: rgba(96,165,250,.2); }
.conn-icon-twilio { background: rgba(20,184,166,.1); border-color: rgba(20,184,166,.2); }
.conn-icon-aces { background: rgba(167,139,250,.1); border-color: rgba(167,139,250,.2); }
.conn-icon-company{ background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.2); }
.conn-subtitle {
font-size: 12px;
color: var(--muted);
margin-top: 2px;
font-weight: 500;
}
.conn-status {
font-size: 11px;
font-weight: 700;
letter-spacing: .4px;
border-radius: var(--r-pill);
padding: 5px 12px;
white-space: nowrap;
flex-shrink: 0;
}
.conn-status-ok {
color: var(--green);
background: rgba(52,211,153,.1);
border: 1px solid rgba(52,211,153,.2);
}
.conn-status-partial {
color: var(--amber);
background: rgba(251,191,36,.1);
border: 1px solid rgba(251,191,36,.2);
}
.conn-status-empty {
color: var(--muted);
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
}
/* ══════════════════════════════════════════════════════════════
CONNECTIONS PAGE — HELP PANELS
══════════════════════════════════════════════════════════════ */
.help-toggle-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
font-size: 11.5px;
font-weight: 600;
color: var(--muted);
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--r-pill);
cursor: pointer;
transition: all .18s ease;
letter-spacing: .3px;
white-space: nowrap;
}
.help-toggle-btn:hover {
color: var(--teal);
background: var(--teal-dim);
border-color: rgba(20,184,166,.3);
}
.help-toggle-btn.active {
color: var(--teal);
background: rgba(20,184,166,.12);
border-color: rgba(20,184,166,.35);
}
.help-toggle-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(20,184,166,.18);
color: var(--teal-light);
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
transition: all .18s;
}
/* Panel container — zero-height when closed */
.help-panel-wrap {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height .38s cubic-bezier(.4,0,.2,1), opacity .28s ease, padding .28s ease;
padding: 0 26px;
}
.help-panel-wrap.open {
max-height: 600px;
opacity: 1;
padding: 0 26px 20px;
}
.help-content {
background: rgba(20,184,166,.04);
border: 1px solid rgba(20,184,166,.1);
border-radius: var(--r-lg);
padding: 20px 22px;
margin-top: 4px;
}
.help-intro {
font-size: 13px;
color: var(--text-dim);
line-height: 1.65;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(20,184,166,.08);
}
.help-steps {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 16px;
}
.help-step {
display: flex;
gap: 14px;
align-items: flex-start;
}
.help-step-num {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(20,184,166,.15);
border: 1px solid rgba(20,184,166,.28);
color: var(--teal-light);
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.help-step-body {
font-size: 13px;
color: var(--text-dim);
line-height: 1.6;
}
.help-step-body strong {
color: var(--text);
display: block;
margin-bottom: 2px;
font-weight: 600;
}
.help-step-body code {
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.1);
border-radius: 4px;
padding: 1px 5px;
font-family: 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
font-size: 11.5px;
color: var(--teal-bright);
}
.help-note {
font-size: 12.5px;
color: var(--teal-light);
background: rgba(20,184,166,.07);
border: 1px solid rgba(20,184,166,.15);
border-radius: 8px;
padding: 10px 14px;
line-height: 1.55;
}
.help-warn {
font-size: 12.5px;
color: var(--amber);
background: rgba(251,191,36,.07);
border: 1px solid rgba(251,191,36,.2);
border-radius: 8px;
padding: 10px 14px;
line-height: 1.55;
}
.help-link {
color: var(--teal);
text-decoration: underline;
text-underline-offset: 2px;
}
.help-link:hover { color: var(--teal-bright); }
/* ══════════════════════════════════════════════════════════════
CONNECTIONS PAGE — OPTIONAL BADGE
══════════════════════════════════════════════════════════════ */
.optional-badge {
font-size: 10px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--amber);
background: rgba(251,191,36,.1);
border: 1px solid rgba(251,191,36,.22);
border-radius: var(--r-pill);
padding: 2px 8px;
}
.conn-icon-geotab { background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.22); }
/* ══════════════════════════════════════════════════════════════
CONNECTIONS PAGE — PROGRESS STRIP
══════════════════════════════════════════════════════════════ */
.conn-progress-strip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
background: var(--glass-bg3);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
padding: 18px 26px;
margin-bottom: 22px;
}
@media (max-width: 640px) {
.conn-progress-strip { flex-direction: column; align-items: flex-start; }
}
.conn-progress-title {
font-size: 14px;
font-weight: 600;
color: var(--text);
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 3px;
}
.conn-progress-pending-icon { color: var(--amber); }
.conn-progress-done-icon { color: var(--green); }
.conn-progress-sub {
font-size: 12px;
color: var(--muted);
}
.conn-progress-bar-wrap {
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 260px;
}
.conn-progress-bar {
flex: 1;
height: 6px;
background: rgba(255,255,255,.13);
border-radius: var(--r-pill);
overflow: hidden;
}
.conn-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--teal), var(--teal-light));
border-radius: var(--r-pill);
transition: width .4s cubic-bezier(.4,0,.2,1);
box-shadow: 0 0 8px rgba(20,184,166,.4);
}
.conn-progress-pct {
font-size: 12px;
font-weight: 700;
color: var(--teal-light);
min-width: 32px;
text-align: right;
}
/* ══════════════════════════════════════════════════════════════
CONNECTIONS PAGE — TWILIO INFO CARD
══════════════════════════════════════════════════════════════ */
.twilio-info-card {
background: linear-gradient(135deg, rgba(20,184,166,.06) 0%, rgba(7,16,36,.65) 100%);
border-color: rgba(20,184,166,.2);
}
.twilio-info-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
padding: 0 26px 24px;
}
@media (max-width: 700px) {
.twilio-info-wrap { grid-template-columns: 1fr; gap: 20px; }
}
.twilio-info-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .6px;
color: var(--muted);
margin-bottom: 10px;
}
.twilio-number-display {
font-family: 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
font-size: 28px;
font-weight: 700;
color: var(--teal-bright);
letter-spacing: 1px;
line-height: 1;
margin-bottom: 14px;
text-shadow: 0 0 20px rgba(20,184,166,.35);
}
.twilio-number-pending {
font-size: 14px;
color: var(--muted);
font-style: italic;
margin-bottom: 14px;
}
.copy-number-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 16px;
font-size: 12.5px;
font-weight: 600;
color: var(--teal);
background: rgba(20,184,166,.1);
border: 1px solid rgba(20,184,166,.3);
border-radius: var(--r-pill);
cursor: pointer;
transition: all .18s ease;
}
.copy-number-btn:hover {
background: rgba(20,184,166,.18);
border-color: rgba(20,184,166,.5);
box-shadow: 0 0 12px rgba(20,184,166,.2);
}
.twilio-info-desc {
font-size: 13px;
color: var(--text-dim);
line-height: 1.65;
margin-bottom: 14px;
}
.twilio-info-desc strong { color: var(--text); }
.twilio-info-steps {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Password show/hide wrapper */
.pw-wrap {
position: relative;
display: flex;
align-items: center;
}
.pw-wrap input {
flex: 1;
padding-right: 40px !important;
margin: 0 !important;
}
.pw-toggle {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 38px;
background: none;
border: none;
cursor: pointer;
font-size: 15px;
color: var(--muted);
display: flex;
align-items: center;
justify-content: center;
opacity: 0.6;
transition: opacity .15s;
padding: 0;
}
.pw-toggle:hover { opacity: 1; }
.pw-toggle.active { opacity: 1; color: var(--teal); }
/* Phone prefix (+1) input group */
.phone-prefix-label {
display: inline-flex;
align-items: center;
padding: 0 10px;
height: 38px;
background: rgba(20,184,166,.08);
border: 1px solid var(--glass-border);
border-right: none;
border-radius: 6px 0 0 6px;
color: var(--teal-light);
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
}
.phone-input-group {
display: flex;
align-items: center;
flex: 1;
min-width: 130px;
}
.phone-input-group .ag-phone-input {
flex: 1;
min-width: 0;
border-radius: 0 6px 6px 0;
border-left: none;
}
.phone-prefix-input {
border-radius: 0 6px 6px 0 !important;
border-left: none !important;
flex: 1;
min-width: 0;
}
.twilio-step {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12.5px;
color: var(--muted);
line-height: 1.5;
}
.twilio-step-num {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(20,184,166,.12);
border: 1px solid rgba(20,184,166,.2);
color: var(--teal-light);
font-size: 10px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
/* ══════════════════════════════════════════════════════════════
ONBOARDING PAGE — HERO
══════════════════════════════════════════════════════════════ */
.onb-hero {
position: relative;
overflow: hidden;
background: linear-gradient(135deg,
rgba(20,184,166,.09) 0%,
rgba(7,16,36,.8) 60%,
rgba(10,32,100,.2) 100%);
border: 1px solid rgba(20,184,166,.18);
border-radius: var(--r-xl);
padding: 36px 36px 28px;
margin-bottom: 28px;
}
.onb-hero-glow {
position: absolute;
top: -60px;
left: -60px;
width: 280px;
height: 280px;
background: radial-gradient(circle, rgba(20,184,166,.12) 0%, transparent 70%);
pointer-events: none;
}
.onb-hero-content {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 28px;
}
.onb-hero-rocket {
font-size: 44px;
line-height: 1;
filter: drop-shadow(0 0 16px rgba(20,184,166,.4));
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.onb-hero-title {
font-size: 26px;
font-weight: 800;
color: var(--text);
letter-spacing: -.3px;
margin-bottom: 4px;
background: linear-gradient(135deg, #F0F6F4 30%, var(--teal-bright));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.onb-hero-sub {
font-size: 14px;
color: var(--muted);
line-height: 1.55;
max-width: 480px;
}
/* Progress bar */
.onb-hero-progress { position: relative; }
.onb-progress-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.onb-progress-label {
font-size: 13px;
font-weight: 600;
color: var(--text-dim);
}
.onb-progress-pct {
font-size: 13px;
font-weight: 700;
color: var(--teal-light);
}
.onb-progress-track {
position: relative;
height: 8px;
background: rgba(255,255,255,.07);
border-radius: var(--r-pill);
overflow: visible;
}
.onb-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--teal), var(--teal-bright));
border-radius: var(--r-pill);
transition: width .6s cubic-bezier(.4,0,.2,1);
box-shadow: 0 0 12px rgba(20,184,166,.45);
position: relative;
}
.onb-progress-fill::after {
content: '';
position: absolute;
right: -1px;
top: -3px;
width: 14px;
height: 14px;
background: var(--teal-bright);
border-radius: 50%;
box-shadow: 0 0 10px rgba(20,184,166,.7);
}
.onb-progress-node {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255,255,255,.12);
border: 2px solid rgba(255,255,255,.15);
transition: all .3s ease;
}
.onb-progress-node.done {
background: var(--teal);
border-color: var(--teal-bright);
box-shadow: 0 0 6px rgba(20,184,166,.5);
}
/* ══════════════════════════════════════════════════════════════
ONBOARDING PAGE — COMPLETION BANNER
══════════════════════════════════════════════════════════════ */
.onb-complete-banner {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
background: linear-gradient(135deg,
rgba(52,211,153,.1) 0%,
rgba(20,184,166,.06) 50%,
rgba(7,16,36,.8) 100%);
border: 1px solid rgba(52,211,153,.25);
border-radius: var(--r-xl);
padding: 28px 32px;
margin-bottom: 28px;
}
.onb-complete-glow {
position: absolute;
top: -40px;
left: -40px;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(52,211,153,.15) 0%, transparent 70%);
pointer-events: none;
}
.onb-complete-left {
display: flex;
align-items: center;
gap: 16px;
}
.onb-complete-icon {
font-size: 36px;
filter: drop-shadow(0 0 12px rgba(52,211,153,.4));
animation: float 3s ease-in-out infinite;
}
.onb-complete-title {
font-size: 18px;
font-weight: 700;
color: var(--green);
margin-bottom: 4px;
}
.onb-complete-sub {
font-size: 13px;
color: var(--muted);
line-height: 1.55;
max-width: 480px;
}
/* ══════════════════════════════════════════════════════════════
ONBOARDING PAGE — STEP CARDS GRID
══════════════════════════════════════════════════════════════ */
.onb-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 18px;
margin-bottom: 24px;
}
.onb-card {
position: relative;
overflow: hidden;
background: var(--glass-bg3);
border: 1px solid var(--glass-border);
border-radius: var(--r-xl);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
cursor: default;
}
.onb-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 20px rgba(20,184,166,.06);
border-color: rgba(20,184,166,.2);
}
.onb-card.done {
border-color: rgba(52,211,153,.2);
background: linear-gradient(140deg, rgba(52,211,153,.04) 0%, var(--glass-bg3) 60%);
}
.onb-card.done:hover {
border-color: rgba(52,211,153,.35);
box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 20px rgba(52,211,153,.06);
}
/* Green bar at the bottom of completed cards */
.onb-card-done-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--green), var(--teal));
opacity: .7;
}
.onb-card-inner {
padding: 24px 24px 20px;
}
.onb-card-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
}
.onb-card-num {
font-size: 11px;
font-weight: 800;
letter-spacing: 1px;
color: var(--muted2);
font-variant-numeric: tabular-nums;
}
.onb-card-check {
font-size: 16px;
opacity: .8;
}
.onb-card-icon {
font-size: 32px;
margin-bottom: 12px;
line-height: 1;
filter: drop-shadow(0 2px 8px rgba(20,184,166,.2));
}
.onb-card-title {
font-size: 16px;
font-weight: 700;
color: var(--text);
margin-bottom: 8px;
letter-spacing: -.1px;
}
.onb-card-desc {
font-size: 13px;
color: var(--muted);
line-height: 1.65;
flex: 1;
margin-bottom: 18px;
}
.onb-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,.05);
}
.onb-card-status {
font-size: 11.5px;
font-weight: 600;
letter-spacing: .2px;
}
.onb-card-status.done { color: var(--green); }
.onb-card-status.pending { color: var(--muted); }
.onb-card-cta {
font-size: 12.5px;
font-weight: 600;
color: var(--teal);
white-space: nowrap;
padding: 5px 12px;
background: rgba(20,184,166,.08);
border: 1px solid rgba(20,184,166,.2);
border-radius: var(--r-pill);
transition: all .18s ease;
text-decoration: none;
}
.onb-card-cta:hover {
background: rgba(20,184,166,.18);
border-color: rgba(20,184,166,.4);
color: var(--teal-bright);
box-shadow: 0 0 14px rgba(20,184,166,.2);
}
.onb-card-cta.cta-done {
color: var(--green);
background: rgba(52,211,153,.07);
border-color: rgba(52,211,153,.2);
}
.onb-card-cta.cta-done:hover {
background: rgba(52,211,153,.15);
border-color: rgba(52,211,153,.4);
}
/* ══════════════════════════════════════════════════════════════
ONBOARDING PAGE — BOTTOM CTA STRIP
══════════════════════════════════════════════════════════════ */
.onb-bottom-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
background: var(--glass-bg3);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
padding: 22px 28px;
}
@media (max-width: 640px) {
.onb-bottom-cta { flex-direction: column; align-items: flex-start; }
}
.onb-bottom-title {
font-size: 15px;
font-weight: 700;
color: var(--text);
margin-bottom: 4px;
}
.onb-bottom-sub {
font-size: 13px;
color: var(--muted);
line-height: 1.6;
max-width: 560px;
}
/* ══════════════════════════════════════════════════════════════
ONBOARDING POPUP MODAL (on dashboard)
══════════════════════════════════════════════════════════════ */
.onb-overlay {
position: fixed;
inset: 0;
background: rgba(3,7,18,.7);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: onb-fade-in .25s ease;
}
@keyframes onb-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.onb-overlay-out {
animation: onb-fade-out .35s ease forwards;
}
@keyframes onb-fade-out {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(.97); }
}
.onb-modal {
background: var(--glass-bg2);
border: 1px solid rgba(20,184,166,.18);
border-radius: var(--r-xl);
padding: 36px 32px 28px;
max-width: 480px;
width: 100%;
box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 60px rgba(20,184,166,.06);
animation: onb-modal-in .3s cubic-bezier(.34,1.3,.64,1);
position: relative;
overflow: hidden;
}
@keyframes onb-modal-in {
from { opacity: 0; transform: translateY(16px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* subtle glow inside modal */
.onb-modal::before {
content: '';
position: absolute;
top: -60px;
left: -60px;
width: 220px;
height: 220px;
background: radial-gradient(circle, rgba(20,184,166,.1) 0%, transparent 70%);
pointer-events: none;
}
.onb-modal-rocket {
font-size: 44px;
text-align: center;
margin-bottom: 12px;
filter: drop-shadow(0 0 16px rgba(20,184,166,.4));
animation: float 3s ease-in-out infinite;
}
.onb-modal-title {
font-size: 22px;
font-weight: 800;
text-align: center;
color: var(--text);
letter-spacing: -.2px;
margin-bottom: 6px;
background: linear-gradient(135deg, #F0F6F4 30%, var(--teal-bright));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.onb-modal-sub {
font-size: 13px;
text-align: center;
color: var(--muted);
line-height: 1.6;
margin-bottom: 22px;
}
.onb-modal-progress-wrap {
margin-bottom: 20px;
}
.onb-modal-progress-bar {
height: 6px;
background: rgba(255,255,255,.07);
border-radius: var(--r-pill);
overflow: hidden;
margin-bottom: 6px;
}
.onb-modal-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--teal), var(--teal-bright));
border-radius: var(--r-pill);
box-shadow: 0 0 8px rgba(20,184,166,.4);
transition: width .5s ease;
}
.onb-modal-progress-label {
font-size: 11.5px;
color: var(--muted);
font-weight: 600;
}
.onb-modal-checklist {
list-style: none;
margin-bottom: 24px;
display: flex;
flex-direction: column;
gap: 6px;
}
.onb-modal-check-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 8px;
font-size: 13px;
color: var(--text-dim);
}
.onb-modal-check-icon {
font-size: 15px;
flex-shrink: 0;
}
.onb-modal-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
/* Sidebar nav onboarding item */
.nav-item-onboarding {
/* inherits .nav-item styles — no overrides needed */
}
/* Nav item rocket emoji glow when active */
.nav-item-onboarding.active .nav-icon {
filter: drop-shadow(0 0 6px rgba(20,184,166,.5));
}
/* ══════════════════════════════════════════════════════════════
👴 OLD MAN MODE — Easy Reading Theme
Turns the whole portal into a clean, bright, high-contrast
design that any grandparent could love.
══════════════════════════════════════════════════════════════ */
/* ── Button in sidebar footer ─────────────────────────────── */
.sidebar-footer-user {
display: flex;
align-items: center;
gap: 8px;
}
.old-man-btn {
display: flex;
align-items: center;
gap: 7px;
width: 100%;
padding: 8px 12px;
margin-bottom: 8px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.09);
border-radius: var(--r);
color: var(--muted);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all .18s ease;
letter-spacing: .2px;
text-align: left;
font-family: inherit;
}
.old-man-btn:hover {
background: rgba(255,255,255,.1);
color: var(--text);
border-color: rgba(255,255,255,.2);
}
.old-man-btn.active {
background: rgba(20,184,166,.12);
border-color: rgba(20,184,166,.3);
color: var(--teal-light);
}
/* ── Override CSS custom properties ──────────────────────── */
/* LIGHT MODE 2.0 — professional client-facing theme.
Bright, readable, premium SaaS look. Keeps DORA teal brand. */
body.old-man-mode {
background: #f6f8fb !important;
background-image: none !important;
color: #0f172a !important;
font-size: 16px !important;
--text: #0f172a;
--text-dim: #334155;
--muted: #5b6b7e;
--muted2: #94a3b8;
--glass-bg: #ffffff;
--glass-bg2: #ffffff;
--glass-bg3: #f4f7fa;
--glass-border: #e4eaf1;
--glass-hi: #cdd9e5;
--teal: #0d9488;
--teal-light: #14b8a6;
--teal-bright: #0d9488;
--teal-dim: rgba(13,148,136,.08);
--teal-mid: rgba(13,148,136,.18);
--teal-glow: rgba(13,148,136,.22);
--teal-glow2: rgba(13,148,136,.10);
--green: #047857;
--red: #b91c1c;
--amber: #b45309;
--blue: #1d4ed8;
}
/* Kill the dark-theme ambient background effects */
body.old-man-mode::before,
body.old-man-mode::after { display: none !important; }
body.old-man-mode .layout::before,
body.old-man-mode .layout::after { display: none !important; animation: none !important; }
/* Calm motion: no looping/entrance animations, but keep smooth
micro-transitions so the UI feels responsive, not static */
body.old-man-mode * {
animation: none !important;
transition: background-color .16s ease, border-color .16s ease,
color .16s ease, box-shadow .2s ease, transform .18s ease !important;
}
body.old-man-mode .reveal-card {
opacity: 1 !important;
transform: none !important;
}
/* ── Sidebar — deep slate rail with teal brand accents ────── */
body.old-man-mode .sidebar {
background: linear-gradient(180deg, #0c1322 0%, #101a2e 100%) !important;
border-right: 1px solid rgba(148,163,184,.14) !important;
backdrop-filter: none !important;
box-shadow: 2px 0 18px rgba(8,15,30,.18) !important;
}
body.old-man-mode .sidebar-logo {
border-bottom: 1px solid rgba(148,163,184,.14) !important;
background: rgba(255,255,255,.02) !important;
}
body.old-man-mode .logo-wordmark { color: #ffffff !important; font-family: var(--font-display) !important; letter-spacing: .04em !important; }
body.old-man-mode .logo-sub { color: rgba(226,232,240,.55) !important; }
body.old-man-mode .company-name { color: rgba(226,232,240,.6) !important; font-size: 12px !important; }
body.old-man-mode .nav-label {
color: rgba(148,163,184,.55) !important;
font-size: 10px !important;
letter-spacing: .12em !important;
}
body.old-man-mode .nav-item {
color: rgba(226,232,240,.78) !important;
font-size: 14px !important;
font-weight: 500 !important;
padding: 10px 14px !important;
border-radius: 8px !important;
border: none !important;
background: none !important;
box-shadow: none !important;
}
body.old-man-mode .nav-item:hover {
background: rgba(255,255,255,.07) !important;
color: #ffffff !important;
transform: translateX(2px);
}
body.old-man-mode .nav-item.active {
background: linear-gradient(90deg, rgba(20,184,166,.22), rgba(20,184,166,.10)) !important;
color: #5eead4 !important;
border: none !important;
box-shadow: inset 2px 0 0 #14b8a6 !important;
font-weight: 600 !important;
}
body.old-man-mode .nav-item.active::before { display: none !important; }
body.old-man-mode .sidebar-footer {
border-top: 1px solid rgba(148,163,184,.14) !important;
background: rgba(255,255,255,.02) !important;
color: rgba(226,232,240,.6) !important;
font-size: 12.5px !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 4px !important;
}
body.old-man-mode .sidebar-footer a {
color: #5eead4 !important;
font-weight: 600 !important;
text-decoration: none !important;
}
body.old-man-mode .sidebar-footer a:hover { text-decoration: underline !important; }
body.old-man-mode .old-man-btn {
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(148,163,184,.22) !important;
color: rgba(226,232,240,.8) !important;
font-size: 12.5px !important;
}
body.old-man-mode .old-man-btn:hover {
background: rgba(255,255,255,.12) !important;
}
/* ── Topbar ───────────────────────────────────────────────── */
body.old-man-mode .topbar {
background: rgba(255,255,255,.85) !important;
border-bottom: 1px solid #e4eaf1 !important;
backdrop-filter: blur(10px) !important;
box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
}
body.old-man-mode .topbar-live {
background: rgba(4,120,87,.1) !important;
color: #047857 !important;
border: 1px solid rgba(4,120,87,.25) !important;
box-shadow: none !important;
font-weight: 700 !important;
}
body.old-man-mode .topbar-clock { color: #5b6b7e !important; font-feature-settings: 'tnum' !important; }
body.old-man-mode .topbar-company { color: #0f172a !important; font-weight: 600 !important; }
body.old-man-mode .topbar-search {
background: #f4f7fa !important;
border: 1px solid #e4eaf1 !important;
color: #5b6b7e !important;
box-shadow: none !important;
}
body.old-man-mode .topbar-search:hover {
border-color: #0d9488 !important;
background: #eef4f8 !important;
color: #0f172a !important;
}
body.old-man-mode .topbar-search kbd {
background: #ffffff !important;
color: #5b6b7e !important;
border-color: #d8e0ea !important;
}
/* ── Content area ─────────────────────────────────────────── */
body.old-man-mode .content { background: transparent !important; }
body.old-man-mode .page-header-bar {
border-bottom: 2px solid #c8d6e2 !important;
background: transparent !important;
}
body.old-man-mode .page-title {
color: #0f172a !important;
font-size: 26px !important;
font-weight: 800 !important;
text-shadow: none !important;
-webkit-text-fill-color: #0f172a !important;
background: none !important;
}
/* ── Cards ────────────────────────────────────────────────── */
body.old-man-mode .card,
body.old-man-mode .stat-tile {
background: #ffffff !important;
border: 1px solid #e4eaf1 !important;
backdrop-filter: none !important;
box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px -8px rgba(15,23,42,.06) !important;
}
body.old-man-mode .card:hover { transform: none !important; }
body.old-man-mode .stat-tile:hover {
border-color: rgba(13,148,136,.45) !important;
box-shadow: 0 2px 4px rgba(15,23,42,.05), 0 12px 28px -12px rgba(13,148,136,.18) !important;
transform: translateY(-2px) !important;
}
body.old-man-mode .card-header {
border-bottom: 1px solid #ecf1f6 !important;
background: #fbfcfe !important;
}
body.old-man-mode .card-title {
color: #0f172a !important;
font-family: var(--font-display) !important;
font-size: 16px !important;
font-weight: 600 !important;
text-shadow: none !important;
-webkit-text-fill-color: #0f172a !important;
background: none !important;
}
body.old-man-mode .stat-tile-icon { font-size: 24px !important; }
body.old-man-mode .stat-label {
color: #5b6b7e !important;
font-size: 12.5px !important;
font-weight: 600 !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
}
body.old-man-mode .stat-value {
color: #0f172a !important;
font-family: var(--font-display) !important;
font-size: 36px !important;
font-weight: 700 !important;
text-shadow: none !important;
-webkit-text-fill-color: #0f172a !important;
background: none !important;
}
body.old-man-mode .stat-sub {
color: #0d9488 !important;
font-size: 12.5px !important;
font-weight: 600 !important;
}
/* ── Greeting bar ─────────────────────────────────────────── */
body.old-man-mode .greeting-bar {
background: linear-gradient(135deg, #ffffff 0%, #f0faf8 100%) !important;
border: 1px solid #e4eaf1 !important;
border-left: 3px solid #0d9488 !important;
backdrop-filter: none !important;
box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px -8px rgba(15,23,42,.06) !important;
}
body.old-man-mode .greeting-text {
color: #0f172a !important;
font-family: var(--font-display) !important;
font-size: 20px !important;
font-weight: 600 !important;
-webkit-text-fill-color: #0f172a !important;
background: none !important;
}
body.old-man-mode .greeting-sub {
color: #5b6b7e !important;
font-size: 14px !important;
}
/* ── Tables ───────────────────────────────────────────────── */
body.old-man-mode .table-wrap { border-radius: 0 !important; }
body.old-man-mode table { background: #ffffff !important; }
body.old-man-mode thead th {
background: #f8fafc !important;
color: #5b6b7e !important;
font-size: 12px !important;
font-weight: 600 !important;
border-bottom: 1px solid #e4eaf1 !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
}
body.old-man-mode tbody tr {
color: #0f172a !important;
border-bottom: 1px solid #eef2f7 !important;
background: #ffffff !important;
}
body.old-man-mode tbody tr:hover { background: #f2f8f7 !important; }
body.old-man-mode tbody td { font-size: 14px !important; }
body.old-man-mode .muted { color: #5b6b7e !important; }
body.old-man-mode .mono { color: #0d9488 !important; }
/* ── Buttons ──────────────────────────────────────────────── */
body.old-man-mode .btn-primary {
background: linear-gradient(135deg, #0d9488, #0f766e) !important;
border: none !important;
box-shadow: 0 1px 2px rgba(15,23,42,.1), 0 8px 20px -8px rgba(13,148,136,.45) !important;
font-size: 14px !important;
font-weight: 600 !important;
padding: 10px 22px !important;
border-radius: 8px !important;
color: #ffffff !important;
}
body.old-man-mode .btn-primary:hover {
background: linear-gradient(135deg, #0f766e, #115e59) !important;
transform: translateY(-1px) !important;
box-shadow: 0 2px 4px rgba(15,23,42,.12), 0 12px 26px -8px rgba(13,148,136,.5) !important;
}
body.old-man-mode .btn-secondary {
background: #ffffff !important;
border: 1px solid #d8e0ea !important;
color: #334155 !important;
box-shadow: 0 1px 2px rgba(15,23,42,.05) !important;
font-size: 14px !important;
font-weight: 600 !important;
border-radius: 8px !important;
}
body.old-man-mode .btn-secondary:hover {
background: #f4f7fa !important;
border-color: #0d9488 !important;
color: #0d9488 !important;
transform: none !important;
}
body.old-man-mode .btn-sm {
font-size: 13px !important;
padding: 7px 14px !important;
}
/* ── Forms ────────────────────────────────────────────────── */
body.old-man-mode input[type="text"],
body.old-man-mode input[type="email"],
body.old-man-mode input[type="password"],
body.old-man-mode input[type="url"],
body.old-man-mode input[type="tel"],
body.old-man-mode input[type="number"],
body.old-man-mode select,
body.old-man-mode textarea {
background: #ffffff !important;
border: 1px solid #d8e0ea !important;
color: #0f172a !important;
font-size: 14px !important;
border-radius: 8px !important;
padding: 10px 14px !important;
box-shadow: 0 1px 2px rgba(15,23,42,.04) inset !important;
}
body.old-man-mode input:focus,
body.old-man-mode select:focus,
body.old-man-mode textarea:focus {
border-color: #0d9488 !important;
box-shadow: 0 0 0 3px rgba(13,148,136,.13) !important;
background: #ffffff !important;
outline: none !important;
}
body.old-man-mode input::placeholder { color: #94a3b8 !important; }
body.old-man-mode label {
color: #334155 !important;
font-size: 13.5px !important;
font-weight: 600 !important;
}
body.old-man-mode .form-hint {
color: #5b6b7e !important;
font-size: 13px !important;
}
/* ── Badges ───────────────────────────────────────────────── */
body.old-man-mode .badge-orange {
background: #fef3c7 !important;
color: #92400e !important;
border: 1px solid #fcd34d !important;
}
body.old-man-mode .conn-status-ok {
background: #ecfdf5 !important;
color: #047857 !important;
border-color: #6ee7b7 !important;
}
body.old-man-mode .conn-status-partial {
background: #fef3c7 !important;
color: #92400e !important;
border-color: #fcd34d !important;
}
body.old-man-mode .conn-status-empty {
background: #f4f7fa !important;
color: #5b6b7e !important;
border-color: #d8e0ea !important;
}
/* ── City pills ───────────────────────────────────────────── */
body.old-man-mode .city-pill {
background: #e6f4f2 !important;
border: 2px solid #cdd9e5 !important;
color: #0d9488 !important;
font-weight: 800 !important;
font-size: 13px !important;
box-shadow: none !important;
}
body.old-man-mode .city-pill:hover {
background: #d0e0f0 !important;
border-color: #14b8a6 !important;
}
body.old-man-mode .city-pill-dot {
background: #047857 !important;
box-shadow: none !important;
}
/* ── Flash messages ───────────────────────────────────────── */
body.old-man-mode .flash-success {
background: #ecfdf5 !important;
border-color: #6ee7b7 !important;
color: #0d4a28 !important;
}
body.old-man-mode .flash-error {
background: #fce8e8 !important;
border-color: #e08080 !important;
color: #6a0000 !important;
}
/* ── Links ────────────────────────────────────────────────── */
body.old-man-mode a {
color: #0d9488 !important;
}
body.old-man-mode a:hover {
color: #0f766e !important;
text-decoration: underline !important;
}
/* ── Connections page overrides ───────────────────────────── */
body.old-man-mode .conn-progress-strip {
background: #ffffff !important;
border: 2px solid #c8d6e2 !important;
}
body.old-man-mode .conn-progress-title { color: #0f172a !important; }
body.old-man-mode .conn-progress-sub { color: #5b6b7e !important; }
body.old-man-mode .conn-progress-fill {
background: #0d9488 !important;
box-shadow: none !important;
}
body.old-man-mode .conn-progress-pct { color: #0d9488 !important; }
body.old-man-mode .conn-icon-dart { background: #e6f4f2 !important; border-color: #cdd9e5 !important; }
body.old-man-mode .conn-icon-gmail { background: #fce8e8 !important; border-color: #e0a0a0 !important; }
body.old-man-mode .conn-icon-aces { background: #f0ecfc !important; border-color: #c0a8e0 !important; }
body.old-man-mode .conn-icon-geotab { background: #fff8e0 !important; border-color: #e0c860 !important; }
body.old-man-mode .conn-icon-company { background: #ecfdf5 !important; border-color: #90d0a8 !important; }
body.old-man-mode .conn-icon-twilio { background: #e6f4f2 !important; border-color: #cdd9e5 !important; }
body.old-man-mode .conn-subtitle { color: #5b6b7e !important; }
body.old-man-mode .help-toggle-btn {
background: #eef2f6 !important;
border: 2px solid #cdd9e5 !important;
color: #334155 !important;
}
body.old-man-mode .help-toggle-btn:hover,
body.old-man-mode .help-toggle-btn.active {
background: #d0e0f0 !important;
border-color: #14b8a6 !important;
color: #0d9488 !important;
}
body.old-man-mode .help-toggle-icon {
background: #d0e0f0 !important;
color: #0d9488 !important;
}
body.old-man-mode .help-content {
background: #f8fbff !important;
border: 2px solid #c8d6e2 !important;
}
body.old-man-mode .help-intro { color: #1e293b !important; border-bottom-color: #c8d6e2 !important; }
body.old-man-mode .help-step-num {
background: #e6f4f2 !important;
border-color: #cdd9e5 !important;
color: #0d9488 !important;
}
body.old-man-mode .help-step-body { color: #334155 !important; }
body.old-man-mode .help-step-body strong { color: #0f172a !important; }
body.old-man-mode .help-step-body code {
background: #eef2f6 !important;
border-color: #cdd9e5 !important;
color: #0d9488 !important;
}
body.old-man-mode .help-note {
background: #eef4f8 !important;
border-color: #a0b8d0 !important;
color: #0f766e !important;
}
body.old-man-mode .help-warn {
background: #fff5d8 !important;
border-color: #fcd34d !important;
color: #7a4a00 !important;
}
body.old-man-mode .twilio-info-card {
background: #f0f6ff !important;
border: 2px solid #a0bcdc !important;
}
body.old-man-mode .twilio-number-display {
color: #0d9488 !important;
text-shadow: none !important;
font-size: 24px !important;
}
body.old-man-mode .copy-number-btn {
background: #e6f4f2 !important;
border: 2px solid #a0bcdc !important;
color: #0d9488 !important;
}
body.old-man-mode .copy-number-btn:hover {
background: #d0e0f0 !important;
box-shadow: none !important;
}
body.old-man-mode .twilio-info-desc { color: #334155 !important; }
body.old-man-mode .twilio-step { color: #475569 !important; }
body.old-man-mode .twilio-step-num {
background: #e6f4f2 !important;
border-color: #a0bcdc !important;
color: #0d9488 !important;
}
body.old-man-mode .optional-badge {
background: #fff5d8 !important;
border-color: #fcd34d !important;
color: #7a4a00 !important;
}
body.old-man-mode .phone-prefix-label {
background: #e6f4f2 !important;
border-color: #a0bcdc !important;
color: #0d9488 !important;
}
/* ── Onboarding page overrides ────────────────────────────── */
body.old-man-mode .onb-hero {
background: linear-gradient(135deg, #1a3558, #14b8a6) !important;
border: 2px solid #14b8a6 !important;
}
body.old-man-mode .onb-hero-title {
-webkit-text-fill-color: #ffffff !important;
background: none !important;
color: #ffffff !important;
}
body.old-man-mode .onb-hero-sub { color: rgba(255,255,255,.8) !important; }
body.old-man-mode .onb-progress-label { color: rgba(255,255,255,.85) !important; }
body.old-man-mode .onb-progress-pct { color: #a0d8f8 !important; }
body.old-man-mode .onb-progress-track { background: rgba(255,255,255,.2) !important; }
body.old-man-mode .onb-progress-fill {
background: #ffffff !important;
box-shadow: none !important;
}
body.old-man-mode .onb-progress-fill::after {
background: #a0d8f8 !important;
box-shadow: none !important;
}
body.old-man-mode .onb-progress-node {
background: rgba(255,255,255,.3) !important;
border-color: rgba(255,255,255,.4) !important;
}
body.old-man-mode .onb-progress-node.done {
background: #ffffff !important;
border-color: #a0d8f8 !important;
box-shadow: none !important;
}
body.old-man-mode .onb-complete-banner {
background: linear-gradient(135deg, #047857, #0d9488) !important;
border: 2px solid #047857 !important;
}
body.old-man-mode .onb-complete-title { color: #ffffff !important; }
body.old-man-mode .onb-complete-sub { color: rgba(255,255,255,.8) !important; }
body.old-man-mode .onb-card {
background: #ffffff !important;
border: 2px solid #c8d6e2 !important;
box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
}
body.old-man-mode .onb-card:hover {
border-color: #14b8a6 !important;
box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
transform: none !important;
}
body.old-man-mode .onb-card.done { border-color: #6ee7b7 !important; background: #f0faf4 !important; }
body.old-man-mode .onb-card.done:hover { border-color: #047857 !important; }
body.old-man-mode .onb-card-done-bar { background: #047857 !important; }
body.old-man-mode .onb-card-num { color: #aabbcc !important; }
body.old-man-mode .onb-card-title { color: #0f172a !important; }
body.old-man-mode .onb-card-desc { color: #475569 !important; }
body.old-man-mode .onb-card-footer { border-top-color: #eef2f6 !important; }
body.old-man-mode .onb-card-status.done { color: #047857 !important; }
body.old-man-mode .onb-card-status.pending { color: #666666 !important; }
body.old-man-mode .onb-card-cta {
background: #e6f4f2 !important;
border: 2px solid #a0bcdc !important;
color: #0d9488 !important;
font-size: 13px !important;
font-weight: 700 !important;
}
body.old-man-mode .onb-card-cta:hover {
background: #d0e0f0 !important;
border-color: #14b8a6 !important;
box-shadow: none !important;
}
body.old-man-mode .onb-card-cta.cta-done {
background: #ecfdf5 !important;
border-color: #6ee7b7 !important;
color: #047857 !important;
}
body.old-man-mode .onb-bottom-cta {
background: #ffffff !important;
border: 2px solid #c8d6e2 !important;
}
body.old-man-mode .onb-bottom-title { color: #0f172a !important; }
body.old-man-mode .onb-bottom-sub { color: #475569 !important; }
/* ── Command palette ──────────────────────────────────────── */
body.old-man-mode .cmd-overlay { background: rgba(0,0,0,.5) !important; backdrop-filter: none !important; }
/* ── Modals in Light Mode ─────────────────────────────────── */
body.old-man-mode .modal-overlay {
background: rgba(0,0,0,.45) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
}
body.old-man-mode .modal {
background: #ffffff !important;
border: 1.5px solid #e4eaf1 !important;
box-shadow: 0 8px 40px rgba(0,0,0,.18) !important;
}
body.old-man-mode .modal::before { display: none !important; }
body.old-man-mode .modal-header {
border-bottom: 1.5px solid #e4eaf1 !important;
background: #f4f7fa !important;
}
body.old-man-mode .modal-header h3 { color: #0f172a !important; }
body.old-man-mode .modal-actions {
border-top: 1.5px solid #e4eaf1 !important;
background: #f8fafc !important;
}
body.old-man-mode .cmd-box {
background: #ffffff !important;
border: 2px solid #14b8a6 !important;
box-shadow: 0 8px 40px rgba(0,0,0,.3) !important;
}
body.old-man-mode .cmd-search { border-bottom: 2px solid #e0e8f0 !important; }
body.old-man-mode #cmdInput {
color: #0f172a !important;
font-size: 18px !important;
}
body.old-man-mode .cmd-search-icon { color: #5b6b7e !important; }
body.old-man-mode .cmd-esc {
background: #eef2f6 !important;
border-color: #cdd9e5 !important;
color: #334155 !important;
}
body.old-man-mode .cmd-result {
color: #0f172a !important;
}
body.old-man-mode .cmd-result:hover,
body.old-man-mode .cmd-result.active {
background: #eef4f8 !important;
}
body.old-man-mode .cmd-result-icon { font-size: 18px !important; }
body.old-man-mode .cmd-result-label { color: #0f172a !important; font-size: 15px !important; font-weight: 700 !important; }
body.old-man-mode .cmd-result-desc { color: #5b6b7e !important; font-size: 13px !important; }
body.old-man-mode .cmd-footer {
border-top: 2px solid #e0e8f0 !important;
background: #f5f7fa !important;
}
body.old-man-mode .cmd-footer-hint { color: #5b6b7e !important; }
body.old-man-mode .cmd-footer-hint kbd {
background: #eef2f6 !important;
border-color: #cdd9e5 !important;
color: #334155 !important;
}
/* ── Empty states ─────────────────────────────────────────── */
body.old-man-mode .empty-state { background: #f8fafc !important; border: 2px dashed #c8d4e4 !important; }
body.old-man-mode .empty-icon { font-size: 36px !important; }
/* ── Escalation banner ────────────────────────────────────── */
body.old-man-mode .escalation-banner {
background: #fff8e8 !important;
border: 1.5px solid #f0c060 !important;
backdrop-filter: none !important;
}
body.old-man-mode .escalation-banner-title { color: #7a4a00 !important; }
body.old-man-mode .escalation-banner-sub { color: #8a5c00 !important; }
body.old-man-mode .escalation-banner-icon { background: #f0c060 !important; }
body.old-man-mode .escalation-banner-stat {
background: #ffffff !important;
border-color: #e8d090 !important;
}
body.old-man-mode .escalation-banner-stat-label { color: #9a6600 !important; }
body.old-man-mode .escalation-banner-stat-value { color: #5a3800 !important; }
/* ── Transcript meta-grid ─────────────────────────────────── */
body.old-man-mode .meta-item {
background: #f4f7fa !important;
border: 1.5px solid #e4eaf1 !important;
}
body.old-man-mode .meta-item:hover { border-color: #14b8a6 !important; }
body.old-man-mode .meta-label { color: #666666 !important; }
body.old-man-mode .meta-value { color: #0f172a !important; }
body.old-man-mode .meta-value.mono { color: #0d9488 !important; }
/* ── Transcript detail page ───────────────────────────────── */
body.old-man-mode .transcript-box {
background: #f8fafc !important;
border: 1.5px solid #e4eaf1 !important;
backdrop-filter: none !important;
color: #0f172a !important;
}
body.old-man-mode .transcript-box.tx-rendered {
background: #f8fafc !important;
}
/* Speaker avatars */
body.old-man-mode .tx-dora .tx-avatar {
background: #e0f5f2 !important;
color: #0d7a6a !important;
border-color: #a0d8d0 !important;
}
body.old-man-mode .tx-caller .tx-avatar {
background: #e4ecf8 !important;
color: #0d9488 !important;
border-color: #b0c8e8 !important;
}
body.old-man-mode .tx-driver .tx-avatar {
background: #ede8f8 !important;
color: #6644aa !important;
border-color: #c0a8e0 !important;
}
/* Speaker labels */
body.old-man-mode .tx-dora .tx-who { color: #0d7a6a !important; }
body.old-man-mode .tx-caller .tx-who { color: #0d9488 !important; }
body.old-man-mode .tx-driver .tx-who { color: #6644aa !important; }
/* Speech bubbles */
body.old-man-mode .tx-text {
background: #ffffff !important;
border-color: #e4eaf1 !important;
color: #0f172a !important;
}
body.old-man-mode .tx-dora .tx-text {
background: #e8f8f5 !important;
border-color: #a0d8d0 !important;
color: #0f172a !important;
}
/* System/event lines */
body.old-man-mode .tx-event .tx-text {
background: transparent !important;
border: none !important;
color: #666666 !important;
}
/* Timestamp */
body.old-man-mode .tx-time { color: #888888 !important; }
/* ══════════════════════════════════════════════════════════════
BROWSER AUTOFILL OVERRIDE
Prevents Chrome/Safari yellow/green autofill highlight from
breaking the dark theme on all input fields.
══════════════════════════════════════════════════════════════ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 1000px #03081a inset !important;
box-shadow: 0 0 0 1000px #03081a inset !important;
-webkit-text-fill-color: var(--text) !important;
caret-color: var(--text);
transition: background-color 5000s ease-in-out 0s;
}
/* ══════════════════════════════════════════════════════════════
TOGGLE SWITCH
══════════════════════════════════════════════════════════════ */
.toggle-switch {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
vertical-align: middle;
}
.toggle-switch input[type=checkbox] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.toggle-track {
position: relative;
width: 38px;
height: 22px;
background: rgba(255,255,255,.1);
border: 1px solid var(--glass-border);
border-radius: 999px;
transition: background .2s, border-color .2s;
flex-shrink: 0;
}
.toggle-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 14px;
height: 14px;
background: rgba(255,255,255,.45);
border-radius: 50%;
transition: transform .2s, background .2s;
}
.toggle-switch input:checked + .toggle-track {
background: rgba(20,184,166,.35);
border-color: rgba(20,184,166,.6);
}
.toggle-switch input:checked + .toggle-track .toggle-thumb {
transform: translateX(16px);
background: var(--teal);
box-shadow: 0 0 8px rgba(20,184,166,.5);
}
.toggle-switch:hover .toggle-track { border-color: var(--teal); }
/* ── Alert All Controls ──────────────────────────────────── */
.alert-all-wrap {
display: flex;
align-items: center;
gap: 8px;
}
.alert-all-label {
font-size: 11px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .6px;
white-space: nowrap;
}
/* ── Alert Types section in Edit Modal ───────────────────── */
.alert-types-section {
background: rgba(2,5,14,.4);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
padding: 16px 18px 18px;
margin-bottom: 20px;
}
.alert-types-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.alert-types-title {
font-size: 11px;
font-weight: 700;
color: var(--teal);
text-transform: uppercase;
letter-spacing: 1px;
}
.alert-types-desc {
font-size: 11.5px;
color: var(--muted);
margin-bottom: 14px;
line-height: 1.5;
}
.alert-types-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
transition: opacity .2s;
}
.alert-type-chip {
display: flex;
align-items: center;
gap: 9px;
padding: 10px 12px;
border: 1px solid var(--glass-border);
border-radius: var(--r);
cursor: pointer;
transition: border-color .15s, background .15s;
position: relative;
}
.alert-type-chip:hover { border-color: rgba(20,184,166,.3); background: rgba(20,184,166,.05); }
.alert-type-chip input[type=checkbox] {
position: absolute;
opacity: 0;
width: 0; height: 0;
}
.alert-type-chip:has(input:checked) {
border-color: rgba(20,184,166,.45);
background: rgba(20,184,166,.08);
}
.atype-icon { font-size: 16px; flex-shrink: 0; }
.atype-label { font-size: 11.5px; font-weight: 700; color: var(--text); line-height: 1.2; }
.atype-desc { font-size: 10px; color: var(--muted); line-height: 1.3; }
.alert-type-chip > div { display: flex; flex-direction: column; gap: 1px; }
/* Light Mode overrides */
body.old-man-mode .toggle-track {
background: #e0e8f0 !important;
border-color: #d8e0ea !important;
}
body.old-man-mode .toggle-thumb {
background: #a0b0c4 !important;
}
body.old-man-mode .toggle-switch input:checked + .toggle-track {
background: #d0e4f8 !important;
border-color: #14b8a6 !important;
}
body.old-man-mode .toggle-switch input:checked + .toggle-track .toggle-thumb {
background: #0d9488 !important;
box-shadow: 0 0 6px rgba(13,148,136,.35) !important;
}
body.old-man-mode .toggle-switch:hover .toggle-track {
border-color: #14b8a6 !important;
}
body.old-man-mode .alert-types-section {
background: #f4f7fa !important;
border: 1.5px solid #e4eaf1 !important;
}
body.old-man-mode .alert-type-chip {
background: #ffffff !important;
border: 1.5px solid #d8e0ea !important;
}
body.old-man-mode .alert-type-chip:has(input:checked) {
background: #e8f2ff !important;
border-color: #14b8a6 !important;
}
body.old-man-mode .atype-label { color: #0f172a !important; }
body.old-man-mode .atype-desc { color: #5b6b7e !important; }
body.old-man-mode .alert-all-label { color: #5b6b7e !important; }
/* ══════════════════════════════════════════════════════════════
TABLE SEARCH BAR
══════════════════════════════════════════════════════════════ */
.table-search-wrap {
display: flex;
align-items: center;
}
.table-search-input {
background: rgba(2,5,14,.5);
border: 1px solid var(--glass-border);
border-radius: var(--r);
padding: 7px 12px 7px 32px;
color: var(--text);
font-size: 12.5px;
width: 220px;
outline: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Ccircle cx='5' cy='5' r='4' stroke='rgba(240,246,244,.35)' stroke-width='1.3'/%3E%3Cline x1='8' y1='8' x2='12' y2='12' stroke='rgba(240,246,244,.35)' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 10px center;
transition: border-color .18s, box-shadow .18s;
}
.table-search-input:focus {
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(20,184,166,.13);
}
.table-search-input::placeholder { color: var(--muted); opacity: .5; }
/* ══════════════════════════════════════════════════════════════
DRAG-TO-REORDER — Alert Groups
══════════════════════════════════════════════════════════════ */
.drag-handle {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
flex-shrink: 0;
color: var(--muted);
font-size: 16px;
cursor: grab;
opacity: .45;
transition: opacity .15s;
user-select: none;
line-height: 1;
padding-top: 2px;
}
.drag-handle:hover { opacity: 1; color: var(--teal); }
.drag-handle:active { cursor: grabbing; }
.sortable-ghost {
opacity: .35;
background: rgba(20,184,166,.08) !important;
border-color: rgba(20,184,166,.3) !important;
}
.phone-row {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 8px;
}
.phone-row:last-child { margin-bottom: 0; }
.ag-name-input { flex: 1.2; min-width: 120px; }
.ag-phone-input { flex: 1; min-width: 130px; font-family: monospace; }
/* Light Mode overrides */
body.old-man-mode .table-search-input {
background: #ffffff !important;
border: 2px solid #c8d6e2 !important;
color: #0f172a !important;
}
body.old-man-mode .table-search-input:focus {
border-color: #14b8a6 !important;
box-shadow: 0 0 0 3px rgba(13,148,136,.13) !important;
}
body.old-man-mode .drag-handle { color: #5b6b7e !important; opacity: .6 !important; }
body.old-man-mode .drag-handle:hover { color: #0d9488 !important; opacity: 1 !important; }
/* Light mode autofill — keep inputs clean white in Light Mode */
body.old-man-mode input:-webkit-autofill,
body.old-man-mode input:-webkit-autofill:hover,
body.old-man-mode input:-webkit-autofill:focus,
body.old-man-mode input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
box-shadow: 0 0 0 1000px #ffffff inset !important;
-webkit-text-fill-color: #0f172a !important;
caret-color: #0f172a;
}
/* ── Connection progress strip (old man) ──────────────────── */
body.old-man-mode .conn-progress-pending-icon { color: #b45309 !important; }
body.old-man-mode .conn-progress-done-icon { color: #047857 !important; }
/* ══════════════════════════════════════════════════════════════
DRIVER SMS NOTIFICATION ROWS (Settings page)
══════════════════════════════════════════════════════════════ */
.driver-notif-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 16px;
background: rgba(20,184,166,.05);
border: 1px solid var(--glass-border);
border-radius: var(--r);
flex-wrap: wrap;
}
.driver-notif-info {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 200px;
}
.driver-notif-icon {
font-size: 22px;
flex-shrink: 0;
width: 34px;
text-align: center;
}
.driver-notif-label {
font-size: 14px;
font-weight: 600;
color: var(--text);
margin-bottom: 2px;
}
.driver-notif-desc {
font-size: 12px;
color: var(--muted);
}
.driver-notif-controls {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
.driver-notif-minutes {
display: flex;
align-items: center;
gap: 7px;
transition: opacity .2s;
}
.driver-notif-minutes input[type=number] {
text-align: center;
}
/* Light Mode */
body.old-man-mode .driver-notif-row {
background: #f5f9ff !important;
border: 2px solid #c8d6e2 !important;
}
body.old-man-mode .driver-notif-label { color: #0f172a !important; }
body.old-man-mode .driver-notif-desc { color: #5b6b7e !important; }
/* ══════════════════════════════════════════════════════════════
LIGHT MODE — targeted fixes (legibility pass)
══════════════════════════════════════════════════════════════ */
/* Force all table cell text to be fully dark */
body.old-man-mode tbody td,
body.old-man-mode tbody td strong,
body.old-man-mode tbody td span:not(.badge):not(.key-badge):not(.mono) {
color: #0f172a !important;
}
/* Add-form section (Staff, etc.) — replace dark glass with clean white */
body.old-man-mode .add-form {
background: #ffffff !important;
border: 1.5px solid #e4eaf1 !important;
backdrop-filter: none !important;
}
body.old-man-mode .add-form-title {
color: #0d9488 !important;
opacity: 1 !important;
}
/* Bot schedule cards */
body.old-man-mode .bot-schedule-item {
background: #ffffff !important;
border: 1.5px solid #e4eaf1 !important;
}
body.old-man-mode .bot-schedule-name { color: #0f172a !important; }
body.old-man-mode .bot-schedule-desc { color: #475569 !important; }
body.old-man-mode .bot-schedule-interval {
color: #0d9488 !important;
background: rgba(13,148,136,.08) !important;
border-color: rgba(13,148,136,.25) !important;
}
/* City section headers (Meeting Points, Alert Groups) */
body.old-man-mode .city-group-header,
body.old-man-mode .city-section-header {
background: #f1f5f9 !important;
border-color: #e4eaf1 !important;
}
body.old-man-mode .city-group-desc { color: #475569 !important; }
/* card-desc-text / descriptive paragraphs inside cards */
body.old-man-mode .card-desc-text,
body.old-man-mode p[style*="var(--muted)"] {
color: #475569 !important;
}
/* Locked badge */
body.old-man-mode .locked-badge {
background: #f4f7fa !important;
border-color: #e4eaf1 !important;
color: #5b6b7e !important;
}
/* ── Search input (type="search") ─────────────────────────── */
body.old-man-mode input[type="search"] {
background: #ffffff !important;
border: 1.5px solid #d8e0ea !important;
color: #0f172a !important;
font-size: 15px !important;
border-radius: 7px !important;
padding: 10px 14px !important;
box-shadow: none !important;
}
body.old-man-mode input[type="search"]:focus {
border-color: #14b8a6 !important;
box-shadow: 0 0 0 3px rgba(13,148,136,.15) !important;
outline: none !important;
}
body.old-man-mode input[type="search"]::placeholder { color: #94a3b8 !important; }
/* ── Greeting bar — buttons on light background ────────────── */
body.old-man-mode .greeting-actions .btn-secondary {
background: #ffffff !important;
border: 1.5px solid #d8e0ea !important;
color: #1e293b !important;
}
body.old-man-mode .greeting-actions .btn-secondary:hover {
background: #f2f8f7 !important;
border-color: #14b8a6 !important;
color: #0d9488 !important;
transform: none !important;
}
body.old-man-mode .greeting-actions .btn-primary {
background: #0d9488 !important;
border-color: #0f766e !important;
color: #ffffff !important;
}
body.old-man-mode .greeting-actions .btn-primary:hover {
background: #0f766e !important;
transform: none !important;
}
/* ── Google Drive connection icon ────────────────────────── */
.conn-icon-gdrive { background: #e8f5e0 !important; border-color: #90c878 !important; }
body.old-man-mode .conn-icon-gdrive { background: #e8f5e0 !important; border-color: #90c878 !important; }
/* ── Portal footer ───────────────────────────────────────── */
.portal-footer {
display: flex;
align-items: center;
gap: 8px;
padding: 18px 32px;
font-size: 12px;
color: var(--muted);
opacity: 0.55;
border-top: 1px solid var(--border);
margin-top: 24px;
}
.portal-footer a {
color: var(--muted);
text-decoration: none;
transition: color 0.15s;
}
.portal-footer a:hover { color: var(--accent); opacity: 1; }
.footer-sep { opacity: 0.4; }
/* ══════════════════════════════════════════════════════════════
SECTION LOCK / EDIT PATTERN
Cards inside forms start greyscaled until the user clicks Edit.
To revert: git checkout -- static/css/style.css static/js/app.js
══════════════════════════════════════════════════════════════ */
.card-locked .card-fields {
filter: grayscale(1) opacity(0.3);
pointer-events: none;
user-select: none;
}
.card-fields {
transition: filter 0.22s;
}
/* old-man-mode */
body.old-man-mode .card-locked .card-fields {
filter: grayscale(1) opacity(0.28);
}
/* ══ Add/Edit Team Member modal — old-man-mode overrides ══
The modal has a hardcoded dark background (#1e2537). In old-man-mode
all labels and inputs go black/white, making them unreadable on the
dark modal. Flip the modal to a light surface in old-man-mode. */
body.old-man-mode #memberModalOverlay > div {
background: #ffffff !important;
border-color: #d8e0ea !important;
box-shadow: 0 12px 48px rgba(0,0,0,.18) !important;
}
body.old-man-mode #memberModalTitle {
color: #111827 !important;
}
body.old-man-mode #memberModalOverlay td,
body.old-man-mode #memberModalOverlay th {
color: #374151 !important;
border-color: #e5e7eb !important;
}
body.old-man-mode #memberModalOverlay tr {
border-color: #e5e7eb !important;
}
body.old-man-mode #memberModalOverlay label {
background: #f1f5f9 !important;
border-color: #d8e0ea !important;
}
body.old-man-mode #memberModalOverlay label span {
color: #111827 !important;
}
body.old-man-mode #memberModalOverlay [style*="color:#f1f5f9"],
body.old-man-mode #memberModalOverlay [style*="color:#94a3b8"],
body.old-man-mode #memberModalOverlay [style*="color:#e2e8f0"] {
color: #374151 !important;
}
body.old-man-mode #memberModalOverlay [style*="color:#475569"] {
color: #9ca3af !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
LOGIN PAGE — INQUIRY BANNER + MODAL (v17)
═══════════════════════════════════════════════════════════════════════════ */
.inquiry-banner {
width: 340px;
background: var(--glass-bg3);
border: 1px solid rgba(20,184,166,0.22);
border-radius: 14px;
padding: 22px 28px;
text-align: center;
position: relative;
overflow: hidden;
}
.inquiry-banner::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--teal), transparent);
}
.inquiry-eyebrow {
font-size: 10px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 8px;
}
.inquiry-headline {
font-size: 16px;
font-weight: 600;
color: #e2e8f0;
margin-bottom: 7px;
line-height: 1.35;
}
.inquiry-tagline {
font-size: 12px;
color: var(--muted);
line-height: 1.65;
margin-bottom: 18px;
}
.btn-inquire {
display: inline-block;
background: rgba(20,184,166,0.12);
border: 1px solid rgba(20,184,166,0.45);
color: var(--teal);
border-radius: 8px;
padding: 9px 24px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
.btn-inquire:hover {
background: rgba(20,184,166,0.2);
border-color: rgba(20,184,166,0.7);
}
/* Inquiry modal */
.inquiry-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.65);
z-index: 9000;
align-items: center;
justify-content: center;
padding: 20px;
}
.inquiry-overlay.open { display: flex; }
.inquiry-modal {
background: #1e2537;
border: 0.5px solid rgba(255,255,255,0.1);
border-radius: 16px;
padding: 32px 36px 28px;
width: 100%;
max-width: 480px;
position: relative;
max-height: 90vh;
overflow-y: auto;
}
.inquiry-close {
position: absolute;
top: 14px; right: 18px;
background: none; border: none;
color: var(--muted); font-size: 22px;
cursor: pointer; line-height: 1;
}
.inquiry-close:hover { color: #e2e8f0; }
.inquiry-modal-title {
font-size: 18px;
font-weight: 600;
color: #e2e8f0;
margin-bottom: 5px;
}
.inquiry-modal-sub {
font-size: 12px;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.6;
}
.inquiry-row {
display: flex;
gap: 14px;
margin-bottom: 0;
}
.inquiry-field {
flex: 1;
margin-bottom: 14px;
}
.inquiry-field label {
display: block;
font-size: 12px;
color: var(--muted);
margin-bottom: 5px;
}
.inquiry-field input,
.inquiry-field textarea {
width: 100%;
background: rgba(255,255,255,0.06);
border: 0.5px solid rgba(255,255,255,0.14);
border-radius: 8px;
padding: 9px 12px;
color: #e2e8f0;
font-size: 13px;
box-sizing: border-box;
transition: border-color 0.15s;
}
.inquiry-field input:focus,
.inquiry-field textarea:focus {
border-color: var(--teal);
outline: none;
}
.inquiry-field textarea { resize: vertical; min-height: 90px; }
.req-star { color: var(--teal); font-size: 11px; }
/* Inquiry confirmation */
.inquiry-confirm {
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px 0;
}
.inquiry-confirm-icon {
width: 52px; height: 52px;
border-radius: 50%;
background: rgba(20,184,166,0.15);
border: 1px solid rgba(20,184,166,0.4);
color: var(--teal);
font-size: 22px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.inquiry-confirm-title {
font-size: 16px;
font-weight: 600;
color: #e2e8f0;
margin-bottom: 6px;
}
.inquiry-confirm-sub {
font-size: 13px;
color: var(--muted);
line-height: 1.6;
}
/* ═══════════════════════════════════════════════════════════════════════════
HELP PAGE (v17)
═══════════════════════════════════════════════════════════════════════════ */
.help-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: start;
}
@media (max-width: 900px) {
.help-grid { grid-template-columns: 1fr; }
}
.help-contact-intro {
font-size: 13px;
color: var(--muted);
line-height: 1.65;
margin-bottom: 20px;
}
/* FAQ items */
.faq-item {
padding: 12px 0;
border-bottom: 0.5px solid var(--border);
}
.faq-item:last-child { border-bottom: none; }
.faq-q {
font-size: 13px;
font-weight: 600;
color: var(--text);
margin-bottom: 5px;
line-height: 1.4;
}
.faq-a {
font-size: 12px;
color: var(--muted);
line-height: 1.7;
}
/* Help form */
.help-form-note {
font-size: 12px;
margin-top: 10px;
text-align: center;
}
/* Help confirmation */
.help-confirm-box {
flex-direction: column;
align-items: center;
text-align: center;
padding: 30px 0;
}
.help-confirm-icon {
width: 56px; height: 56px;
border-radius: 50%;
background: rgba(20,184,166,0.12);
border: 1px solid rgba(20,184,166,0.35);
color: var(--teal);
font-size: 24px;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 14px;
}
.help-confirm-title {
font-size: 16px;
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
}
.help-confirm-sub {
font-size: 13px;
color: var(--muted);
line-height: 1.6;
}
/* old-man-mode overrides for inquiry modal */
body.old-man-mode .inquiry-modal {
background: #ffffff !important;
border-color: #d8e0ea !important;
}
body.old-man-mode .inquiry-modal-title { color: #111827 !important; }
body.old-man-mode .inquiry-modal-sub { color: #6b7280 !important; }
body.old-man-mode .inquiry-field label { color: #374151 !important; }
body.old-man-mode .inquiry-field input,
body.old-man-mode .inquiry-field textarea {
background: #f8fafc !important;
border-color: #d1d5db !important;
color: #111827 !important;
}
body.old-man-mode .inquiry-confirm-title { color: #111827 !important; }
body.old-man-mode .inquiry-confirm-sub { color: #6b7280 !important; }
/* ══════════════════════════════════════════════════════════════
LOGIN 2.0 — split-screen product showcase
Left: dark brand panel. Right: clean light sign-in.
══════════════════════════════════════════════════════════════ */
body.login-v2 {
background: #f6f8fb !important;
background-image: none !important;
}
body.login-v2::before, body.login-v2::after { display: none !important; }
.login-split {
display: grid !important;
grid-template-columns: 1.05fr .95fr;
min-height: 100vh;
align-items: stretch !important;
justify-content: stretch !important;
padding: 0 !important;
gap: 0 !important;
}
/* ── Brand panel ── */
.login-brand {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: 64px 72px;
background:
radial-gradient(ellipse 80% 60% at 70% 20%, rgba(20,184,166,.16), transparent 60%),
linear-gradient(160deg, #07101f 0%, #0a1626 55%, #0c1322 100%);
overflow: hidden;
}
.login-brand::before {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(rgba(20,184,166,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(20,184,166,.05) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 75%);
}
.login-brand-inner { position: relative; max-width: 480px; }
.brand-orb-wrap { position: relative; width: 120px; height: 120px; margin-bottom: 36px; }
.brand-orb {
position: absolute; inset: 10px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #04211d;
background: radial-gradient(circle at 35% 35%, rgba(94,234,212,.95), rgba(20,184,166,.3) 60%, transparent 78%);
box-shadow: 0 0 60px rgba(20,184,166,.45), inset 0 0 40px rgba(94,234,212,.25);
animation: loginPulse 4s ease-in-out infinite;
}
@keyframes loginPulse {
0%,100% { box-shadow: 0 0 45px rgba(20,184,166,.4), inset 0 0 40px rgba(94,234,212,.22); }
50% { box-shadow: 0 0 85px rgba(20,184,166,.55), inset 0 0 55px rgba(94,234,212,.35); }
}
.brand-orb-ring {
position: absolute; inset: 0;
border-radius: 50%;
border: 1px dashed rgba(94,234,212,.4);
animation: loginSpin 14s linear infinite;
}
.brand-orb-ring::before {
content: ""; position: absolute; top: -4px; left: 50%;
width: 8px; height: 8px; border-radius: 50%;
background: #5eead4; box-shadow: 0 0 12px #5eead4;
}
@keyframes loginSpin { to { transform: rotate(360deg); } }
.brand-headline {
font-family: var(--font-display);
font-size: clamp(26px, 2.6vw, 36px);
line-height: 1.15;
font-weight: 700;
color: #f0f6f4;
margin-bottom: 18px;
letter-spacing: -.01em;
}
.brand-headline span {
background: linear-gradient(90deg, #5eead4, #38bdf8);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-tag { color: rgba(240,246,244,.62); font-size: 15px; line-height: 1.65; margin-bottom: 30px; }
.brand-feats { list-style: none; display: grid; gap: 13px; }
.brand-feats li {
display: flex; align-items: flex-start; gap: 12px;
color: rgba(240,246,244,.82); font-size: 14.5px; font-weight: 500;
}
.brand-feats li::before {
content: "✓";
flex: none; width: 22px; height: 22px; margin-top: 1px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #14b8a6, #0ea5e9);
color: #04211d; font-weight: 800; font-size: 11px;
}
.login-brand-foot {
position: absolute; bottom: 28px; left: 72px;
color: rgba(240,246,244,.35);
font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
}
/* ── Sign-in panel ── */
.login-panel {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 26px;
padding: 48px 40px;
background: #f6f8fb;
}
body.login-v2 .login-box {
background: #ffffff !important;
border: 1px solid #e4eaf1 !important;
border-radius: 18px !important;
box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 24px 60px -24px rgba(15,23,42,.12) !important;
backdrop-filter: none !important;
width: 100%; max-width: 420px;
padding: 44px 42px !important;
}
body.login-v2 .login-box::before,
body.login-v2 .login-box::after { display: none !important; }
body.login-v2 .login-logo-text {
color: #0f172a !important;
font-family: var(--font-display) !important;
text-shadow: none !important;
-webkit-text-fill-color: #0f172a !important;
background: none !important;
}
body.login-v2 .login-sub { color: #5b6b7e !important; }
body.login-v2 .login-box label { color: #334155 !important; font-weight: 600 !important; }
body.login-v2 .login-box input {
background: #ffffff !important;
border: 1px solid #d8e0ea !important;
color: #0f172a !important;
border-radius: 8px !important;
box-shadow: 0 1px 2px rgba(15,23,42,.04) inset !important;
}
body.login-v2 .login-box input:focus {
border-color: #0d9488 !important;
box-shadow: 0 0 0 3px rgba(13,148,136,.13) !important;
}
body.login-v2 .login-box input::placeholder { color: #94a3b8 !important; }
body.login-v2 .login-box .btn-primary {
background: linear-gradient(135deg, #0d9488, #0f766e) !important;
border: none !important;
color: #fff !important;
font-weight: 600 !important;
border-radius: 8px !important;
box-shadow: 0 1px 2px rgba(15,23,42,.1), 0 8px 20px -8px rgba(13,148,136,.45) !important;
}
body.login-v2 .login-box .btn-primary:hover {
background: linear-gradient(135deg, #0f766e, #115e59) !important;
transform: translateY(-1px);
}
body.login-v2 .error-msg {
background: #fef2f2 !important;
border: 1px solid #fecaca !important;
color: #b91c1c !important;
border-radius: 8px !important;
}
/* Inquiry banner — clean card under the form */
body.login-v2 .inquiry-banner {
position: static !important;
width: 100%; max-width: 420px;
background: linear-gradient(135deg, #ffffff 0%, #f0faf8 100%) !important;
border: 1px solid #e4eaf1 !important;
border-radius: 14px !important;
box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
padding: 22px 26px !important;
text-align: left !important;
}
body.login-v2 .inquiry-eyebrow { color: #0d9488 !important; font-weight: 700 !important; letter-spacing: .1em !important; }
body.login-v2 .inquiry-headline { color: #0f172a !important; font-family: var(--font-display) !important; }
body.login-v2 .inquiry-tagline { color: #5b6b7e !important; }
body.login-v2 .btn-inquire {
background: #ffffff !important;
border: 1px solid #0d9488 !important;
color: #0d9488 !important;
border-radius: 8px !important;
font-weight: 600 !important;
}
body.login-v2 .btn-inquire:hover { background: rgba(13,148,136,.06) !important; }
@media (max-width: 920px) {
.login-split { grid-template-columns: 1fr; }
.login-brand { display: none; }
}
/* ══════════════════════════════════════════════════════════════
LIGHT MODE 2.1 — creative finishing layer
══════════════════════════════════════════════════════════════ */
/* Page title — teal gradient accent underline */
body.old-man-mode .page-title::after {
content: "";
display: block;
width: 46px; height: 3px;
border-radius: 3px;
margin-top: 8px;
background: linear-gradient(90deg, #0d9488, #38bdf8) !important;
}
/* Stat tiles — colored top accent + display numerals */
body.old-man-mode .stat-tile { position: relative; overflow: hidden; }
body.old-man-mode .stat-tile::after {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, #0d9488, #38bdf8);
opacity: .85;
}
body.old-man-mode .stat-tile:nth-child(2)::after { background: linear-gradient(90deg, #0ea5e9, #6366f1); }
body.old-man-mode .stat-tile:nth-child(3)::after { background: linear-gradient(90deg, #f59e0b, #f43f5e); }
body.old-man-mode .stat-tile:nth-child(4)::after { background: linear-gradient(90deg, #8b5cf6, #ec4899); }
/* Tables — rounded container + subtle hover accent */
body.old-man-mode .table-wrap {
border-radius: 12px !important;
border: 1px solid #e4eaf1 !important;
overflow: hidden !important;
box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
}
body.old-man-mode tbody tr:hover {
background: #f2f8f7 !important;
box-shadow: inset 2px 0 0 #0d9488 !important;
}
/* Command palette — light, premium */
body.old-man-mode .cmd-overlay {
background: rgba(15,23,42,.32) !important;
backdrop-filter: blur(6px) !important;
}
body.old-man-mode .cmd-box {
background: #ffffff !important;
border: 1px solid #e4eaf1 !important;
border-radius: 14px !important;
box-shadow: 0 24px 80px -16px rgba(15,23,42,.35) !important;
}
body.old-man-mode .cmd-search { border-bottom: 1px solid #ecf1f6 !important; }
body.old-man-mode .cmd-search input { color: #0f172a !important; background: transparent !important; border: none !important; box-shadow: none !important; }
/* Flash messages — soft status cards */
body.old-man-mode .flash-success {
background: #ecfdf5 !important;
border: 1px solid #a7f3d0 !important;
color: #047857 !important;
border-radius: 10px !important;
}
body.old-man-mode .flash-error {
background: #fef2f2 !important;
border: 1px solid #fecaca !important;
color: #b91c1c !important;
border-radius: 10px !important;
}
/* Scrollbars — slim & light */
body.old-man-mode ::-webkit-scrollbar { width: 10px; height: 10px; }
body.old-man-mode ::-webkit-scrollbar-track { background: #f1f5f9 !important; }
body.old-man-mode ::-webkit-scrollbar-thumb {
background: #cbd5e1 !important;
border-radius: 6px !important;
border: 2px solid #f1f5f9 !important;
}
body.old-man-mode ::-webkit-scrollbar-thumb:hover { background: #94a3b8 !important; }
/* Page progress bar — brand gradient */
body.old-man-mode #pageProgressBar {
background: linear-gradient(90deg, #0d9488, #38bdf8) !important;
box-shadow: 0 0 8px rgba(13,148,136,.4) !important;
}
/* Content area breathing room */
body.old-man-mode .page-body { animation: none !important; }
/* ══════════════════════════════════════════════════════════════
PORTAL CONSOLE 3.0 — creative layer (light mode)
The portal as a flight-operations console: calm white canvas,
slate ink, teal→sky brand energy, Space Grotesk display.
══════════════════════════════════════════════════════════════ */
/* ── Canvas rhythm ── */
body.old-man-mode .content { background: transparent !important; }
body.old-man-mode .page-body { padding-bottom: 40px !important; }
/* Subtle paper texture on the canvas — barely-there depth */
body.old-man-mode {
background:
radial-gradient(ellipse 70% 50% at 85% -10%, rgba(13,148,136,.05), transparent 60%),
radial-gradient(ellipse 60% 40% at -10% 110%, rgba(56,189,248,.04), transparent 60%),
#f6f8fb !important;
}
/* ── Sidebar — console rail micro-polish ── */
body.old-man-mode .sidebar-logo svg { filter: drop-shadow(0 0 14px rgba(20,184,166,.35)); }
body.old-man-mode .nav-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px;
border-radius: 7px;
background: rgba(255,255,255,.05);
font-size: 13px !important;
}
body.old-man-mode .nav-item.active .nav-icon { background: rgba(20,184,166,.18); }
/* ── Topbar — gradient hairline + live pill pulse ── */
body.old-man-mode .topbar { position: relative; }
body.old-man-mode .topbar::after {
content: "";
position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(13,148,136,.35), rgba(56,189,248,.3), transparent);
}
body.old-man-mode .topbar-live::before {
content: "";
display: inline-block;
width: 7px; height: 7px;
margin-right: 6px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 6px rgba(16,185,129,.7);
}
/* ── Greeting — display serif energy ── */
body.old-man-mode .greeting-text {
font-size: 22px !important;
letter-spacing: -.01em !important;
}
/* ── Modals — floating console panels ── */
body.old-man-mode .modal-overlay {
background: rgba(15,23,42,.38) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
body.old-man-mode .modal {
background: #ffffff !important;
border: 1px solid #e4eaf1 !important;
border-radius: 16px !important;
box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 32px 80px -16px rgba(15,23,42,.3) !important;
overflow: hidden !important;
}
body.old-man-mode .modal-header {
border-bottom: 1px solid #ecf1f6 !important;
background: linear-gradient(135deg, #fbfcfe 0%, #f0faf8 100%) !important;
}
body.old-man-mode .modal-header h3 {
color: #0f172a !important;
font-family: var(--font-display) !important;
font-weight: 600 !important;
}
body.old-man-mode .modal-actions {
border-top: 1px solid #ecf1f6 !important;
background: #fbfcfe !important;
}
/* ── Toggle switches — brand teal ── */
body.old-man-mode .toggle-track {
background: #dbe3ec !important;
border: 1px solid #cdd9e5 !important;
}
body.old-man-mode .toggle-switch input[type=checkbox]:checked + .toggle-track,
body.old-man-mode .toggle-switch input[type=checkbox]:checked ~ .toggle-track {
background: linear-gradient(135deg, #0d9488, #0ea5e9) !important;
border-color: transparent !important;
}
/* ── Badges & code chips ── */
body.old-man-mode .badge {
border-radius: 6px !important;
font-weight: 600 !important;
letter-spacing: .02em !important;
}
body.old-man-mode code.key-badge {
background: #f0fdfa !important;
color: #0f766e !important;
border: 1px solid #99f6e4 !important;
border-radius: 6px !important;
}
/* ── Onboarding cards — guided journey feel ── */
body.old-man-mode .onb-card-cta {
background: #ffffff !important;
border: 1px solid #d8e0ea !important;
border-radius: 8px !important;
color: #0d9488 !important;
font-weight: 600 !important;
box-shadow: 0 1px 2px rgba(15,23,42,.05) !important;
}
body.old-man-mode .onb-card-cta:hover {
background: #f0fdfa !important;
border-color: #0d9488 !important;
}
body.old-man-mode .onb-bottom-cta {
background: linear-gradient(135deg, #ffffff 0%, #f0faf8 100%) !important;
border: 1px solid #e4eaf1 !important;
border-radius: 14px !important;
}
/* ── Transcripts — readable conversation panels ── */
body.old-man-mode .meta-grid > div,
body.old-man-mode .meta-item {
background: #ffffff !important;
border: 1px solid #e4eaf1 !important;
border-radius: 10px !important;
}
body.old-man-mode .transcript-box {
background: #ffffff !important;
border: 1px solid #e4eaf1 !important;
border-radius: 12px !important;
box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
}
/* ── Connection status — clear signal chips ── */
body.old-man-mode .conn-status-ok {
background: #ecfdf5 !important;
color: #047857 !important;
border: 1px solid #a7f3d0 !important;
border-radius: 100px !important;
font-weight: 600 !important;
}
body.old-man-mode .conn-status-partial {
background: #fffbeb !important;
color: #b45309 !important;
border: 1px solid #fde68a !important;
border-radius: 100px !important;
font-weight: 600 !important;
}
body.old-man-mode .conn-status-empty {
background: #f8fafc !important;
color: #5b6b7e !important;
border: 1px solid #e2e8f0 !important;
border-radius: 100px !important;
font-weight: 600 !important;
}
/* ── City pills — destination chips ── */
body.old-man-mode .city-pill {
background: #f0fdfa !important;
border: 1px solid #99f6e4 !important;
color: #0f766e !important;
border-radius: 100px !important;
font-weight: 600 !important;
font-size: 12.5px !important;
}
body.old-man-mode .city-pill:hover {
background: #ccfbf1 !important;
border-color: #0d9488 !important;
}
/* ── Add-form sections — clearly inviting ── */
body.old-man-mode .add-form {
border: 1px dashed #cdd9e5 !important;
border-radius: 14px !important;
background: #fbfcfe !important;
}
body.old-man-mode .add-form:focus-within {
border: 1px solid #0d9488 !important;
background: #ffffff !important;
box-shadow: 0 8px 28px -12px rgba(13,148,136,.2) !important;
}
/* ── Keyboard focus — accessible brand ring everywhere ── */
body.old-man-mode a:focus-visible,
body.old-man-mode button:focus-visible {
outline: 2px solid #0d9488 !important;
outline-offset: 2px !important;
border-radius: 6px;
}
/* ── Section headers in content (city groups etc.) ── */
body.old-man-mode .city-group-header,
body.old-man-mode .city-section-header {
background: linear-gradient(90deg, #f0faf8, #f8fafc) !important;
border: 1px solid #e4eaf1 !important;
border-left: 3px solid #0d9488 !important;
border-radius: 10px !important;
}
/* ── Empty-ish helper text ── */
body.old-man-mode .form-hint { color: #64748b !important; }
/* ── Print-quality table numerals ── */
body.old-man-mode tbody td { font-feature-settings: 'tnum' !important; }
/* ══════════════════════════════════════════════════════════════
DORA 6.0 — PAGE LAYOUT REWORK (sidebar stays)
══════════════════════════════════════════════════════════════ */
/* ── Dashboard hero band — dark gradient, works beside sidebar ── */
body.old-man-mode .greeting-bar {
background:
radial-gradient(ellipse 70% 130% at 88% 0%, rgba(20,184,166,.28), transparent 60%),
linear-gradient(135deg, #0a111f 0%, #122140 100%) !important;
border: none !important;
border-left: none !important;
border-radius: 18px !important;
padding: 28px 30px !important;
box-shadow: 0 18px 44px -18px rgba(8,15,30,.4) !important;
}
body.old-man-mode .greeting-text {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 23px !important;
}
body.old-man-mode .greeting-sub { color: rgba(226,232,240,.65) !important; }
body.old-man-mode .greeting-actions .btn-secondary {
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.22) !important;
color: #e2e8f0 !important;
}
body.old-man-mode .greeting-actions .btn-secondary:hover {
background: rgba(255,255,255,.16) !important;
border-color: rgba(255,255,255,.4) !important;
color: #ffffff !important;
}
/* Bigger editorial page titles (works with sidebar) */
body.old-man-mode .page-title { font-size: 30px !important; letter-spacing: -.015em !important; }
/* ── Dashboard bento grid ── */
.dash-bento {
display: grid;
grid-template-columns: 1fr 300px;
gap: 16px;
align-items: stretch;
margin-bottom: 16px;
}
.dash-bento-main { min-width: 0; }
.dash-bento-main .stats-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px !important;
margin: 0 !important;
height: 100%;
}
.dash-bento-side { min-width: 0; display: flex; flex-direction: column; }
.dash-bento-side .card { flex: 1; margin: 0 !important; }
.dash-bento-side .city-pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 22px; align-content: flex-start; }
@media (max-width: 1100px) {
.dash-bento { grid-template-columns: 1fr; }
}
/* Stat tiles in bento — roomier */
body.old-man-mode .dash-bento .stat-tile { padding: 22px !important; border-radius: 16px !important; }
body.old-man-mode .dash-bento .stat-value { font-size: 38px !important; }
/* ── Customize Dashboard — tucked into a disclosure ── */
.dash-customize { margin-top: 28px; }
.dash-customize summary {
cursor: pointer;
list-style: none;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
border-radius: 100px;
font-size: 13px;
font-weight: 600;
user-select: none;
}
.dash-customize summary::-webkit-details-marker { display: none; }
body.old-man-mode .dash-customize summary {
background: #ffffff;
border: 1px dashed #cdd9e5;
color: #5b6b7e;
}
body.old-man-mode .dash-customize summary:hover {
border-color: #0d9488;
color: #0d9488;
}
body.old-man-mode .dash-customize[open] summary {
background: #f0fdfa;
border: 1px solid #0d9488;
color: #0d9488;
}
/* ── Workspace layout: data left, tools in sticky right rail ── */
.page-cols {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 18px;
align-items: start;
}
.page-main { order: 1; min-width: 0; }
.page-rail {
order: 2;
position: sticky;
top: 16px;
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.page-rail .acc-section { margin-bottom: 0 !important; }
.page-rail .card { margin: 0 !important; }
/* rail forms stack their fields vertically */
.page-rail .form-row,
.page-rail form > div[style*="flex"] { flex-direction: column !important; align-items: stretch !important; }
.page-rail .form-group { min-width: 0 !important; max-width: none !important; width: 100% !important; }
@media (max-width: 1180px) {
.page-cols { grid-template-columns: 1fr; }
.page-rail { position: static; order: 0; }
.page-main { order: 1; }
}
/* ── Login input visibility fix: dark ink + autofill override ── */
body.login-v2 .login-box input,
body.login-v2 .login-box input[type="text"],
body.login-v2 .login-box input[type="password"] {
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
caret-color: #0d9488 !important;
}
body.login-v2 .login-box input:-webkit-autofill,
body.login-v2 .login-box input:-webkit-autofill:hover,
body.login-v2 .login-box input:-webkit-autofill:focus {
-webkit-text-fill-color: #0f172a !important;
-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
box-shadow: 0 0 0 1000px #ffffff inset !important;
border: 1px solid #d8e0ea !important;
transition: background-color 99999s ease-in-out 0s !important;
}
/* Inquiry modal inputs too */
body.login-v2 .inquiry-field input,
body.login-v2 .inquiry-field textarea {
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
}
/* ── Softer canvas: light, not stark white ── */
body.old-man-mode {
background:
radial-gradient(ellipse 70% 50% at 85% -10%, rgba(13,148,136,.06), transparent 60%),
radial-gradient(ellipse 60% 40% at -10% 110%, rgba(56,189,248,.05), transparent 60%),
#eef2f7 !important;
}
/* ── Inquiry modal on Login 2.0 — full light treatment ── */
body.login-v2 .inquiry-overlay {
background: rgba(15,23,42,.4) !important;
backdrop-filter: blur(8px) !important;
}
body.login-v2 .inquiry-modal {
background: #ffffff !important;
border: 1px solid #e4eaf1 !important;
box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 32px 80px -16px rgba(15,23,42,.3) !important;
}
body.login-v2 .inquiry-modal-title {
color: #0f172a !important;
font-family: var(--font-display) !important;
}
body.login-v2 .inquiry-modal-sub { color: #5b6b7e !important; }
body.login-v2 .inquiry-close { color: #5b6b7e !important; }
body.login-v2 .inquiry-close:hover { color: #0f172a !important; }
body.login-v2 .inquiry-field label { color: #334155 !important; font-weight: 600 !important; }
body.login-v2 .inquiry-field .req-star { color: #b91c1c !important; }
body.login-v2 .inquiry-field input,
body.login-v2 .inquiry-field textarea {
background: #ffffff !important;
border: 1px solid #d8e0ea !important;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
caret-color: #0d9488 !important;
}
body.login-v2 .inquiry-field input::placeholder,
body.login-v2 .inquiry-field textarea::placeholder { color: #94a3b8 !important; }
body.login-v2 .inquiry-field input:focus,
body.login-v2 .inquiry-field textarea:focus {
border-color: #0d9488 !important;
box-shadow: 0 0 0 3px rgba(13,148,136,.13) !important;
background: #ffffff !important;
}
body.login-v2 .inquiry-field input:-webkit-autofill,
body.login-v2 .inquiry-field input:-webkit-autofill:hover,
body.login-v2 .inquiry-field input:-webkit-autofill:focus {
-webkit-text-fill-color: #0f172a !important;
-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
box-shadow: 0 0 0 1000px #ffffff inset !important;
}
body.login-v2 .inquiry-confirm-title { color: #0f172a !important; }
body.login-v2 .inquiry-confirm-sub { color: #5b6b7e !important; }