/* ═══════════════════════════════════════════
TADR Platform — Design System v2
Dark luxury B2B travel aesthetic
═══════════════════════════════════════════ */
/* Google Fonts loaded via in HTML for faster FCP (avoids @import chain delay) */
:root {
--bg-deep: #06090f;
--bg-base: #090d16;
--bg-surface: #0e1520;
--bg-card: #111927;
--bg-card-hover:#141e2e;
--border: #1c2a3e;
--border-light: #243044;
--accent: #00c2ff;
--accent-dim: rgba(0,194,255,0.1);
--accent-glow: rgba(0,194,255,0.25);
--gold: #f0a500;
--gold-dim: rgba(240,165,0,0.1);
--text: #e8edf5;
--text-muted: #7a8fa8;
--text-faint: #3d5166;
--green: #00d68f;
--green-dim: rgba(0,214,143,0.1);
--yellow: #ffc72c;
--yellow-dim: rgba(255,199,44,0.1);
--red: #ff4f6e;
--red-dim: rgba(255,79,110,0.1);
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--shadow: 0 4px 24px rgba(0,0,0,0.4);
--shadow-lg: 0 8px 48px rgba(0,0,0,0.6);
--sidebar-w: 232px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg-base);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
/* ── Utility ── */
.hidden { display: none !important; }
/* ── Buttons ── */
.btn-primary-lg {
display: inline-flex; align-items: center; gap: .4rem;
background: var(--accent); color: #000;
font-weight: 700; font-size: .95rem;
padding: .85rem 2rem; border-radius: var(--radius);
border: none; cursor: pointer; transition: all .2s;
}
.btn-primary-lg:hover { background: #22d4ff; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,194,255,.3); }
.btn-outline-lg {
display: inline-flex; align-items: center; gap: .4rem;
background: transparent; color: var(--text);
font-weight: 600; font-size: .95rem;
padding: .85rem 2rem; border-radius: var(--radius);
border: 1px solid var(--border-light); cursor: pointer; transition: all .2s;
}
.btn-outline-lg:hover { border-color: var(--accent); color: var(--accent); }
/* Agency Login — sunset orange, consistent across both themes */
.btn-login {
background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
color: #fff !important;
border-color: transparent !important;
}
.btn-login:hover {
background: linear-gradient(135deg, #ff7d4a 0%, #ff9d58 100%);
color: #fff !important;
border-color: transparent !important;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(255,107,53,.35);
}
/* Chart bars — use a class so light mode CSS can override */
.chart-bar {
background: var(--accent);
border-radius: 4px 4px 0 0;
opacity: .6;
}
html[data-theme="light"] .chart-bar {
background: #0077b6;
opacity: 1;
}
.btn-ghost {
color: var(--text-muted); font-weight: 500; font-size: .9rem;
padding: .5rem 1rem; border-radius: var(--radius-sm); transition: color .2s;
}
.btn-ghost:hover { color: var(--text); }
.btn-accent {
background: var(--accent); color: #000;
font-weight: 700; font-size: .85rem;
padding: .5rem 1.1rem; border-radius: var(--radius-sm); transition: all .2s;
border: none; cursor: pointer;
}
.btn-accent:hover { background: #22d4ff; }
.btn-primary {
display: inline-flex; align-items: center; justify-content: center; width: 100%;
background: var(--accent); color: #000;
font-weight: 700; font-size: .95rem;
padding: .85rem 1.5rem; border-radius: var(--radius);
border: none; cursor: pointer; transition: all .2s; font-family: inherit;
}
.btn-primary:hover { background: #22d4ff; }
.btn-sm {
display: inline-flex; align-items: center; gap: .3rem;
font-size: .78rem; font-weight: 700;
padding: .38rem .85rem; border-radius: var(--radius-sm);
border: none; cursor: pointer; transition: all .15s; font-family: inherit;
}
.btn-sm-primary { background: var(--accent); color: #000; }
.btn-sm-primary:hover { background: #22d4ff; }
.btn-sm-ghost { background: var(--bg-surface); color: var(--text-muted); border: 1px solid var(--border); }
.btn-sm-ghost:hover { color: var(--text); }
/* ═══════════════ LANDING PAGE ═══════════════ */
body.landing { background: var(--bg-deep); }
.topnav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: rgba(6,9,15,.88); backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
}
.topnav-inner {
max-width: 1200px; margin: 0 auto; padding: 0 2rem;
height: 64px; display: flex; align-items: center; justify-content: space-between;
}
.nav-brand { font-size: 1.75rem; font-weight: 900; letter-spacing: -.04em; white-space: nowrap; overflow: visible; text-decoration: none; }
.brand-t { color: var(--accent); }
.brand-adr { color: var(--text); }
.nav-links { display: flex; align-items: center; gap: .25rem; }
.nav-links > a {
color: var(--text-muted); font-size: .88rem; font-weight: 500;
padding: .45rem .9rem; border-radius: var(--radius-sm); transition: color .2s;
}
.nav-links > a:hover { color: var(--text); }
.nav-links .btn-ghost, .nav-links .btn-accent { margin-left: .5rem; }
.nav-links .btn-accent { color: #000 !important; }
/* Hero */
.hero {
min-height: 100vh; display: flex; align-items: center;
padding-top: 64px; position: relative; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-gradient {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 80% 60% at 65% 40%, rgba(0,194,255,.07) 0%, transparent 70%),
radial-gradient(ellipse 50% 70% at 5% 90%, rgba(240,165,0,.04) 0%, transparent 60%),
linear-gradient(180deg, var(--bg-deep) 0%, #070c18 100%);
}
.hero-grid {
position: absolute; inset: 0;
background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 70% 80% at 60% 40%, black 10%, transparent 90%);
}
.hero-content {
position: relative; z-index: 2; flex: 1;
max-width: 580px; padding: 4rem 2rem 4rem max(4vw, 2rem);
}
.hero-badge {
display: inline-flex; align-items: center; gap: .5rem;
background: var(--accent-dim); border: 1px solid rgba(0,194,255,.22);
color: var(--accent); font-size: .75rem; font-weight: 700;
padding: .32rem .85rem; border-radius: 100px; margin-bottom: 1.5rem;
letter-spacing: .04em;
}
.hero h1 {
font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 900;
line-height: 1.03; letter-spacing: -.04em; margin-bottom: 1.2rem;
}
.gradient-text {
background: linear-gradient(135deg, var(--accent) 0%, #3b82f6 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub {
font-size: 1.05rem; color: var(--text-muted); line-height: 1.75;
margin-bottom: 2rem; max-width: 460px;
}
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.hero-stats { display: flex; align-items: center; gap: 1.75rem; }
.stat { display: flex; flex-direction: column; }
.stat-n { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.stat-l { font-size: .72rem; color: var(--text-muted); font-weight: 500; }
.stat-divider { width: 1px; height: 36px; background: var(--border-light); }
/* Hero dashboard mockup */
.hero-visual {
position: relative; z-index: 2; flex: 1;
display: flex; justify-content: center; align-items: center;
padding: 4rem max(4vw, 2rem) 4rem 2rem;
}
.dashboard-preview {
background: var(--bg-card); border: 1px solid var(--border-light);
border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), 0 0 60px rgba(0,194,255,.06);
width: 100%; max-width: 520px; overflow: hidden;
}
.preview-bar {
background: var(--bg-surface); border-bottom: 1px solid var(--border);
padding: .65rem 1rem; display: flex; align-items: center; gap: .4rem;
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.red { background: #ff5f57; } .dot.yellow { background: #febc2e; } .dot.green { background: #28c840; }
.preview-url { margin-left: .6rem; font-size: .72rem; color: var(--text-faint); font-family: monospace; }
.preview-body { display: flex; min-height: 260px; }
.preview-sidebar {
width: 110px; background: var(--bg-deep); padding: .9rem .65rem;
border-right: 1px solid var(--border); flex-shrink: 0;
}
.ps-logo { font-size: .8rem; font-weight: 900; color: var(--accent); letter-spacing: -.02em; margin-bottom: .9rem; }
.ps-item { font-size: .68rem; font-weight: 500; color: var(--text-faint); padding: .3rem .45rem; border-radius: 4px; margin-bottom: .15rem; }
.ps-item.active { background: var(--accent-dim); color: var(--accent); }
.preview-main { flex: 1; padding: .9rem; }
.preview-kpis { display: flex; gap: .5rem; margin-bottom: .9rem; }
.pkpi { flex: 1; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; padding: .5rem .65rem; }
.pkpi-val { font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }
.pkpi-lbl { font-size: .58rem; color: var(--text-faint); font-weight: 500; margin-top: .1rem; }
.preview-table-head { display: flex; align-items: center; justify-content: space-between; font-size: .68rem; font-weight: 700; color: var(--text-muted); margin-bottom: .45rem; }
.ptag { background: var(--green-dim); color: var(--green); font-size: .58rem; font-weight: 700; padding: .12rem .38rem; border-radius: 100px; }
.preview-row { display: flex; align-items: center; gap: .4rem; padding: .4rem 0; border-bottom: 1px solid var(--border); font-size: .68rem; }
.preview-row:last-child { border-bottom: none; }
.pr-name { font-weight: 600; flex: 1; } .pr-act { color: var(--text-muted); flex: 2; }
.pr-badge { font-size: .58rem; font-weight: 700; padding: .12rem .38rem; border-radius: 100px; }
.pr-badge.green { background: var(--green-dim); color: var(--green); }
.pr-badge.yellow { background: var(--yellow-dim); color: var(--yellow); }
/* Sections */
.section-inner { max-width: 1200px; margin: 0 auto; padding: 5rem 2rem; }
.section-label { font-size: .72rem; font-weight: 700; color: var(--accent); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .75rem; }
.section-inner h2 { font-size: clamp(1.8rem, 3.5vw, 2.7rem); font-weight: 800; line-height: 1.12; letter-spacing: -.035em; }
.muted-text { color: var(--text-muted); }
.section-sub { font-size: 1rem; color: var(--text-muted); max-width: 580px; line-height: 1.75; margin: 1rem 0 3rem; }
/* Features */
.features { background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.feat-card {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius-lg); padding: 1.6rem; transition: all .22s;
}
.feat-card:hover { border-color: var(--border-light); transform: translateY(-2px); box-shadow: var(--shadow); }
.feat-icon { font-size: 1.6rem; margin-bottom: .9rem; }
.feat-card h3 { font-size: .95rem; font-weight: 700; margin-bottom: .45rem; }
.feat-card p { font-size: .85rem; color: var(--text-muted); line-height: 1.65; }
/* Services */
.services { background: var(--bg-base); }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1rem; }
.services-grid-6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .services-grid-6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .services-grid-6 { grid-template-columns: 1fr; } }
.service-card {
position: relative; overflow: hidden; border-radius: var(--radius-lg);
border: 1px solid var(--border); min-height: 340px;
display: flex; flex-direction: column; justify-content: flex-end; transition: transform .22s;
}
.service-card:hover { transform: translateY(-4px); }
.service-bg { position: absolute; inset: 0; z-index: 0; }
.service-card.ocean .service-bg { background: linear-gradient(160deg, #001525 0%, #00294d 50%, #003f70 100%); }
.service-card.adventure .service-bg { background: linear-gradient(160deg, #0b1800 0%, #183000 50%, #234400 100%); }
.service-card.custom .service-bg { background: linear-gradient(160deg, #160f00 0%, #2a1e00 50%, #3d2b00 100%); }
.service-card.visa-card .service-bg { background: linear-gradient(160deg, #0d0022 0%, #1a003d 50%, #2b0060 100%); }
.service-card.dgii-card .service-bg { background: linear-gradient(160deg, #001a10 0%, #00321e 50%, #004d2c 100%); }
.service-card.fx-card .service-bg { background: linear-gradient(160deg, #001420 0%, #001f33 50%, #003050 100%); }
.service-content { position: relative; z-index: 1; padding: 1.75rem; background: linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.2) 100%); }
.service-tag { display: inline-block; font-size: .7rem; font-weight: 700; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); padding: .22rem .65rem; border-radius: 100px; margin-bottom: .65rem; color: rgba(255,255,255,.82); letter-spacing: .05em; }
.service-content h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: .5rem; }
.service-content p { font-size: .83rem; color: rgba(255,255,255,.62); line-height: 1.6; margin-bottom: .9rem; }
.service-list { list-style: none; display: flex; flex-direction: column; gap: .3rem; }
.service-list li { font-size: .8rem; color: rgba(255,255,255,.65); display: flex; align-items: center; gap: .5rem; }
.service-list li::before { content: '→'; color: var(--accent); font-size: .72rem; }
/* Demo section */
.demo-section { background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.demo-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.demo-steps { display: flex; flex-direction: column; gap: .85rem; margin: 1.5rem 0 2rem; }
.demo-step { display: flex; align-items: center; gap: .85rem; font-size: .88rem; color: var(--text-muted); }
.step-n { width: 26px; height: 26px; background: var(--accent-dim); border: 1px solid rgba(0,194,255,.28); color: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; flex-shrink: 0; }
.demo-visual { display: flex; justify-content: center; }
.demo-card-stack { position: relative; width: 300px; height: 210px; }
.dcard { position: absolute; width: 280px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.dcard-back-2 { top: 18px; left: 18px; height: 175px; opacity: .25; background: var(--bg-surface); }
.dcard-back-1 { top: 9px; left: 9px; height: 185px; opacity: .55; }
.dcard-front { top: 0; left: 0; box-shadow: var(--shadow-lg); z-index: 2; padding: 1.2rem; }
.dc-header { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .9rem; }
.dc-icon { font-size: 1.1rem; }
.dc-title { font-size: .85rem; font-weight: 700; }
.dc-sub { font-size: .7rem; color: var(--text-muted); }
.dc-row { display: flex; justify-content: space-between; font-size: .76rem; padding: .32rem 0; border-top: 1px solid var(--border); color: var(--text-muted); }
.dc-row span:last-child { color: var(--text); font-weight: 500; }
.dc-money { color: var(--green) !important; font-weight: 700 !important; }
.dc-status { color: var(--green) !important; }
.dc-action { margin-top: .7rem; text-align: center; font-size: .76rem; font-weight: 700; color: var(--accent); background: var(--accent-dim); border: 1px solid rgba(0,194,255,.18); border-radius: var(--radius-sm); padding: .38rem; }
/* Final CTA */
.final-cta { background: var(--bg-deep); text-align: center; }
.final-cta h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: .75rem; }
.final-cta p { font-size: 1rem; color: var(--text-muted); margin-bottom: 2rem; }
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
/* Footer */
.site-footer { background: var(--bg-deep); border-top: 1px solid var(--border); padding: 3rem 0 1.5rem; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 2rem 2rem; display: flex; gap: 4rem; justify-content: space-between; flex-wrap: wrap; }
.footer-brand p { font-size: .83rem; color: var(--text-muted); margin-top: .5rem; max-width: 220px; }
.footer-links { display: flex; gap: 3rem; }
.footer-col { display: flex; flex-direction: column; gap: .55rem; }
.fc-label { font-size: .7rem; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .2rem; }
.footer-col a { font-size: .85rem; color: var(--text-muted); transition: color .2s; }
.footer-col a:hover { color: var(--text); }
.footer-bottom { max-width: 1200px; margin: 0 auto; padding: 1.25rem 2rem 0; border-top: 1px solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .78rem; color: var(--text-faint); }
/* ═══════════════ LOGIN PAGE ═══════════════ */
body.auth-page {
background: var(--bg-deep); min-height: 100vh;
display: grid; grid-template-columns: 1fr 1fr;
}
.auth-visual {
background:
radial-gradient(ellipse 100% 80% at 50% 60%, rgba(0,194,255,.09) 0%, transparent 70%),
linear-gradient(180deg, #06090f 0%, #060e1a 100%);
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 3rem; border-right: 1px solid var(--border); position: relative; overflow: hidden;
}
.auth-visual-grid {
position: absolute; inset: 0;
background-image: linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
background-size: 52px 52px;
}
.auth-visual-content { position: relative; z-index: 1; text-align: center; }
.auth-brand { font-size: 2.8rem; font-weight: 900; letter-spacing: -.05em; margin-bottom: 1rem; }
.auth-tagline { font-size: 1rem; color: var(--text-muted); max-width: 280px; line-height: 1.65; margin: 0 auto 2.5rem; }
.auth-bullets { display: flex; flex-direction: column; gap: .85rem; text-align: left; }
.auth-bullet { display: flex; align-items: center; gap: .75rem; font-size: .88rem; color: var(--text-muted); }
.auth-bullet-icon { width: 30px; height: 30px; background: var(--accent-dim); border: 1px solid rgba(0,194,255,.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; }
.auth-form-side { display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; }
.auth-card-v2 { width: 100%; max-width: 390px; }
.auth-card-v2 .auth-logo { font-size: 1.25rem; font-weight: 900; letter-spacing: -.03em; margin-bottom: .25rem; }
.auth-card-v2 h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.035em; margin-bottom: .4rem; }
.auth-subtitle { font-size: .88rem; color: var(--text-muted); margin-bottom: 1.75rem; }
.demo-banner {
background: var(--gold-dim); border: 1px solid rgba(240,165,0,.28);
border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: 1.5rem;
display: flex; gap: .7rem;
}
.demo-banner-icon { font-size: 1.05rem; }
.demo-banner-text { font-size: .8rem; color: var(--text-muted); line-height: 1.55; }
.demo-banner-text strong { color: var(--gold); display: block; font-size: .85rem; margin-bottom: .1rem; }
.field-group { margin-bottom: 1rem; }
.field-group label { display: block; font-size: .8rem; font-weight: 600; color: var(--text-muted); margin-bottom: .3rem; }
.field-group input {
width: 100%; background: var(--bg-surface); border: 1px solid var(--border-light);
border-radius: var(--radius); color: var(--text); font-size: .95rem;
padding: .72rem 1rem; transition: border-color .2s; font-family: inherit;
}
.field-group input:focus { outline: none; border-color: var(--accent); }
.field-group input::placeholder { color: var(--text-faint); }
.error-msg { color: var(--red); font-size: .83rem; margin-top: .5rem; }
.auth-footer { text-align: center; margin-top: 1.25rem; font-size: .82rem; color: var(--text-muted); }
.auth-footer a { color: var(--accent); font-weight: 600; }
/* ═══════════════ PORTAL ═══════════════ */
body.portal { background: var(--bg-base); min-height: 100vh; }
/* .demo-mode-bar removed — demo bar element no longer exists in portal.html (SESSION-028) */
.portal-layout { display: flex; min-height: 100vh; }
.portal-sidebar {
width: var(--sidebar-w); background: var(--bg-deep);
border-right: 1px solid var(--border);
display: flex; flex-direction: column;
position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
}
/* .demo-active .portal-sidebar offset removed — demo bar no longer exists (SESSION-028) */
.sidebar-logo {
padding: 1.2rem 1.1rem 1.1rem;
font-size: 1.25rem; font-weight: 900; letter-spacing: -.04em;
border-bottom: 1px solid var(--border);
}
.sidebar-nav { flex: 1; padding: .65rem .65rem; overflow-y: auto; }
.nav-section-label {
font-size: .62rem; font-weight: 700; color: var(--text-faint);
letter-spacing: .1em; text-transform: uppercase;
padding: .5rem .5rem .2rem; margin-top: .5rem;
}
.nav-section-label:first-child { margin-top: 0; }
.sidebar-link {
display: flex; align-items: center; gap: .6rem;
padding: .56rem .7rem; border-radius: var(--radius-sm);
font-size: .85rem; font-weight: 500; color: var(--text-muted);
cursor: pointer; transition: all .12s;
border: none; background: none; width: 100%; text-align: left; margin-bottom: .08rem;
}
.sidebar-link .nav-icon { font-size: .9rem; width: 16px; height: 16px; text-align: center; flex-shrink: 0; display:flex; align-items:center; justify-content:center; }
.sidebar-link .nav-icon svg { width: 16px; height: 16px; stroke: currentColor; }
.sidebar-link:hover { background: var(--bg-surface); color: var(--text); }
.sidebar-link.active { background: var(--accent-dim); color: var(--accent); font-weight: 600; }
.sidebar-user { padding: .9rem 1rem; border-top: 1px solid var(--border); }
.sidebar-user-info { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; }
.user-avatar { width: 30px; height: 30px; background: var(--accent-dim); border: 1px solid rgba(0,194,255,.28); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.user-name { font-size: .8rem; font-weight: 600; }
.user-role { font-size: .68rem; color: var(--text-faint); }
.logout-link { font-size: .76rem; color: var(--text-faint); cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; transition: color .2s; }
.logout-link:hover { color: var(--red); }
.portal-main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-height: 100vh; }
.portal-topbar {
height: 52px; background: var(--bg-deep); border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem;
position: sticky; top: 0; z-index: 40;
}
/* .demo-active .portal-topbar offset removed — demo bar no longer exists (SESSION-028) */
.topbar-title { font-size: .9rem; font-weight: 700; }
.topbar-actions { display: flex; align-items: center; gap: .65rem; }
/* Data connection status indicator (live users only) */
.data-status { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--text-muted); }
.data-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; transition: background .4s; }
.data-status-label { white-space: nowrap; }
/* Tab content */
.tab-content { display: none; padding: 1.5rem; animation: fadeSlide .18s ease; }
.tab-content.active { display: block; }
/* OS iframe tabs: flex layout required so iframe fills full height */
#tab-visa-os.active, #tab-dgii-os.active { display: flex; padding: 0; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
/* Page header */
.page-header { margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.025em; }
.page-header p { font-size: .85rem; color: var(--text-muted); margin-top: .2rem; }
/* KPIs */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.kpi-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.2rem 1.4rem; }
.kpi-label { font-size: .68rem; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .3rem; }
.kpi-value { font-size: 1.9rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.kpi-delta { font-size: .72rem; color: var(--green); margin-top: .3rem; }
/* Cards */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: visible; }
.card-header { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.2rem; border-bottom: 1px solid var(--border); position: relative; }
.card-title { font-size: .88rem; font-weight: 700; }
.card-body { padding: 1.2rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.full-col { margin-bottom: 1.25rem; }
/* Table */
.portal-table { width: 100%; border-collapse: collapse; }
.portal-table th { font-size: .68rem; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .07em; padding: .7rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
.portal-table td { padding: .8rem 1rem; font-size: .85rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.portal-table tr:last-child td { border-bottom: none; }
.portal-table tr:hover td { background: var(--bg-card-hover); }
.td-muted { color: var(--text-muted); }
.td-mono { font-family: monospace; font-size: .8rem; }
/* Badge */
.badge { display: inline-flex; align-items: center; gap: .28rem; font-size: .7rem; font-weight: 700; padding: .18rem .5rem; border-radius: 100px; white-space: nowrap; }
.badge-green { background: var(--green-dim); color: var(--green); }
.badge-yellow { background: var(--yellow-dim); color: var(--yellow); }
.badge-red { background: var(--red-dim); color: var(--red); }
.badge-blue { background: var(--accent-dim); color: var(--accent); }
.badge-gray { background: rgba(100,120,140,.12); color: var(--text-muted); }
/* Filter bar */
.filter-bar { display: flex; align-items: center; gap: .65rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.filter-bar input, .filter-bar select {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius-sm); color: var(--text); font-size: .85rem;
font-family: inherit; padding: .5rem .85rem; transition: border-color .2s;
}
.filter-bar input:focus, .filter-bar select:focus { outline: none; border-color: var(--accent); }
.filter-bar input::placeholder { color: var(--text-faint); }
.filter-bar select option { background: var(--bg-card); }
/* Quick actions */
.quick-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .85rem; margin-bottom: 1.5rem; }
.qa-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; cursor: pointer; transition: all .2s; text-align: center; }
.qa-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.qa-icon { font-size: 1.4rem; margin-bottom: .35rem; }
.qa-label { font-size: .78rem; font-weight: 600; color: var(--text-muted); }
/* ═══════════════════════════════════════════
DASHBOARD REDESIGN (SESSION-029)
Rich KPI cards, emoji quick-actions, charts
═══════════════════════════════════════════ */
/* Header */
.pd-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: .75rem; }
.pd-title { font-size: 1.45rem; font-weight: 800; }
.pd-sub { font-size: .85rem; color: var(--text-muted); margin-top: .15rem; }
.pd-live-badge { display: flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 700; color: var(--green); background: var(--green-dim); border: 1px solid rgba(0,214,143,.2); border-radius: 20px; padding: .28rem .75rem; }
.pd-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pd-pulse 2s infinite; flex-shrink: 0; }
@keyframes pd-pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.5; transform:scale(1.4); } }
/* KPI cards */
.pd-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
.pd-kpi-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.1rem 1.25rem;
display: flex;
align-items: center;
gap: 1rem;
transition: all .2s;
border-left: 3px solid transparent;
}
.pd-kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.pd-kpi-teal { border-left-color: #00c2ff; }
.pd-kpi-gold { border-left-color: var(--gold); }
.pd-kpi-green { border-left-color: var(--green); }
.pd-kpi-purple { border-left-color: #8b5cf6; }
.pd-kpi-emoji { font-size: 1.75rem; line-height: 1; flex-shrink: 0; }
.pd-kpi-body { flex: 1; min-width: 0; }
.pd-kpi-label { font-size: .72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .25rem; }
.pd-kpi-value { font-size: 1.6rem; font-weight: 900; line-height: 1.1; color: var(--text); }
.pd-kpi-delta { font-size: .73rem; font-weight: 600; color: var(--green); margin-top: .2rem; }
/* Quick-action emoji cards */
.pd-quick-actions { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; margin-bottom: 1.5rem; }
.pd-qa-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: .9rem .5rem;
cursor: pointer;
text-align: center;
transition: all .2s;
}
.pd-qa-card:hover { border-color: var(--accent); background: var(--accent-dim); transform: translateY(-2px); box-shadow: 0 4px 16px var(--accent-glow); }
.pd-qa-scuba:hover { border-color: #00c2ff; background: rgba(0,194,255,.08); }
.pd-qa-waiver:hover { border-color: var(--green); background: var(--green-dim); }
.pd-qa-quote:hover { border-color: var(--gold); background: var(--gold-dim); }
.pd-qa-partners:hover{ border-color: #8b5cf6; background: rgba(139,92,246,.1); }
.pd-qa-reports:hover { border-color: var(--green); background: var(--green-dim); }
.pd-qa-emoji { font-size: 1.65rem; line-height: 1; margin-bottom: .4rem; }
.pd-qa-label { font-size: .72rem; font-weight: 700; color: var(--text-muted); }
/* Charts row */
.pd-charts-row { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.pd-chart-card { /* uses .card base */ }
/* Bar chart */
.pd-bar-chart-wrap { padding: .75rem 1.2rem .5rem .75rem; position: relative; padding-left: 56px; }
/* Y-axis ticks for revenue chart (audit fix 2026-05-18 — was decorative-only) */
.pd-yaxis {
position: absolute; left: 8px; top: .75rem; bottom: 1.8rem;
width: 44px; display: flex; flex-direction: column;
justify-content: space-between; align-items: flex-end;
font-size: 9.5px; font-weight: 600; color: var(--text-muted);
pointer-events: none; line-height: 1;
}
.pd-yaxis-tick { position: relative; padding-right: 4px; }
.pd-yaxis-tick::after {
content: ''; position: absolute;
right: -8px; top: 50%; width: 6px; height: 1px;
background: rgba(255,255,255,.12);
}
.pd-bar-vallabel {
font-size: 9px; font-weight: 700; color: var(--accent);
text-align: center; margin-bottom: 2px;
white-space: nowrap; line-height: 1; min-height: 11px;
}
/* Chart: fixed 100px height. Each bar-wrap is a column: spacer (fills remaining) + bar + label */
.pd-bar-chart {
display: flex;
align-items: stretch;
gap: 6px;
height: 100px;
}
.pd-bar-wrap {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.pd-bar-spacer { flex: 1; } /* pushes bar to bottom */
.pd-bar {
width: 100%;
background: linear-gradient(to top, rgba(0,194,255,.7), rgba(0,194,255,.35));
border: 1px solid rgba(0,194,255,.4);
border-radius: 4px 4px 0 0;
transition: all .2s;
cursor: pointer;
min-height: 4px;
/* height set via inline style in px (0–100px matching .pd-bar-chart height) */
}
.pd-bar:hover { background: linear-gradient(to top, var(--accent), rgba(0,194,255,.7)); }
.pd-bar-hi { background: linear-gradient(to top, var(--accent), rgba(0,194,255,.8)); border-color: rgba(0,194,255,.6); }
.pd-bar-current { background: linear-gradient(to top, var(--accent), rgba(0,194,255,.95)); border-color: var(--accent); box-shadow: 0 0 12px rgba(0,194,255,.35); }
.pd-bar-lbl { font-size: .65rem; font-weight: 600; color: var(--text-faint); margin-top: 3px; white-space: nowrap; }
.pd-bar-tooltip { position: absolute; background: var(--bg-surface); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: .3rem .6rem; font-size: .72rem; font-weight: 700; color: var(--accent); pointer-events: none; white-space: nowrap; top: .5rem; z-index: 10; }
/* Donut chart */
.pd-donut-wrap { display: flex; align-items: center; gap: 1.25rem; padding: .8rem 1.2rem 1.2rem; }
.pd-donut-svg-wrap { position: relative; flex-shrink: 0; }
.pd-donut-svg { width: 90px; height: 90px; transform: rotate(-90deg); }
.pd-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#pd-donut-val { font-size: 1.2rem; font-weight: 900; line-height: 1; color: var(--text); }
#pd-donut-lbl { font-size: .6rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.pd-donut-legend { flex: 1; display: flex; flex-direction: column; gap: .65rem; }
.pd-donut-item { display: flex; align-items: center; gap: .55rem; font-size: .78rem; color: var(--text-muted); }
.pd-donut-item strong { margin-left: auto; color: var(--text); font-weight: 800; }
.pd-donut-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
/* Responsive */
@media (max-width: 900px) {
.pd-kpi-row { grid-template-columns: repeat(2, 1fr); }
.pd-quick-actions { grid-template-columns: repeat(3, 1fr); }
.pd-charts-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.pd-kpi-row { grid-template-columns: 1fr 1fr; }
.pd-quick-actions { grid-template-columns: repeat(3, 1fr); }
}
/* Light mode overrides */
html[data-theme="light"] .pd-kpi-card { background: #fff; border-color: #e2e8f0; }
html[data-theme="light"] .pd-kpi-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
html[data-theme="light"] .pd-qa-card { background: #fff; border-color: #e2e8f0; }
html[data-theme="light"] .pd-bar { background: linear-gradient(to top, rgba(0,119,182,.4), rgba(0,119,182,.2)); border-color: rgba(0,119,182,.3); }
html[data-theme="light"] .pd-bar-hi,
html[data-theme="light"] .pd-bar-current { background: linear-gradient(to top, #0077b6, rgba(0,119,182,.7)); }
html[data-theme="light"] .pd-bar:hover { background: linear-gradient(to top, #0077b6, rgba(0,119,182,.8)); }
html[data-theme="light"] .pd-donut-svg circle:first-child { stroke: #e2e8f0; }
/* Activity feed */
.activity-item { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem 1.2rem; border-bottom: 1px solid var(--border); font-size: .83rem; }
.activity-item:last-child { border-bottom: none; }
.activity-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: .38rem; flex-shrink: 0; }
.activity-text { color: var(--text); line-height: 1.45; }
.activity-time { color: var(--text-faint); font-size: .72rem; margin-top: .18rem; }
/* Progress bar */
.progress-bar { height: 5px; background: var(--border); border-radius: 100px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 100px; background: var(--green); }
/* Empty state */
.empty-state { text-align: center; padding: 3rem; color: var(--text-muted); font-size: .88rem; }
.empty-state .empty-icon { font-size: 2rem; margin-bottom: .75rem; opacity: .5; }
@media (max-width: 900px) {
body.auth-page { grid-template-columns: 1fr; }
.auth-visual { display: none; }
}
@media (max-width: 768px) {
.hero { flex-direction: column; padding-top: 80px; }
.hero-visual { display: none; }
.demo-inner { grid-template-columns: 1fr; }
.demo-visual { display: none; }
.two-col { grid-template-columns: 1fr; }
.portal-sidebar { display: none; }
.portal-main { margin-left: 0; }
}
/* ── Language Toggle ── */
.lang-toggle {
display: flex;
align-items: center;
gap: 0;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 100px;
overflow: hidden;
flex-shrink: 0;
}
.lang-btn {
padding: .3rem .75rem;
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
color: var(--text-muted);
background: transparent;
border: none;
cursor: pointer;
transition: all .2s;
font-family: inherit;
line-height: 1;
}
.lang-btn:hover { color: var(--text); }
.lang-btn.lang-active {
background: var(--accent);
color: #000;
border-radius: 100px;
}
/* ── Tooltip (.tip) ─────────────────────────────────────────── */
.tip {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
border-radius: 50%;
background: rgba(0,194,255,.12);
color: var(--accent);
font-size: .6rem;
font-weight: 800;
cursor: help;
flex-shrink: 0;
border: 1px solid rgba(0,194,255,.25);
vertical-align: middle;
margin-left: .3rem;
line-height: 1;
user-select: none;
}
/* Tooltip bubble — rendered as a fixed overlay via JS (portal.js initTooltips)
so it escapes all overflow:hidden ancestors completely */
#tip-overlay {
position: fixed;
z-index: 99999;
background: #0d1f35;
border: 1px solid var(--border);
color: var(--text);
font-size: .73rem;
font-weight: 400;
max-width: 300px;
padding: .55rem .7rem;
border-radius: 8px;
pointer-events: none;
white-space: normal;
line-height: 1.4;
opacity: 0;
transition: opacity .15s;
display: block;
}
/* ── Booking Calendar ────────────────────────────────────────── */
.booking-cal {
width: 100%;
border-collapse: collapse;
font-size: .82rem;
}
.booking-cal th {
padding: .5rem .4rem;
text-align: center;
font-size: .7rem;
font-weight: 700;
letter-spacing: .05em;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
text-transform: uppercase;
}
.booking-cal td {
vertical-align: top;
width: 14.28%;
min-height: 80px;
padding: .35rem .4rem;
border: 1px solid var(--border);
background: var(--bg-card);
}
.cal-day-num {
font-size: .72rem;
font-weight: 700;
color: var(--text-muted);
margin-bottom: .25rem;
}
.cal-day-num.today {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--accent);
color: #000;
font-weight: 800;
}
.cal-empty { background: rgba(255,255,255,.015); }
.cal-dot {
display: block;
font-size: .68rem;
padding: 2px 5px;
border-radius: 4px;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: default;
}
/* Calendar category colors — user-editable via the Calendar legend.
Values are injected at runtime as CSS vars on :root. Defaults live here
so the calendar still looks right before the user touches anything. */
:root {
--cal-scuba: #00c2ff;
--cal-tour: #10b981;
--cal-adv: #a78bfa;
--cal-custom: #ec4899;
--cal-other: #f59e0b;
}
.cal-dot-scuba { background: color-mix(in srgb, var(--cal-scuba) 15%, transparent); color: var(--cal-scuba); }
.cal-dot-tour { background: color-mix(in srgb, var(--cal-tour) 15%, transparent); color: var(--cal-tour); }
.cal-dot-adv { background: color-mix(in srgb, var(--cal-adv) 15%, transparent); color: var(--cal-adv); }
.cal-dot-custom { background: color-mix(in srgb, var(--cal-custom) 15%, transparent); color: var(--cal-custom); }
.cal-dot-other { background: color-mix(in srgb, var(--cal-other) 15%, transparent); color: var(--cal-other); }
/* Interactive legend swatch — wraps a hidden */
.cal-legend-item {
display: flex;
align-items: center;
gap: .4rem;
font-size: .78rem;
color: var(--text-muted);
}
.cal-legend-swatch {
position: relative;
display: inline-block;
width: 14px;
height: 14px;
border-radius: 3px;
border: 1px solid rgba(255,255,255,.18);
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease;
}
.cal-legend-swatch:hover { transform: scale(1.15); box-shadow: 0 0 0 2px rgba(255,255,255,.15); }
.cal-legend-swatch input[type="color"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
border: none;
padding: 0;
}
.cal-legend-reset {
font-size: .7rem;
padding: .25rem .55rem;
background: transparent;
border: 1px solid var(--border-light);
border-radius: 5px;
color: var(--text-muted);
cursor: pointer;
transition: all .15s ease;
}
.cal-legend-reset:hover { color: var(--text-primary); border-color: var(--accent); }
/* ============ THEME TOGGLE BUTTON ============ */
.theme-toggle-btn {
background: transparent;
border: 1px solid var(--border-light);
color: var(--text-muted);
font-size: .7rem;
font-weight: 600;
letter-spacing: .06em;
padding: .28rem .7rem;
border-radius: 100px;
cursor: pointer;
transition: all .2s;
font-family: inherit;
white-space: nowrap;
flex-shrink: 0;
}
.theme-toggle-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
/* ============ LIGHT MODE ============ */
html[data-theme="light"] {
--bg-deep: #f0f4fa;
--bg-base: #f4f7fc;
--bg-surface: #ffffff;
--bg-card: #ffffff;
--bg-card-hover:#f0f5ff;
--border: #d4dce8;
--border-light: #c5d0e0;
--text: #1a2540;
--text-muted: #5a6e88;
--text-faint: #9aafca;
--accent-dim: rgba(0,140,200,0.08);
--shadow: 0 4px 24px rgba(0,0,0,0.08);
--shadow-lg: 0 8px 48px rgba(0,0,0,0.12);
}
html[data-theme="light"] body { background: var(--bg-base); color: var(--text); }
/* Auth page light mode */
html[data-theme="light"] body.auth-page { background: #e8edf5; }
html[data-theme="light"] .auth-visual {
background: linear-gradient(160deg, #0a2a4a 0%, #0e3560 60%, #0a2a4a 100%);
}
/* Left panel always has dark bg — force all text white regardless of theme */
html[data-theme="light"] .auth-visual .brand-adr { color: #ffffff; }
html[data-theme="light"] .auth-visual .auth-tagline { color: rgba(255,255,255,.78); }
html[data-theme="light"] .auth-visual .auth-bullet { color: rgba(255,255,255,.78); }
html[data-theme="light"] .auth-visual .auth-bullet-icon { background: rgba(0,194,255,.18); border-color: rgba(0,194,255,.35); }
html[data-theme="light"] .auth-visual h2, html[data-theme="light"] .auth-visual h3, html[data-theme="light"] .auth-visual p { color: rgba(255,255,255,.78); }
html[data-theme="light"] .auth-form-side { background: #e8edf5; }
html[data-theme="light"] .auth-card-v2 {
background: #ffffff;
border: 1px solid #c8d5e8;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 8px 32px rgba(0,0,0,0.10);
}
html[data-theme="light"] .auth-card-v2 h1 { color: #1a2540; }
html[data-theme="light"] .auth-subtitle { color: #5a6e88; }
html[data-theme="light"] .auth-footer { color: #5a6e88; }
html[data-theme="light"] .auth-logo { color: #1a2540; }
html[data-theme="light"] .field-group label { color: #5a6e88; }
html[data-theme="light"] .field-group input {
background: #f4f7fc;
border-color: #c8d5e8;
color: #1a2540;
}
html[data-theme="light"] .field-group input::placeholder { color: #9aafca; }
html[data-theme="light"] .field-group input:focus { border-color: #0077b6; background: #fff; }
html[data-theme="light"] .lang-toggle { background: #f4f7fc; border-color: #c8d5e8; }
html[data-theme="light"] .lang-btn { color: #5a6e88; }
html[data-theme="light"] .lang-btn:hover { color: #1a2540; }
html[data-theme="light"] .lang-btn.lang-active { background: #0077b6; color: #fff; }
html[data-theme="light"] .theme-toggle-btn { border-color: #c8d5e8; color: #5a6e88; background: #f4f7fc; }
html[data-theme="light"] .theme-toggle-btn:hover { border-color: #0077b6; color: #0077b6; }
html[data-theme="light"] .btn-primary { background: #0077b6; }
html[data-theme="light"] .demo-banner { background: #e8f0fe; border-color: #b8cef8; color: #1a2540; }
/* Sidebar + portal light mode */
html[data-theme="light"] .sidebar { background: var(--bg-surface); border-color: var(--border); }
html[data-theme="light"] .nav-bar { background: var(--bg-surface); border-color: var(--border); }
html[data-theme="light"] .card, html[data-theme="light"] .card-body { background: var(--bg-card); border-color: var(--border); }
html[data-theme="light"] .tab-btn { color: var(--text-muted); border-color: transparent; }
html[data-theme="light"] .tab-btn.active { color: var(--accent); border-color: var(--accent); }
html[data-theme="light"] .stat-card { background: var(--bg-card); border-color: var(--border); }
html[data-theme="light"] .tbl th { background: var(--bg-surface); color: var(--text-muted); border-color: var(--border); }
html[data-theme="light"] .tbl td { border-color: var(--border); }
html[data-theme="light"] .tbl tr:hover td { background: var(--bg-card-hover); }
/* ── Landing page light mode fixes ── */
/* Nav: switch to light background so brand-adr dark text is readable */
html[data-theme="light"] .topnav {
background: rgba(240,244,250,.96);
border-color: #d4dce8;
}
html[data-theme="light"] .nav-links > a { color: #5a6e88; }
html[data-theme="light"] .nav-links > a:hover { color: #1a2540; }
html[data-theme="light"] .topnav .btn-ghost { color: #5a6e88; }
html[data-theme="light"] .topnav .btn-ghost:hover { color: #1a2540; }
/* Hero: fix hardcoded dark endpoint so full gradient is light in light mode */
html[data-theme="light"] .hero-gradient {
background:
radial-gradient(ellipse 80% 60% at 65% 40%, rgba(0,140,200,.1) 0%, transparent 70%),
radial-gradient(ellipse 50% 70% at 5% 90%, rgba(240,165,0,.06) 0%, transparent 60%),
linear-gradient(180deg, #eef3fb 0%, #dce8f8 100%);
}
html[data-theme="light"] .hero-grid {
background-image: linear-gradient(rgba(26,37,64,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(26,37,64,.04) 1px, transparent 1px);
}
/* Hero badge: same feel as "One platform." h1 */
html[data-theme="light"] .hero-badge {
color: #1a2540;
background: rgba(26,37,64,0.07);
border-color: rgba(26,37,64,0.18);
}
/* Hero sub paragraph */
html[data-theme="light"] .hero-sub { color: #3d5166; }
/* Agency Login button — visible border + dark text */
html[data-theme="light"] .btn-outline-lg:not(.btn-login) {
color: #1a2540;
border-color: #8aa4c0;
}
html[data-theme="light"] .btn-outline-lg:not(.btn-login):hover {
border-color: #0077b6;
color: #0077b6;
}
/* Hero stats */
html[data-theme="light"] .stat-n { color: #1a2540; }
html[data-theme="light"] .stat-l { color: #5a6e88; }
html[data-theme="light"] .stat-divider { background: #c5d0e0; }
/* Service cards: redesign for light mode — pastel backgrounds, dark text */
html[data-theme="light"] .service-card.ocean .service-bg {
background: linear-gradient(160deg, #c8e6fa 0%, #a8d4f5 50%, #7ebeed 100%);
}
html[data-theme="light"] .service-card.adventure .service-bg {
background: linear-gradient(160deg, #c8efd4 0%, #a8ddb8 50%, #7ec89a 100%);
}
html[data-theme="light"] .service-card.custom .service-bg {
background: linear-gradient(160deg, #fce8c0 0%, #f8d898 50%, #f0c668 100%);
}
html[data-theme="light"] .service-card.visa-card .service-bg {
background: linear-gradient(160deg, #ede0ff 0%, #d9beff 50%, #c49eff 100%);
}
html[data-theme="light"] .service-card.dgii-card .service-bg {
background: linear-gradient(160deg, #c8f5e5 0%, #96eacc 50%, #5cd9ae 100%);
}
html[data-theme="light"] .service-card.fx-card .service-bg {
background: linear-gradient(160deg, #c8e8ff 0%, #99d4ff 50%, #66bbff 100%);
}
html[data-theme="light"] .service-content {
background: linear-gradient(0deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.25) 100%);
}
html[data-theme="light"] .service-content h3 { color: #1a2540; }
html[data-theme="light"] .service-content p { color: #3d5166; }
html[data-theme="light"] .service-tag {
background: rgba(26,37,64,0.1);
border-color: rgba(26,37,64,0.2);
color: #1a2540;
}
html[data-theme="light"] .service-list li { color: #3d5166; }
html[data-theme="light"] .service-list li::before { color: #0077b6; }
/* ── Demo-only elements ── */
.demo-only { display: none !important; }
.demo-active .demo-only { display: flex !important; }
/* ── Tab intro banners (demo mode only) ── */
.demo-tab-intro {
display: none;
align-items: flex-start;
gap: 1rem;
background: linear-gradient(135deg, rgba(0,194,255,.07) 0%, rgba(0,194,255,.02) 100%);
border: 1px solid rgba(0,194,255,.22);
border-left: 3px solid var(--accent);
border-radius: var(--radius);
padding: .9rem 1.25rem;
margin-bottom: 1.75rem;
font-size: .875rem;
color: var(--text-muted);
line-height: 1.6;
}
.demo-active .demo-tab-intro { display: flex; }
.demo-tab-intro-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: .05rem; }
.demo-tab-intro-label {
font-size: .68rem; font-weight: 700; color: var(--accent);
letter-spacing: .08em; text-transform: uppercase; margin-bottom: .3rem;
}
html[data-theme="light"] .demo-tab-intro {
background: linear-gradient(135deg, rgba(0,119,182,.06) 0%, rgba(0,119,182,.01) 100%);
border-color: rgba(0,119,182,.25);
border-left-color: #0077b6;
color: #3d5166;
}
html[data-theme="light"] .demo-tab-intro-label { color: #0077b6; }
/* ── Start Here grid ── */
.start-here-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1rem;
margin-top: .5rem;
}
.sh-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.2rem 1.3rem 1.1rem;
cursor: pointer;
transition: border-color .18s, transform .18s, box-shadow .18s;
display: flex;
flex-direction: column;
gap: .3rem;
text-align: left;
font-family: inherit;
width: 100%;
position: relative;
overflow: hidden;
}
.sh-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0,194,255,0.04) 0%, transparent 60%);
pointer-events: none;
opacity: 0;
transition: opacity .2s;
}
.sh-card:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0,194,255,0.12);
}
.sh-card:hover::before { opacity: 1; }
.sh-card-icon {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: .55rem;
border-radius: 10px;
background: rgba(0,194,255,0.10);
flex-shrink: 0;
}
.sh-card-icon svg {
width: 18px;
height: 18px;
stroke: var(--accent);
flex-shrink: 0;
}
.sh-card-title { font-size: .92rem; font-weight: 700; color: var(--text); }
.sh-card-desc { font-size: .78rem; color: var(--text-muted); line-height: 1.55; flex: 1; }
.sh-card-cta { font-size: .75rem; font-weight: 700; color: var(--accent); margin-top: .3rem; }
html[data-theme="light"] .sh-card:hover { border-color: #0077b6; }
html[data-theme="light"] .sh-card-cta { color: #0077b6; }
/* ── Portal app light mode ── */
html[data-theme="light"] .portal-sidebar {
background: #ffffff;
border-color: #d4dce8;
}
html[data-theme="light"] .portal-topbar {
background: #ffffff;
border-color: #d4dce8;
}
html[data-theme="light"] .sidebar-logo {
border-color: #d4dce8;
}
html[data-theme="light"] .sidebar-link {
color: #5a6e88;
}
html[data-theme="light"] .sidebar-link:hover {
background: #f0f4fa;
color: #1a2540;
}
html[data-theme="light"] .sidebar-link.active {
background: rgba(0,119,182,0.10);
color: #0077b6;
}
html[data-theme="light"] .nav-section-label {
color: #9aafca;
}
html[data-theme="light"] .sidebar-user {
border-color: #d4dce8;
}
html[data-theme="light"] .user-avatar {
background: rgba(0,119,182,0.10);
border-color: rgba(0,119,182,0.28);
color: #0077b6;
}
html[data-theme="light"] .user-name { color: #1a2540; }
html[data-theme="light"] .user-role { color: #9aafca; }
html[data-theme="light"] .logout-link { color: #9aafca; }
html[data-theme="light"] .topbar-title { color: #1a2540; }
html[data-theme="light"] .kpi-card {
background: #ffffff;
border-color: #d4dce8;
}
html[data-theme="light"] .kpi-label { color: #9aafca; }
html[data-theme="light"] .kpi-value { color: #1a2540; }
html[data-theme="light"] .page-header h1 { color: #1a2540; }
html[data-theme="light"] .page-header p { color: #5a6e88; }
html[data-theme="light"] .tab-content { background: transparent; }
html[data-theme="light"] .portal-main { background: #f4f7fc; }
html[data-theme="light"] .card {
background: #ffffff;
border-color: #d4dce8;
}
html[data-theme="light"] .card-header {
border-color: #d4dce8;
}
html[data-theme="light"] .card-title { color: #1a2540; }
html[data-theme="light"] .data-status { color: #9aafca; }
/* Mobile: auth form full-screen below 480px */
@media (max-width: 480px) {
.auth-form-side { padding: 2rem 1.25rem; align-items: flex-start; padding-top: 2.5rem; }
.auth-card-v2 { max-width: 100%; }
.auth-card-v2 h1 { font-size: 1.35rem; }
}
/* ── Visa Requirements Cards ──────────────────────────────────────────────── */
.vreq-card {
border: 1px solid var(--border);
border-radius: 10px;
padding: 1rem 1.1rem;
background: var(--card-bg);
display: flex;
flex-direction: column;
gap: .55rem;
transition: box-shadow .2s, border-color .2s;
}
.vreq-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.vreq-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.vreq-country { font-weight: 800; font-size: 1rem; color: var(--text); }
.vreq-region { font-size: .72rem; color: var(--text-muted); margin-top: .1rem; }
.vreq-badges { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
.vreq-badge {
padding: 2px 9px;
border-radius: 20px;
font-size: .71rem;
font-weight: 700;
white-space: nowrap;
}
.vreq-badge--required { background: rgba(239,68,68,.15); color: #f87171; border: 1px solid rgba(239,68,68,.3); }
.vreq-badge--arrival { background: rgba(245,158,11,.15); color: #fbbf24; border: 1px solid rgba(245,158,11,.3); }
.vreq-badge--free { background: rgba(34,197,94,.15); color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
.vreq-badge--eta { background: rgba(139,92,246,.15); color: #a78bfa; border: 1px solid rgba(139,92,246,.3); }
.vreq-facts { display: flex; flex-wrap: wrap; gap: .35rem; }
.vreq-fact {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 6px;
padding: 2px 8px;
font-size: .74rem;
color: var(--text-muted);
}
.vreq-notes {
font-size: .78rem;
color: #fbbf24;
background: rgba(245,158,11,.08);
border: 1px solid rgba(245,158,11,.2);
border-radius: 6px;
padding: .35rem .65rem;
line-height: 1.5;
}
.vreq-docs-section {
border: 1px solid var(--border);
border-radius: 7px;
overflow: hidden;
}
.vreq-docs-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: .45rem .75rem;
background: var(--bg-input);
cursor: pointer;
font-size: .8rem;
font-weight: 600;
color: var(--text);
user-select: none;
gap: .5rem;
}
.vreq-docs-header:hover { background: var(--border); }
.vreq-docs-subheader {
font-size: .74rem;
font-weight: 700;
color: var(--text-muted);
padding: .4rem .75rem .15rem;
text-transform: uppercase;
letter-spacing: .04em;
}
.vreq-checklist {
list-style: none;
margin: 0;
padding: .35rem .75rem .5rem;
display: flex;
flex-direction: column;
gap: .3rem;
}
.vreq-checklist-item {
display: flex;
gap: .55rem;
align-items: flex-start;
font-size: .8rem;
color: var(--text);
line-height: 1.5;
}
.vreq-check {
font-weight: 700;
font-size: .8rem;
flex-shrink: 0;
margin-top: .05rem;
color: #4ade80;
}
.vreq-check--opt { color: var(--text-muted); }
.vreq-checklist-item--opt { color: var(--text-muted); }
.vreq-doc-note {
display: block;
font-size: .73rem;
color: var(--accent);
font-style: normal;
margin-top: .1rem;
}
.vreq-links {
display: flex;
flex-direction: column;
gap: .3rem;
margin-top: .1rem;
}
.vreq-link {
font-size: .78rem;
color: var(--accent);
text-decoration: none;
padding: .3rem .6rem;
border: 1px solid rgba(0,194,255,.2);
border-radius: 6px;
background: rgba(0,194,255,.04);
transition: background .15s;
}
.vreq-link:hover { background: rgba(0,194,255,.1); }
.vreq-link--embassy { color: var(--text-muted); border-color: var(--border); background: transparent; }
.vreq-link--embassy:hover { background: var(--bg-input); }
/* Light mode overrides */
html[data-theme="light"] .vreq-badge--free { color: #16a34a; }
html[data-theme="light"] .vreq-check { color: #16a34a; }
html[data-theme="light"] .vreq-link { color: #0077b6; border-color: rgba(0,119,182,.25); background: rgba(0,119,182,.05); }
html[data-theme="light"] .vreq-link:hover { background: rgba(0,119,182,.12); }
html[data-theme="light"] .vreq-badge--required { color: #dc2626; }
html[data-theme="light"] .vreq-badge--arrival { color: #d97706; }
html[data-theme="light"] .vreq-notes { color: #b45309; }
/* ── Security & Compliance section ── */
/* Dark mode: keep the original dark navy look (was inline style) */
#compliance.features { background: #0f172a; }
/* Light mode overrides */
html[data-theme="light"] #compliance.features {
background: #f0f5ff;
border-top-color: #c8d5e8;
border-bottom-color: #c8d5e8;
}
/* Section label + heading */
html[data-theme="light"] #compliance .section-label { color: #0077b6; }
html[data-theme="light"] #compliance .muted-text { color: #5a6e88; }
html[data-theme="light"] #compliance .section-sub { color: #3d5166; }
/* DGII callout card: replace dark purple gradient with a clean light blue-tinted card */
html[data-theme="light"] #compliance .dgii-callout {
background: linear-gradient(135deg, rgba(0,119,182,.07), rgba(0,194,255,.04)) !important;
border-color: rgba(0,119,182,.25) !important;
}
html[data-theme="light"] #compliance .dgii-callout h3 { color: #1a2540; }
html[data-theme="light"] #compliance .dgii-callout p { color: #3d5166; }
/* Formato badges: dark green text + visible bg on light */
html[data-theme="light"] #compliance .dgii-callout span {
background: rgba(22,163,74,.12) !important;
color: #16a34a !important;
}
/* Feature cards in the grid */
html[data-theme="light"] #compliance .feat-card {
background: #ffffff;
border-color: #d4dce8;
}
html[data-theme="light"] #compliance .feat-card h3 { color: #1a2540; }
html[data-theme="light"] #compliance .feat-card p { color: #5a6e88; }
/* ── Group badge & per-person price ──────────────────────────────────── */
.badge-group {
display: inline-flex;
align-items: center;
gap: .2rem;
font-size: .72rem;
font-weight: 600;
padding: .1rem .4rem;
border-radius: 4px;
background: rgba(99,102,241,.12);
color: #818cf8;
white-space: nowrap;
}
html[data-theme="light"] .badge-group { background: rgba(99,102,241,.08); color: #6366f1; }
.td-per-person {
display: block;
font-size: .68rem;
font-weight: 400;
color: var(--text-muted, #94a3b8);
margin-top: .1rem;
}
/* ── Pipeline Board v57 — Redesign ────────────────────────────────────── */
/* Stage summary strip */
.pl-stage-strip {
display: flex;
gap: .6rem;
overflow-x: auto;
padding-bottom: .75rem;
margin-bottom: .75rem;
}
.pl-strip-total {
flex-shrink: 0;
background: var(--card-bg, #1e2535);
border: 1px solid var(--border, rgba(255,255,255,.07));
border-radius: 10px;
padding: .65rem .9rem;
min-width: 100px;
text-align: center;
}
.pl-strip-total-num {
font-size: 1.5rem;
font-weight: 700;
color: var(--text, #e2e8f0);
line-height: 1.1;
}
.pl-strip-total-label {
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-muted, #94a3b8);
margin-top: .15rem;
}
.pl-strip-total-sub {
font-size: .68rem;
color: var(--text-muted, #94a3b8);
margin-top: .25rem;
}
.pl-strip-card {
flex-shrink: 0;
background: var(--card-bg, #1e2535);
border: 1px solid var(--border, rgba(255,255,255,.07));
border-radius: 10px;
padding: .55rem .75rem;
min-width: 85px;
text-align: center;
cursor: pointer;
transition: background .15s, transform .1s, box-shadow .15s;
}
.pl-strip-card:hover {
background: rgba(255,255,255,.06);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.pl-strip-card-active {
background: rgba(99,102,241,.12) !important;
border-color: rgba(99,102,241,.4) !important;
box-shadow: 0 0 0 1px rgba(99,102,241,.3);
}
.pl-strip-count {
font-size: 1.25rem;
font-weight: 700;
color: var(--text, #e2e8f0);
line-height: 1.1;
}
.pl-strip-label {
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--text-muted, #94a3b8);
margin-top: .1rem;
}
.pl-strip-val {
font-size: .68rem;
color: #22c55e;
margin-top: .2rem;
font-weight: 600;
}
/* Filter bar */
.pl-filters {
display: flex;
flex-wrap: wrap;
gap: .45rem;
margin-bottom: .75rem;
align-items: center;
}
.pl-filter-input {
background: var(--card-bg, #1e2535);
border: 1px solid var(--border, rgba(255,255,255,.1));
border-radius: 6px;
padding: .4rem .6rem;
font-size: .78rem;
color: var(--text, #e2e8f0);
outline: none;
min-width: 0;
}
.pl-filter-input:focus {
border-color: var(--accent, #6366f1);
box-shadow: 0 0 0 2px rgba(99,102,241,.15);
}
.pl-filter-input::placeholder { color: var(--text-muted, #64748b); }
#pl-search { flex: 1; min-width: 160px; max-width: 280px; }
.pl-filter-date { width: 130px; }
.pl-filter-select {
background: var(--card-bg, #1e2535);
border: 1px solid var(--border, rgba(255,255,255,.1));
border-radius: 6px;
padding: .4rem .55rem;
font-size: .78rem;
color: var(--text, #e2e8f0);
cursor: pointer;
outline: none;
}
.pl-filter-select:focus {
border-color: var(--accent, #6366f1);
}
.pl-filter-clear {
background: transparent;
border: 1px solid var(--border, rgba(255,255,255,.1));
border-radius: 6px;
padding: .35rem .6rem;
font-size: .75rem;
color: var(--text-muted, #94a3b8);
cursor: pointer;
transition: color .15s, border-color .15s;
}
.pl-filter-clear:hover { color: #ef4444; border-color: rgba(239,68,68,.3); }
/* Batch action bar */
.pl-batch-bar {
display: flex;
align-items: center;
gap: .6rem;
padding: .5rem .75rem;
background: rgba(99,102,241,.08);
border: 1px solid rgba(99,102,241,.2);
border-radius: 8px;
margin-bottom: .75rem;
font-size: .8rem;
color: var(--text, #e2e8f0);
}
#pl-batch-count { font-weight: 600; min-width: 80px; }
.pl-batch-btn {
background: var(--accent, #6366f1);
color: #fff;
border: none;
border-radius: 6px;
padding: .35rem .75rem;
font-size: .78rem;
cursor: pointer;
font-weight: 600;
transition: background .15s;
}
.pl-batch-btn:hover { background: #4f46e5; }
.pl-batch-btn:disabled { opacity: .5; cursor: not-allowed; }
.pl-batch-cancel {
background: transparent;
border: 1px solid var(--border, rgba(255,255,255,.1));
color: var(--text-muted, #94a3b8);
}
.pl-batch-cancel:hover { color: #ef4444; border-color: rgba(239,68,68,.3); background: transparent; }
/* Pipeline table */
.pl-table-wrap {
overflow-x: auto;
border: 1px solid var(--border, rgba(255,255,255,.07));
border-radius: 10px;
background: var(--card-bg, #1e2535);
}
.pl-table {
width: 100%;
border-collapse: collapse;
font-size: .8rem;
}
.pl-table thead th {
position: sticky;
top: 0;
background: rgba(255,255,255,.03);
color: var(--text-muted, #94a3b8);
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
padding: .6rem .65rem;
text-align: left;
border-bottom: 1px solid var(--border, rgba(255,255,255,.07));
white-space: nowrap;
user-select: none;
}
.pl-th-sortable { cursor: pointer; }
.pl-th-sortable:hover { color: var(--text, #e2e8f0); }
.pl-th-sortable::after { content: ''; margin-left: .25rem; }
.pl-sorted-asc::after { content: ' ▲'; font-size: .6rem; }
.pl-sorted-desc::after { content: ' ▼'; font-size: .6rem; }
.pl-th-check { width: 36px; text-align: center; }
.pl-table tbody td {
padding: .5rem .65rem;
border-bottom: 1px solid var(--border, rgba(255,255,255,.04));
color: var(--text, #e2e8f0);
vertical-align: middle;
}
.pl-row { transition: background .12s; }
.pl-row:hover { background: rgba(255,255,255,.04); }
.pl-cell-guest { min-width: 140px; }
.pl-guest-name { display: block; font-weight: 600; font-size: .82rem; }
.pl-guest-email { display: block; font-size: .68rem; color: var(--text-muted, #64748b); margin-top: .1rem; }
.pl-cell-date { white-space: nowrap; font-size: .78rem; }
.pl-cell-total { font-weight: 600; color: #22c55e; white-space: nowrap; }
.pl-type-badge {
display: inline-block;
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .04em;
padding: .1rem .4rem;
border-radius: 4px;
background: rgba(255,255,255,.06);
color: var(--text-muted, #94a3b8);
}
.pl-pay-badge {
display: inline-block;
font-size: .68rem;
font-weight: 600;
padding: .12rem .45rem;
border-radius: 4px;
text-transform: capitalize;
}
.pl-pay-unpaid { background: rgba(239,68,68,.12); color: #f87171; }
.pl-pay-partial { background: rgba(251,191,36,.12); color: #fbbf24; }
.pl-pay-paid { background: rgba(34,197,94,.12); color: #22c55e; }
.pl-pay-refunded { background: rgba(148,163,184,.12); color: #94a3b8; }
.pl-stage-select {
background: var(--card-bg, #1e2535);
border: 1px solid var(--border, rgba(255,255,255,.1));
border-radius: 5px;
padding: .3rem .4rem;
font-size: .75rem;
color: var(--text, #e2e8f0);
cursor: pointer;
outline: none;
min-width: 100px;
}
.pl-stage-select:focus { border-color: var(--accent, #6366f1); }
.pl-action-btn {
background: transparent;
border: 1px solid var(--border, rgba(255,255,255,.1));
border-radius: 5px;
padding: .2rem .45rem;
font-size: .78rem;
color: var(--text-muted, #94a3b8);
cursor: pointer;
transition: color .15s, border-color .15s;
}
.pl-action-btn:hover { color: var(--accent, #6366f1); border-color: rgba(99,102,241,.4); }
.pl-empty {
text-align: center;
color: var(--text-muted, #94a3b8);
padding: 2rem;
font-size: .82rem;
}
.pl-table-footer {
padding: .45rem .75rem;
font-size: .72rem;
color: var(--text-muted, #94a3b8);
text-align: right;
}
/* ── Pipeline light mode ── */
html[data-theme="light"] .pl-strip-total,
html[data-theme="light"] .pl-strip-card {
background: #f8fafc;
border-color: #e2e8f0;
}
html[data-theme="light"] .pl-strip-card:hover { background: #f0f4ff; }
html[data-theme="light"] .pl-strip-card-active { background: rgba(99,102,241,.08) !important; border-color: rgba(99,102,241,.3) !important; }
html[data-theme="light"] .pl-strip-count,
html[data-theme="light"] .pl-strip-total-num { color: #1a2540; }
html[data-theme="light"] .pl-filter-input,
html[data-theme="light"] .pl-filter-select {
background: #fff;
border-color: #d1d5db;
color: #1a2540;
}
html[data-theme="light"] .pl-filter-input::placeholder { color: #94a3b8; }
html[data-theme="light"] .pl-batch-bar { background: rgba(99,102,241,.06); border-color: rgba(99,102,241,.15); }
html[data-theme="light"] .pl-table-wrap {
background: #fff;
border-color: #e2e8f0;
}
html[data-theme="light"] .pl-table thead th {
background: #f8fafc;
color: #5a6e88;
border-color: #e2e8f0;
}
html[data-theme="light"] .pl-table tbody td {
color: #1a2540;
border-color: #f1f5f9;
}
html[data-theme="light"] .pl-row:hover { background: #f8fafc; }
html[data-theme="light"] .pl-guest-name { color: #1a2540; }
html[data-theme="light"] .pl-guest-email { color: #5a6e88; }
html[data-theme="light"] .pl-type-badge { background: #f1f5f9; color: #5a6e88; }
html[data-theme="light"] .pl-stage-select {
background: #fff;
border-color: #d1d5db;
color: #1a2540;
}
html[data-theme="light"] .pl-action-btn { border-color: #d1d5db; color: #5a6e88; }
html[data-theme="light"] .pl-action-btn:hover { color: #4f46e5; border-color: rgba(79,70,229,.3); }
html[data-theme="light"] .pl-filter-clear { border-color: #d1d5db; color: #5a6e88; }
html[data-theme="light"] .pl-batch-cancel { border-color: #d1d5db; color: #5a6e88; }
/* Pipeline responsive — stack strip on narrow screens */
@media (max-width: 768px) {
.pl-stage-strip { flex-wrap: wrap; }
.pl-strip-card { min-width: 70px; padding: .4rem .5rem; }
.pl-strip-count { font-size: 1rem; }
.pl-filters { flex-direction: column; }
#pl-search { max-width: 100%; }
.pl-filter-date { width: 100%; }
}
/* Audit fix #5 — Calendar view toggle + drag-drop affordances */
.cal-view-btn {
padding: .35rem .85rem; font-size: .75rem; font-weight: 700;
background: transparent; color: var(--text-muted); border: 0;
border-radius: 6px; cursor: pointer; transition: all .15s;
}
.cal-view-btn:hover { color: var(--text-primary); }
.cal-view-btn.cal-view-active {
background: var(--accent); color: #ffffff;
box-shadow: 0 4px 10px -3px rgba(124,58,237,.5);
}
.booking-cal td.cal-drag-over {
background: rgba(124,58,237,.18) !important;
outline: 2px dashed var(--accent);
outline-offset: -2px;
}
.cal-dot[draggable="true"] {
cursor: grab;
}
.cal-dot[draggable="true"]:active {
cursor: grabbing;
opacity: .6;
}
.cal-week-row td {
vertical-align: top;
min-height: 180px;
padding: 8px;
}
/* Jay request #1 (2026-05-18) — trend bar color cues */
.pd-bar.pd-bar-red {
background: linear-gradient(to top, rgba(239,68,68,.85), rgba(239,68,68,.45));
border: 1px solid rgba(239,68,68,.55);
}
.pd-bar.pd-bar-green {
background: linear-gradient(to top, rgba(16,185,129,.85), rgba(16,185,129,.45));
border: 1px solid rgba(16,185,129,.55);
}
.pd-bar.pd-bar-purple {
background: linear-gradient(to top, rgba(124,58,237,.75), rgba(124,58,237,.35));
border: 1px solid rgba(124,58,237,.45);
}
.pd-bar-vallabel { color: var(--text-muted) !important; }
.pd-bar-red ~ .pd-bar-vallabel,
.pd-bar-wrap:has(.pd-bar-red) .pd-bar-vallabel { color: #dc2626 !important; font-weight: 800; }
.pd-bar-wrap:has(.pd-bar-green) .pd-bar-vallabel { color: #059669 !important; font-weight: 800; }