/* ============================================
VIV CLIENT PORTAL - COMPREHENSIVE STYLES
Brand-aligned design system
============================================ */
/* ============================================
DESIGN TOKENS (CSS Custom Properties)
============================================ */
:root {
/* Brand Colors */
--viv-primary: #034737; /* Primary brand green */
--viv-accent: #a9ff9b; /* Success/highlight accent */
--viv-text-primary: #000000; /* Primary text */
--viv-text-secondary: #777777; /* Secondary text/labels */
/* Surfaces & Backgrounds */
--viv-bg-page: #f4f7f3; /* Soft off-white page background */
--viv-bg-card: #ffffff; /* Pure white cards */
--viv-bg-neutral: #f4f4f4; /* Neutral background */
/* Semantic Colors */
--viv-border: #e2e8f0; /* Default borders */
--viv-border-light: #f1f5f9; /* Light borders */
--viv-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
--viv-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--viv-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
/* Typography Scale */
--viv-font-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--viv-font-mono: 'Space Mono', 'Courier New', monospace;
--viv-text-xs: 11px;
--viv-text-sm: 13px;
--viv-text-base: 16px; /* Body text */
--viv-text-lg: 18px;
--viv-text-xl: 22px; /* Section headers */
--viv-text-2xl: 28px;
--viv-text-3xl: 32px; /* Page titles */
--viv-text-4xl: 36px;
/* Spacing */
--viv-space-xs: 4px;
--viv-space-sm: 8px;
--viv-space-md: 16px;
--viv-space-lg: 24px;
--viv-space-xl: 32px;
--viv-space-2xl: 48px;
/* Border Radius */
--viv-radius-sm: 8px;
--viv-radius-md: 12px;
--viv-radius-lg: 16px;
--viv-radius-xl: 24px;
/* Transitions */
--viv-transition-fast: 0.15s ease;
--viv-transition-base: 0.2s ease;
--viv-transition-slow: 0.3s ease;
}
/* ============================================
DARK THEME - Blue-Grey Palette
============================================ */
html[data-theme="dark"] {
/* Blue-grey surfaces */
--viv-bg-page: #0f172a;
--viv-bg-card: #1a2332;
--viv-bg-neutral: #1e293b;
/* Text colors */
--viv-text-primary: #f1f5f9;
--viv-text-secondary: #94a3b8;
/* Borders */
--viv-border: #334155;
--viv-border-light: #475569;
/* Green accent */
--viv-primary: #10b981;
--viv-accent: #6ee7b7;
/* Shadows */
--viv-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
--viv-shadow-md: 0 4px 12px rgba(0,0,0,0.4);
--viv-shadow-lg: 0 10px 25px rgba(0,0,0,0.5);
}
/* Dark mode fixes for hard-coded light colors */
html[data-theme="dark"] body {
background: #0f172a;
color: #f1f5f9;
}
/* Header - card color */
html[data-theme="dark"] .header {
background: #1a2332 !important;
border-bottom: 1px solid #334155 !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}
/* All containers, cards, modals */
html[data-theme="dark"] .container,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .mobile-nav,
html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .content-wrapper {
background: var(--viv-bg-card) !important;
color: var(--viv-text-primary);
border-color: var(--viv-border);
}
/* Issue 2 & 8: Column backgrounds (billing, tables, etc.) */
html[data-theme="dark"] .billing-column,
html[data-theme="dark"] .contact-column,
html[data-theme="dark"] .info-column,
html[data-theme="dark"] .column,
html[data-theme="dark"] .col,
html[data-theme="dark"] .billing-card,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .info-card {
background: var(--viv-bg-card) !important;
border-color: var(--viv-border) !important;
}
/* Billing specific fixes */
html[data-theme="dark"] .billing-info,
html[data-theme="dark"] .payment-method,
html[data-theme="dark"] .billing-section,
html[data-theme="dark"] .payment-card {
background: var(--viv-bg-card) !important;
border-color: var(--viv-border) !important;
}
/* Contact tab fixes */
html[data-theme="dark"] .contact-info,
html[data-theme="dark"] .contact-section,
html[data-theme="dark"] .team-member-card {
background: var(--viv-bg-card) !important;
border-color: var(--viv-border) !important;
}
/* Form inputs */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
background: var(--viv-bg-neutral) !important;
color: var(--viv-text-primary) !important;
border-color: var(--viv-border) !important;
}
html[data-theme="dark"] ::placeholder {
color: rgba(245,243,239,0.45) !important;
}
/* Issue 3: Secondary buttons NOT white */
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn.btn-secondary,
html[data-theme="dark"] button.btn-secondary {
background: var(--viv-bg-neutral) !important;
color: var(--viv-text-primary) !important;
border-color: var(--viv-border) !important;
}
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn.btn-secondary:hover {
background: var(--viv-primary) !important;
color: #ffffff !important;
border-color: var(--viv-primary) !important;
}
/* Issue 4: Chat backgrounds when expanded - NO green tint */
html[data-theme="dark"] .request-chat-expanded {
background: #1a2332 !important;
}
html[data-theme="dark"] .chat-header {
background: #1e293b !important;
border-bottom-color: #334155 !important;
}
html[data-theme="dark"] .chat-messages {
background: #0f172a !important;
}
/* Issue 4: Open/Cancel request buttons area */
html[data-theme="dark"] .request-footer,
html[data-theme="dark"] .chat-footer,
html[data-theme="dark"] .request-actions {
background: transparent !important;
border-color: #334155 !important;
}
/* Issue 5: Recent requests hover effects - subtle */
html[data-theme="dark"] .request-item:hover,
html[data-theme="dark"] .request-card:hover {
background: #1e293b !important;
border-color: #475569 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
/* Homepage hero gradients - dark mode */
html[data-theme="dark"] .hero {
background: linear-gradient(135deg, #1a2332 0%, #1a2332 60%, rgba(16, 185, 129, 0.15) 100%) !important;
border: 1px solid #334155 !important;
}
html[data-theme="dark"] .hero::before {
background: radial-gradient(circle at 100% 0%, rgba(16, 185, 129, 0.12) 0%, transparent 50%) !important;
}
html[data-theme="dark"] .hero::after {
background: radial-gradient(circle at 0% 100%, rgba(59, 130, 246, 0.08) 0%, transparent 50%) !important;
}
html[data-theme="dark"] .hero-kpi:hover::before {
background: rgba(30, 41, 59, 0.6) !important;
}
/* Footer - card color like header */
html[data-theme="dark"] .portal-footer {
background: #1a2332 !important;
border-top: 1px solid #334155 !important;
}
/* Chart gridlines */
html[data-theme="dark"] .gridlines {
stroke: #334155 !important;
}
/* Tables */
html[data-theme="dark"] table tr:nth-child(even) {
background: rgba(30, 41, 59, 0.4) !important;
}
html[data-theme="dark"] table tr:hover {
background: rgba(51, 65, 85, 0.5) !important;
}
html[data-theme="dark"] table,
html[data-theme="dark"] thead,
html[data-theme="dark"] tbody {
background: var(--viv-bg-card) !important;
}
/* Stat cards */
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .stat-card-new {
background: var(--viv-bg-card) !important;
border-color: var(--viv-border) !important;
}
/* Dropdown menus */
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .select-menu,
html[data-theme="dark"] select option {
background: var(--viv-bg-card) !important;
color: var(--viv-text-primary) !important;
}
/* Make sure all white backgrounds are caught */
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:white"] {
background: var(--viv-bg-card) !important;
}
/* ============================================
RESET & BASE STYLES
============================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: var(--viv-font-primary);
}
body {
background: var(--viv-bg-page);
min-height: 100vh;
color: var(--viv-text-primary);
font-size: var(--viv-text-base);
line-height: 1.6;
}
.mono {
font-family: var(--viv-font-mono);
}
/* ============================================
UTILITY CLASSES
============================================ */
.hidden {
display: none !important;
}
/* Animations */
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-fade-in {
animation: fade-in var(--viv-transition-slow) ease-out;
}
.animate-spin {
animation: spin 1s linear infinite;
}
/* Hover Effects */
.button-hover {
transition: all var(--viv-transition-base);
}
.button-hover:hover {
transform: translateY(-2px);
}
.card-hover {
transition: all var(--viv-transition-base);
}
.card-hover:hover {
transform: translateY(-2px);
box-shadow: var(--viv-shadow-lg);
}
/* ============================================
HEADER
============================================ */
.header {
background: var(--viv-bg-card);
border-bottom: 1px solid var(--viv-border);
box-shadow: var(--viv-shadow-sm);
position: sticky;
top: 0;
z-index: 100;
}
.header-content {
max-width: 1400px;
margin: 0 auto;
padding: 1rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
/* Logo */
.header-logo {
flex-shrink: 0;
}
.viv-logo-img {
height: 40px;
width: auto;
display: block;
}
/* Logo link (clickable home) */
.viv-home-link{
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 12px;
}
.viv-home-link .viv-logo-img{
transition: transform 180ms ease, filter 180ms ease;
transform: translateY(0);
will-change: transform;
}
@media (hover:hover){
.viv-home-link:hover .viv-logo-img{
transform: translateY(-2px);
filter: drop-shadow(0 6px 10px rgba(0,0,0,0.15));
}
}
/* Mobile header logo (above business name) */
.mobile-header-logo{
display: none;
margin: 0 auto 6px auto;
width: fit-content;
}
.mobile-header-logo img{
height: 28px;
width: auto;
display: block;
}
/* Client Info (Center) */
.header-client-info {
flex: 1;
text-align: center;
min-width: 0;
}
.client-business-name {
display: none;
}
/* Client Portal Badge */
.client-portal-badge {
display: inline-flex;
align-items: center;
font-size: 10px;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 5px 12px;
background: #f1f5f9;
border-radius: 20px;
border: 1px solid #e2e8f0;
}
/* Old label - hidden */
.client-portal-label {
display: none;
}
.client-portal-label::before {
display: none;
}
/* Client Logo in Header */
.header-client-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
}
.header-client-wrapper:hover {
opacity: 0.9;
transition: opacity 0.2s ease;
}
.client-logo-img {
max-width: 140px;
max-height: 44px;
width: auto;
height: auto;
border-radius: 6px;
object-fit: contain;
background: transparent;
border: none;
box-shadow: none;
flex-shrink: 0;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.client-logo-img:hover {
transform: scale(1.02);
opacity: 0.9;
}
.client-logo-img.hidden {
display: none;
}
/* Logo loading placeholder */
.client-logo-img.logo-loading {
min-width: 100px;
min-height: 36px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: logoShimmer 1.5s infinite;
border-radius: 4px;
}
@keyframes logoShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Text container under logo */
.header-client-text {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Header Actions */
.header-actions {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 12px;
}
.logout-btn {
display: flex;
align-items: center;
gap: var(--viv-space-sm);
padding: 8px 16px;
background: var(--viv-bg-neutral);
color: var(--viv-text-secondary);
border: none;
border-radius: var(--viv-radius-sm);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all var(--viv-transition-base);
}
.logout-btn:hover {
background: var(--viv-border);
color: var(--viv-text-primary);
transform: translateY(-1px);
}
.logout-btn svg {
stroke-width: 2;
}
/* Icon-only logout button (matches theme toggle) */
.logout-btn-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--viv-bg-neutral);
border: 1px solid var(--viv-border);
border-radius: 10px;
color: var(--viv-text-secondary);
cursor: pointer;
transition: all 0.2s ease;
}
.logout-btn-icon:hover {
border-color: var(--viv-primary);
color: var(--viv-text-primary);
transform: translateY(-2px);
}
.logout-btn-icon svg {
stroke-width: 2;
}
/* ============================================
MAIN CONTAINER
============================================ */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 2rem 1.5rem;
}
.hero-kpi-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 20px;
}
.hero-kpi {
background: rgba(255,255,255,0.08);
border-radius: 12px;
padding: 16px 18px;
text-align: center;
backdrop-filter: blur(6px);
}
/* Hero KPI Icon Styles */
.hero-kpi-icon {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
margin: 0 auto 18px auto;
}
/* Shine hover effect for KPI cards */
.hero-kpi {
position: relative;
overflow: hidden;
}
.hero-kpi::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left 0.5s ease;
}
.hero-kpi:hover::before {
left: 100%;
}
.hero-kpi {
transition: transform 0.3s ease;
}
.hero-kpi:hover {
transform: translateY(-4px);
}
.hero-kpi-icon svg {
stroke: rgba(255, 255, 255, 0.9);
filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.3));
}
.hero-kpi-label {
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255,255,255,0.6);
margin-bottom: 6px;
}
.hero-kpi-value {
font-size: 28px;
font-weight: 700;
color: #ffffff;
line-height: 1.1;
}
.hero-kpi-sub {
font-size: 12px;
color: rgba(255,255,255,0.6);
margin-top: 4px;
}
/* ============================================
NAVIGATION TABS
============================================ */
.nav-tabs {
display: flex;
justify-content: space-between; /* Distribute tabs evenly */
gap: var(--viv-space-sm);
margin: 0 auto 1rem auto; /* Reduced from 2rem to 1rem */
max-width: 1400px;
padding: 0 1.5rem 0 1.5rem; /* Removed bottom padding */
overflow-x: auto;
}
.nav-tab {
padding: 14px 28px; /* Increased */
border-radius: var(--viv-radius-md);
font-weight: 600;
font-size: 16px; /* Increased */
border: none;
cursor: pointer;
white-space: nowrap;
display: flex;
align-items: center;
gap: var(--viv-space-sm);
position: relative;
transition: all var(--viv-transition-base);
flex: 1; /* Expand to fill space */
justify-content: center; /* Center text */
}
.nav-tab.active {
background: var(--viv-primary);
color: white;
box-shadow: 0 4px 12px rgba(3, 71, 55, 0.3);
}
.nav-tab.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48px;
height: 4px;
background: white;
border-radius: 4px 4px 0 0;
}
.nav-tab:not(.active) {
background: var(--viv-bg-card);
color: var(--viv-text-secondary);
border: 1px solid var(--viv-border);
}
.nav-tab:not(.active):hover {
background: var(--viv-bg-neutral);
color: var(--viv-text-primary);
transform: translateY(-4px); /* More pronounced float */
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); /* Stronger shadow */
}
/* ============================================
TAB CONTENT
============================================ */
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fade-in var(--viv-transition-slow) ease-out;
}
/* ============================================
CARDS
============================================ */
.card {
background: var(--viv-bg-card);
border-radius: var(--viv-radius-lg);
padding: var(--viv-space-lg);
border: 1px solid var(--viv-border);
margin-bottom: var(--viv-space-lg);
}
.card-title {
font-size: var(--viv-text-2xl);
font-weight: 700;
margin-bottom: var(--viv-space-md);
color: var(--viv-text-primary);
}
.card-title-row{
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
margin-bottom: var(--viv-space-md);
}
.card-title-row .card-title{
margin-bottom: 0;
}
.card-action-btn{
height: 42px;
padding: 0 18px;
border: 1px solid var(--viv-primary);
background: linear-gradient(135deg, var(--viv-primary), #045d42);
color: #ffffff;
border-radius: var(--viv-radius-md);
font-weight: 700;
font-size: 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all var(--viv-transition-base);
white-space: nowrap;
gap: 8px;
box-shadow: 0 8px 18px rgba(3, 71, 55, 0.18);
}
.card-action-btn:hover{
background: linear-gradient(135deg, #045d42, var(--viv-primary));
box-shadow: 0 10px 22px rgba(3, 71, 55, 0.22);
transform: translateY(-1px);
}
.card-action-btn:active{
transform: translateY(0);
box-shadow: 0 6px 14px rgba(3, 71, 55, 0.18);
}
/* ============================================
HERO SECTION
============================================ */
.hero {
background: linear-gradient(135deg, #0f172a, #1e293b, var(--viv-primary));
border-radius: var(--viv-radius-xl);
padding: var(--viv-space-2xl);
color: white;
position: relative;
overflow: hidden;
margin-bottom: var(--viv-space-lg);
}
.hero::before,
.hero::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.2;
}
.hero::before {
top: 0;
right: 0;
width: 384px;
height: 384px;
background: var(--viv-accent);
}
.hero::after {
bottom: 0;
left: 0;
width: 384px;
height: 384px;
background: #3b82f6;
}
.hero-content {
position: relative;
z-index: 10;
}
.hero h1 {
font-size: var(--viv-text-4xl);
font-weight: 800;
margin-bottom: var(--viv-space-sm);
}
.hero p {
font-size: var(--viv-text-lg);
color: #cbd5e1;
margin-bottom: var(--viv-space-xl);
}
/* ============================================
BROWSER SCREENSHOT FRAME
============================================ */
.browser-frame {
background: var(--viv-bg-card);
border-radius: var(--viv-radius-md);
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
border: 4px solid #334155;
}
.browser-chrome {
background: var(--viv-border-light);
padding: 12px 16px;
display: flex;
align-items: center;
gap: var(--viv-space-sm);
border-bottom: 1px solid #cbd5e1;
}
.browser-dots {
display: flex;
gap: 6px;
}
.browser-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.browser-dot.red {
background: #ef4444;
}
.browser-dot.yellow {
background: #eab308;
}
.browser-dot.green {
background: #22c55e;
}
.browser-url {
flex: 1;
background: var(--viv-bg-card);
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
color: var(--viv-text-secondary);
}
.browser-content {
background: var(--viv-border-light);
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.browser-content img {
width: 100%;
display: block;
}
/* Top Traffic Sources list */
.source-list {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 4px;
}
.source-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px;
background: var(--viv-bg-neutral);
border-radius: var(--viv-radius-md);
}
.source-left {
min-width: 0;
}
.source-name {
font-weight: 700;
color: var(--viv-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 240px;
}
.source-meta {
font-size: 12px;
color: var(--viv-text-secondary);
margin-top: 2px;
}
.source-right {
width: 180px;
text-align: right;
}
.source-sessions {
font-weight: 800;
color: var(--viv-primary);
margin-bottom: 6px;
}
.source-bar {
height: 8px;
background: var(--viv-border);
border-radius: 999px;
overflow: hidden;
}
.source-bar-fill {
height: 100%;
background: var(--viv-primary);
border-radius: 999px;
}
/* ============================================
STATS GRID
============================================ */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: var(--viv-space-lg);
}
.stat-card, .stat-card-new {
background: var(--viv-bg-card);
padding: 20px;
border-radius: var(--viv-radius-md);
border: 1px solid var(--viv-border);
transition: transform 0.25s ease, box-shadow 0.25s ease;
cursor: pointer;
}
.stat-card:hover, .stat-card-new:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(16, 185, 129, 0.18);
}
/* Icon above stat card - SVG version */
.stat-icon-svg {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.08));
color: var(--viv-primary);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px auto;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}
.stat-card:hover .stat-icon-svg {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.15));
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.25);
}
/* Green dash separator - now a real element after icon */
.stat-dash {
width: 40px;
height: 4px;
background: var(--viv-primary);
border-radius: 999px;
margin: 8px 0 12px 0;
}
.stat-icon-svg svg {
width: 32px;
height: 32px;
stroke: var(--viv-primary);
filter: drop-shadow(0 2px 6px rgba(16, 185, 129, 0.3));
stroke-width: 2.5;
}
/* Tooltip */
.stat-card::after, .stat-card-new::after {
content: attr(data-tooltip);
position: absolute;
bottom: -38px;
left: 50%;
transform: translateX(-50%);
background: #111827;
color: #fff;
font-size: 12px;
padding: 6px 10px;
border-radius: 6px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.stat-card:hover::after, .stat-card-new:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(4px);
}
.stat-icon {
width: 48px;
height: 48px;
border-radius: var(--viv-radius-md);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.stat-icon.emerald {
background: linear-gradient(135deg, #d1fae5, #a7f3d0);
color: var(--viv-primary);
}
.stat-icon.blue {
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
color: #2563eb;
}
.stat-icon.purple {
background: linear-gradient(135deg, #e9d5ff, #d8b4fe);
color: #9333ea;
}
.stat-value {
font-size: 28px;
font-weight: 700;
margin-bottom: 4px;
color: var(--viv-text-primary);
}
.stat-label {
font-size: 13px;
color: var(--viv-text-secondary);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
/* ============================================
CHARTS
============================================ */
.chart-container {
background: var(--viv-bg-card);
border-radius: var(--viv-radius-lg);
padding: var(--viv-space-lg);
border: 1px solid var(--viv-border);
}
.chart-header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-bottom: var(--viv-space-lg);
text-align: center;
}
.chart-title {
font-size: 24px;
font-weight: 800;
color: var(--viv-text-primary);
margin-bottom: 8px;
text-align: center;
text-transform: capitalize;
letter-spacing: 1.5px;
}
.chart-subtitle {
font-size: 15px;
color: var(--viv-text-secondary);
font-weight: 600;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
}
.chart-value {
font-size: var(--viv-text-3xl);
font-weight: 700;
color: var(--viv-primary);
}
.chart-tooltip {
position: absolute;
background: rgba(17, 24, 39, 0.95); /* dark slate */
color: #ffffff;
padding: 8px 12px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
pointer-events: none;
z-index: 9999;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.bar-chart {
height: 200px;
display: flex;
align-items: flex-end;
gap: 1px;
padding: var(--viv-space-md) var(--viv-space-sm);
background: linear-gradient(to top, #f0fdf4 0%, transparent 70%);
border-radius: var(--viv-radius-md);
position: relative;
}
.bar-chart::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 100%;
background-image:
linear-gradient(to top, rgba(0,0,0,0.05) 1px, transparent 1px);
background-size: 100% 25%;
pointer-events: none;
}
.bar {
flex: 1;
background: var(--viv-primary);
border-radius: 4px 4px 0 0;
transition: all var(--viv-transition-base);
cursor: pointer;
}
.bar:hover {
background: #045d42;
transform: scaleY(1.08);
box-shadow: 0 -4px 12px rgba(3, 71, 55, 0.25);
}
.bar-wrapper {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.bar-label {
font-size: 11px;
color: var(--viv-text-secondary);
white-space: nowrap;
}
.bar-label.spacer {
visibility: hidden;
}
/* Modern Traffic Bar Graph Styles */
.traffic-bar-list {
padding: 12px 0;
}
.traffic-bar-item {
margin-bottom: 20px;
transition: transform 0.2s ease;
}
.traffic-bar-item:hover {
transform: translateY(-2px);
}
.traffic-source-name {
font-size: 18px;
font-weight: 600;
color: var(--viv-text-primary);
margin-bottom: 2px;
}
.traffic-source-desc {
font-size: 15px;
color: var(--viv-text-secondary);
font-style: italic;
}
.traffic-sessions-number {
font-size: 16px;
font-weight: 700;
color: var(--viv-text-primary);
}
.traffic-bar-container {
height: 12px;
background: rgba(148, 163, 184, 0.1);
border-radius: 6px;
overflow: hidden;
position: relative;
}
.traffic-bar-fill {
height: 100%;
border-radius: 6px;
transition:
width 0.8s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.traffic-bar-item:hover .traffic-bar-fill {
transform: scaleY(1.2);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
/* Traffic bar track (WRAPPER) */
.traffic-bar-track {
width: 100%;
height: 12px;
background: rgba(148, 163, 184, 0.15);
border-radius: 6px;
overflow: hidden;
position: relative;
}
.pie-chart {
width: 100%;
max-width: 220px;
height: auto;
position: relative;
margin: 1px auto 1px auto;
}
.pie-center {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.pie-value {
font-size: var(--viv-text-3xl);
font-weight: 700;
}
.pie-label {
font-size: 15px;
color: var(--viv-text-secondary);
}
.pie-segment {
transition: stroke-dasharray 0.9s ease, stroke-dashoffset 0.9s ease, filter 0.2s ease;
}
/* ============================================
PROGRESS BARS
============================================ */
.progress-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--viv-bg-neutral);
border-radius: var(--viv-radius-md);
margin-bottom: 8px;
/* stack-down animation (initial state) */
opacity: 0;
transform: translateY(-6px);
transition:
opacity 0.35s ease,
transform 0.35s ease,
background-color 0.2s ease;
}
.progress-item.visible {
opacity: 1;
transform: translateY(0);
}
.progress-item:hover {
background: var(--viv-border-light);
}
.progress-rank {
width: 32px;
height: 32px;
background: #d1fae5;
border-radius: var(--viv-radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: var(--viv-primary);
font-size: 14px;
}
.progress-info {
flex: 1;
min-width: 0;
}
.progress-url {
font-weight: 600;
color: var(--viv-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.progress-views {
font-size: 16px;
color: var(--viv-text-secondary);
}
.progress-bar-container {
width: 128px;
height: 8px;
background: var(--viv-border);
border-radius: 4px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: var(--viv-primary);
border-radius: 4px;
transition: width var(--viv-transition-slow);
}
/* ============================================
FORMS
============================================ */
.form-group {
margin-bottom: var(--viv-space-lg);
}
.form-label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--viv-text-primary);
margin-bottom: var(--viv-space-sm);
}
.form-input,
.form-textarea,
.form-select {
width: 100%;
padding: 12px 16px;
border: 2px solid var(--viv-border);
border-radius: var(--viv-radius-md);
font-size: 15px;
font-family: inherit;
transition: all var(--viv-transition-base);
color: var(--viv-text-primary);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
border-color: var(--viv-primary);
box-shadow: 0 0 0 3px rgba(3, 71, 55, 0.1);
}
.form-textarea {
resize: vertical;
min-height: 150px;
}
.form-error {
color: #ef4444;
font-size: var(--viv-text-sm);
margin-top: 4px;
display: flex;
align-items: center;
gap: 4px;
}
/* Radio Groups */
.radio-group {
display: flex;
flex-direction: column;
gap: 12px;
}
.radio-option {
padding: var(--viv-space-md);
border: 2px solid var(--viv-border);
border-radius: var(--viv-radius-md);
cursor: pointer;
transition: all var(--viv-transition-base);
display: flex;
align-items: start;
gap: 12px;
}
.radio-option:hover {
border-color: var(--viv-primary);
}
.radio-option.selected {
border-color: var(--viv-primary);
background: #f0fdf4;
}
.radio-option input[type="radio"] {
margin-top: 2px;
}
.radio-title {
font-weight: 600;
color: var(--viv-text-primary);
margin-bottom: 4px;
}
.radio-description {
font-size: var(--viv-text-sm);
color: var(--viv-text-secondary);
}
/* File Upload */
.file-upload-area {
border: 2px dashed #cbd5e1;
border-radius: var(--viv-radius-md);
padding: var(--viv-space-xl);
text-align: center;
cursor: pointer;
transition: all var(--viv-transition-base);
}
.file-upload-area:hover {
border-color: var(--viv-primary);
background: #f0fdf4;
}
.file-upload-icon {
width: 48px;
height: 48px;
margin: 0 auto 12px;
opacity: 0.4;
}
.uploaded-files {
margin-top: var(--viv-space-md);
}
.uploaded-file {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px;
background: var(--viv-bg-neutral);
border-radius: var(--viv-radius-sm);
margin-bottom: var(--viv-space-sm);
}
.file-info {
display: flex;
gap: var(--viv-space-sm);
}
.file-size {
color: var(--viv-text-secondary);
font-size: var(--viv-text-sm);
}
.file-remove {
color: #ef4444;
background: none;
border: none;
cursor: pointer;
padding: 4px;
font-size: 18px;
}
/* ============================================
BUTTONS
============================================ */
.btn {
padding: 12px 24px;
border: none;
border-radius: var(--viv-radius-md);
font-size: 15px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--viv-space-sm);
transition: all var(--viv-transition-base);
}
.btn-primary {
background: var(--viv-primary);
color: white;
box-shadow: 0 4px 12px rgba(3, 71, 55, 0.3);
}
.btn-primary:hover {
background: #045d42;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(3, 71, 55, 0.4);
}
.btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.btn-secondary {
background: var(--viv-bg-neutral);
color: var(--viv-text-secondary);
}
.btn-secondary:hover {
background: var(--viv-border);
color: var(--viv-text-primary);
}
.btn-sm {
padding: 6px 12px;
font-size: var(--viv-text-sm);
}
/* ============================================
METHOD SELECTION CARDS
============================================ */
.method-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--viv-space-lg);
}
.method-card {
padding: var(--viv-space-xl);
border: 2px solid var(--viv-border);
border-radius: var(--viv-radius-lg);
cursor: pointer;
transition: all var(--viv-transition-base);
text-align: left;
}
.method-card:hover {
border-color: var(--viv-primary);
box-shadow: var(--viv-shadow-md);
transform: translateY(-4px);
}
.method-icon {
width: 48px;
height: 48px;
background: #d1fae5;
border-radius: var(--viv-radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--viv-primary);
margin-bottom: var(--viv-space-md);
}
.method-card:hover .method-icon {
background: #a7f3d0;
}
.method-title {
font-size: 20px;
font-weight: 700;
margin-bottom: var(--viv-space-sm);
color: var(--viv-text-primary);
}
.method-description {
color: var(--viv-text-secondary);
margin-bottom: var(--viv-space-md);
font-size: 15px;
line-height: 1.35;
}
.method-features {
list-style: disc;
padding-left: 20px;
font-size: 15px;
color: var(--viv-text-secondary);
}
.method-note {
margin-top: 8px;
font-size: 15px;
color: var(--viv-text-secondary);
line-height: 1.35;
}
.method-features li {
margin-bottom: 4px;
}
.method-features li::before {
content: none !important;
}
.method-features li::marker {
color: var(--viv-primary);
}
/* Request method subtitle under "How would you like to submit your request?" */
.request-method-subtitle{
margin: 0 0 28px 0;
color: #64748b;
text-align: left;
font-size: 16px;
line-height: 1.35;
}
/* ============================================
REQUEST FILTERS
============================================ */
.request-filters {
display: flex;
gap: var(--viv-space-md);
margin-bottom: var(--viv-space-lg);
flex-wrap: wrap;
}
.search-box {
flex: 1;
min-width: 250px;
position: relative;
}
.search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
width: 20px;
height: 20px;
}
.search-box input {
width: 100%;
padding: 10px 12px 10px 40px;
border: 2px solid var(--viv-border);
border-radius: 10px;
font-size: 14px;
}
.search-box input:focus {
outline: none;
border-color: var(--viv-primary);
}
.filter-buttons {
display: flex;
gap: var(--viv-space-sm);
flex-wrap: wrap;
}
.filter-btn {
padding: 10px 16px;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: all var(--viv-transition-base);
}
.filter-btn.active {
background: var(--viv-primary);
color: white;
}
.filter-btn:not(.active) {
background: var(--viv-bg-neutral);
color: var(--viv-text-secondary);
}
.filter-btn:not(.active):hover {
background: var(--viv-border);
}
/* ============================================
REQUEST ITEMS
============================================ */
.request-item {
position: relative;
overflow: visible;
background: var(--viv-bg-card);
padding: var(--viv-space-lg);
border-radius: var(--viv-radius-lg);
border: 1px solid var(--viv-border);
margin-bottom: var(--viv-space-md);
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
cursor: pointer;
}
.request-item:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
transform: translateY(-4px) !important;
background: #ffffff !important;
border-color: #d1d5db !important;
}
.request-header {
display: flex;
justify-content: space-between;
align-items: start;
margin-bottom: 12px;
}
.request-title-row {
display: flex;
align-items: start;
gap: 12px;
}
.request-icon {
width: 20px;
height: 20px;
margin-top: 2px;
color: var(--viv-primary);
}
.request-title {
font-size: var(--viv-text-lg);
font-weight: 700;
color: var(--viv-text-primary);
}
.request-description {
color: var(--viv-text-secondary);
margin-top: 4px;
font-size: 14px;
}
.status-badge {
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status-badge.pending,
.status-badge.open,
.status-badge.Open {
background: #d1fae5;
color: #065f46;
}
.status-badge.in-progress,
.status-badge.In.Progress {
background: #fef3c7;
color: #92400e;
}
.status-badge.completed,
.status-badge.Completed {
background: #d1fae5;
color: #065f46;
}
.status-badge.cancelled,
.status-badge.canceled {
background: #fee2e2;
color: #991b1b;
border: 1px solid #fecaca;
}
/* Waiting on Client / Needs Your Response — attention red, on-brand */
.status-badge.waiting,
.status-badge.waiting-on-client,
.status-badge.waiting-on-you,
.status-badge.needs-your-response,
.status-badge[class*="waiting"] {
background: linear-gradient(135deg, #fee2e2, #fecaca);
color: #991b1b;
border: 1px solid #fca5a5;
}
/* Match the status dot to Needs Your Response red */
.status-badge.waiting::before,
.status-badge.waiting-on-client::before,
.status-badge.waiting-on-you::before,
.status-badge.needs-your-response::before,
.status-badge[class*="waiting"]::before {
background-color: #ef4444;
}
/* On Hold - Gray */
.status-badge.hold,
.status-badge.on-hold,
.status-badge[class*="hold"] {
background: #e5e7eb;
color: #374151;
}
/* Status-based colored borders for request items */
.request-item[data-status="open"],
.request-item[data-status="Open"] {
border-left: 4px solid #10b981 !important;
background: linear-gradient(to right, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
}
.request-item[data-status="in-progress"],
.request-item[data-status="In Progress"],
.request-item[data-status="in progress"] {
border-left: 4px solid #f59e0b !important;
background: linear-gradient(to right, rgba(245, 158, 11, 0.05) 0%, transparent 50%);
}
/* Card emphasis for Needs Your Response */
.request-item[data-status="waiting-on-client"],
.request-item[data-status="Waiting on Client"],
.request-item[data-status="waiting on client"] {
border-left: 4px solid #ef4444 !important;
background: linear-gradient(
to right,
rgba(239, 68, 68, 0.06) 0%,
transparent 55%
);
}
.request-item[data-status="completed"],
.request-item[data-status="Completed"] {
border-left: 4px solid #059669 !important;
background: linear-gradient(to right, rgba(5, 150, 105, 0.05) 0%, transparent 50%);
opacity: 0.85;
}
.request-item[data-status="on-hold"],
.request-item[data-status="On Hold"],
.request-item[data-status="on hold"] {
border-left: 4px solid #6b7280 !important;
background: linear-gradient(to right, rgba(107, 114, 128, 0.05) 0%, transparent 50%);
}
.request-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--viv-space-md);
padding-top: var(--viv-space-md);
border-top: 1px solid var(--viv-border-light);
}
.request-meta {
display: flex;
gap: var(--viv-space-md);
font-size: var(--viv-text-sm);
color: var(--viv-text-secondary);
}
.meta-separator {
color: var(--viv-text-secondary);
margin: 0 8px;
opacity: 0.6;
}
.priority-badge {
padding: 4px 8px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
}
.priority-badge.standard,
.priority-badge.Standard {
background: var(--viv-bg-neutral);
color: var(--viv-text-secondary);
}
.priority-badge.urgent,
.priority-badge.Urgent {
background: #fee2e2;
color: #991b1b;
}
/* ============================================
BILLING
============================================ */
.billing-row {
background: var(--viv-bg-card);
border-radius: 14px;
padding: 18px 20px;
margin-bottom: 12px;
cursor: pointer;
transition: all var(--viv-transition-base);
border: 1px solid var(--viv-border);
}
.billing-row:hover {
transform: translateY(-2px);
box-shadow: var(--viv-shadow-md);
}
.billing-row-main {
display: flex;
justify-content: space-between;
align-items: center;
}
.billing-row-left {
display: flex;
flex-direction: column;
gap: 6px;
}
.billing-title {
font-size: var(--viv-text-lg);
font-weight: 700;
color: var(--viv-text-primary);
}
.billing-learn {
font-size: var(--viv-text-sm);
font-weight: 600;
color: var(--viv-text-secondary);
display: flex;
align-items: center;
gap: 6px;
}
.chevron {
font-size: 14px;
}
.billing-price {
font-size: 20px;
font-weight: 800;
color: var(--viv-primary);
white-space: nowrap;
}
.billing-details {
margin-top: 12px;
font-size: 14px;
color: var(--viv-text-secondary);
line-height: 1.6;
display: none;
}
.billing-details.open {
display: block;
}
/* Service description formatting */
.billing-details h4 {
font-size: 15px;
font-weight: 600;
color: var(--viv-text-primary);
margin: 16px 0 8px 0;
}
.billing-details h4:first-child {
margin-top: 0;
}
.billing-details ul {
margin: 0 0 12px 0;
padding-left: 20px;
list-style-type: disc;
}
.billing-details ul li {
margin-bottom: 6px;
line-height: 1.5;
color: var(--viv-text-secondary);
}
.billing-details ul li:last-child {
margin-bottom: 0;
}
/* ============================================
CONTACT CARDS
============================================ */
/* Contact tab header spacing (desktop + general) */
.contact-title{
margin-bottom: 2px;
}
.contact-subtitle{
margin: 0 0 26px 0;
color: var(--viv-text-secondary);
text-align: left;
font-size: 16px;
line-height: 1.35;
}
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--viv-space-lg);
}
.contact-card {
padding: var(--viv-space-xl);
border-radius: var(--viv-radius-lg);
border: 2px solid;
}
.contact-card.manager {
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
border-color: #a7f3d0;
}
.contact-card.sales {
background: linear-gradient(135deg, #eff6ff, #dbeafe);
border-color: #bfdbfe;
}
.contact-badge {
font-size: var(--viv-text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: var(--viv-space-md);
}
.contact-card.manager .contact-badge {
color: var(--viv-primary);
}
.contact-card.sales .contact-badge {
color: #2563eb;
}
.contact-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--viv-space-md);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
font-size: 28px;
font-weight: 700;
color: white;
}
.contact-card.manager .contact-avatar {
background: linear-gradient(135deg, var(--viv-primary), #045d42);
}
.contact-card.sales .contact-avatar {
background: linear-gradient(135deg, #3b82f6, #2563eb);
}
.contact-name {
font-size: var(--viv-text-2xl);
font-weight: 700;
margin-bottom: 4px;
color: var(--viv-text-primary);
}
.contact-role {
font-size: 14px;
color: var(--viv-text-secondary);
margin-bottom: 20px;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 12px;
}
.contact-link {
display: flex;
align-items: center;
gap: 10px;
color: inherit;
text-decoration: none;
font-weight: 600;
font-size: 14px;
}
.contact-card.manager .contact-link {
color: #047857;
}
.contact-card.sales .contact-link {
color: #1d4ed8;
}
.contact-link:hover {
text-decoration: underline;
}
/* ============================================
LOADING STATES
============================================ */
.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--viv-bg-page);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1000;
}
.loading {
text-align: center;
padding: 80px 20px;
}
.spinner,
.spinner-circle {
width: 48px;
height: 48px;
border: 4px solid var(--viv-border);
border-top-color: var(--viv-primary);
border-radius: 50%;
margin: 0 auto 20px;
animation: spin 0.8s linear infinite;
}
.loading-spinner {
margin-bottom: 20px;
}
.loading-screen p,
.loading p {
color: var(--viv-text-secondary);
font-size: var(--viv-text-lg);
font-weight: 500;
}
/* VIV Loading Bar */
.viv-loading-bar {
position: relative;
width: 100%;
height: 4px;
background: var(--viv-border);
border-radius: 999px;
overflow: hidden;
margin: var(--viv-space-lg) 0;
}
/* Loading bar shown inside open chat while refreshing messages */
.viv-loading-bar.chat-loading {
margin: 0 0 12px 0;
height: 3px;
}
.viv-loading-bar::after {
content: '';
position: absolute;
top: 0;
left: -40%;
width: 40%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
var(--viv-primary),
var(--viv-accent),
var(--viv-primary),
transparent
);
animation: viv-loading-slide 1.2s ease-in-out infinite;
}
@keyframes viv-loading-slide {
0% {
left: -40%;
}
100% {
left: 100%;
}
}
/* ============================================
EMPTY STATES
============================================ */
.empty-state {
text-align: center;
padding: 60px 20px;
}
.empty-icon {
width: 64px;
height: 64px;
margin: 0 auto var(--viv-space-md);
opacity: 0.4;
color: var(--viv-text-secondary);
}
.empty-text {
font-size: var(--viv-text-xl);
font-weight: 600;
color: var(--viv-text-secondary);
margin-bottom: var(--viv-space-md);
}
.empty-state p {
color: var(--viv-text-secondary);
margin-bottom: var(--viv-space-md);
}
/* ============================================
QUICK ACTION CARDS
============================================ */
.quick-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--viv-space-md);
margin-top: var(--viv-space-xl);
}
.quick-action {
padding: 20px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--viv-radius-lg);
cursor: pointer;
transition: all var(--viv-transition-base);
color: white;
text-align: left;
}
.quick-action:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.quick-action-icon {
width: 40px;
height: 40px;
margin-bottom: 12px;
}
.quick-action h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 6px;
}
.quick-action p {
font-size: 15px;
opacity: 0.8;
}
/* ============================================
INLINE CHAT STYLES
============================================ */
.request-chat-expanded {
background: #f0fdf4 !important;
border-left: 3px solid var(--viv-primary) !important;
}
.request-chat-detail {
background: var(--viv-bg-card);
border: 1px solid var(--viv-border);
border-top: none;
border-radius: 0 0 12px 12px;
overflow: hidden;
animation: slideDown 0.2s ease-out;
margin-bottom: var(--viv-space-md);
}
@keyframes slideDown {
from {
opacity: 0;
max-height: 0;
}
to {
opacity: 1;
max-height: 800px;
}
}
/* Chat Header Summary */
.chat-header-summary {
padding: 20px;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-bottom: 2px solid #e2e8f0;
border-radius: 12px 12px 0 0;
}
.chat-header-title {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.request-number {
font-size: 14px;
font-weight: 700;
color: #64748b;
background: white;
padding: 4px 10px;
border-radius: 6px;
border: 1px solid #cbd5e1;
}
.chat-header-title h3 {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #1e293b;
}
.chat-header-meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.meta-separator {
color: #cbd5e1;
font-weight: 600;
}
.request-type {
font-size: 13px;
color: #64748b;
font-weight: 500;
}
.chat-header-dates {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #64748b;
}
.chat-conversation {
display: flex;
flex-direction: column;
border-radius: 0 0 var(--viv-radius-lg) var(--viv-radius-lg);
overflow: hidden;
}
.chat-messages-inline {
max-height: 500px;
overflow-y: auto;
padding: 20px;
background: var(--viv-bg-neutral);
display: flex;
flex-direction: column;
gap: var(--viv-space-md);
}
.chat-messages-inline::-webkit-scrollbar {
width: 6px;
}
.chat-messages-inline::-webkit-scrollbar-track {
background: var(--viv-border-light);
border-radius: 3px;
}
.chat-messages-inline::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}
.chat-messages-inline::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
.message-inline {
display: flex;
gap: 12px;
align-items: flex-start;
animation: fadeInUp var(--viv-transition-slow) ease-out;
}
.message-inline.client {
flex-direction: row-reverse;
justify-content: flex-start;
}
.message-inline-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
color: white;
flex-shrink: 0;
}
.message-inline.client .message-inline-avatar {
background: linear-gradient(135deg, #3b82f6, #2563eb);
}
.message-inline.team .message-inline-avatar {
background: linear-gradient(135deg, var(--viv-primary), #045d42);
}
.message-inline-content {
flex: 1;
max-width: calc(100% - 48px);
display: flex;
flex-direction: column;
min-width: 0;
}
.message-inline-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.message-inline.client .message-inline-header {
flex-direction: row-reverse;
}
.message-inline-sender {
font-size: var(--viv-text-sm);
font-weight: 600;
color: var(--viv-text-secondary);
}
.message-inline.client .message-inline-sender {
color: #3b82f6;
}
.message-inline.team .message-inline-sender {
color: var(--viv-primary);
}
.message-inline-time {
font-size: 11px;
color: #94a3b8;
white-space: nowrap;
}
.message-inline-text {
padding: 12px 16px;
border-radius: 20px;
word-wrap: break-word;
white-space: pre-wrap;
line-height: 1.45;
font-size: 15px;
max-width: 520px;
}
.message-inline.team {
padding-right: 40px;
}
.chat-messages-inline {
gap: 12px; /* was var(--viv-space-md) */
}
.message-inline.client .message-inline-text {
margin-left: auto;
}
.message-inline.team .message-inline-text {
margin-right: auto;
}
.message-inline.client .message-inline-text {
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: white;
border-bottom-right-radius: 4px;
}
.message-inline.team .message-inline-text {
background: linear-gradient(135deg, var(--viv-primary), #045d42);
color: white;
border-bottom-left-radius: 4px;
}
/* File Attachment Styles */
.message-attachment {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
margin-top: 8px;
background: #f8f9fa;
border: 1px solid #e2e8f0;
border-radius: 8px;
transition: all 0.2s;
}
.message-attachment:hover {
background: #f1f5f9;
border-color: #cbd5e1;
}
.message-inline.client .message-attachment {
background: #eff6ff;
border-color: #dbeafe;
}
.message-inline.client .message-attachment:hover {
background: #dbeafe;
border-color: #bfdbfe;
}
.attachment-icon {
flex-shrink: 0;
color: #64748b;
}
.message-inline.client .attachment-icon {
color: #3b82f6;
}
.attachment-info {
flex: 1;
min-width: 0;
}
.attachment-name {
font-weight: 500;
color: #1e293b;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.attachment-size {
font-size: 12px;
color: #64748b;
margin-top: 2px;
}
.attachment-download {
flex-shrink: 0;
padding: 8px;
color: #64748b;
background: white;
border: 1px solid #e2e8f0;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.attachment-download:hover {
background: #f8f9fa;
color: #1e293b;
border-color: #cbd5e1;
}
.message-inline.client .attachment-download {
background: #eff6ff;
border-color: #dbeafe;
color: #3b82f6;
}
.message-inline.client .attachment-download:hover {
background: #dbeafe;
border-color: #bfdbfe;
}
/* System notification messages (status changes) */
.system-message {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 24px;
margin: 20px auto;
max-width: 400px;
background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%);
border-radius: 24px;
font-size: 14px;
color: #00695c;
font-weight: 600;
box-shadow: 0 2px 8px rgba(0, 105, 92, 0.15);
text-align: center;
}
.system-message svg {
flex-shrink: 0;
width: 18px;
height: 18px;
color: #00897b;
}
.chat-input-inline {
padding: var(--viv-space-md) 20px;
background: var(--viv-bg-card);
border-top: 1px solid var(--viv-border);
display: flex;
flex-direction: column;
gap: 10px;
align-items: stretch;
}
.chat-input-inline textarea {
flex: 1;
min-height: 52px;
max-height: 120px;
padding: 10px 14px;
border: 1px solid var(--viv-border);
border-radius: var(--viv-radius-md);
font-family: inherit;
font-size: 15px;
resize: none;
transition: all var(--viv-transition-base);
}
.chat-input-inline textarea:focus {
outline: none;
border-color: var(--viv-primary);
box-shadow: 0 0 0 3px rgba(3, 71, 55, 0.1);
}
/* Reply input row (attach + textarea + send) */
.chat-reply-row {
display: flex;
gap: 10px;
align-items: stretch;
}
.chat-reply-textarea {
flex: 1;
min-width: 0;
min-height: 48px;
resize: vertical;
}
.chat-attach-btn.btn-icon-attachment {
width: 48px;
height: 48px;
border-radius: var(--viv-radius-md);
display: inline-flex;
align-items: center;
justify-content: center;
}
.chat-attach-btn.btn-icon-attachment:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Attached file preview chips (above reply row) */
.chat-reply-file-preview {
display: none;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
align-items: center;
}
.chat-attach-summary {
font-size: 13px;
color: #0f766e;
background: #ecfeff;
border: 1px solid #a5f3fc;
padding: 6px 10px;
border-radius: 999px;
font-weight: 600;
}
/* Optimistic "uploading" chips inside message bubble */
.message-inline-attachments {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.attachment-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid #e2e8f0;
background: #f8fafc;
max-width: 100%;
}
.message-inline.client .attachment-chip {
background: #ecfdf5;
border-color: #a7f3d0;
}
.attachment-icon {
flex-shrink: 0;
}
.attachment-badge {
font-size: 12px;
opacity: 0.8;
margin-left: 2px;
}
.chat-input-inline .chat-send-btn {
padding: 0 22px;
height: 52px;
min-width: 120px;
background: var(--viv-primary);
color: white;
border: none;
border-radius: var(--viv-radius-md);
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all var(--viv-transition-base);
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* Small spinner used inside buttons (e.g., Send Reply) */
.btn-spinner{
width:16px;
height:16px;
border:2px solid rgba(255,255,255,0.35);
border-top-color:#ffffff;
border-radius:50%;
display:inline-block;
vertical-align:middle;
margin:0;
animation: spin 0.8s linear infinite;
flex: 0 0 auto;
}
.chat-input-inline .chat-send-btn:hover:not(:disabled) {
background: #045d42;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(3, 71, 55, 0.3);
}
.chat-input-inline .chat-send-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================
ICONS
============================================ */
.icon {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
}
/* ============================================
RESPONSIVE DESIGN
============================================ */
/* ============================================
HERO CHART - MOBILE FIRST (DEFAULT = SCROLLABLE)
============================================ */
.hero-chart-container {
position: relative;
width: 100%;
max-width: 100%;
margin: 24px 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
.hero-chart-scroll {
display: inline-block;
}
.hero-chart-svg {
display: block;
max-width: none;
height: 290px !important;
}
/* Keep the subtitle on one line so it doesn’t wrap awkwardly */
.hero-subtitle {
white-space: nowrap !important;
}
/* Desktop: no horizontal scrollbar; chart fills the hero width */
@media (min-width: 1024px) {
.hero-chart-container {
overflow-x: hidden !important;
}
.hero-chart-scroll {
width: 100% !important;
min-width: 0 !important;
}
.hero-chart-svg {
width: 100% !important;
}
}
@media (max-width: 768px) {
/* Header Mobile */
.header-content {
gap: 1rem;
padding: 0.75rem 1rem;
}
.viv-logo-img {
height: 32px;
}
.client-business-name {
display: none;
}
.client-portal-badge {
display: none;
}
.client-portal-label {
display: none;
}
.client-portal-label::before {
display: none;
}
.client-logo-img {
max-width: 120px;
max-height: 40px;
}
.header-client-wrapper {
flex-direction: column;
align-items: center;
}
.header-client-text {
display: flex;
align-items: center;
}
.logout-btn {
padding: 6px 12px;
font-size: var(--viv-text-sm);
}
.logout-btn svg {
width: 16px;
height: 16px;
}
.container {
padding: 1rem;
}
.hero {
padding: var(--viv-space-xl) var(--viv-space-lg);
}
.hero h1 {
font-size: 28px;
}
.stats-grid {
grid-template-columns: 1fr;
}
.method-grid {
grid-template-columns: 1fr;
}
.contact-grid {
grid-template-columns: 1fr;
}
.request-filters {
flex-direction: column;
}
.search-box {
min-width: 100%;
}
.chat-messages-inline {
max-height: 400px;
padding: var(--viv-space-md);
align-items: stretch;
}
.message-inline-avatar {
width: 32px;
height: 32px;
font-size: 12px;
}
.chat-input-inline {
padding: 12px var(--viv-space-md);
flex-direction: row;
align-items: center;
}
.chat-input-inline button {
width: auto;
}
}
/* Stats grid cards — make them pop */
#stats-grid-container {
text-align: center;
}
.stat-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 28px 20px;
background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
border-radius: 16px;
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.stat-value {
font-size: 36px;
font-weight: 800;
color: var(--viv-primary);
line-height: 1;
margin-bottom: 6px;
}
.stat-label {
font-size: 24px;
font-weight: 700;
text-transform: capitalize;
letter-spacing: 0.04em;
color: var(--viv-text-primary);
}
.stat-subtext {
margin-top: 6px;
font-size: 13px;
font-style: italic;
color: var(--viv-text-secondary);
text-align: center;
line-height: 1.4;
}
/* Disable stat card tooltips (no hover popups) */
.stat-card::after,
.stat-card::before,
.stat-card-new::after,
.stat-card-new::before {
display: none !important;
content: none !important;
}
/* Device breakdown legend under pie chart */
.device-breakdown-item {
font-size: 22px; /* was ~13px */
font-weight: 600;
}
.device-breakdown-item span {
font-size: 16px;
}
.device-breakdown-item .device-percent {
font-weight: 700;
}
/* Device breakdown text under pie chart */
.progress-item .progress-url {
font-size: 18px; /* was ~14px */
font-weight: 700;
}
.progress-item .progress-views {
font-size: 16px; /* was ~12px */
font-weight: 600;
}
/* ============================================
PORTAL-SPECIFIC OVERRIDES
============================================ */
.portal-container {
min-height: 100vh;
}
/* Ensure nav tabs center correctly */
.nav-tabs {
justify-content: center;
}
/* Make sure cards don't have zebra stripes */
.card + .card {
margin-top: 0;
}
/* ===== FILE ATTACHMENTS STYLING (ENHANCED) ===== */
.message-attachments {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
.attachment-file,
.attachment-image {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
text-decoration: none;
color: #1e293b;
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease;
max-width: fit-content;
}
.attachment-file:hover,
.attachment-image:hover {
background: #f1f5f9;
border-color: #cbd5e1;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.attachment-file {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Client message attachments (right side, blue theme) */
.message-inline.client .message-attachments {
align-items: flex-end;
}
.message-inline.client .attachment-file,
.message-inline.client .attachment-image {
background: #eff6ff;
border-color: #bfdbfe;
color: #1e40af;
}
.message-inline.client .attachment-file:hover,
.message-inline.client .attachment-image:hover {
background: #dbeafe;
border-color: #93c5fd;
}
/* Team message attachments (left side, green theme) */
.message-inline.team .message-attachments {
align-items: flex-start;
}
.message-inline.team .attachment-file,
.message-inline.team .attachment-image {
background: #f0fdf4;
border-color: #bbf7d0;
color: #15803d;
}
.message-inline.team .attachment-file:hover,
.message-inline.team .attachment-image:hover {
background: #dcfce7;
border-color: #86efac;
}
/* Image attachments special styling */
.attachment-image {
padding: 0;
overflow: hidden;
max-width: 300px;
}
.attachment-image img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
}
/* File type icon colors */
.file-icon {
font-size: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.file-icon .paperclip-svg {
width: 18px;
height: 18px;
display: block;
}
.file-icon.pdf { color: #dc2626; }
.file-icon.doc,
.file-icon.docx { color: #2563eb; }
.file-icon.xls,
.file-icon.xlsx { color: #16a34a; }
.file-icon.zip { color: #9333ea; }
.file-icon.txt { color: #64748b; }
/* Attachment disclaimer text */
.attachment-disclaimer {
font-size: 11px;
color: #64748b;
font-style: italic;
margin-top: 4px;
}
.message-inline.client .attachment-disclaimer {
text-align: right;
}
.message-inline.team .attachment-disclaimer {
text-align: left;
}
/* File extension badge styling */
.file-ext-badge {
display: inline-block;
padding: 2px 6px;
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-left: auto;
}
.message-inline.client .file-ext-badge {
background: rgba(59, 130, 246, 0.2);
color: #1e40af;
}
.message-inline.team .file-ext-badge {
background: rgba(34, 197, 94, 0.2);
color: #15803d;
}
.attachment-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Reply attachment button */
.btn-icon-attachment {
width: 40px;
height: 40px;
border-radius: 8px;
border: 1px solid #e2e8f0;
background: white;
color: #64748b;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
flex-shrink: 0;
}
.btn-icon-attachment:hover {
background: #f8fafc;
color: #0f766e;
border-color: #0f766e;
}
/* File chips */
.file-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-size: 13px;
color: #475569;
}
.file-chip-icon {
font-size: 16px;
}
.file-chip-name {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-chip-remove {
width: 18px;
height: 18px;
border-radius: 50%;
border: none;
background: #cbd5e1;
color: white;
font-size: 14px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.file-chip-remove:hover {
background: #94a3b8;
}
/* Reply bar sizing tweak (shorter but aligned) */
.chat-reply-textarea { min-height: 48px; }
.chat-attach-btn.btn-icon-attachment { width: 48px; height: 48px; }
.chat-send-btn { min-height: 48px; height: 48px; padding: 0 18px; }
/* Paperclip icon sizing */
.chat-attach-btn .paperclip-svg {
width: 20px;
height: 20px;
display: block;
}
/* Chat actions (Cancel Request) */
.chat-actions-bar{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 14px;
border-bottom:1px solid #e2e8f0;
background:#f8fafc;
}
.chat-actions-status{
display:inline-flex;
align-items:center;
padding:6px 12px;
border-radius:999px;
font-size:12px;
font-weight:800;
letter-spacing:.02em;
color:#065f46;
background:#d1fae5;
border:1px solid rgba(6,95,70,.15);
}
.chat-cancel-btn{
height:32px;
padding:0 14px;
border-radius:999px;
font-weight:800;
font-size:13px;
border:1px solid rgba(153,27,27,.25);
background:#ffffff;
color:#991b1b;
cursor:pointer;
transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.chat-cancel-btn:hover{
background:#fff1f2;
box-shadow:0 8px 18px rgba(153,27,27,.12);
transform:translateY(-1px);
}
.chat-cancel-btn:active{ transform:translateY(0); box-shadow:none; }
/* Modal (Cancel Request) */
.modal-overlay{
position:fixed;
inset:0;
background:rgba(15,23,42,.55);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
padding:16px;
}
.modal{
width:min(560px, 100%);
background:#ffffff;
border-radius:16px;
box-shadow:0 20px 60px rgba(0,0,0,.25);
overflow:hidden;
}
.modal-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 18px;
border-bottom:1px solid #e2e8f0;
}
.modal-header h3{
margin:0;
font-size:18px;
font-weight:800;
color:#0f172a;
}
.modal-close{
width:36px;
height:36px;
border-radius:10px;
border:1px solid #e2e8f0;
background:#f8fafc;
font-size:22px;
line-height:1;
cursor:pointer;
}
.modal-body{
padding:16px 18px;
}
.modal-subtext{
margin:0 0 12px 0;
color:#475569;
font-size:14px;
}
.modal-label{
display:block;
font-size:13px;
font-weight:700;
color:#0f172a;
margin-bottom:6px;
}
.modal-textarea{
width:100%;
border:1px solid #cbd5e1;
border-radius:12px;
padding:10px 12px;
font-size:14px;
outline:none;
resize:vertical;
}
.modal-textarea:focus{
border-color:#10b981;
box-shadow:0 0 0 4px rgba(16,185,129,.15);
}
.modal-warning{
margin-top:12px;
padding:10px 12px;
border-radius:12px;
background:#fff7ed;
border:1px solid #fed7aa;
color:#9a3412;
font-size:13px;
}
.modal-footer{
display:flex;
justify-content:flex-end;
gap:10px;
padding:14px 18px;
border-top:1px solid #e2e8f0;
background:#f8fafc;
}
.btn.btn-secondary{
background:#ffffff;
border:1px solid #cbd5e1;
color:#0f172a;
}
.btn.btn-danger{
background:#dc2626;
border:1px solid #b91c1c;
color:#ffffff;
}
.btn.btn-danger:hover{
filter:brightness(.95);
}
/* Unread notifications badge (My Requests) */
.nav-tab { position: relative; }
.nav-notif-badge {
position: absolute;
top: 0;
right: 0;
transform: translate(45%, -45%);
background: #ef4444;
color: #fff;
font-weight: 800;
font-size: 12px;
height: 20px;
min-width: 20px;
padding: 0 6px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
box-shadow: 0 6px 16px rgba(0,0,0,0.18);
border: 2px solid #ffffff;
pointer-events: none;
}
/* Unread badge on individual request cards */
.request-notif-badge {
position: absolute;
top: 0;
right: 0;
transform: translate(45%, -45%);
background: #ef4444;
color: #fff;
font-weight: 800;
font-size: 12px;
height: 20px;
min-width: 20px;
padding: 0 6px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
box-shadow: 0 6px 16px rgba(0,0,0,0.18);
border: 2px solid var(--viv-bg-card);
pointer-events: none;
z-index: 3;
}
/* ============================
UNREAD BADGE POSITIONING FIXES
============================ */
.nav-tabs{ overflow-y: visible !important; }
.nav-tab{ overflow: visible; }
.nav-notif-badge{ top: 8px; right: 8px; transform: none; }
.request-notif-badge{ top: 12px; right: 12px; transform: none; z-index: 20; }
/* --- Unread badge corner fix (no clipping) --- */
.nav-tabs{padding-top:10px!important;padding-right:10px!important;}
.nav-tab{position:relative;overflow:visible!important;}
.nav-notif-badge{top:0!important;right:0!important;transform:translate(50%,-50%)!important;border:2px solid #ffffff;}
.request-item{position:relative;}
.request-notif-badge{top:10px!important;right:10px!important;border:2px solid #ffffff;}
/* =========================================================
RESPONSIVE FIXES (Mobile polish + drawer nav + charts)
========================================================= */
.mobile-nav-overlay{
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
opacity: 0;
pointer-events: none;
transition: opacity 140ms ease;
z-index: 5000;
}
.mobile-nav-overlay.open{
opacity: 1;
pointer-events: auto;
}
.mobile-nav-drawer{
position: fixed;
top: 0;
right: 0;
width: 340px;
max-width: 86vw;
height: 100vh;
background: var(--viv-bg-card);
border-left: 1px solid var(--viv-border);
box-shadow: 0 12px 40px rgba(0,0,0,0.25);
transform: translate3d(110%, 0, 0);
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
z-index: 5001;
display: flex;
flex-direction: column;
}
.mobile-nav-drawer.open{
transform: translate3d(0, 0, 0);
}
/* On very small screens, use a full-width drawer so the header buttons behind it don't show */
@media (max-width: 480px){
.mobile-nav-drawer{
width: 100vw !important;
max-width: 100vw !important;
border-left: 0 !important;
}
}
.mobile-nav-header{
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 16px 12px 16px;
border-bottom: 1px solid var(--viv-border);
}
.mobile-nav-title{
font-weight: 800;
font-size: 16px;
color: var(--viv-text-primary);
}
.mobile-nav-links{
padding: 10px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.mobile-nav-link{
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 12px;
border-radius: 14px;
border: 1px solid transparent;
background: transparent;
color: var(--viv-text-primary);
font-weight: 700;
font-size: 16px;
cursor: pointer;
}
.mobile-nav-link svg{
width: 20px;
height: 20px;
flex: 0 0 auto;
}
.mobile-nav-link.active{
background: rgba(16, 185, 129, 0.10);
border-color: rgba(16, 185, 129, 0.25);
color: var(--viv-primary);
}
.header-icon-btn{
width: 44px;
height: 44px;
line-height: 0;
border-radius: 12px;
border: 1px solid var(--viv-border);
background: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--viv-text-primary);
}
.header-icon-btn svg{
display:block;
}
.header-icon-btn:active{
transform: scale(0.98);
}
.logout-btn-mobile,
.mobile-menu-btn{
display: none;
}
.charts-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
margin-bottom: 24px;
}
.traffic-bar-top{
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin-bottom: 8px;
}
.traffic-bar-meta{
min-width: 0;
}
.traffic-source-name{
word-break: break-word;
}
.stat-value-row{
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.stat-value-divider{
color: #94a3b8;
font-weight: 800;
line-height: 1;
}
.pie-chart{
max-width: 100%;
}
.chat-send-text{
display: inline;
}
@media (max-width: 768px) {
/* ========================================
MOBILE HEADER LAYOUT
======================================== */
.nav-tabs{
display: none !important;
}
.header-content{
position: relative;
justify-content: center;
padding-left: 64px;
padding-right: 64px;
}
.header-logo{
display: none !important;
}
.mobile-header-logo { display: none !important; }
.header-actions{
display: none !important;
}
.logout-btn-mobile,
.mobile-menu-btn{
display: inline-flex;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2000;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.logout-btn-mobile{ left: 12px; }
.mobile-menu-btn{ right: 12px; }
/* When drawer is open, align the header toggle with the drawer header and avoid double-close buttons */
body.mobile-nav-open .mobile-menu-btn:not(.in-drawer){
top: 16px !important;
right: 16px !important;
transform: none !important;
z-index: 3000 !important;
}
body.mobile-nav-open .mobile-nav-close{
display: none !important;
}
/* When menu is open, we move the hamburger button into the drawer header for perfect alignment */
.mobile-menu-btn.in-drawer{
position: static !important;
top: auto !important;
right: auto !important;
left: auto !important;
transform: none !important;
margin-left: auto;
align-self: center;
}
.mobile-menu-btn.in-drawer svg{
display: block;
}
.client-business-name{
font-size: 16px;
line-height: 1.15;
text-align: center;
}
.client-portal-label{
font-size: 12px;
text-align: center;
}
/* ========================================
HERO SECTION - MOBILE OPTIMIZED
======================================== */
.hero h1{
font-size: clamp(28px, 6.6vw, 34px) !important;
line-height: 1.15 !important;
}
/* Force 3 across with better sizing */
.hero-kpi-row{
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
margin-top: 14px !important;
}
.hero-kpi{
padding: 10px 6px !important;
border-radius: 12px !important;
}
.hero-kpi-icon{
width: 36px !important;
height: 36px !important;
margin-bottom: 8px !important;
}
.hero-kpi-icon svg{
width: 18px !important;
height: 18px !important;
}
.hero-kpi-label{
font-size: 10px !important;
margin-bottom: 4px !important;
}
.hero-kpi-value{
font-size: 15px !important;
font-weight: 700 !important;
}
/* ========================================
HERO CHART - MOBILE SCROLL
======================================== */
/* ========================================
STATS GRID & ENGAGED SESSIONS
======================================== */
.viv-trend-badge{
font-size: 28px !important;
padding: 8px 16px !important;
border-radius: 999px !important;
font-weight: 800 !important;
}
.viv-trend-badge svg{
width: 22px !important;
height: 22px !important;
}
.stat-value-row{
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
flex-wrap: nowrap !important;
}
.stat-value-with-trend{
font-size: 28px !important;
font-weight: 800 !important;
}
/* ========================================
TRAFFIC & DEVICE CHARTS
======================================== */
.traffic-bar-top{
flex-wrap: wrap;
gap: 8px !important;
}
.traffic-bar-meta{
flex: 1 1 60%;
}
.traffic-sessions-number{
font-size: 16px !important;
font-weight: 700 !important;
}
.traffic-bar-rank{
font-size: 16px !important;
}
.traffic-bar-source{
font-size: 15px !important;
}
.pie-chart{
max-width: 220px !important;
margin: 0 auto !important;
}
.charts-grid{
grid-template-columns: 1fr !important;
gap: 20px !important;
}
/* ========================================
TOP PERFORMING PAGES
======================================== */
.page-rank-item{
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
padding: 14px !important;
}
.page-rank-left{
width: 100% !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
}
.page-rank-number{
font-size: 16px !important;
min-width: auto !important;
}
.page-rank-url{
font-size: 14px !important;
word-break: break-all !important;
}
.page-rank-bar{
width: 100% !important;
margin-top: 4px !important;
}
.page-rank-views{
font-size: 16px !important;
align-self: flex-end !important;
}
/* ========================================
REQUEST CARDS & STATUS
======================================== */
.request-methods-card{
text-align: center;
}
.request-methods-card .card-title{
text-align: center;
}
.card-title-row{
flex-direction: column !important;
align-items: center !important;
gap: 12px !important;
text-align: center !important;
}
.card-title{
text-align: center !important;
}
.card-action-btn{
width: 100% !important;
max-width: 240px !important;
font-size: 15px !important;
padding: 12px 20px !important;
}
.status-badge{
padding: 4px 10px !important;
font-size: 10px !important;
letter-spacing: 0.3px !important;
white-space: nowrap !important;
}
.request-meta{
flex-wrap: wrap !important;
gap: 8px !important;
}
.request-date{
font-size: 13px !important;
}
.filter-buttons{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.filter-btn{
width: 100%;
justify-content: center;
text-align: center;
font-size: 13px !important;
padding: 10px !important;
}
/* ========================================
CHAT COMPOSER
======================================== */
.chat-reply-row{
gap: 10px !important;
align-items: center !important;
}
.chat-attach-btn.btn-icon-attachment{
width: 44px !important;
height: 44px !important;
flex-shrink: 0 !important;
}
.chat-reply-textarea{
flex: 1 !important;
min-height: 44px !important;
height: 44px !important;
max-height: 120px !important;
padding: 10px 14px !important;
font-size: 15px !important;
resize: none;
}
.chat-send-btn{
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
flex-shrink: 0 !important;
padding: 0 !important;
border-radius: 999px !important;
margin-right: 2px !important;
}
.chat-send-text{
display: none !important;
}
.chat-send-btn svg{
display: inline-block !important;
}
.chat-messages-inline{
max-height: 50vh !important;
padding: 16px !important;
}
.message-inline{
max-width: 92% !important;
}
.message-inline-avatar{
width: 32px !important;
height: 32px !important;
font-size: 12px !important;
}
/* ========================================
BILLING TAB - SERVICE BREAKDOWN
======================================== */
.billing-row{
padding: 20px !important;
border-radius: 14px !important;
}
.billing-row-main{
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.billing-row-left{
width: 100% !important;
}
.billing-title{
font-size: 18px !important;
font-weight: 700 !important;
margin-bottom: 8px !important;
}
.billing-learn{
font-size: 15px !important;
font-weight: 600 !important;
}
.billing-price{
align-self: flex-end;
font-size: 26px !important;
font-weight: 800 !important;
}
.billing-details{
margin-top: 16px !important;
padding: 16px !important;
background: #f9fafb;
border-radius: 10px;
font-size: 14px !important;
line-height: 1.8 !important;
}
.billing-details ul{
margin-left: 18px !important;
}
.billing-details li{
margin-bottom: 10px !important;
}
.billing-help-actions{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
margin-top: 16px !important;
}
.billing-help-actions .btn{
width: 100% !important;
justify-content: center !important;
font-size: 15px !important;
padding: 14px !important;
}
/* ========================================
CONTACT TAB
======================================== */
.contact-intro{
text-align: center !important;
}
.contact-section-title{
text-align: center !important;
}
/* ========================================
MOBILE DRAWER
======================================== */
.mobile-nav-link{
font-size: 17px !important;
padding: 16px 14px !important;
}
.mobile-nav-link svg{
width: 22px !important;
height: 22px !important;
}
/* ========================================
CONTAINER & SPACING
======================================== */
.container{
padding: 16px !important;
}
.hero{
padding: 24px 16px !important;
}
.card{
padding: 20px 16px !important;
margin-bottom: 16px !important;
}
.quick-actions{
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.quick-action{
padding: 20px !important;
}
/* Request Changes tab: make the big title a bit smaller on mobile */
.request-method-title{
font-size: 28px !important;
line-height: 1.15 !important;
margin-bottom: 8px !important;
}
.portal-footer-inner{
justify-content: center;
text-align: center;
}
.footer-links{
justify-content: center;
}
.footer-meta{
justify-content: center;
text-align: center;
white-space: nowrap;
}
/* Contact tab (mobile): center subtitle and make action buttons equal width */
.contact-subtitle{
color: #64748b !important;
margin-bottom: 32px !important;
text-align: center !important;
}
.contact-action-btn{
width: 100% !important;
display: block !important;
text-align: center !important;
}
/* Ensure chat composer isn’t clipped on the right (safe areas / narrow widths) */
.chat-input-inline{
padding-left: calc(18px + env(safe-area-inset-left)) !important;
padding-right: calc(22px + env(safe-area-inset-right)) !important;
}
/* Ensure send button has matching right breathing room on mobile */
.chat-send-btn{
margin-right: 6px !important;
}
/* Make message bubbles a bit wider on small screens */
.message-inline-content{
max-width: 100% !important;
}
.message-inline-text{
max-width: 100% !important;
}
.message-inline.team{
padding-right: 0 !important;
}
/* Service Breakdown: tighter list indentation + better wrapping */
.billing-details{
overflow-wrap: anywhere;
word-break: break-word;
}
.billing-details ul,
.billing-details ol{
padding-left: 18px;
margin-left: 0;
}
.billing-details li{
margin-bottom: 6px;
}
}
/* ========================================
CHART + KPI RESPONSIVE FIXES
======================================== */
/* Desktop / larger screens */
@media (min-width: 769px) {
/* Device pie chart - normal size on desktop (not huge) */
.pie-chart {
max-width: 280px !important;
width: 280px !important;
height: auto !important;
margin: 0 auto !important;
}
/* Engaged sessions - larger percent on desktop */
.viv-trend-badge {
font-size: 34px !important;
padding: 8px 16px !important;
font-weight: 800 !important;
}
.viv-trend-badge svg {
width: 32px !important;
height: 32px !important;
}
.stat-value-with-trend {
font-size: 34px !important;
}
}
/* Mobile / tablet */
@media (max-width: 768px) {
/* Keep hero subtitle readable */
.hero p {
white-space: nowrap !important;
}
/* Top source - keep on one line */
.hero-kpi-value {
font-size: 13px !important;
white-space: nowrap !important;
}
/* Engaged sessions - ensure percent is not tiny on mobile */
.viv-trend-badge {
font-size: 26px !important;
padding: 8px 12px !important;
font-weight: 800 !important;
}
.viv-trend-badge svg {
width: 24px !important;
height: 24px !important;
}
}
/* Trend badge - align percent and arrow */
.viv-trend-badge {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
.trend-percent {
font-size: inherit;
font-weight: inherit;
}
.trend-arrow {
display: inline-flex !important;
align-items: center !important;
}
/* Welcome message - desktop vs mobile */
.welcome-desktop {
display: inline;
}
.welcome-mobile {
display: none;
}
@media (max-width: 768px) {
.welcome-desktop {
display: none !important;
}
.welcome-mobile {
display: inline !important;
}
/* ---------------------------
MOBILE RESPONSIVE TUNING
--------------------------- */
/* Hero subtitle: keep off the right edge and aim for one line */
.hero-subtitle{
padding-right: 16px !important;
font-size: 13.5px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Quick actions (Request Changes / Track Requests / Visit Website) */
.quick-actions{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
.quick-action{
padding: 14px !important;
min-height: 92px !important;
}
.quick-action h3{
font-size: 14px !important;
line-height: 1.2 !important;
}
.quick-action p{
font-size: 12px !important;
line-height: 1.25 !important;
}
.quick-action-icon{
width: 26px !important;
height: 26px !important;
margin-bottom: 10px !important;
}
/* Hero chart: keep scrollable + readable, but easier to use */
.hero-chart-container{
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none;
scroll-behavior: smooth;
}
.hero-chart-container::-webkit-scrollbar{ display: none; }
/* IMPORTANT: on mobile, don't force the SVG to shrink-to-fit */
.hero-chart-svg{
width: auto !important;
height: 290px !important;
}
/* Engaged Sessions: percent + arrow should match the main number better */
.stat-value-row{
align-items: baseline !important;
gap: 8px !important;
flex-wrap: nowrap !important;
}
.viv-trend-badge{
font-size: 30px !important;
padding: 0 !important;
line-height: 1 !important;
}
.stat-value-divider{
font-size: 20px !important;
line-height: 1 !important;
}
.viv-trend-badge svg{
width: 18px !important;
height: 18px !important;
}
/* Device pie chart: smaller + visually closer to the subtitle */
.pie-chart{
width: 170px !important;
max-width: 170px !important;
margin: -6px auto 0 auto !important;
}
}
@media (min-width: 769px) {
/* Secondary buttons should hover/float like primary on desktop (Contact/Billing call buttons) */
.btn-secondary:hover{
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
/* Desktop hero chart: slightly larger like the original */
.hero-chart-svg{
width: 100% !important;
height: 420px !important;
}
.hero-chart-container{
overflow-x: hidden !important;
}
}
@media (max-width: 360px) {
.quick-actions{
grid-template-columns: 1fr !important;
}
}
/* ============================================
RESPONSIVE FIXES (v4)
- Mobile hero chart: bar chart presentation
- Quick actions: 1 per row (compact)
- Requests: move status to avoid title crunching
- Chat: wider bubbles + composer spacing
- Footer: keep copyright on one line
- Request method subtitle: centered + single line
============================================ */
@media (max-width: 768px) {
/* Method cards: ensure no horizontal overflow on mobile */
.method-grid{
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.method-card{
max-width: 100% !important;
min-width: 0 !important;
padding: 18px 18px !important;
}
.method-title{
font-size: 18px !important;
}
/* Method descriptions: readable on mobile (wrap by default) */
.method-description{
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
font-size: 14px !important;
line-height: 1.35 !important;
letter-spacing: -0.05px;
}
/* Only the Quick Form short description stays on one line */
.method-description--nowrap{
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* HERO subtitle spacing */
.hero-subtitle{
padding-right: 14px !important;
font-size: 14px !important;
overflow: hidden;
text-overflow: ellipsis;
}
/* HERO chart: mobile bar chart (scrollable + readable) */
.hero-chart-container{
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
touch-action: pan-x;
margin: 18px 0 !important;
}
.hero-chart-scroll{
display: inline-block !important;
min-width: max-content;
}
.hero-chart-svg-mobile{
width: auto !important;
max-width: none !important;
height: 290px !important;
display: block;
}
.hero-chart-mobile-hint{
margin-top: 8px;
font-size: 12px;
color: rgba(255,255,255,0.65);
text-align: center;
user-select: none;
}
/* Quick actions: one per row, but compact */
.quick-actions{
grid-template-columns: 1fr !important;
gap: 14px !important;
margin-top: 18px !important;
}
.quick-action{
padding: 16px 18px !important;
min-height: 96px;
}
.quick-action h3{
font-size: 18px !important;
margin-bottom: 6px !important;
}
.quick-action p{
font-size: 14px !important;
line-height: 1.3 !important;
overflow-wrap: anywhere;
}
/* Requests list: prevent status badge from crushing title/description */
.request-header{
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
}
.status-badge{
align-self: flex-start !important;
margin-left: 0 !important;
flex: 0 0 auto !important;
}
.request-title-row{
width: 100% !important;
}
.request-title{
padding-right: 0 !important;
}
/* Chat: wider message bubbles on mobile */
.chat-messages-inline{
padding: 14px !important;
}
.message-inline.team{
padding-right: 0 !important;
}
.message-inline-text{
max-width: calc(100vw - 96px) !important;
}
/* Chat composer: equal left/right spacing and avoid send button feeling cramped */
.chat-input-inline{
padding-left: calc(16px + env(safe-area-inset-left)) !important;
padding-right: calc(16px + env(safe-area-inset-right)) !important;
}
.chat-reply-row{
padding-right: 6px;
}
.chat-send-btn{
margin-right: 6px;
min-width: 112px;
}
/* Request form: keep key lines single-line on mobile */
.request-form-title{
font-size: clamp(22px, 6.2vw, 28px) !important;
white-space: nowrap !important;
letter-spacing: -0.2px;
}
#request-form .radio-description{
white-space: nowrap !important;
font-size: clamp(11px, 3.2vw, 12px) !important;
line-height: 1.2;
}
.file-upload-area .upload-help-text{
white-space: nowrap !important;
font-size: clamp(11px, 3.2vw, 12px) !important;
}
/* Footer: keep copyright on one line */
.portal-footer .footer-meta{
display: flex !important;
flex-direction: row !important;
gap: 4px !important;
justify-content: center !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
font-size: 12px !important;
}
.portal-footer .footer-meta span{
display: inline !important;
white-space: nowrap !important;
}
/* Footer: ensure every piece uses the same font size (mobile) */
.portal-footer .footer-meta *{
font-size: inherit !important;
line-height: inherit !important;
}
/* Request method subtitle under "How would you like..." */
.request-method-subtitle{
margin: 0 0 28px 0 !important;
color: #64748b !important;
text-align: center !important;
font-size: clamp(14px, 3.8vw, 16px) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding: 0 10px !important;
}
/* Method features + notes: keep type sizes consistent on mobile */
.method-features{
font-size: 14px !important;
}
.method-note{
font-size: 14px !important;
line-height: 1.35 !important;
margin-top: 10px !important;
}
.method-note em{
font-style: italic;
display: inline;
font-size: inherit !important;
}
}
/* ============================================
REQUEST CARD ENTRANCE ANIMATION (v8)
============================================ */
.viv-request-anim{
opacity: 0;
transform: translateY(10px);
}
.viv-request-anim.viv-in{
opacity: 1;
transform: translateY(0);
transition: opacity 420ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce){
.viv-request-anim,
.viv-request-anim.viv-in{
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* ============================================
GOOGLE ADS TAB - FINAL CSS
Reuses Dashboard classes, adds Ads-specific styles
============================================ */
/* ============================================
ICONS (SVG inline icons)
============================================ */
.gads-icon {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
flex-shrink: 0;
}
.gads-icon svg {
width: 100%;
height: 100%;
}
/* ============================================
HERO ADJUSTMENTS (extends Dashboard .hero)
============================================ */
.gads-hero h1 {
display: flex;
align-items: center;
gap: 12px;
}
.gads-hero h1 .gads-icon {
opacity: 0.9;
}
/* ============================================
STATUS BADGES ROW
============================================ */
.gads-status-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 16px 0 24px 0;
}
.gads-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
transition: all 0.2s ease;
}
.gads-badge .gads-icon {
width: 14px;
height: 14px;
}
.gads-badge.success {
background: rgba(16, 185, 129, 0.2);
color: #d1fae5;
}
.gads-badge.warning {
background: rgba(251, 191, 36, 0.2);
color: #fef3c7;
}
.gads-badge.muted {
background: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.7);
}
/* ============================================
RANGE SELECTOR (extends Dashboard .date-range-selector)
============================================ */
.gads-range-selector {
margin-bottom: 28px;
}
/* ============================================
KPI GRID (extends Dashboard .stats-grid)
============================================ */
.gads-kpi-grid {
margin-top: 0;
}
/* Placeholder card for "conversions not configured" */
.gads-placeholder-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: rgba(255, 255, 255, 0.08) !important;
border: 2px dashed rgba(255, 255, 255, 0.2) !important;
}
.gads-placeholder-card::after {
display: none !important;
}
.gads-placeholder-icon {
margin-bottom: 8px;
opacity: 0.6;
}
.gads-placeholder-icon .gads-icon {
width: 32px;
height: 32px;
color: rgba(255, 255, 255, 0.5);
}
.gads-placeholder-text {
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 4px;
}
.gads-placeholder-hint {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
}
/* Stat card trend colors */
.stat-trend.positive {
color: #10b981;
}
.stat-trend.negative {
color: #f87171;
}
/* ============================================
SECONDARY METRICS ROW
============================================ */
.gads-secondary-row {
background: #f8fafc;
border-radius: 16px;
padding: 20px 24px;
margin-bottom: 24px;
}
.gads-secondary-title {
font-size: 12px;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 16px;
}
.gads-secondary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 20px;
}
.gads-secondary-item {
text-align: center;
}
.gads-sec-label {
font-size: 11px;
color: #64748b;
margin-bottom: 4px;
}
.gads-sec-value {
font-size: 18px;
font-weight: 700;
color: #1e293b;
}
.gads-sec-trend {
font-size: 11px;
font-weight: 600;
margin-left: 4px;
}
.gads-sec-trend.positive {
color: #10b981;
}
.gads-sec-trend.negative {
color: #ef4444;
}
/* ============================================
BUDGET SECTION
============================================ */
/* Ensure spacing after Budget Status card */
.chart-container.gads-budget-section {
margin-bottom: 24px !important;
}
.gads-budget-section .chart-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 12px;
}
.gads-pacing-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
}
.gads-pacing-badge .gads-icon {
width: 14px;
height: 14px;
}
.gads-pacing-badge.success {
background: #dcfce7;
color: #166534;
}
.gads-pacing-badge.warning {
background: #fee2e2;
color: #991b1b;
}
.gads-pacing-badge.muted {
background: #fef3c7;
color: #92400e;
}
.gads-budget-main {
margin-top: 20px;
}
.gads-budget-amounts {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.gads-budget-spent {
font-size: 32px;
font-weight: 800;
color: #047857;
}
.gads-budget-of {
font-size: 16px;
color: #64748b;
}
.gads-budget-pct {
font-size: 13px;
font-weight: 600;
color: #fff;
background: #047857;
padding: 4px 10px;
border-radius: 10px;
margin-left: 8px;
}
.gads-budget-progress {
height: 10px;
background: #e2e8f0;
border-radius: 8px;
position: relative;
overflow: visible;
margin-bottom: 20px;
}
.gads-budget-fill {
height: 100%;
background: linear-gradient(90deg, #047857, #10b981);
border-radius: 8px;
transition: width 0.5s ease;
}
.gads-budget-marker {
position: absolute;
top: -3px;
width: 3px;
height: 16px;
background: #1e293b;
border-radius: 2px;
transform: translateX(-50%);
}
.gads-budget-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 16px;
padding-top: 16px;
border-top: 1px solid #e2e8f0;
}
.gads-budget-detail {
display: flex;
flex-direction: column;
gap: 4px;
}
.gads-detail-label {
font-size: 14px;
color: #64748b;
}
.gads-detail-value {
font-size: 19px;
font-weight: 900;
color: #0f172a;
}
/* ============================================
INSIGHTS SECTION
============================================ */
.gads-insights-section {
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
border: 1px solid #a7f3d0;
padding: 28px !important;
}
.gads-insights-section .chart-header {
margin-bottom: 20px;
}
.gads-insights-section .chart-title {
display: flex;
align-items: center;
gap: 10px;
color: #065f46;
font-size: 20px;
font-weight: 700;
}
.gads-insights-section .chart-title .gads-icon {
width: 24px;
height: 24px;
color: #047857;
}
.gads-insights-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.gads-insight-item {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 12px;
border-radius: 12px;
font-size: 17px;
color: #065f46;
line-height: 1.5;
font-weight: 600;
transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.gads-insight-item:hover {
background: rgba(255, 255, 255, 0.55);
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(2, 6, 23, 0.06);
color: #047857;
}
.gads-insight-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 12px;
background: rgba(16, 185, 129, 0.14);
border: 1px solid rgba(16, 185, 129, 0.22);
display: inline-flex;
align-items: center;
justify-content: center;
}
.gads-insight-icon svg { width: 20px; height: 20px; }
.gads-insight-icon .gads-icon {
display: none;
}
/* ============================================
CHARTS GRID (extends Dashboard .charts-grid)
============================================ */
.gads-charts-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-bottom: 24px;
}
/* ============================================
BAR CHARTS (Network/Device)
============================================ */
.gads-bars {
display: flex;
flex-direction: column;
gap: 12px;
padding: 4px 0;
}
.gads-bar-row {
transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
padding: 16px;
margin: 0;
border-radius: 12px;
background: #f8fafc;
}
.gads-bar-row:hover {
transform: translateY(-3px);
background: #ffffff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.gads-bar-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.gads-bar-label {
display: flex;
align-items: flex-start;
gap: 10px;
flex-wrap: wrap;
}
.gads-bar-text {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.15;
}
.gads-bar-text .gads-bar-name {
margin: 0;
}
.gads-bar-text .gads-bar-hint {
margin: 0;
}
.gads-bar-icon {
width: 28px;
height: 28px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.gads-bar-icon .gads-icon {
width: 16px;
height: 16px;
}
.gads-bar-icon.search {
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
color: #2563eb;
}
.gads-bar-icon.display {
background: linear-gradient(135deg, #fce7f3, #fbcfe8);
color: #db2777;
}
.gads-bar-icon.other {
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
color: #64748b;
}
.gads-bar-icon.mobile {
background: linear-gradient(135deg, #d1fae5, #a7f3d0);
color: #047857;
}
.gads-bar-icon.desktop {
background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
color: #4f46e5;
}
.gads-bar-icon.tablet {
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #d97706;
}
.gads-bar-name {
font-size: 18px;
font-weight: 800;
color: #0f172a;
}
.gads-bar-hint {
font-size: 11px;
color: #94a3b8;
}
.gads-bar-values {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
text-align: right;
}
.gads-bar-primary {
font-size: 16px;
font-weight: 800;
color: #0f172a;
}
.gads-bar-secondary {
font-size: 14px;
font-weight: 600;
color: #475569;
}
.gads-bar-track {
height: 10px;
background: #f1f5f9;
border-radius: 6px;
overflow: hidden;
}
.gads-bar-fill {
height: 100%;
border-radius: 6px;
transition: width 0.5s ease;
}
.gads-bar-fill.search {
background: linear-gradient(90deg, #3b82f6, #60a5fa);
}
.gads-bar-fill.display {
background: linear-gradient(90deg, #ec4899, #f472b6);
}
.gads-bar-fill.other {
background: linear-gradient(90deg, #94a3b8, #cbd5e1);
}
.gads-bar-fill.mobile {
background: linear-gradient(90deg, #047857, #10b981);
}
.gads-bar-fill.desktop {
background: linear-gradient(90deg, #4f46e5, #6366f1);
}
.gads-bar-fill.tablet {
background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.gads-callout {
display: flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
border-radius: 12px;
padding: 14px 18px;
font-size: 16px;
font-weight: 600;
color: #047857;
margin-bottom: 16px;
}
.gads-callout .gads-icon {
width: 16px;
height: 16px;
}
/* Callout at bottom for Device Performance alignment */
.gads-callout-bottom {
margin-top: 16px;
margin-bottom: 0;
}
/* Ensure both charts-grid columns align */
.gads-charts-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-bottom: 24px;
align-items: start;
}
.gads-charts-grid .chart-container {
display: flex;
flex-direction: column;
height: 100%;
}
/* Device card specific - push callout to bottom */
.gads-device-card {
display: flex;
flex-direction: column;
}
.gads-device-card .gads-bars {
flex: 1;
}
.gads-empty-inline {
text-align: center;
padding: 24px;
color: #64748b;
font-size: 14px;
}
/* ============================================
KEYWORDS TABLE
============================================ */
.gads-keywords-section {
margin-bottom: 24px;
}
.gads-table-wrap {
overflow-x: auto;
margin: 0 -8px;
padding: 0 8px;
}
.gads-table {
width: 100%;
border-collapse: collapse;
min-width: 480px;
}
.gads-table thead tr {
border-bottom: 2px solid #e2e8f0;
}
.gads-table th {
text-align: left;
padding: 10px 14px;
font-size: 11px;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.gads-th-num {
text-align: right !important;
}
.gads-table tbody tr {
border-bottom: 1px solid #f1f5f9;
transition: background 0.15s ease;
}
.gads-table tbody tr:nth-child(odd) {
background: #ffffff;
}
.gads-table tbody tr:nth-child(even) {
background: #f8fafc;
}
.gads-table tbody tr:hover {
background: #f0fdf4;
}
.gads-table tbody tr:last-child {
border-bottom: none;
}
.gads-table td {
padding: 12px 14px;
font-size: 14px;
color: #1e293b;
}
.gads-td-num {
text-align: right;
color: #64748b;
}
.gads-kw-cell {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
}
.gads-kw-cell .gads-icon {
width: 14px;
height: 14px;
color: #94a3b8;
}
.gads-ctr-pill {
display: inline-block;
padding: 3px 10px;
border-radius: 10px;
font-size: 12px;
font-weight: 600;
}
.gads-ctr-pill.high {
background: #dcfce7;
color: #166534;
}
.gads-ctr-pill.medium {
background: #fef3c7;
color: #92400e;
}
.gads-ctr-pill.low {
background: #f1f5f9;
color: #64748b;
}
/* ============================================
CONVERSIONS SECTION
============================================ */
.gads-conversions-section {
margin-bottom: 24px;
}
.gads-conv-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 16px;
}
.gads-conv-item {
background: #f8fafc;
border-radius: 14px;
padding: 20px;
text-align: center;
transition: all 0.2s ease;
}
.gads-conv-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.gads-conv-item.total {
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}
.gads-conv-item.calls {
background: linear-gradient(135deg, #eff6ff, #dbeafe);
}
.gads-conv-item.forms {
background: linear-gradient(135deg, #faf5ff, #ede9fe);
}
.gads-conv-item.other {
background: linear-gradient(135deg, #fefce8, #fef9c3);
}
.gads-conv-icon {
margin-bottom: 8px;
}
.gads-conv-icon .gads-icon {
width: 28px;
height: 28px;
}
.gads-conv-item.total .gads-conv-icon {
color: #047857;
}
.gads-conv-item.calls .gads-conv-icon {
color: #2563eb;
}
.gads-conv-item.forms .gads-conv-icon {
color: #7c3aed;
}
.gads-conv-item.other .gads-conv-icon {
color: #d97706;
}
.gads-conv-value {
font-size: 26px;
font-weight: 800;
color: #1e293b;
margin-bottom: 4px;
}
.gads-conv-label {
font-size: 11px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ============================================
EXPORT ROW
============================================ */
.gads-export-row {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
padding: 40px;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 20px;
margin-bottom: 24px;
border: 1px solid #e2e8f0;
}
.gads-export-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
font-size: 16px;
font-weight: 800;
border-radius: 12px;
}
.gads-export-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(3, 71, 55, 0.4);
background: linear-gradient(135deg, #023329, #034737);
}
.gads-export-btn:focus {
outline: none;
box-shadow: 0 0 0 4px rgba(4, 120, 87, 0.3), 0 10px 30px rgba(3, 71, 55, 0.4);
}
.gads-export-btn:active {
transform: translateY(-1px);
}
.gads-export-btn .gads-icon {
width: 24px;
height: 24px;
}
.gads-export-hint {
font-size: 14px;
color: #64748b;
}
/* ============================================
STATE CARDS (Empty/Error)
============================================ */
.gads-state {
text-align: center;
padding: 60px 24px;
}
.gads-state.error {
background: linear-gradient(135deg, #fef2f2, #fee2e2);
border: 1px solid #fecaca;
}
.gads-state-icon {
margin-bottom: 16px;
color: #94a3b8;
}
.gads-state-icon .gads-icon {
width: 48px;
height: 48px;
}
.gads-state.error .gads-state-icon {
color: #ef4444;
}
.gads-state-title {
font-size: 18px;
font-weight: 700;
color: #1e293b;
margin-bottom: 8px;
}
.gads-state-text {
font-size: 14px;
color: #64748b;
max-width: 400px;
margin: 0 auto;
}
/* ============================================
RESPONSIVE - GOOGLE ADS MOBILE
============================================ */
@media (max-width: 768px) {
/* Hero subtitle - prevent text cutoff */
.gads-hero .hero-subtitle {
font-size: 15px;
line-height: 1.5;
padding: 0 8px;
white-space: normal !important;
}
.gads-status-row {
margin: 12px 0 20px 0;
}
.gads-badge {
font-size: 11px;
padding: 5px 10px;
}
.gads-secondary-grid {
grid-template-columns: repeat(2, 1fr);
}
.gads-budget-spent {
font-size: 26px;
}
/* Compact KPI cards on mobile - 2x2 grid */
#google-ads-body .gads-kpi-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
#google-ads-body .gads-kpi-grid .stat-card {
padding: 16px 12px !important;
min-height: unset !important;
}
#google-ads-body .gads-kpi-grid .stat-value {
font-size: 20px !important;
}
#google-ads-body .gads-kpi-grid .stat-label {
font-size: 13px !important;
}
#google-ads-body .gads-kpi-grid .stat-icon-svg {
width: 28px !important;
height: 28px !important;
margin-bottom: 6px !important;
}
/* Stack charts grid on mobile */
.gads-charts-grid {
grid-template-columns: 1fr;
gap: 20px;
}
/* Center section titles on mobile - stronger selectors */
#google-ads-body .chart-container .chart-header {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
#google-ads-body .chart-container .chart-header .chart-title,
#google-ads-body .chart-container .chart-title {
text-align: center !important;
width: 100% !important;
}
#google-ads-body .chart-container .chart-header .chart-subtitle,
#google-ads-body .chart-container .chart-subtitle {
text-align: center !important;
width: 100% !important;
}
/* Better spacing for bar rows */
.gads-bars {
gap: 16px;
}
.gads-bar-row {
padding: 14px;
}
.gads-bar-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.gads-bar-values {
align-items: flex-start;
text-align: left;
margin-top: 4px;
}
/* Callout centered on mobile */
.gads-callout,
.gads-callout-bottom {
justify-content: center;
text-align: center;
}
/* Export section centered */
.gads-export-card {
text-align: center;
}
.gads-export-head {
align-items: center;
}
.gads-export-row {
flex-direction: column;
gap: 12px;
align-items: center;
}
.gads-export-select-wrapper {
flex-direction: column;
gap: 8px;
width: 100%;
max-width: 280px;
}
.gads-export-select {
width: 100%;
}
.gads-export-btn {
width: 100%;
max-width: 280px;
justify-content: center;
}
}
@media (max-width: 480px) {
/* Hero subtitle - smaller screens */
.gads-hero .hero-subtitle {
font-size: 14px;
padding: 0 4px;
white-space: normal !important;
}
.gads-badge {
font-size: 10px;
padding: 4px 8px;
}
/* Even more compact KPI cards on small screens */
#google-ads-body .gads-kpi-grid .stat-card {
padding: 12px 10px !important;
}
#google-ads-body .gads-kpi-grid .stat-value {
font-size: 18px !important;
}
#google-ads-body .gads-kpi-grid .stat-label {
font-size: 11px !important;
}
#google-ads-body .gads-kpi-grid .stat-icon-svg {
width: 24px !important;
height: 24px !important;
margin-bottom: 4px !important;
}
#google-ads-body .gads-kpi-grid .stat-trend {
font-size: 10px !important;
}
.gads-secondary-grid {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.gads-sec-value {
font-size: 16px;
}
.gads-budget-spent {
font-size: 22px;
}
.gads-conv-grid {
grid-template-columns: repeat(2, 1fr);
}
.gads-conv-value {
font-size: 22px;
}
/* Keywords table - card style on mobile */
.gads-table-wrap {
margin: 0;
padding: 0;
overflow: visible;
}
.gads-table {
min-width: unset;
display: block;
}
.gads-table thead {
display: none;
}
.gads-table tbody {
display: flex;
flex-direction: column;
gap: 12px;
}
.gads-table tbody tr {
display: flex;
flex-direction: column;
background: #f8fafc;
border-radius: 12px;
padding: 14px;
border: 1px solid #e2e8f0;
}
.gads-table tbody tr:nth-child(odd),
.gads-table tbody tr:nth-child(even) {
background: #f8fafc;
}
.gads-table tbody tr:hover {
background: #f0fdf4;
}
.gads-table td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid #e2e8f0;
text-align: left;
}
.gads-table td:last-child {
border-bottom: none;
}
.gads-table td::before {
content: attr(data-label);
font-weight: 600;
color: #64748b;
font-size: 12px;
text-transform: uppercase;
flex-shrink: 0;
}
.gads-table td.gads-td-num {
text-align: right;
}
/* Fix keyword cell - icon and text on same line */
.gads-table td[data-label="Keyword"] {
flex-wrap: nowrap;
}
.gads-table td[data-label="Keyword"] .gads-kw-cell {
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 6px !important;
flex-wrap: nowrap !important;
white-space: nowrap;
}
.gads-kw-cell .gads-icon {
flex-shrink: 0;
width: 14px !important;
height: 14px !important;
}
/* Better bar row sizing on small screens */
.gads-bar-row {
padding: 12px;
}
.gads-bar-name {
font-size: 16px;
}
.gads-bar-primary {
font-size: 14px;
}
.gads-bar-secondary {
font-size: 12px;
}
}
.gads-conv-value {
font-size: 22px;
}
}
/* ============================================
CLIENT PORTAL – GOOGLE ADS TAB TUNING
============================================ */
#google-ads-body .date-range-btn {
font-size: 16px;
padding: 14px 22px;
}
#google-ads-body .gads-kpi-grid .stat-value {
font-size: 24px;
}
#google-ads-body .gads-kpi-grid .stat-label {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.2px;
}
/* Left-align Google Ads section headers */
#google-ads-body .chart-header {
align-items: flex-start;
text-align: left;
justify-content: flex-start;
}
#google-ads-body .chart-title {
text-align: left;
}
/* Mobile: Center titles */
@media (max-width: 768px) {
#google-ads-body .chart-header {
align-items: center !important;
text-align: center !important;
justify-content: center !important;
flex-direction: column !important;
}
#google-ads-body .chart-title {
text-align: center !important;
}
#google-ads-body .chart-subtitle {
text-align: center !important;
}
}
/* Insights spacing + hover polish */
#google-ads-body .gads-insights-section {
margin-bottom: 24px;
}
#google-ads-body .gads-insight-item {
padding: 14px 18px;
gap: 16px;
}
/* Budget Status alignment + stronger detail typography */
#google-ads-body .gads-budget-card {
margin-bottom: 32px;
}
#google-ads-body .gads-detail-label {
font-size: 15px;
font-weight: 700;
color: #475569;
}
#google-ads-body .gads-detail-value {
font-size: 22px;
}
/* Network Performance readability */
#google-ads-body .gads-bar-name {
font-size: 20px;
}
#google-ads-body .gads-bar-hint {
font-size: 13px;
}
#google-ads-body .gads-bar-primary {
font-size: 17px;
}
#google-ads-body .gads-bar-secondary {
font-size: 15px;
}
/* Top Keywords table readability */
#google-ads-body .gads-table th {
font-size: 12px;
}
#google-ads-body .gads-table td {
font-size: 15px;
}
/* Export card (match Admin Portal treatment) */
.gads-export-card {
padding: 24px;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 20px;
border: 1px solid #e2e8f0;
margin-bottom: 24px;
text-align: center;
}
.gads-export-head {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 16px;
align-items: center;
}
.gads-export-title {
font-size: 22px;
font-weight: 800;
color: #0f172a;
}
.gads-export-subtitle {
font-size: 14px;
font-weight: 600;
color: #475569;
}
.gads-export-card .gads-export-row {
padding: 0;
background: none;
border: none;
margin-bottom: 0;
justify-content: center;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
}
/* Export date selector */
.gads-export-select-wrapper {
display: flex;
align-items: center;
gap: 10px;
}
.gads-export-label {
font-size: 14px;
font-weight: 600;
color: #475569;
}
.gads-export-select {
padding: 12px 16px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
color: #0f172a;
background: #fff;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
min-width: 160px;
}
.gads-export-select:hover {
border-color: #047857;
}
.gads-export-select:focus {
outline: none;
border-color: #047857;
box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.15);
}
/* ============================================
FOCUS STATES (Accessibility)
============================================ */
.date-range-btn:focus,
.gads-export-btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.3);
}
.gads-table tbody tr:focus-within {
background: #f1f5f9;
}
/* ============================================
PRINT STYLES
============================================ */
@media print {
.gads-export-row,
.gads-status-row .gads-badge:not(.success),
.date-range-btn:not(.active) {
display: none !important;
}
.gads-insights-section,
.gads-budget-section,
.chart-container {
break-inside: avoid;
}
}
/* ===========================================
Date Range Selector (Analytics Dashboard)
=========================================== */
.date-range-selector {
display: flex;
justify-content: stretch;
gap: 12px;
margin: 20px 0;
flex-wrap: nowrap;
width: 100%;
max-width: 100%;
}
.date-range-btn {
flex: 1;
padding: 12px 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
backdrop-filter: blur(4px);
text-align: center;
}
.date-range-btn:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
color: #fff;
}
.date-range-btn:focus {
outline: 2px solid rgba(255, 255, 255, 0.5);
outline-offset: 2px;
}
.date-range-btn.active {
background: #fff;
border-color: #fff;
color: var(--viv-primary);
}
.date-range-btn.active:hover {
background: rgba(255, 255, 255, 0.9);
}
/* Mobile date range dropdown */
.date-range-dropdown {
display: none;
width: 100%;
}
.date-range-dropdown select {
width: 100%;
padding: 14px 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
background: rgba(255, 255, 255, 0.15);
color: #fff;
font-size: 16px;
font-weight: 600;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 20px;
}
.date-range-dropdown select:focus {
outline: 2px solid rgba(255, 255, 255, 0.5);
outline-offset: 2px;
}
.date-range-dropdown select option {
background: #1e293b;
color: #fff;
padding: 10px;
}
/* Mobile: show dropdown, hide buttons */
@media (max-width: 640px) {
.date-range-selector {
display: none;
}
.date-range-dropdown {
display: block;
margin: 16px 0;
}
}
/* Custom Date Range Picker */
.custom-date-picker {
margin: 16px 0;
animation: fadeIn 0.2s ease;
order: 10; /* Ensure it appears after other elements in flex containers */
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.custom-date-picker-content {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
padding: 20px;
}
.custom-date-inputs {
display: flex;
gap: 16px;
margin-bottom: 16px;
}
.custom-date-field {
flex: 1;
}
.custom-date-field label {
display: block;
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.custom-date-field input[type="date"] {
width: 100%;
padding: 10px 14px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
/* Mobile: make entire field clickable */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-height: 44px;
}
.custom-date-field input[type="date"]:hover {
border-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.15);
}
.custom-date-field input[type="date"]:focus {
outline: none;
border-color: #fff;
background: rgba(255, 255, 255, 0.2);
}
/* Style the date picker calendar icon */
.custom-date-field input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1);
cursor: pointer;
opacity: 0.9;
width: 24px;
height: 24px;
padding: 4px;
}
.custom-date-field input[type="date"]::-webkit-calendar-picker-indicator:hover {
opacity: 1;
}
/* Make date input more tappable on mobile */
@media (max-width: 640px) {
.custom-date-field input[type="date"]::-webkit-calendar-picker-indicator {
width: 24px;
height: 24px;
padding: 4px;
}
}
.custom-date-actions {
display: flex;
gap: 12px;
justify-content: flex-end;
}
.custom-date-cancel,
.custom-date-apply {
padding: 10px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.custom-date-cancel {
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.8);
}
.custom-date-cancel:hover {
border-color: rgba(255, 255, 255, 0.5);
color: #fff;
}
.custom-date-apply {
background: #fff;
border: 2px solid #fff;
color: var(--viv-primary);
}
.custom-date-apply:hover {
background: rgba(255, 255, 255, 0.9);
}
/* Mobile responsive for custom date picker */
@media (max-width: 640px) {
.custom-date-picker {
order: 10; /* Place after dropdown on mobile */
margin-top: 12px;
}
.custom-date-picker-content {
padding: 16px;
}
.custom-date-inputs {
flex-direction: column;
gap: 10px;
}
.custom-date-field label {
font-size: 11px;
margin-bottom: 4px;
}
.custom-date-field input[type="date"] {
font-size: 15px;
min-height: 46px;
padding: 10px 12px;
}
.custom-date-actions {
flex-direction: row;
margin-top: 14px;
}
.custom-date-cancel,
.custom-date-apply {
flex: 1;
text-align: center;
padding: 10px 16px;
}
}
/* ===========================================
Admin Portal Custom Date Picker (Light Background)
=========================================== */
.admin-gads .custom-date-picker,
.gads-page .custom-date-picker {
margin: 12px 0;
}
.admin-gads .custom-date-picker-content,
.gads-page .custom-date-picker-content {
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 16px;
}
.admin-gads .custom-date-field label,
.gads-page .custom-date-field label {
color: #64748b;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
display: block;
}
.admin-gads .custom-date-field input[type="date"],
.gads-page .custom-date-field input[type="date"] {
width: 100%;
padding: 10px 12px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #fff;
color: #1e293b;
font-size: 14px;
font-weight: 500;
transition: border-color 0.2s, box-shadow 0.2s;
min-height: 44px;
}
.admin-gads .custom-date-field input[type="date"]:hover,
.gads-page .custom-date-field input[type="date"]:hover {
border-color: #cbd5e1;
}
.admin-gads .custom-date-field input[type="date"]:focus,
.gads-page .custom-date-field input[type="date"]:focus {
outline: none;
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.admin-gads .custom-date-field input[type="date"]::-webkit-calendar-picker-indicator,
.gads-page .custom-date-field input[type="date"]::-webkit-calendar-picker-indicator {
filter: none;
opacity: 0.6;
cursor: pointer;
}
.admin-gads .custom-date-field input[type="date"]::-webkit-calendar-picker-indicator:hover,
.gads-page .custom-date-field input[type="date"]::-webkit-calendar-picker-indicator:hover {
opacity: 1;
}
.admin-gads .custom-date-cancel,
.gads-page .custom-date-cancel {
background: #fff;
color: #64748b;
border: 1px solid #e2e8f0;
}
.admin-gads .custom-date-cancel:hover,
.gads-page .custom-date-cancel:hover {
background: #f8fafc;
border-color: #cbd5e1;
}
.admin-gads .custom-date-apply,
.gads-page .custom-date-apply {
background: #034737;
color: #fff;
border: none;
}
.admin-gads .custom-date-apply:hover,
.gads-page .custom-date-apply:hover {
background: #056449;
}
/* Desktop quick actions - kept for reference */
/* ===========================================
Session Timeout Warning Modal
=========================================== */
.session-timeout-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.session-timeout-modal.active {
opacity: 1;
visibility: visible;
}
.session-timeout-content {
background: #fff;
border-radius: 16px;
padding: 32px;
max-width: 400px;
width: 90%;
text-align: center;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.session-timeout-icon {
width: 64px;
height: 64px;
background: #fef3c7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.session-timeout-icon svg {
width: 32px;
height: 32px;
color: #f59e0b;
}
.session-timeout-title {
font-size: 20px;
font-weight: 700;
color: #1e293b;
margin-bottom: 12px;
}
.session-timeout-message {
font-size: 15px;
color: #64748b;
margin-bottom: 24px;
line-height: 1.5;
}
.session-timeout-timer {
font-size: 28px;
font-weight: 700;
color: #f59e0b;
margin-bottom: 24px;
}
.session-timeout-buttons {
display: flex;
gap: 12px;
justify-content: center;
}
.session-timeout-buttons .btn {
min-width: 120px;
}
/* ===========================================
Keyboard Shortcuts Help (Cmd+/)
=========================================== */
.shortcuts-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.shortcuts-modal.active {
opacity: 1;
visibility: visible;
}
.shortcuts-content {
background: #fff;
border-radius: 16px;
padding: 24px;
max-width: 400px;
width: 90%;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.shortcuts-title {
font-size: 18px;
font-weight: 700;
color: #1e293b;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.shortcut-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #e2e8f0;
}
.shortcut-item:last-child {
border-bottom: none;
}
.shortcut-key {
display: inline-flex;
align-items: center;
gap: 4px;
}
.shortcut-key kbd {
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 4px 8px;
font-size: 13px;
font-family: monospace;
font-weight: 600;
color: #475569;
}
.shortcut-desc {
color: #64748b;
font-size: 14px;
}
/* ===========================================
ADA Accessibility Improvements
=========================================== */
/* Skip to main content link */
.skip-link {
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
background: var(--viv-primary);
color: #fff;
padding: 12px 24px;
border-radius: 8px;
z-index: 10001;
font-weight: 600;
text-decoration: none;
transition: top 0.3s ease;
}
.skip-link:focus {
top: 12px;
}
/* Focus visible styles for better keyboard navigation */
*:focus-visible {
outline: 2px solid var(--viv-primary);
outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--viv-primary);
outline-offset: 2px;
}
/* Ensure sufficient color contrast for disabled states */
button:disabled,
input:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Screen reader only class */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Ensure links are distinguishable */
a:not(.btn):not(.nav-link):not([class*="action"]) {
text-decoration: underline;
text-underline-offset: 2px;
}
/* Improved focus indicators for cards and clickable elements */
.card-hover:focus-visible,
.request-item:focus-visible,
.quick-action:focus-visible {
outline: 2px solid var(--viv-primary);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}
/* ===========================================
Admin Portal Date Range Selector
=========================================== */
.admin-date-range-selector {
display: flex;
gap: 12px;
margin-bottom: 24px;
padding: 0;
width: 100%;
}
.admin-date-range-btn {
flex: 1;
padding: 12px 20px;
border: 2px solid rgba(16, 185, 129, 0.3);
border-radius: var(--viv-radius-md);
background: var(--viv-bg-card);
color: var(--viv-text-secondary);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
}
.admin-date-range-btn:hover {
background: rgba(16, 185, 129, 0.1);
border-color: var(--viv-primary);
color: var(--viv-text-primary);
}
.admin-date-range-btn.active {
background: var(--viv-primary);
border-color: var(--viv-primary);
color: white;
}
.admin-date-range-btn.active:hover {
background: #059669;
border-color: #059669;
}
/* ===========================================
Admin Portal Traffic Sources List
=========================================== */
.traffic-sources-list {
padding: 8px 0;
}
.traffic-source-item {
margin-bottom: 16px;
}
.traffic-source-item:last-child {
margin-bottom: 0;
}
.traffic-source-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.traffic-source-header .traffic-source-name {
font-size: 15px;
font-weight: 600;
color: var(--viv-text-primary);
}
.traffic-source-sessions {
font-size: 15px;
font-weight: 700;
color: var(--viv-text-primary);
}
.traffic-source-bar-bg {
height: 10px;
background: rgba(148, 163, 184, 0.15);
border-radius: 5px;
overflow: hidden;
}
.traffic-source-bar {
height: 100%;
border-radius: 5px;
transition: width 0.6s ease;
}
/* ===========================================
Admin Portal Top Pages List
=========================================== */
.top-pages-list {
padding: 8px 0;
}
.top-page-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--viv-border);
}
.top-page-item:last-child {
border-bottom: none;
}
.top-page-path {
font-size: 14px;
color: var(--viv-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 70%;
}
.top-page-views {
font-size: 14px;
font-weight: 600;
color: var(--viv-text-secondary);
white-space: nowrap;
}
/* ============================================
SESSION TIMEOUT WARNING TOAST
Add this to the end of style.css
============================================ */
/* Main toast container */
.session-toast {
position: fixed;
bottom: 24px;
right: 24px;
max-width: 420px;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
z-index: 10000;
overflow: hidden;
transform: translateY(120%) scale(0.95);
opacity: 0;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.session-toast-visible {
transform: translateY(0) scale(1);
opacity: 1;
}
.session-toast-hiding {
transform: translateY(120%) scale(0.95);
opacity: 0;
}
.session-toast-content {
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
.session-toast-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #b45309;
flex-shrink: 0;
}
.session-toast-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.session-toast-text strong {
font-size: 16px;
font-weight: 700;
color: #1f2937;
}
.session-toast-text span {
font-size: 14px;
color: #6b7280;
line-height: 1.5;
}
.session-toast-text b {
color: #b45309;
font-weight: 700;
}
.session-toast-actions {
display: flex;
gap: 10px;
margin-top: 4px;
}
.session-toast-btn {
flex: 1;
padding: 12px 16px;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.session-toast-btn-primary {
background: linear-gradient(135deg, #047857, #065f46);
color: #ffffff;
box-shadow: 0 4px 12px rgba(4, 120, 87, 0.3);
white-space: nowrap; /* <-- ADD THIS LINE */
}
.session-toast-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(4, 120, 87, 0.4);
}
.session-toast-btn-secondary {
background: #f3f4f6;
color: #6b7280;
}
.session-toast-btn-secondary:hover {
background: #e5e7eb;
color: #374151;
}
/* Progress bar at bottom */
.session-toast-progress {
height: 4px;
background: #f3f4f6;
}
.session-toast-progress-bar {
height: 100%;
width: 100%;
background: linear-gradient(90deg, #fbbf24, #f59e0b);
transition: width 300s linear;
}
/* Small feedback toast (extending/extended) */
.session-feedback-toast {
position: fixed;
bottom: 24px;
right: 24px;
background: #1f2937;
color: #ffffff;
padding: 14px 20px;
border-radius: 12px;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
z-index: 10001;
transform: translateY(20px);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.session-feedback-toast.session-feedback-visible {
transform: translateY(0);
opacity: 1;
}
.session-feedback-toast.session-feedback-success {
background: linear-gradient(135deg, #047857, #065f46);
}
/* Spinner animation */
.session-feedback-spinner {
animation: session-spin 1s linear infinite;
}
@keyframes session-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Mobile responsiveness */
@media (max-width: 480px) {
.session-toast {
bottom: 16px;
right: 16px;
left: 16px;
max-width: none;
}
.session-toast-content {
padding: 16px;
}
.session-toast-actions {
flex-direction: column;
}
.session-feedback-toast {
bottom: 16px;
right: 16px;
left: 16px;
}
}
/* ============================================
SKELETON LOADING STATES
Add this to the end of style.css
============================================ */
/* Base skeleton element */
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: 8px;
}
@keyframes skeleton-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Skeleton stat card */
.skeleton-stat-card {
background: #ffffff;
border-radius: 16px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
border: 1px solid #f0f0f0;
}
.skeleton-stat-icon {
width: 48px;
height: 48px;
border-radius: 12px;
margin-bottom: 16px;
}
.skeleton-stat-label {
height: 14px;
width: 60%;
margin-bottom: 12px;
}
.skeleton-stat-value {
height: 32px;
width: 45%;
margin-bottom: 8px;
}
.skeleton-stat-subtext {
height: 12px;
width: 80%;
}
/* Skeleton request item */
.skeleton-request-item {
background: #ffffff;
border-radius: 16px;
padding: 20px 24px;
margin-bottom: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
border: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 120px;
}
.skeleton-request-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
.skeleton-request-left {
display: flex;
align-items: flex-start;
gap: 12px;
flex: 1;
}
.skeleton-request-status {
width: 20px;
height: 20px;
border-radius: 4px;
flex-shrink: 0;
margin-top: 2px;
}
.skeleton-request-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.skeleton-request-title {
height: 20px;
width: 55%;
border-radius: 4px;
}
.skeleton-request-desc {
height: 16px;
width: 75%;
border-radius: 4px;
}
.skeleton-request-meta {
height: 14px;
width: 35%;
border-radius: 4px;
margin-top: 8px;
}
.skeleton-request-badge {
width: 70px;
height: 28px;
border-radius: 14px;
flex-shrink: 0;
}
/* Skeleton billing row */
.skeleton-billing-row {
background: #ffffff;
border-radius: 12px;
padding: 16px 20px;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid #f0f0f0;
}
.skeleton-billing-left {
flex: 1;
}
.skeleton-billing-title {
height: 16px;
width: 50%;
margin-bottom: 6px;
}
.skeleton-billing-desc {
height: 12px;
width: 70%;
}
.skeleton-billing-price {
width: 80px;
height: 24px;
border-radius: 6px;
}
/* Skeleton message bubble */
.skeleton-message {
display: flex;
gap: 12px;
margin-bottom: 16px;
}
.skeleton-message.outgoing {
flex-direction: row-reverse;
}
.skeleton-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
flex-shrink: 0;
}
.skeleton-bubble {
max-width: 280px;
padding: 14px 18px;
border-radius: 18px;
}
.skeleton-bubble-line {
height: 14px;
margin-bottom: 8px;
border-radius: 4px;
}
.skeleton-bubble-line:last-child {
margin-bottom: 0;
width: 60%;
}
.skeleton-message.outgoing .skeleton-bubble {
background: rgba(59, 130, 246, 0.1);
}
.skeleton-message.incoming .skeleton-bubble {
background: rgba(4, 120, 87, 0.1);
}
/* Container for skeleton grids */
.skeleton-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-bottom: 24px;
}
.skeleton-requests-list {
display: flex;
flex-direction: column;
}
/* Fade-out animation when content loads */
.skeleton-container {
transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
.skeleton-container.fade-out {
opacity: 0;
transform: translateY(-5px);
pointer-events: none;
}
/* Dark mode support (if you add it later) */
@media (prefers-color-scheme: dark) {
.skeleton {
background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
background-size: 200% 100%;
}
.skeleton-stat-card,
.skeleton-request-item,
.skeleton-billing-row {
background: #1a1a1a;
border-color: #333;
}
}
/* Mobile adjustments */
@media (max-width: 640px) {
.skeleton-stat-card {
padding: 18px;
}
.skeleton-request-item {
padding: 16px;
}
.skeleton-request-badge {
display: none;
}
}
/* ============================================
ENHANCED EMPTY STATES
Add this to the end of style.css
(after the existing empty state styles)
============================================ */
/* Enhanced empty state container */
.empty-state-enhanced {
text-align: center;
padding: 48px 24px;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 16px;
border: 2px dashed #e2e8f0;
}
.empty-state-enhanced .empty-icon-wrapper {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: empty-state-pulse 2s ease-in-out infinite;
}
.empty-state-enhanced .empty-icon-wrapper svg {
width: 36px;
height: 36px;
color: #047857;
}
@keyframes empty-state-pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(4, 120, 87, 0.2);
}
50% {
transform: scale(1.02);
box-shadow: 0 0 0 12px rgba(4, 120, 87, 0);
}
}
.empty-state-enhanced .empty-title {
font-size: 20px;
font-weight: 700;
color: #1e293b;
margin-bottom: 8px;
}
.empty-state-enhanced .empty-description {
font-size: 15px;
color: #64748b;
line-height: 1.6;
max-width: 320px;
margin: 0 auto 24px;
}
.empty-state-enhanced .empty-action {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: linear-gradient(135deg, #047857, #065f46);
color: white;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(4, 120, 87, 0.3);
}
.empty-state-enhanced .empty-action:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(4, 120, 87, 0.4);
}
.empty-state-enhanced .empty-action svg {
width: 18px;
height: 18px;
}
/* Compact empty state (for inline areas like chat) */
.empty-state-compact {
text-align: center;
padding: 32px 20px;
}
.empty-state-compact .empty-icon-small {
width: 48px;
height: 48px;
margin: 0 auto 12px;
color: #94a3b8;
opacity: 0.6;
}
.empty-state-compact .empty-text-small {
font-size: 14px;
color: #94a3b8;
margin: 0;
}
/* Minimal empty state (for lists) */
.empty-state-minimal {
text-align: center;
padding: 40px 20px;
color: #64748b;
}
.empty-state-minimal svg {
width: 32px;
height: 32px;
margin-bottom: 12px;
opacity: 0.5;
}
.empty-state-minimal p {
font-size: 14px;
margin: 0;
}
/* Analytics specific empty state */
.empty-state-analytics {
text-align: center;
padding: 40px 20px;
background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
border-radius: 12px;
border: 2px dashed #d8b4fe;
}
.empty-state-analytics .empty-icon-wrapper {
background: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%);
}
.empty-state-analytics .empty-icon-wrapper svg {
color: #7c3aed;
}
/* Billing specific empty state */
.empty-state-billing {
text-align: center;
padding: 32px 20px;
background: #f8fafc;
border-radius: 12px;
border: 1px dashed #cbd5e1;
}
.empty-state-billing svg {
width: 40px;
height: 40px;
color: #94a3b8;
margin-bottom: 12px;
}
.empty-state-billing p {
font-size: 15px;
color: #64748b;
margin: 0;
}
/* Appear animation for empty states */
.empty-state-enhanced,
.empty-state-compact,
.empty-state-analytics,
.empty-state-billing {
animation: empty-state-appear 0.4s ease-out;
}
@keyframes empty-state-appear {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Mobile adjustments */
@media (max-width: 480px) {
.empty-state-enhanced {
padding: 32px 16px;
}
.empty-state-enhanced .empty-icon-wrapper {
width: 64px;
height: 64px;
}
.empty-state-enhanced .empty-icon-wrapper svg {
width: 28px;
height: 28px;
}
.empty-state-enhanced .empty-title {
font-size: 18px;
}
.empty-state-enhanced .empty-description {
font-size: 14px;
}
}
/* ============================================
SKELETON LOADING STATES
Add this to the end of style.css
============================================ */
/* Base skeleton element */
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: 8px;
}
@keyframes skeleton-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Skeleton stat card */
.skeleton-stat-card {
background: #ffffff;
border-radius: 16px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
border: 1px solid #f0f0f0;
}
.skeleton-stat-icon {
width: 48px;
height: 48px;
border-radius: 12px;
margin-bottom: 16px;
}
.skeleton-stat-label {
height: 14px;
width: 60%;
margin-bottom: 12px;
}
.skeleton-stat-value {
height: 32px;
width: 45%;
margin-bottom: 8px;
}
.skeleton-stat-subtext {
height: 12px;
width: 80%;
}
/* Skeleton request item */
.skeleton-request-item {
background: #ffffff;
border-radius: 16px;
padding: 20px 24px;
margin-bottom: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
border: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 120px;
}
.skeleton-request-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
.skeleton-request-left {
display: flex;
align-items: flex-start;
gap: 12px;
flex: 1;
}
.skeleton-request-status {
width: 20px;
height: 20px;
border-radius: 4px;
flex-shrink: 0;
margin-top: 2px;
}
.skeleton-request-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.skeleton-request-title {
height: 20px;
width: 55%;
border-radius: 4px;
}
.skeleton-request-desc {
height: 16px;
width: 75%;
border-radius: 4px;
}
.skeleton-request-meta {
height: 14px;
width: 35%;
border-radius: 4px;
margin-top: 8px;
}
.skeleton-request-badge {
width: 70px;
height: 28px;
border-radius: 14px;
flex-shrink: 0;
}
/* Skeleton billing row */
.skeleton-billing-row {
background: #ffffff;
border-radius: 12px;
padding: 16px 20px;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid #f0f0f0;
}
.skeleton-billing-left {
flex: 1;
}
.skeleton-billing-title {
height: 16px;
width: 50%;
margin-bottom: 6px;
}
.skeleton-billing-desc {
height: 12px;
width: 70%;
}
.skeleton-billing-price {
width: 80px;
height: 24px;
border-radius: 6px;
}
/* Skeleton message bubble */
.skeleton-message {
display: flex;
gap: 12px;
margin-bottom: 16px;
}
.skeleton-message.outgoing {
flex-direction: row-reverse;
}
.skeleton-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
flex-shrink: 0;
}
.skeleton-bubble {
max-width: 280px;
padding: 14px 18px;
border-radius: 18px;
}
.skeleton-bubble-line {
height: 14px;
margin-bottom: 8px;
border-radius: 4px;
}
.skeleton-bubble-line:last-child {
margin-bottom: 0;
width: 60%;
}
.skeleton-message.outgoing .skeleton-bubble {
background: rgba(59, 130, 246, 0.1);
}
.skeleton-message.incoming .skeleton-bubble {
background: rgba(4, 120, 87, 0.1);
}
/* Container for skeleton grids */
.skeleton-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-bottom: 24px;
}
.skeleton-requests-list {
display: flex;
flex-direction: column;
}
/* Fade-out animation when content loads */
.skeleton-container {
transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
.skeleton-container.fade-out {
opacity: 0;
transform: translateY(-5px);
pointer-events: none;
}
/* Dark mode support (if you add it later) */
@media (prefers-color-scheme: dark) {
.skeleton {
background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
background-size: 200% 100%;
}
.skeleton-stat-card,
.skeleton-request-item,
.skeleton-billing-row {
background: #1a1a1a;
border-color: #333;
}
}
/* Mobile adjustments */
@media (max-width: 640px) {
.skeleton-stat-card {
padding: 18px;
}
.skeleton-request-item {
padding: 16px;
}
.skeleton-request-badge {
display: none;
}
}
/* ============================================
ENHANCED EMPTY STATES
Add this to the end of style.css
(after the existing empty state styles)
============================================ */
/* Enhanced empty state container */
.empty-state-enhanced {
text-align: center;
padding: 48px 24px;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 16px;
border: 2px dashed #e2e8f0;
}
.empty-state-enhanced .empty-icon-wrapper {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: empty-state-pulse 2s ease-in-out infinite;
}
.empty-state-enhanced .empty-icon-wrapper svg {
width: 36px;
height: 36px;
color: #047857;
}
@keyframes empty-state-pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(4, 120, 87, 0.2);
}
50% {
transform: scale(1.02);
box-shadow: 0 0 0 12px rgba(4, 120, 87, 0);
}
}
.empty-state-enhanced .empty-title {
font-size: 20px;
font-weight: 700;
color: #1e293b;
margin-bottom: 8px;
}
.empty-state-enhanced .empty-description {
font-size: 15px;
color: #64748b;
line-height: 1.6;
max-width: 320px;
margin: 0 auto 24px;
}
.empty-state-enhanced .empty-action {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: linear-gradient(135deg, #047857, #065f46);
color: white;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(4, 120, 87, 0.3);
}
.empty-state-enhanced .empty-action:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(4, 120, 87, 0.4);
}
.empty-state-enhanced .empty-action svg {
width: 18px;
height: 18px;
}
/* Compact empty state (for inline areas like chat) */
.empty-state-compact {
text-align: center;
padding: 32px 20px;
}
.empty-state-compact .empty-icon-small {
width: 48px;
height: 48px;
margin: 0 auto 12px;
color: #94a3b8;
opacity: 0.6;
}
.empty-state-compact .empty-text-small {
font-size: 14px;
color: #94a3b8;
margin: 0;
}
/* Minimal empty state (for lists) */
.empty-state-minimal {
text-align: center;
padding: 40px 20px;
color: #64748b;
}
.empty-state-minimal svg {
width: 32px;
height: 32px;
margin-bottom: 12px;
opacity: 0.5;
}
.empty-state-minimal p {
font-size: 14px;
margin: 0;
}
/* Analytics specific empty state */
.empty-state-analytics {
text-align: center;
padding: 40px 20px;
background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
border-radius: 12px;
border: 2px dashed #d8b4fe;
}
.empty-state-analytics .empty-icon-wrapper {
background: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%);
}
.empty-state-analytics .empty-icon-wrapper svg {
color: #7c3aed;
}
/* Billing specific empty state */
.empty-state-billing {
text-align: center;
padding: 32px 20px;
background: #f8fafc;
border-radius: 12px;
border: 1px dashed #cbd5e1;
}
.empty-state-billing svg {
width: 40px;
height: 40px;
color: #94a3b8;
margin-bottom: 12px;
}
.empty-state-billing p {
font-size: 15px;
color: #64748b;
margin: 0;
}
/* Appear animation for empty states */
.empty-state-enhanced,
.empty-state-compact,
.empty-state-analytics,
.empty-state-billing {
animation: empty-state-appear 0.4s ease-out;
}
@keyframes empty-state-appear {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Mobile adjustments */
@media (max-width: 480px) {
.empty-state-enhanced {
padding: 32px 16px;
}
.empty-state-enhanced .empty-icon-wrapper {
width: 64px;
height: 64px;
}
.empty-state-enhanced .empty-icon-wrapper svg {
width: 28px;
height: 28px;
}
.empty-state-enhanced .empty-title {
font-size: 18px;
}
.empty-state-enhanced .empty-description {
font-size: 14px;
}
}/* ============================================
ADMIN PORTAL - GOOGLE ADS STYLES
These styles support the admin-portal.js Google Ads section
Add this to the END of style.css
============================================ */
/* Admin Google Ads wrapper */
.admin-gads {
margin-top: 24px;
}
/* Page container */
.gads-page {
display: flex;
flex-direction: column;
gap: 24px;
}
/* ============================================
HERO SECTION (Admin Google Ads)
============================================ */
.gads-hero {
background: linear-gradient(135deg, #034737 0%, #056449 50%, #067a5a 100%);
border-radius: 20px;
padding: 32px;
color: #fff;
position: relative;
overflow: hidden;
}
.gads-hero::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 60%;
height: 200%;
background: radial-gradient(ellipse, rgba(255,255,255,0.08) 0%, transparent 70%);
pointer-events: none;
}
.gads-hero-content {
position: relative;
z-index: 1;
}
.gads-hero-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 20px;
}
.gads-hero-title {
font-size: 26px;
font-weight: 700;
margin: 0 0 8px 0;
display: flex;
align-items: center;
gap: 10px;
color: #fff;
}
.gads-hero-icon {
display: inline-flex;
width: 28px;
height: 28px;
opacity: 0.9;
}
.gads-hero-icon svg {
width: 100%;
height: 100%;
}
.gads-hero-subtitle {
font-size: 15px;
color: rgba(255, 255, 255, 0.85);
margin: 0;
line-height: 1.5;
}
.gads-hero-actions {
text-align: right;
}
/* ============================================
STATUS BADGES
============================================ */
.gads-status-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
margin-bottom: 6px;
}
.gads-status-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
border-radius: 16px;
font-size: 11px;
font-weight: 600;
backdrop-filter: blur(8px);
}
.gads-status-badge.success {
background: rgba(16, 185, 129, 0.25);
color: #d1fae5;
border: 1px solid rgba(16, 185, 129, 0.4);
}
.gads-status-badge.warning {
background: rgba(251, 191, 36, 0.25);
color: #fef3c7;
border: 1px solid rgba(251, 191, 36, 0.4);
}
.gads-status-icon {
display: inline-flex;
width: 14px;
height: 14px;
}
.gads-status-icon svg {
width: 100%;
height: 100%;
}
.gads-status-meta {
font-size: 11px;
color: rgba(255, 255, 255, 0.6);
}
/* ============================================
DATE RANGE BUTTONS
============================================ */
.gads-date-range {
display: flex;
gap: 8px;
margin-bottom: 24px;
}
.gads-range-btn {
padding: 10px 20px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.gads-range-btn:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.4);
}
.gads-range-btn.active {
background: #fff;
color: #034737;
border-color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* ============================================
PRIMARY KPIs (in hero)
============================================ */
.gads-primary-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px;
}
.gads-primary-kpi {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 22px;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
color: #0f172a;
}
.gads-primary-kpi:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(2, 6, 23, 0.10);
border-color: #cbd5e1;
}
.gads-primary-kpi:hover {
background: rgba(255, 255, 255, 0.18);
transform: translateY(-2px);
}
.gads-kpi-label {
font-size: 13px;
font-weight: 800;
color: #64748b;
letter-spacing: 0.6px;
text-transform: uppercase;
margin-bottom: 8px;
}
.gads-kpi-value {
font-size: 28px;
font-weight: 900;
color: #0f172a;
line-height: 1.1;
margin-bottom: 8px;
}
.gads-kpi-trend {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 12px;
font-weight: 600;
padding: 3px 8px;
border-radius: 10px;
margin-bottom: 6px;
}
.gads-kpi-trend.positive {
background: rgba(16, 185, 129, 0.15);
color: #047857;
}
.gads-kpi-trend.negative {
background: rgba(239, 68, 68, 0.15);
color: #dc2626;
}
.gads-kpi-helper {
font-size: 12px;
color: #64748b;
}
/* KPI Placeholder (conversion not configured) */
.gads-kpi-placeholder {
background: #f8fafc;
border: 2px dashed #cbd5e1;
border-radius: 14px;
padding: 22px;
text-align: center;
}
.gads-kpi-placeholder-icon {
margin-bottom: 8px;
opacity: 0.8;
}
.gads-kpi-placeholder-icon svg {
width: 28px;
height: 28px;
color: #94a3b8;
}
.gads-kpi-placeholder-text {
font-size: 14px;
font-weight: 600;
color: #475569;
margin-bottom: 6px;
}
.gads-kpi-placeholder-hint {
font-size: 12px;
color: #64748b;
}
/* ============================================
CARDS (shared base for sections outside hero)
============================================ */
.gads-card {
background: #fff;
border-radius: 16px;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
padding: 24px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gads-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
/* ============================================
BUDGET CARD
============================================ */
.gads-budget-card {
margin-bottom: 32px;
}
.gads-budget-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
}
.gads-budget-title {
font-size: 22px;
font-weight: 900;
color: #0f172a;
margin: 0;
}
.gads-budget-subtitle {
font-size: 14px;
color: #64748b;
margin-top: 6px;
}
.gads-pacing-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 16px;
font-size: 14px;
font-weight: 700;
}
.gads-pacing-badge.on-pace {
background: #dcfce7;
color: #166534;
}
.gads-pacing-badge.over {
background: #fee2e2;
color: #991b1b;
}
.gads-pacing-badge.under {
background: #fef3c7;
color: #92400e;
}
.gads-pacing-icon {
display: inline-flex;
width: 14px;
height: 14px;
}
.gads-pacing-icon svg {
width: 100%;
height: 100%;
}
.gads-budget-amounts {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.gads-budget-spent {
font-size: 30px;
font-weight: 800;
color: #047857;
}
.gads-budget-total {
font-size: 16px;
color: #64748b;
}
.gads-budget-pct {
font-size: 12px;
font-weight: 600;
color: #fff;
background: #047857;
padding: 4px 10px;
border-radius: 10px;
margin-left: 6px;
}
.gads-budget-progress {
height: 10px;
background: #e2e8f0;
border-radius: 8px;
position: relative;
overflow: visible;
margin-bottom: 16px;
}
.gads-budget-progress-fill {
height: 100%;
background: linear-gradient(90deg, #047857, #10b981);
border-radius: 8px;
transition: width 0.5s ease;
}
.gads-budget-expected-marker {
position: absolute;
top: -3px;
width: 3px;
height: 16px;
background: #1e293b;
border-radius: 2px;
transform: translateX(-50%);
}
.gads-budget-pacing {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 18px;
padding-top: 18px;
border-top: 1px solid #e2e8f0;
}
.gads-pacing-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.gads-pacing-label {
font-size: 13px;
color: #64748b;
font-weight: 500;
}
.gads-pacing-value {
font-size: 17px;
font-weight: 700;
color: #1e293b;
}
/* ============================================
INSIGHTS CARD
============================================ */
.gads-insights-card {
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
border: 1px solid #a7f3d0;
padding: 28px;
}
.gads-insights-header {
margin-bottom: 20px;
}
.gads-insights-title {
font-size: 20px;
font-weight: 700;
color: #065f46;
margin: 0;
}
.gads-insights-list {
list-style: none;
padding: 0;
margin: 0;
}
.gads-insight-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid rgba(167, 243, 208, 0.6);
font-size: 15px;
color: #047857;
line-height: 1.6;
}
.gads-insight-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.gads-insight-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
color: #059669;
margin-top: 2px;
}
.gads-insight-icon svg {
width: 100%;
height: 100%;
}
.gads-insight-text {
flex: 1;
font-weight: 500;
}
/* ============================================
SECONDARY METRICS
============================================ */
.gads-secondary-metrics {
background: #f8fafc;
border-radius: 14px;
padding: 22px 26px;
border: 1px solid #e2e8f0;
}
.gads-secondary-title {
font-size: 13px;
font-weight: 700;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 18px;
}
.gads-secondary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 22px;
}
.gads-secondary-metric {
text-align: center;
}
.gads-sec-label {
font-size: 13px;
color: #64748b;
margin-bottom: 6px;
font-weight: 500;
}
.gads-sec-value {
font-size: 20px;
font-weight: 700;
color: #1e293b;
}
.gads-sec-trend {
font-size: 13px;
font-weight: 600;
margin-left: 6px;
}
.gads-sec-trend.up {
color: #10b981;
}
.gads-sec-trend.down {
color: #ef4444;
}
/* ============================================
BREAKDOWN GRID (Network + Device)
============================================ */
.gads-breakdown-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
margin-top: 20px;
}
.gads-breakdown-card {
margin-bottom: 0;
padding: 26px;
}
.gads-breakdown-title {
font-size: 18px;
font-weight: 700;
color: #1e293b;
margin: 0 0 6px 0;
}
.gads-breakdown-subtitle {
font-size: 14px;
color: #64748b;
margin: 0 0 20px 0;
}
/* Bar Items (Network/Device rows) */
.gads-bar-item {
margin-bottom: 18px;
}
.gads-bar-item:last-child {
margin-bottom: 0;
}
.gads-bar-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.gads-bar-name-wrap {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.gads-bar-dot {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
.gads-bar-dot.search {
background: linear-gradient(135deg, #3b82f6, #60a5fa);
}
.gads-bar-dot.display {
background: linear-gradient(135deg, #ec4899, #f472b6);
}
.gads-bar-dot.other {
background: linear-gradient(135deg, #94a3b8, #cbd5e1);
}
.gads-bar-dot.mobile {
background: linear-gradient(135deg, #047857, #10b981);
}
.gads-bar-dot.desktop {
background: linear-gradient(135deg, #4f46e5, #6366f1);
}
.gads-bar-dot.tablet {
background: linear-gradient(135deg, #f59e0b, #fbbf24);
}
.gads-bar-name {
font-size: 15px;
font-weight: 600;
color: #1e293b;
}
.gads-bar-tooltip {
font-size: 11px;
color: #64748b;
background: #f1f5f9;
padding: 2px 8px;
border-radius: 4px;
white-space: nowrap;
}
.gads-bar-stats {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
text-align: right;
}
.gads-stat-primary {
font-size: 15px;
font-weight: 600;
color: #1e293b;
}
.gads-stat-secondary {
font-size: 13px;
color: #64748b;
}
.gads-bar-track {
height: 10px;
background: #f1f5f9;
border-radius: 6px;
overflow: hidden;
}
.gads-bar-fill {
height: 100%;
border-radius: 6px;
transition: width 0.5s ease;
}
.gads-bar-fill.search {
background: linear-gradient(90deg, #3b82f6, #60a5fa);
}
.gads-bar-fill.display {
background: linear-gradient(90deg, #ec4899, #f472b6);
}
.gads-bar-fill.other {
background: linear-gradient(90deg, #94a3b8, #cbd5e1);
}
.gads-bar-fill.mobile {
background: linear-gradient(90deg, #047857, #10b981);
}
.gads-bar-fill.desktop {
background: linear-gradient(90deg, #4f46e5, #6366f1);
}
.gads-bar-fill.tablet {
background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
/* Device Callout */
.gads-device-callout {
display: flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
border-radius: 10px;
padding: 12px 14px;
font-size: 14px;
font-weight: 600;
color: #047857;
margin-bottom: 14px;
}
.gads-device-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
display: flex;
align-items: center;
}
.gads-device-icon svg {
width: 16px;
height: 16px;
}
/* ============================================
KEYWORDS CARD
============================================ */
.gads-keywords-card {
margin-bottom: 0;
margin-top: 24px;
padding: 26px;
}
.gads-keywords-title {
font-size: 18px;
font-weight: 700;
color: #1e293b;
margin: 0 0 6px 0;
}
.gads-keywords-subtitle {
font-size: 14px;
color: #64748b;
margin: 0 0 20px 0;
}
.gads-table-wrap {
overflow-x: auto;
margin: 0 -8px;
padding: 0 8px;
}
.gads-keywords-table {
width: 100%;
border-collapse: collapse;
min-width: 450px;
}
.gads-keywords-table thead tr {
border-bottom: 2px solid #e2e8f0;
}
.gads-keywords-table th {
text-align: left;
padding: 12px 14px;
font-size: 12px;
font-weight: 700;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.gads-th-right {
text-align: right !important;
}
.gads-keywords-table tbody tr {
border-bottom: 1px solid #f1f5f9;
transition: background 0.15s ease;
}
.gads-keywords-table tbody tr:hover {
background: #f8fafc;
}
.gads-keywords-table tbody tr:last-child {
border-bottom: none;
}
.gads-keywords-table td {
padding: 14px;
font-size: 15px;
color: #1e293b;
}
.gads-td-right {
text-align: right;
color: #64748b;
}
.gads-keyword-cell {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
}
.gads-keyword-icon {
width: 14px;
height: 14px;
color: #94a3b8;
flex-shrink: 0;
display: flex;
align-items: center;
}
.gads-keyword-icon svg {
width: 14px;
height: 14px;
}
.gads-ctr-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
}
.gads-ctr-badge.high {
background: #dcfce7;
color: #166534;
}
.gads-ctr-badge.medium {
background: #fef3c7;
color: #92400e;
}
.gads-ctr-badge.low {
background: #f1f5f9;
color: #64748b;
}
/* ============================================
CONVERSIONS CARD
============================================ */
.gads-conversions-card {
margin-bottom: 0;
margin-top: 24px;
padding: 26px;
}
.gads-conversions-title {
font-size: 18px;
font-weight: 700;
color: #1e293b;
margin: 0 0 6px 0;
}
.gads-conversions-subtitle {
font-size: 14px;
color: #64748b;
margin: 0 0 20px 0;
}
.gads-conversions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 16px;
}
.gads-conv-item {
background: #f8fafc;
border-radius: 12px;
padding: 20px;
text-align: center;
transition: all 0.2s ease;
}
.gads-conv-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.gads-conv-item.total {
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}
.gads-conv-item.calls {
background: linear-gradient(135deg, #eff6ff, #dbeafe);
}
.gads-conv-item.forms {
background: linear-gradient(135deg, #faf5ff, #ede9fe);
}
.gads-conv-item.other {
background: linear-gradient(135deg, #fefce8, #fef9c3);
}
.gads-conv-icon {
margin-bottom: 8px;
}
.gads-conv-icon svg {
width: 28px;
height: 28px;
}
.gads-conv-item.total .gads-conv-icon {
color: #047857;
}
.gads-conv-item.calls .gads-conv-icon {
color: #2563eb;
}
.gads-conv-item.forms .gads-conv-icon {
color: #7c3aed;
}
.gads-conv-item.other .gads-conv-icon {
color: #d97706;
}
.gads-conv-value {
font-size: 26px;
font-weight: 800;
color: #1e293b;
margin-bottom: 6px;
}
.gads-conv-label {
font-size: 12px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ============================================
EXPORT SECTION
============================================ */
.gads-export-section {
margin-top: 28px;
margin-bottom: 28px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 24px 28px;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
}
.gads-export-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
background: linear-gradient(135deg, #034737, #056449);
color: #fff;
font-size: 15px;
font-weight: 600;
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
.gads-export-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(3, 71, 55, 0.35);
}
.gads-export-hint {
font-size: 14px;
color: #64748b;
}
/* ============================================
STATE CARDS (Error/Not Enabled)
============================================ */
.gads-state-card {
text-align: center;
padding: 40px 20px;
}
.gads-state-card.error {
background: linear-gradient(135deg, #fef2f2, #fee2e2);
border-color: #fecaca;
}
.gads-state-icon {
margin-bottom: 12px;
color: #94a3b8;
}
.gads-state-icon svg {
width: 40px;
height: 40px;
}
.gads-state-card.error .gads-state-icon {
color: #ef4444;
}
.gads-state-title {
font-size: 16px;
font-weight: 700;
color: #1e293b;
margin: 0 0 6px 0;
}
.gads-state-text {
font-size: 13px;
color: #64748b;
max-width: 350px;
margin: 0 auto;
}
/* Empty inline message */
.gads-empty-inline {
text-align: center;
padding: 20px;
color: #64748b;
font-size: 13px;
}
/* ============================================
SKELETON LOADING
============================================ */
.gads-page .skeleton-card {
min-height: 80px;
background: rgba(255, 255, 255, 0.08);
animation: gads-skeleton-pulse 1.5s ease-in-out infinite;
}
.gads-page .skeleton-line {
height: 20px;
width: 60%;
background: rgba(255, 255, 255, 0.15);
border-radius: 6px;
animation: gads-skeleton-pulse 1.5s ease-in-out infinite;
}
.gads-page .skeleton-pill {
height: 24px;
width: 100px;
background: rgba(255, 255, 255, 0.15);
border-radius: 12px;
animation: gads-skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes gads-skeleton-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* ============================================
RESPONSIVE STYLES
============================================ */
@media (max-width: 768px) {
.gads-hero {
padding: 24px;
}
.gads-hero-header {
flex-direction: column;
}
.gads-hero-actions {
text-align: left;
}
.gads-status-badges {
justify-content: flex-start;
}
.gads-hero-title {
font-size: 22px;
}
.gads-date-range {
flex-wrap: wrap;
}
.gads-range-btn {
padding: 8px 16px;
font-size: 13px;
}
.gads-primary-kpis {
grid-template-columns: repeat(2, 1fr);
}
.gads-breakdown-grid {
grid-template-columns: 1fr;
}
.gads-budget-spent {
font-size: 24px;
}
.gads-export-section {
flex-direction: column;
gap: 10px;
}
.gads-bar-header {
flex-direction: column;
align-items: flex-start;
}
.gads-bar-stats {
align-items: flex-start;
text-align: left;
}
}
@media (max-width: 480px) {
.gads-hero {
padding: 18px;
}
.gads-hero-title {
font-size: 18px;
}
.gads-primary-kpis {
grid-template-columns: 1fr 1fr;
}
.gads-kpi-value {
font-size: 20px;
}
.gads-card {
padding: 18px;
}
.gads-conv-value {
font-size: 18px;
}
.gads-conversions-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* =========================
Dark Mode Theme (Forest)
========================= */
html[data-theme="dark"]{
--viv-bg-page: #0f172a;
--viv-bg-card: #1a2332;
--viv-bg-neutral: #1e293b;
--viv-text-primary: #f1f5f9;
--viv-text-secondary: #94a3b8;
--viv-border: #334155;
--viv-border-light: #475569;
/* Green accent */
--viv-primary: #10b981;
/* Accent */
--viv-accent: #6ee7b7;
--viv-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
}
/* Apply base surfaces/text in dark mode */
html[data-theme="dark"] body{
background: #0f172a;
color: #f1f5f9;
}
html[data-theme="dark"] .header,
html[data-theme="dark"] .container,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .mobile-nav{
background-color: #1a2332;
color: #f1f5f9;
}
/* Inputs */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
background: #0f172a !important;
color: #f1f5f9 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] ::placeholder{ color: #64748b !important; }
/* Secondary buttons */
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn.btn-secondary{
background: #1e293b !important;
color: #f1f5f9 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn.btn-secondary:hover{
background: #334155 !important;
}
/* Hard-coded light-only colors (fixes) */
html[data-theme="dark"] .request-chat-expanded{ background: #1a2332 !important; }
html[data-theme="dark"] .chat-header{
background: #1e293b !important;
border-bottom-color: #334155 !important;
}
html[data-theme="dark"] .chat-messages{ background: #0f172a !important; }
/* Footer */
html[data-theme="dark"] .portal-footer{
background: #1a2332 !important;
border-top: 1px solid #334155 !important;
}
/* =========================
Theme Toggle UI (Portal)
========================= */
.theme-control{ position: relative; display: inline-flex; align-items: center; margin-right: 10px; }
.theme-toggle-btn{ gap: 8px; }
.theme-toggle-btn .theme-label{ display: inline-block; font-size: 14px; }
@media (max-width: 860px){ .theme-toggle-btn .theme-label{ display:none; } }
.theme-menu{
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 160px;
padding: 8px;
border-radius: 12px;
border: 1px solid var(--viv-border);
background: var(--viv-bg-card);
box-shadow: 0 14px 30px rgba(0,0,0,0.18);
display: none;
z-index: 9999;
}
.theme-menu.open{ display:block; }
.theme-menu button{
width: 100%;
text-align: left;
padding: 10px 10px;
border-radius: 10px;
border: 1px solid transparent;
background: transparent;
color: var(--viv-text-primary);
cursor: pointer;
font-size: 14px;
}
.theme-menu button:hover{
background: var(--viv-bg-neutral);
border-color: var(--viv-border);
}
.theme-menu button.active{
background: rgba(16, 185, 129, 0.15);
border-color: rgba(16, 185, 129, 0.3);
}
/* Mobile theme block */
.mobile-theme-control{
margin-top: 14px;
padding: 12px 12px 4px;
border-top: 1px solid var(--viv-border-light);
}
.mobile-theme-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.mobile-theme-label{
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--viv-text-secondary);
}
.mobile-theme-buttons{ display:flex; gap: 8px; flex-wrap: wrap; }
.mobile-theme-toggle {
width: 48px;
height: 48px;
}
/* =========================
Smooth Theme Transition
========================= */
@media (prefers-reduced-motion: no-preference){
html.theme-animating,
html.theme-animating *{
transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease, box-shadow 280ms ease, fill 280ms ease, stroke 280ms ease;
}
}
/* Theme toggle button - matches logout button size */
.theme-toggle-slider {
position: relative;
width: 40px;
height: 40px;
background: var(--viv-bg-neutral);
border: 1px solid var(--viv-border);
border-radius: 10px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
}
.theme-toggle-slider:hover {
border-color: var(--viv-primary);
transform: translateY(-2px);
}
/* Sun and Moon icons (smaller for 40px button) */
.theme-toggle-slider::before,
.theme-toggle-slider::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transition: opacity 0.3s ease;
}
/* Sun icon - centered when active */
.theme-toggle-slider::before {
background-image: url('data:image/svg+xml,');
opacity: 1;
}
/* Moon icon - centered when active */
.theme-toggle-slider::after {
background-image: url('data:image/svg+xml,');
opacity: 0;
}
/* Circle removed - just swap icons */
.theme-toggle-circle {
display: none;
}
/* Dark mode state - swap icon visibility */
html[data-theme="dark"] .theme-toggle-slider::before {
opacity: 0;
}
html[data-theme="dark"] .theme-toggle-slider::after {
opacity: 1;
}
/* ============================================
SPACING FIXES - Issue #6
============================================ */
/* Main content wrapper - prevent clipping into header */
.main-content,
.content-wrapper,
.tab-content {
margin-top: 24px !important;
padding-top: 24px !important;
}
/* First card/element in main content */
.main-content > *:first-child,
.content-wrapper > *:first-child,
.tab-content > *:first-child {
margin-top: 0 !important;
}
/* Dashboard cards - proper spacing */
.dashboard-content,
.dashboard-grid {
padding-top: 24px;
}
/* Request cards - proper spacing */
.requests-section,
.requests-container {
padding-top: 24px;
}
/* Issue #5: Add hover effects to request cards */
.request-item,
.request-card {
transition: all 0.25s ease;
cursor: pointer;
}
.request-item:hover,
.request-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
html[data-theme="dark"] .request-item:hover,
html[data-theme="dark"] .request-card:hover {
box-shadow: 0 4px 12px rgba(90, 110, 74, 0.3);
}
/* ============================================
COMPREHENSIVE DARK MODE - VIV PORTAL
Blue-Grey palette mirroring light mode hierarchy
Last Updated: January 19, 2026
============================================ */
/* ============================================
CSS VARIABLES
============================================ */
html[data-theme="dark"] {
/* Color hierarchy (mirrors light mode) */
--viv-bg-page: #0f172a; /* Body - darkest */
--viv-bg-card: #1a2332; /* Cards/Header/Footer */
--viv-bg-neutral: #1e293b; /* Elevated/hover */
--viv-text-primary: #f1f5f9;
--viv-text-secondary: #94a3b8;
--viv-border: #334155;
--viv-border-light: #475569;
--viv-primary: #10b981;
--viv-accent: #6ee7b7;
--viv-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--viv-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--viv-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
}
/* ============================================
BODY
============================================ */
html[data-theme="dark"] body {
background: #0f172a !important;
color: #f1f5f9 !important;
}
/* ============================================
HEADER - Card color (same as white in light mode)
============================================ */
html[data-theme="dark"] .header {
background: #1a2332 !important;
background-color: #1a2332 !important;
background-image: none !important;
border-bottom: 1px solid #334155 !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
backdrop-filter: none !important;
}
html[data-theme="dark"] .header-content {
background: transparent !important;
background-color: transparent !important;
}
html[data-theme="dark"] .header-logo,
html[data-theme="dark"] .header-client-info,
html[data-theme="dark"] .header-actions,
html[data-theme="dark"] .header-client-wrapper,
html[data-theme="dark"] .header-client-text {
background: transparent !important;
}
/* ============================================
FOOTER - Card color (same as header)
============================================ */
html[data-theme="dark"] .portal-footer,
html[data-theme="dark"] footer,
html[data-theme="dark"] .footer {
background: #1a2332 !important;
background-color: #1a2332 !important;
background-image: none !important;
border-top: 1px solid #334155 !important;
color: #94a3b8 !important;
}
html[data-theme="dark"] .portal-footer a,
html[data-theme="dark"] .footer a {
color: #10b981 !important;
}
html[data-theme="dark"] .portal-footer-inner {
background: transparent !important;
}
/* ============================================
MAIN CONTENT - Body color
============================================ */
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .portal-content,
html[data-theme="dark"] .container,
html[data-theme="dark"] #dashboard,
html[data-theme="dark"] #requests,
html[data-theme="dark"] #billing,
html[data-theme="dark"] #analytics,
html[data-theme="dark"] #google-ads,
html[data-theme="dark"] #contact {
background: #0f172a !important;
}
/* ============================================
CARDS - Card color
============================================ */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .stat-card-new,
html[data-theme="dark"] .chart-container,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .method-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .widget {
background: #1a2332 !important;
border-color: #334155 !important;
color: #f1f5f9 !important;
}
/* ============================================
LOADING STATES - Complete fix
============================================ */
/* Loading screen */
html[data-theme="dark"] .loading-screen,
html[data-theme="dark"] .loading,
html[data-theme="dark"] #loading-state {
background: #0f172a !important;
}
html[data-theme="dark"] .loading-screen p,
html[data-theme="dark"] .loading p,
html[data-theme="dark"] #loading-state p {
color: #94a3b8 !important;
}
/* Spinners */
html[data-theme="dark"] .spinner,
html[data-theme="dark"] .spinner-circle,
html[data-theme="dark"] .loading-spinner {
border-color: #334155 !important;
border-top-color: #10b981 !important;
}
/* Skeleton base shimmer */
html[data-theme="dark"] .skeleton {
background: linear-gradient(90deg, #4a5568 25%, #718096 50%, #4a5568 75%) !important;
background-size: 200% 100% !important;
animation: skeleton-shimmer 1.5s ease-in-out infinite !important;
}
/* Skeleton stat cards */
html[data-theme="dark"] .skeleton-stat-card {
background: #1a2332 !important;
border: 1px solid #334155 !important;
box-shadow: none !important;
}
/* Skeleton request items */
html[data-theme="dark"] .skeleton-request-item {
background: #1a2332 !important;
border: 1px solid #334155 !important;
box-shadow: none !important;
}
/* Skeleton billing rows */
html[data-theme="dark"] .skeleton-billing-row {
background: #1a2332 !important;
border: 1px solid #334155 !important;
box-shadow: none !important;
}
/* Skeleton container */
html[data-theme="dark"] .skeleton-container,
html[data-theme="dark"] .skeleton-stats-grid,
html[data-theme="dark"] .skeleton-requests-list {
background: transparent !important;
}
/* Loading bar */
html[data-theme="dark"] .viv-loading-bar {
background: #334155 !important;
}
html[data-theme="dark"] .viv-loading-bar::after {
background: linear-gradient(90deg, transparent, #10b981, #6ee7b7, #10b981, transparent) !important;
}
/* ============================================
REQUEST CARDS
============================================ */
html[data-theme="dark"] .request-item,
html[data-theme="dark"] .request-card {
background: #1a2332 !important;
border: 1px solid #334155 !important;
border-left: 3px solid #10b981 !important;
}
html[data-theme="dark"] .request-item:hover,
html[data-theme="dark"] .request-card:hover {
background: #1e293b !important;
border-color: #475569 !important;
border-left-color: #10b981 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
transform: none !important;
}
html[data-theme="dark"] .request-title {
color: #f1f5f9 !important;
}
html[data-theme="dark"] .request-description,
html[data-theme="dark"] .request-desc {
color: #94a3b8 !important;
}
html[data-theme="dark"] .request-meta,
html[data-theme="dark"] .request-date {
color: #cbd5e1 !important;
}
html[data-theme="dark"] .request-meta span {
color: #cbd5e1 !important;
}
html[data-theme="dark"] .meta-separator {
color: #64748b !important;
opacity: 1 !important;
}
html[data-theme="dark"] .priority-badge.standard,
html[data-theme="dark"] .priority-badge.Standard {
background: rgba(203, 213, 225, 0.15) !important;
color: #cbd5e1 !important;
border: 1px solid rgba(203, 213, 225, 0.25) !important;
}
html[data-theme="dark"] .priority-badge.urgent,
html[data-theme="dark"] .priority-badge.Urgent {
background: rgba(239, 68, 68, 0.15) !important;
color: #fca5a5 !important;
}
/* ============================================
CHAT EXPANDED - NO GREEN TINT
Plain card color
============================================ */
html[data-theme="dark"] .request-chat-expanded {
background: #1a2332 !important;
background-color: #1a2332 !important;
border-left: 3px solid #10b981 !important;
}
html[data-theme="dark"] .request-chat-detail {
background: #1a2332 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .chat-header-summary {
background: #1e293b !important;
background-image: none !important;
border-bottom: 1px solid #334155 !important;
}
html[data-theme="dark"] .chat-header-title h3 {
color: #f1f5f9 !important;
}
html[data-theme="dark"] .request-number {
background: #0f172a !important;
color: #94a3b8 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .chat-header-meta,
html[data-theme="dark"] .request-type,
html[data-theme="dark"] .chat-header-dates,
html[data-theme="dark"] .meta-separator {
color: #94a3b8 !important;
}
html[data-theme="dark"] .chat-messages-inline {
background: #0f172a !important;
}
html[data-theme="dark"] .chat-conversation {
background: transparent !important;
}
/* Chat input area */
html[data-theme="dark"] .chat-input-inline {
background: #1a2332 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .chat-input-inline input,
html[data-theme="dark"] .chat-input-inline textarea,
html[data-theme="dark"] .chat-reply-input {
background: #0f172a !important;
border-color: #334155 !important;
color: #f1f5f9 !important;
}
html[data-theme="dark"] .chat-actions-bar {
background: #1e293b !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .chat-actions-status {
background: rgba(16, 185, 129, 0.15) !important;
color: #6ee7b7 !important;
}
/* Message bubbles - client = BLUE, team = GREEN */
html[data-theme="dark"] .message-inline.client .message-inline-text {
background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
color: #fff !important;
}
html[data-theme="dark"] .message-inline.team .message-inline-text {
background: linear-gradient(135deg, #10b981, #059669) !important;
color: #fff !important;
}
html[data-theme="dark"] .message-inline.client .message-inline-sender {
color: #60a5fa !important;
}
html[data-theme="dark"] .message-inline.team .message-inline-sender {
color: #6ee7b7 !important;
}
html[data-theme="dark"] .system-message {
background: rgba(100, 116, 139, 0.15) !important;
color: #94a3b8 !important;
}
/* Attachments */
html[data-theme="dark"] .attachment-chip {
background: #1e293b !important;
border-color: #334155 !important;
color: #f1f5f9 !important;
}
html[data-theme="dark"] .message-inline.client .attachment-chip {
background: rgba(255, 255, 255, 0.15) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
html[data-theme="dark"] .chat-attach-summary {
background: rgba(6, 182, 212, 0.15) !important;
border-color: rgba(6, 182, 212, 0.3) !important;
color: #67e8f9 !important;
}
/* ============================================
BILLING SECTION
============================================ */
html[data-theme="dark"] .billing-row {
background: #1a2332 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .billing-row:hover {
background: #1e293b !important;
transform: none !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
html[data-theme="dark"] .billing-title {
color: #f1f5f9 !important;
}
html[data-theme="dark"] .billing-learn,
html[data-theme="dark"] .billing-details {
color: #94a3b8 !important;
}
html[data-theme="dark"] .billing-price {
color: #10b981 !important;
}
html[data-theme="dark"] .billing-details h4 {
color: #f1f5f9 !important;
}
html[data-theme="dark"] .billing-details ul li {
color: #94a3b8 !important;
}
/* Billing details mobile background fix */
html[data-theme="dark"] .billing-details {
background: #1e293b !important;
color: #94a3b8 !important;
}
/* Billing inline style overrides */
html[data-theme="dark"] #billing [style*="background: #f8fafc"],
html[data-theme="dark"] #billing [style*="background:#f8fafc"],
html[data-theme="dark"] #billing [style*="background: white"],
html[data-theme="dark"] #billing [style*="background:white"],
html[data-theme="dark"] #billing [style*="background: #ffffff"],
html[data-theme="dark"] #billing [style*="background:#ffffff"],
html[data-theme="dark"] #billing [style*="background: linear-gradient(135deg, #f0fdf4"],
html[data-theme="dark"] #billing [style*="background:linear-gradient(135deg, #f0fdf4"] {
background: #1a2332 !important;
background-color: #1a2332 !important;
border-color: #334155 !important;
}
/* Monthly Amount card - green gradient box */
html[data-theme="dark"] #billing [style*="linear-gradient(135deg, #f0fdf4, #dcfce7)"] {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1)) !important;
border-color: rgba(16, 185, 129, 0.4) !important;
}
/* Billing amount card */
.billing-amount-card {
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
border: 2px solid #a7f3d0;
}
.billing-amount-label {
color: #059669;
}
.billing-amount-value {
color: #065f46;
}
/* Billing date card */
.billing-date-card {
background: white;
border: 2px solid #e2e8f0;
}
.billing-date-label {
color: #64748b;
}
.billing-date-value {
color: #1e293b;
}
/* Dark mode billing cards */
html[data-theme="dark"] .billing-amount-card {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1)) !important;
border-color: rgba(16, 185, 129, 0.4) !important;
}
html[data-theme="dark"] .billing-amount-label {
color: #a7f3d0 !important;
}
html[data-theme="dark"] .billing-amount-value {
color: #ffffff !important;
}
html[data-theme="dark"] .billing-date-card {
background: #1a2332 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .billing-date-label {
color: #94a3b8 !important;
}
html[data-theme="dark"] .billing-date-value {
color: #f1f5f9 !important;
}
html[data-theme="dark"] #billing [style*="color: #059669"],
html[data-theme="dark"] #billing [style*="color:#059669"] {
color: #a7f3d0 !important;
}
html[data-theme="dark"] #billing [style*="color: #065f46"],
html[data-theme="dark"] #billing [style*="color:#065f46"] {
color: #ffffff !important;
}
html[data-theme="dark"] #billing [style*="color: #1e293b"],
html[data-theme="dark"] #billing [style*="color:#1e293b"] {
color: #f1f5f9 !important;
}
html[data-theme="dark"] #billing [style*="color: #64748b"],
html[data-theme="dark"] #billing [style*="color:#64748b"] {
color: #94a3b8 !important;
}
/* Border overrides */
html[data-theme="dark"] #billing [style*="border: 2px solid #e2e8f0"],
html[data-theme="dark"] #billing [style*="border:2px solid #e2e8f0"],
html[data-theme="dark"] #billing [style*="border: 1px solid #e2e8f0"],
html[data-theme="dark"] #billing [style*="border:1px solid #e2e8f0"] {
border-color: #334155 !important;
}
html[data-theme="dark"] #billing [style*="border: 2px solid #a7f3d0"],
html[data-theme="dark"] #billing [style*="border:2px solid #a7f3d0"] {
border-color: rgba(16, 185, 129, 0.3) !important;
}
html[data-theme="dark"] #billing [style*="border-top:2px solid #e2e8f0"],
html[data-theme="dark"] #billing [style*="border-top: 2px solid #e2e8f0"] {
border-top-color: #334155 !important;
}
/* Documents section links */
html[data-theme="dark"] #billing a[style*="background: #f8fafc"],
html[data-theme="dark"] #billing a[style*="background:#f8fafc"] {
background: #1e293b !important;
border: 1px solid #334155 !important;
}
html[data-theme="dark"] #billing a[style*="background: #f8fafc"]:hover,
html[data-theme="dark"] #billing a[style*="background:#f8fafc"]:hover,
html[data-theme="dark"] #billing a[style*="background: #f1f5f9"],
html[data-theme="dark"] #billing a[style*="background:#f1f5f9"] {
background: #243344 !important;
border-color: #475569 !important;
}
html[data-theme="dark"] #billing a[style*="color: inherit"] {
color: #f1f5f9 !important;
}
html[data-theme="dark"] #billing a [style*="font-weight: 600"],
html[data-theme="dark"] #billing a [style*="font-weight:600"] {
color: #f1f5f9 !important;
}
html[data-theme="dark"] #billing h3 {
color: #f1f5f9 !important;
}
html[data-theme="dark"] #billing p {
color: #94a3b8 !important;
}
/* Billing document links */
.billing-doc-link {
background: #f8fafc;
}
.billing-doc-link:hover {
background: #f1f5f9;
}
html[data-theme="dark"] .billing-doc-link {
background: #1e293b !important;
border: 1px solid #334155 !important;
}
html[data-theme="dark"] .billing-doc-link:hover {
background: #243344 !important;
border-color: #475569 !important;
}
html[data-theme="dark"] .billing-doc-link div[style*="font-weight: 600"],
html[data-theme="dark"] .billing-doc-link div[style*="font-weight:600"] {
color: #f1f5f9 !important;
}
html[data-theme="dark"] .billing-doc-link div[style*="color: #64748b"],
html[data-theme="dark"] .billing-doc-link div[style*="color:#64748b"] {
color: #94a3b8 !important;
}
/* ============================================
CONTACT SECTION
============================================ */
html[data-theme="dark"] .contact-grid {
background: transparent !important;
}
html[data-theme="dark"] .contact-card {
background: #1a2332 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .contact-card.manager {
background: #1a2332 !important;
border: 2px solid rgba(16, 185, 129, 0.3) !important;
}
html[data-theme="dark"] .contact-card.sales {
background: #1a2332 !important;
border: 2px solid rgba(59, 130, 246, 0.3) !important;
}
html[data-theme="dark"] .contact-badge {
color: #94a3b8 !important;
}
html[data-theme="dark"] .contact-card.manager .contact-badge {
color: #6ee7b7 !important;
}
html[data-theme="dark"] .contact-card.sales .contact-badge {
color: #60a5fa !important;
}
html[data-theme="dark"] .contact-name {
color: #f1f5f9 !important;
}
html[data-theme="dark"] .contact-role {
color: #94a3b8 !important;
}
html[data-theme="dark"] .contact-card.manager .contact-link {
color: #6ee7b7 !important;
}
html[data-theme="dark"] .contact-card.sales .contact-link {
color: #60a5fa !important;
}
/* Contact action buttons */
html[data-theme="dark"] .contact-action-btn,
html[data-theme="dark"] #contact .btn.btn-secondary,
html[data-theme="dark"] #contact [style*="background:#ffffff"],
html[data-theme="dark"] #contact [style*="background: #ffffff"] {
background: #1e293b !important;
background-color: #1e293b !important;
color: #f1f5f9 !important;
border: 1px solid #334155 !important;
box-shadow: none !important;
}
html[data-theme="dark"] .contact-action-btn:hover,
html[data-theme="dark"] #contact .btn.btn-secondary:hover {
background: #334155 !important;
border-color: #475569 !important;
}
/* General Support Card */
.general-support-card {
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border: 2px solid #e2e8f0;
}
.general-support-card h3 {
color: #1e293b;
}
.general-support-card p {
color: #64748b;
}
.general-support-phone {
background: #ffffff !important;
color: #0f172a !important;
border: 1px solid #cbd5e1 !important;
box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
}
html[data-theme="dark"] .general-support-card {
background: linear-gradient(135deg, #1e293b, #1a2332) !important;
border: 2px solid #334155 !important;
}
html[data-theme="dark"] .general-support-card h3 {
color: #f1f5f9 !important;
}
html[data-theme="dark"] .general-support-card p {
color: #94a3b8 !important;
}
html[data-theme="dark"] .general-support-phone {
background: #1e293b !important;
color: #f1f5f9 !important;
border: 1px solid #334155 !important;
box-shadow: none !important;
}
html[data-theme="dark"] .general-support-phone:hover {
background: #334155 !important;
border-color: #475569 !important;
}
/* ============================================
BUTTONS
============================================ */
html[data-theme="dark"] .btn-primary {
background: #10b981 !important;
color: #fff !important;
border: none !important;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}
html[data-theme="dark"] .btn-primary:hover {
background: #059669 !important;
box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4) !important;
}
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn.btn-secondary {
background: #1e293b !important;
color: #f1f5f9 !important;
border: 1px solid #334155 !important;
}
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn.btn-secondary:hover {
background: #334155 !important;
border-color: #475569 !important;
}
html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .btn.btn-danger {
background: rgba(239, 68, 68, 0.15) !important;
color: #f87171 !important;
border: 1px solid rgba(239, 68, 68, 0.3) !important;
}
html[data-theme="dark"] .btn-danger:hover {
background: rgba(239, 68, 68, 0.25) !important;
}
html[data-theme="dark"] .chat-cancel-btn {
background: transparent !important;
border: 1px solid #334155 !important;
color: #94a3b8 !important;
}
html[data-theme="dark"] .chat-cancel-btn:hover {
background: rgba(239, 68, 68, 0.1) !important;
border-color: #ef4444 !important;
color: #f87171 !important;
}
html[data-theme="dark"] .logout-btn,
html[data-theme="dark"] .header-logout,
html[data-theme="dark"] .logout-btn-mobile {
background: transparent !important;
border: 1px solid #334155 !important;
color: #94a3b8 !important;
}
html[data-theme="dark"] .logout-btn:hover,
html[data-theme="dark"] .header-logout:hover {
background: #1e293b !important;
border-color: #475569 !important;
color: #f1f5f9 !important;
}
/* Icon logout button */
html[data-theme="dark"] .logout-btn-icon {
background: #1e293b !important;
border: 1px solid #334155 !important;
color: #94a3b8 !important;
}
html[data-theme="dark"] .logout-btn-icon:hover {
border-color: #10b981 !important;
color: #f1f5f9 !important;
}
/* Client Portal Badge */
html[data-theme="dark"] .client-portal-badge {
background: rgba(16, 185, 129, 0.12) !important;
border: 1px solid rgba(16, 185, 129, 0.25) !important;
color: #6ee7b7 !important;
}
/* Client Business Name */
html[data-theme="dark"] .client-business-name {
color: #f1f5f9 !important;
}
/* Icon buttons */
html[data-theme="dark"] .header-icon-btn {
background: transparent !important;
color: #94a3b8 !important;
}
html[data-theme="dark"] .header-icon-btn:hover {
background: #1e293b !important;
color: #f1f5f9 !important;
}
/* ============================================
FORM ELEMENTS
============================================ */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control {
background: #0f172a !important;
border: 1px solid #334155 !important;
color: #f1f5f9 !important;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
border-color: #10b981 !important;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
outline: none !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
color: #64748b !important;
}
html[data-theme="dark"] label {
color: #e2e8f0 !important;
}
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1) !important;
}
/* Radio options (Priority selection) */
html[data-theme="dark"] .radio-option {
background: #1a2332 !important;
border: 2px solid #334155 !important;
}
html[data-theme="dark"] .radio-option:hover {
border-color: #10b981 !important;
background: #1e293b !important;
}
html[data-theme="dark"] .radio-option.selected {
background: rgba(16, 185, 129, 0.15) !important;
border-color: #10b981 !important;
}
html[data-theme="dark"] .radio-title {
color: #f1f5f9 !important;
}
html[data-theme="dark"] .radio-description {
color: #94a3b8 !important;
}
html[data-theme="dark"] .radio-option input[type="radio"] {
accent-color: #10b981 !important;
}
/* File upload dropzone */
html[data-theme="dark"] .file-upload-area {
background: #1a2332 !important;
border: 2px dashed #334155 !important;
}
html[data-theme="dark"] .file-upload-area:hover {
background: #1e293b !important;
border-color: #10b981 !important;
}
html[data-theme="dark"] .file-upload-area.drag-over {
background: rgba(16, 185, 129, 0.15) !important;
border-color: #10b981 !important;
}
html[data-theme="dark"] .file-upload-icon {
color: #64748b !important;
}
html[data-theme="dark"] .file-upload-text {
color: #94a3b8 !important;
}
html[data-theme="dark"] .file-upload-text strong,
html[data-theme="dark"] .file-upload-area .upload-link {
color: #10b981 !important;
}
html[data-theme="dark"] .uploaded-file {
background: #1e293b !important;
border: 1px solid #334155 !important;
color: #f1f5f9 !important;
}
html[data-theme="dark"] .uploaded-file .remove-file {
color: #f87171 !important;
}
/* Form group labels and hints */
html[data-theme="dark"] .form-group label,
html[data-theme="dark"] .form-label {
color: #e2e8f0 !important;
}
html[data-theme="dark"] .form-hint,
html[data-theme="dark"] .form-help {
color: #94a3b8 !important;
}
/* ============================================
DATE RANGE BUTTONS
============================================ */
html[data-theme="dark"] .date-range-btn,
html[data-theme="dark"] .range-btn,
html[data-theme="dark"] .gads-range-btn {
background: #1e293b !important;
border: 1px solid #334155 !important;
color: #94a3b8 !important;
}
html[data-theme="dark"] .date-range-btn:hover,
html[data-theme="dark"] .range-btn:hover {
border-color: #10b981 !important;
color: #f1f5f9 !important;
}
html[data-theme="dark"] .date-range-btn.active,
html[data-theme="dark"] .range-btn.active {
background: #10b981 !important;
border-color: #10b981 !important;
color: #fff !important;
}
html[data-theme="dark"] .custom-date-picker {
background: transparent !important;
}
html[data-theme="dark"] .custom-date-picker-content {
background: #1e293b !important;
border: 1px solid #334155 !important;
backdrop-filter: none !important;
}
html[data-theme="dark"] .custom-date-field label {
color: #94a3b8 !important;
}
html[data-theme="dark"] .custom-date-field input[type="date"] {
background: #0f172a !important;
border: 1px solid #334155 !important;
color: #f1f5f9 !important;
}
html[data-theme="dark"] .custom-date-field input[type="date"]:hover {
border-color: #475569 !important;
background: #1a2332 !important;
}
html[data-theme="dark"] .custom-date-field input[type="date"]:focus {
border-color: #10b981 !important;
background: #1a2332 !important;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}
html[data-theme="dark"] .custom-date-field input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(0.7) !important;
}
html[data-theme="dark"] .custom-date-cancel {
background: transparent !important;
border: 1px solid #334155 !important;
color: #94a3b8 !important;
}
html[data-theme="dark"] .custom-date-cancel:hover {
background: #1e293b !important;
border-color: #475569 !important;
color: #f1f5f9 !important;
}
html[data-theme="dark"] .custom-date-apply {
background: #10b981 !important;
border: 1px solid #10b981 !important;
color: #fff !important;
}
html[data-theme="dark"] .custom-date-apply:hover {
background: #059669 !important;
border-color: #059669 !important;
}
/* Google Ads specific custom date picker */
html[data-theme="dark"] #gads-custom-date-picker .custom-date-picker-content,
html[data-theme="dark"] #google-ads-body .custom-date-picker-content {
background: #1e293b !important;
border: 1px solid #334155 !important;
}
html[data-theme="dark"] #gads-custom-date-picker input[type="date"],
html[data-theme="dark"] #google-ads-body input[type="date"] {
background: #0f172a !important;
border: 1px solid #334155 !important;
color: #f1f5f9 !important;
}
html[data-theme="dark"] #gads-custom-date-picker label,
html[data-theme="dark"] #google-ads-body .custom-date-field label {
color: #94a3b8 !important;
}
/* ============================================
TABLES
============================================ */
html[data-theme="dark"] table {
background: transparent !important;
}
html[data-theme="dark"] th {
background: #1e293b !important;
color: #94a3b8 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] td {
color: #e2e8f0 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] tr:nth-child(even) {
background: rgba(30, 41, 59, 0.4) !important;
}
html[data-theme="dark"] tr:nth-child(odd) {
background: transparent !important;
}
html[data-theme="dark"] tr:hover {
background: rgba(51, 65, 85, 0.5) !important;
}
/* ============================================
BADGES & STATUS
============================================ */
html[data-theme="dark"] .badge,
html[data-theme="dark"] .status-badge {
border: none !important;
}
html[data-theme="dark"] .badge-success,
html[data-theme="dark"] .status-open,
html[data-theme="dark"] .badge-open {
background: rgba(16, 185, 129, 0.15) !important;
color: #6ee7b7 !important;
}
html[data-theme="dark"] .badge-warning,
html[data-theme="dark"] .status-progress,
html[data-theme="dark"] .badge-in-progress {
background: rgba(245, 158, 11, 0.15) !important;
color: #fbbf24 !important;
}
html[data-theme="dark"] .badge-error,
html[data-theme="dark"] .status-cancelled,
html[data-theme="dark"] .badge-cancelled {
background: rgba(239, 68, 68, 0.15) !important;
color: #f87171 !important;
}
html[data-theme="dark"] .badge-info,
html[data-theme="dark"] .status-waiting {
background: rgba(59, 130, 246, 0.15) !important;
color: #60a5fa !important;
}
html[data-theme="dark"] .badge-completed,
html[data-theme="dark"] .status-completed {
background: rgba(34, 197, 94, 0.15) !important;
color: #4ade80 !important;
}
/* ============================================
NAVIGATION TABS
============================================ */
html[data-theme="dark"] .nav-tabs,
html[data-theme="dark"] .tab-nav,
html[data-theme="dark"] .portal-nav {
background: #1a2332 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .nav-tab,
html[data-theme="dark"] .tab-btn {
background: transparent !important;
color: #94a3b8 !important;
}
html[data-theme="dark"] .nav-tab:hover,
html[data-theme="dark"] .tab-btn:hover {
background: #1e293b !important;
color: #f1f5f9 !important;
}
html[data-theme="dark"] .nav-tab.active,
html[data-theme="dark"] .tab-btn.active {
background: rgba(16, 185, 129, 0.15) !important;
color: #6ee7b7 !important;
border-color: #10b981 !important;
}
/* ============================================
MOBILE NAVIGATION
============================================ */
html[data-theme="dark"] .mobile-nav {
background: #1a2332 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .mobile-nav-header {
background: transparent !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .mobile-nav-item {
color: #f1f5f9 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .mobile-nav-item:hover {
background: #1e293b !important;
}
html[data-theme="dark"] .mobile-nav-item.active {
background: rgba(16, 185, 129, 0.15) !important;
color: #6ee7b7 !important;
}
html[data-theme="dark"] .mobile-nav-overlay {
background: rgba(0, 0, 0, 0.6) !important;
}
/* ============================================
MODALS
============================================ */
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu {
background: #1a2332 !important;
border-color: #334155 !important;
color: #f1f5f9 !important;
}
html[data-theme="dark"] .modal-header {
border-color: #334155 !important;
}
html[data-theme="dark"] .modal-footer {
background: #1e293b !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .modal-overlay {
background: rgba(0, 0, 0, 0.7) !important;
}
/* Legal modal */
html[data-theme="dark"] .legal-modal,
html[data-theme="dark"] .legal-modal-content {
background: #1a2332 !important;
border-color: #334155 !important;
color: #f1f5f9 !important;
}
html[data-theme="dark"] .legal-modal-header {
border-color: #334155 !important;
}
html[data-theme="dark"] .legal-modal-body {
background: #0f172a !important;
color: #e2e8f0 !important;
}
/* ============================================
ANALYTICS
============================================ */
html[data-theme="dark"] .analytics-section,
html[data-theme="dark"] .chart-card {
background: #1a2332 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .chart-title {
color: #f1f5f9 !important;
}
html[data-theme="dark"] .chart-subtitle {
color: #94a3b8 !important;
}
html[data-theme="dark"] .gridlines line {
stroke: #334155 !important;
}
/* ============================================
GOOGLE ADS
============================================ */
html[data-theme="dark"] .gads-page {
background: #0f172a !important;
}
html[data-theme="dark"] .gads-hero {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%) !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .gads-hero-title {
color: #f1f5f9 !important;
}
html[data-theme="dark"] .gads-card,
html[data-theme="dark"] .gads-section {
background: #1a2332 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .gads-kpi-value {
color: #f1f5f9 !important;
}
html[data-theme="dark"] .gads-kpi-label {
color: #94a3b8 !important;
}
html[data-theme="dark"] .gads-table th {
background: #1e293b !important;
color: #94a3b8 !important;
}
html[data-theme="dark"] .gads-table td {
color: #e2e8f0 !important;
}
html[data-theme="dark"] .gads-table tr:nth-child(even) {
background: rgba(30, 41, 59, 0.4) !important;
}
html[data-theme="dark"] .gads-insights {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%) !important;
border-color: rgba(16, 185, 129, 0.2) !important;
}
html[data-theme="dark"] .gads-insights-title {
color: #6ee7b7 !important;
}
html[data-theme="dark"] .gads-breakdown-card {
background: #1a2332 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .gads-bar-track {
background: #334155 !important;
}
html[data-theme="dark"] .gads-state-card {
background: #1a2332 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .gads-export-card {
background: #1a2332 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .gads-export-select {
background: #0f172a !important;
border-color: #334155 !important;
color: #f1f5f9 !important;
}
/* ============================================
HERO SECTION
============================================ */
html[data-theme="dark"] .hero {
background: linear-gradient(135deg, #1a2332 0%, #1a2332 60%, rgba(16, 185, 129, 0.15) 100%) !important;
border: 1px solid #334155 !important;
}
html[data-theme="dark"] .hero::before {
background: radial-gradient(circle at 100% 0%, rgba(16, 185, 129, 0.12) 0%, transparent 50%) !important;
}
html[data-theme="dark"] .hero::after {
background: radial-gradient(circle at 0% 100%, rgba(59, 130, 246, 0.08) 0%, transparent 50%) !important;
}
html[data-theme="dark"] .hero-kpi {
background: rgba(30, 41, 59, 0.6) !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .hero-kpi:hover {
background: rgba(30, 41, 59, 0.8) !important;
}
/* ============================================
METHOD CARDS
============================================ */
html[data-theme="dark"] .method-card {
background: #1a2332 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .method-card:hover {
border-color: #10b981 !important;
background: #1e293b !important;
}
html[data-theme="dark"] .method-card.selected {
border-color: #10b981 !important;
background: rgba(16, 185, 129, 0.1) !important;
}
html[data-theme="dark"] .method-icon {
background: #1e293b !important;
}
html[data-theme="dark"] .method-title {
color: #f1f5f9 !important;
}
html[data-theme="dark"] .method-desc {
color: #94a3b8 !important;
}
/* ============================================
PROGRESS BARS
============================================ */
html[data-theme="dark"] .progress,
html[data-theme="dark"] .progress-track {
background: #334155 !important;
}
html[data-theme="dark"] .progress-fill,
html[data-theme="dark"] .progress-bar {
background: linear-gradient(90deg, #10b981, #6ee7b7) !important;
}
/* ============================================
TOOLTIPS
============================================ */
html[data-theme="dark"] .tooltip,
html[data-theme="dark"] .chart-tooltip {
background: #1e293b !important;
border-color: #334155 !important;
color: #f1f5f9 !important;
}
/* ============================================
LINKS
============================================ */
html[data-theme="dark"] a:not(.btn):not(.nav-tab):not(.mobile-nav-item):not(.contact-link) {
color: #10b981 !important;
}
html[data-theme="dark"] a:not(.btn):not(.nav-tab):not(.mobile-nav-item):not(.contact-link):hover {
color: #6ee7b7 !important;
}
/* ============================================
TEXT COLORS
============================================ */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
color: #f1f5f9 !important;
}
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] small {
color: #94a3b8 !important;
}
/* ============================================
DIVIDERS
============================================ */
html[data-theme="dark"] hr,
html[data-theme="dark"] .divider {
border-color: #334155 !important;
background: #334155 !important;
}
/* ============================================
SCROLLBARS
============================================ */
html[data-theme="dark"] ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
background: #0f172a;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: #334155;
border-radius: 4px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
background: #475569;
}
/* ============================================
THEME TOGGLE
============================================ */
html[data-theme="dark"] .theme-toggle-slider {
background: #1e293b !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .theme-toggle-slider:hover {
border-color: #475569 !important;
}
html[data-theme="dark"] .theme-menu {
background: #1a2332 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .theme-menu button {
color: #f1f5f9 !important;
}
html[data-theme="dark"] .theme-menu button:hover {
background: #1e293b !important;
}
html[data-theme="dark"] .theme-menu button.active {
background: rgba(16, 185, 129, 0.15) !important;
border-color: rgba(16, 185, 129, 0.3) !important;
}
/* ============================================
ADMIN PORTAL
============================================ */
html[data-theme="dark"] .admin-header {
background: #1a2332 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .admin-sidebar {
background: #1a2332 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .admin-content {
background: #0f172a !important;
}
html[data-theme="dark"] .client-search {
background: #0f172a !important;
border-color: #334155 !important;
color: #f1f5f9 !important;
}
html[data-theme="dark"] .client-list-item {
background: #1a2332 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .client-list-item:hover {
background: #1e293b !important;
}
html[data-theme="dark"] .viewing-as-banner {
background: rgba(245, 158, 11, 0.15) !important;
border-color: #f59e0b !important;
color: #fbbf24 !important;
}
/* ============================================
INLINE STYLE OVERRIDES - CATCH-ALL
============================================ */
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:#ffffff"] {
background: #1a2332 !important;
background-color: #1a2332 !important;
}
html[data-theme="dark"] [style*="background: #f8fafc"],
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background: #f0f0f0"],
html[data-theme="dark"] [style*="background:#f0f0f0"],
html[data-theme="dark"] [style*="background: #f1f5f9"],
html[data-theme="dark"] [style*="background:#f1f5f9"] {
background: #1e293b !important;
background-color: #1e293b !important;
}
html[data-theme="dark"] [style*="background: linear-gradient(135deg, #f0fdf4"],
html[data-theme="dark"] [style*="background:linear-gradient(135deg, #f0fdf4"] {
background: rgba(16, 185, 129, 0.1) !important;
}
html[data-theme="dark"] [style*="color: #1e293b"],
html[data-theme="dark"] [style*="color:#1e293b"],
html[data-theme="dark"] [style*="color: #0f172a"],
html[data-theme="dark"] [style*="color:#0f172a"] {
color: #f1f5f9 !important;
}
html[data-theme="dark"] [style*="color: #64748b"],
html[data-theme="dark"] [style*="color:#64748b"] {
color: #94a3b8 !important;
}
html[data-theme="dark"] [style*="border: 1px solid #e2e8f0"],
html[data-theme="dark"] [style*="border:1px solid #e2e8f0"],
html[data-theme="dark"] [style*="border: 2px solid #e2e8f0"],
html[data-theme="dark"] [style*="border:2px solid #e2e8f0"] {
border-color: #334155 !important;
}
html[data-theme="dark"] [style*="border: 2px solid #a7f3d0"],
html[data-theme="dark"] [style*="border:2px solid #a7f3d0"] {
border-color: rgba(16, 185, 129, 0.3) !important;
}
/* Empty states */
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .empty-state-enhanced,
html[data-theme="dark"] .empty-state-analytics {
color: #94a3b8 !important;
}
html[data-theme="dark"] .empty-state-enhanced .empty-icon-wrapper,
html[data-theme="dark"] .empty-state-analytics .empty-icon-wrapper {
background: #1e293b !important;
}
/* Error displays */
html[data-theme="dark"] [style*="background: #fee2e2"],
html[data-theme="dark"] [style*="background:#fee2e2"] {
background: rgba(239, 68, 68, 0.15) !important;
}
/* Success displays */
html[data-theme="dark"] [style*="background: #dcfce7"],
html[data-theme="dark"] [style*="background:#dcfce7"],
html[data-theme="dark"] [style*="background: #f0fdf4"],
html[data-theme="dark"] [style*="background:#f0fdf4"] {
background: rgba(16, 185, 129, 0.15) !important;
}
/* Pre/code blocks */
html[data-theme="dark"] pre {
background: #0f172a !important;
color: #f1f5f9 !important;
}
/* ============================================
ADDITIONAL FIXES - January 2026
============================================ */
/* Fix 1: Nav tab active state - remove any stray backgrounds */
html[data-theme="dark"] .nav-tabs {
background: transparent !important;
}
html[data-theme="dark"] .nav-tab {
background: #1a2332 !important;
border-color: #334155 !important;
color: #94a3b8 !important;
}
html[data-theme="dark"] .nav-tab:hover {
background: #1e293b !important;
color: #f1f5f9 !important;
}
html[data-theme="dark"] .nav-tab.active {
background: #10b981 !important;
color: #fff !important;
border-color: #10b981 !important;
}
/* Fix 2: Chat messages area - ensure NO green background */
html[data-theme="dark"] .chat-messages-inline,
html[data-theme="dark"] .chat-conversation,
html[data-theme="dark"] .request-chat-detail .chat-messages-inline {
background: #0f172a !important;
background-color: #0f172a !important;
}
/* Fix 3: Google Ads - Network/Device Performance cards - LIGHTER for contrast */
html[data-theme="dark"] .gads-bar-row {
background: #243344 !important;
border: 1px solid #3d4f63 !important;
}
html[data-theme="dark"] .gads-bar-row:hover {
background: #2d3a4d !important;
border-color: #475569 !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
html[data-theme="dark"] .gads-bar-name {
color: #f1f5f9 !important;
font-weight: 600 !important;
}
html[data-theme="dark"] .gads-bar-hint,
html[data-theme="dark"] .gads-bar-tooltip {
color: #cbd5e1 !important;
background: #334155 !important;
}
html[data-theme="dark"] .gads-stat-primary,
html[data-theme="dark"] .gads-bar-primary {
color: #f1f5f9 !important;
font-weight: 600 !important;
}
html[data-theme="dark"] .gads-stat-secondary,
html[data-theme="dark"] .gads-bar-secondary {
color: #94a3b8 !important;
}
html[data-theme="dark"] .gads-bar-values {
color: #f1f5f9 !important;
}
html[data-theme="dark"] .gads-bar-track {
background: #1e293b !important;
}
/* Fix 4: Google Ads - Insights & Recommendations */
html[data-theme="dark"] .gads-insights-card {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%) !important;
border-color: rgba(16, 185, 129, 0.2) !important;
}
html[data-theme="dark"] .gads-insights-title {
color: #6ee7b7 !important;
}
html[data-theme="dark"] .gads-insight-item {
color: #e2e8f0 !important;
border-color: rgba(16, 185, 129, 0.15) !important;
}
html[data-theme="dark"] .gads-insight-icon {
color: #6ee7b7 !important;
}
html[data-theme="dark"] .gads-insight-text {
color: #e2e8f0 !important;
}
/* Fix 5: Google Ads - Callout/Summary boxes */
html[data-theme="dark"] .gads-callout,
html[data-theme="dark"] .gads-callout-bottom,
html[data-theme="dark"] .gads-device-callout {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%) !important;
color: #6ee7b7 !important;
border: 1px solid rgba(16, 185, 129, 0.2) !important;
}
html[data-theme="dark"] .gads-callout .gads-icon,
html[data-theme="dark"] .gads-device-callout .gads-icon,
html[data-theme="dark"] .gads-device-callout .gads-device-icon {
color: #6ee7b7 !important;
}
/* Fix 6: Google Ads - Breakdown card titles */
html[data-theme="dark"] .gads-breakdown-title {
color: #f1f5f9 !important;
}
html[data-theme="dark"] .gads-breakdown-subtitle {
color: #94a3b8 !important;
}
html[data-theme="dark"] .gads-keyword-icon {
color: #64748b !important;
}
html[data-theme="dark"] .gads-keywords-table thead tr {
border-color: #334155 !important;
}
html[data-theme="dark"] .gads-keywords-table th {
color: #94a3b8 !important;
}
html[data-theme="dark"] .gads-keywords-table tbody tr {
border-color: #1e293b !important;
}
html[data-theme="dark"] .gads-keywords-table tbody tr:hover {
background: rgba(255, 255, 255, 0.03) !important;
}
html[data-theme="dark"] .gads-keywords-table td {
color: #e2e8f0 !important;
}
html[data-theme="dark"] .gads-td-right {
color: #94a3b8 !important;
}
/* Fix 7: Google Ads - Export section */
html[data-theme="dark"] .gads-export-card {
background: #1a2332 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .gads-export-title {
color: #f1f5f9 !important;
}
html[data-theme="dark"] .gads-export-subtitle {
color: #94a3b8 !important;
}
html[data-theme="dark"] .gads-export-label {
color: #94a3b8 !important;
}
html[data-theme="dark"] .gads-export-select {
background: #0f172a !important;
border-color: #334155 !important;
color: #f1f5f9 !important;
}
html[data-theme="dark"] .gads-export-select:hover {
border-color: #10b981 !important;
}
/* Fix 8: Google Ads - Secondary metrics */
html[data-theme="dark"] .gads-secondary-metrics {
background: #1e293b !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .gads-secondary-title {
color: #94a3b8 !important;
}
/* Fix 9: Google Ads - chart headers */
html[data-theme="dark"] .gads-network-card .chart-title,
html[data-theme="dark"] .gads-device-card .chart-title,
html[data-theme="dark"] .chart-container .chart-title {
color: #f1f5f9 !important;
}
html[data-theme="dark"] .gads-network-card .chart-subtitle,
html[data-theme="dark"] .gads-device-card .chart-subtitle,
html[data-theme="dark"] .chart-container .chart-subtitle {
color: #94a3b8 !important;
}
/* Fix 10: Google Ads - bar icon backgrounds */
html[data-theme="dark"] .gads-bar-icon {
background: #334155 !important;
}
html[data-theme="dark"] .gads-bar-icon svg {
color: #94a3b8 !important;
}
/* ============================================
GOOGLE ADS - SECONDARY METRICS DARK MODE
============================================ */
html[data-theme="dark"] .gads-secondary-row {
background: #1a2332 !important;
border-color: #334155 !important;
}
html[data-theme="dark"] .gads-sec-label {
color: #94a3b8 !important;
}
html[data-theme="dark"] .gads-sec-value {
color: #f1f5f9 !important;
}
/* ============================================
DARK MODE - SKELETON SHIMMER (ROBUST)
Uses a moving overlay so shimmer is visible even when background-position animation is overridden.
============================================ */
@keyframes skeleton-swipe {
0% { transform: translateX(-150%); }
100% { transform: translateX(150%); }
}
html[data-theme="dark"] .skeleton {
position: relative;
overflow: hidden;
/* Base bar color */
background: #334155 !important;
/* Disable background-position based shimmer in dark mode (overlay handles motion) */
animation: none !important;
}
html[data-theme="dark"] .skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-150%);
background: linear-gradient(90deg, transparent, rgba(241, 245, 249, 0.22), transparent);
animation: skeleton-swipe 1.5s ease-in-out infinite;
border-radius: inherit;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
html[data-theme="dark"] .skeleton::after {
animation: none !important;
}
}
/* ============================================
ENHANCED TIMELINE CHART STYLES
Modern, smooth, Recharts-inspired design
============================================ */
/* Timeline Chart Wrapper */
.timeline-chart-wrapper {
position: relative;
width: 100%;
min-height: 240px;
}
.timeline-svg {
width: 100%;
height: auto;
display: block;
}
/* Area fill animation */
.timeline-area {
opacity: 0;
animation: fadeInArea 0.8s ease-out 0.2s forwards;
}
@keyframes fadeInArea {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Line draw animation */
.timeline-line {
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation: drawLine 1.2s ease-out 0.3s forwards;
}
@keyframes drawLine {
to {
stroke-dashoffset: 0;
}
}
/* Enhanced Tooltip */
.timeline-tooltip {
position: absolute;
pointer-events: none;
opacity: 0;
transform: translate(-50%, -100%) translateY(-8px);
background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
color: #f1f5f9;
padding: 10px 14px;
border-radius: 10px;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
z-index: 100;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(59, 130, 246, 0.2);
backdrop-filter: blur(8px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.timeline-tooltip.visible {
opacity: 1;
transform: translate(-50%, -100%) translateY(-12px);
}
.timeline-tooltip .tooltip-date {
font-size: 11px;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.timeline-tooltip .tooltip-value {
font-size: 18px;
font-weight: 700;
color: #60a5fa;
}
.timeline-tooltip .tooltip-value span {
font-size: 12px;
font-weight: 500;
color: #94a3b8;
margin-left: 2px;
}
/* Tooltip arrow */
.timeline-tooltip::after {
content: '';
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(30, 41, 59, 0.95);
}
/* Hover dot pulse effect */
.timeline-hover-dot {
transition: all 0.15s ease;
}
.timeline-hover-dot[style*="opacity: 1"] {
animation: dotPulse 1.5s ease-in-out infinite;
}
@keyframes dotPulse {
0%, 100% {
filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.4));
}
50% {
filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.6));
}
}
/* Timeline period toggle buttons */
.timeline-period-toggle {
display: flex;
gap: 4px;
background: var(--viv-bg-neutral);
padding: 3px;
border-radius: 8px;
}
.timeline-period-btn {
padding: 6px 14px;
font-size: 12px;
font-weight: 600;
color: var(--viv-text-secondary);
background: transparent;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
}
.timeline-period-btn:hover {
color: var(--viv-text-primary);
background: rgba(0, 0, 0, 0.05);
}
.timeline-period-btn.active {
color: #fff;
background: #1e3a5f;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* ============================================
DARK MODE - TIMELINE CHART
============================================ */
html[data-theme="dark"] .timeline-tooltip {
background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
border-color: rgba(96, 165, 250, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(96, 165, 250, 0.1);
}
html[data-theme="dark"] .timeline-tooltip::after {
border-top-color: rgba(30, 41, 59, 0.98);
}
html[data-theme="dark"] .timeline-tooltip .tooltip-value {
color: #93c5fd;
}
html[data-theme="dark"] .timeline-period-toggle {
background: rgba(30, 41, 59, 0.6);
}
html[data-theme="dark"] .timeline-period-btn {
color: #94a3b8;
}
html[data-theme="dark"] .timeline-period-btn:hover {
color: #f1f5f9;
background: rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .timeline-period-btn.active {
background: #2563eb;
color: #fff;
}
/* Dark mode SVG adjustments - these are applied via JS but CSS backup */
html[data-theme="dark"] .timeline-svg text {
fill: #94a3b8;
}
html[data-theme="dark"] .timeline-svg line[stroke="#e5e7eb"] {
stroke: #334155;
}
/* ============================================
RATING DISTRIBUTION STYLES (Enhanced)
============================================ */
.rating-full-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.rating-summary-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.rating-summary-card {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: var(--viv-bg-neutral);
border-radius: 10px;
transition: all 0.2s ease;
}
.rating-summary-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.rating-summary-card.positive {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
border: 1px solid rgba(16, 185, 129, 0.15);
}
.rating-summary-card.positive .summary-icon {
color: #10b981;
}
.rating-summary-card.neutral {
background: linear-gradient(135deg, rgba(234, 179, 8, 0.08) 0%, rgba(234, 179, 8, 0.04) 100%);
border: 1px solid rgba(234, 179, 8, 0.15);
}
.rating-summary-card.neutral .summary-icon {
color: #eab308;
}
.rating-summary-card.negative {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.04) 100%);
border: 1px solid rgba(239, 68, 68, 0.15);
}
.rating-summary-card.negative .summary-icon {
color: #ef4444;
}
.summary-icon {
flex-shrink: 0;
}
.summary-icon svg {
width: 20px;
height: 20px;
}
.summary-data {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.summary-value {
font-size: 18px;
font-weight: 700;
color: var(--viv-text-primary);
line-height: 1.2;
}
.summary-label {
font-size: 11px;
color: var(--viv-text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.summary-percent {
font-size: 14px;
font-weight: 600;
color: var(--viv-text-secondary);
}
/* Rating bars horizontal layout */
.rating-bars-horizontal {
display: flex;
flex-direction: column;
gap: 10px;
}
.rating-bar-row {
display: grid;
grid-template-columns: 50px 1fr 80px;
align-items: center;
gap: 12px;
padding: 6px 8px;
border-radius: 8px;
transition: background 0.2s ease;
cursor: default;
}
.rating-bar-label {
display: flex;
align-items: center;
gap: 6px;
}
.rating-num {
font-size: 14px;
font-weight: 600;
color: var(--viv-text-primary);
min-width: 12px;
}
.rating-star {
width: 16px;
height: 16px;
}
.rating-bar-track {
height: 10px;
background: rgba(148, 163, 184, 0.12);
border-radius: 5px;
overflow: hidden;
position: relative;
}
.rating-bar-fill {
height: 100%;
border-radius: 5px;
transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.2s ease, box-shadow 0.2s ease;
animation: barGrow 0.6s ease-out forwards;
transform-origin: left center;
}
@keyframes barGrow {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.rating-bar-stats {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.rating-count {
font-size: 13px;
font-weight: 600;
color: var(--viv-text-primary);
min-width: 35px;
text-align: right;
}
.rating-percent {
font-size: 12px;
color: var(--viv-text-secondary);
min-width: 32px;
text-align: right;
}
/* ============================================
DARK MODE - RATING DISTRIBUTION
============================================ */
html[data-theme="dark"] .rating-summary-card {
background: rgba(30, 41, 59, 0.5);
}
html[data-theme="dark"] .rating-summary-card.positive {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.06) 100%);
border-color: rgba(16, 185, 129, 0.25);
}
html[data-theme="dark"] .rating-summary-card.neutral {
background: linear-gradient(135deg, rgba(234, 179, 8, 0.12) 0%, rgba(234, 179, 8, 0.06) 100%);
border-color: rgba(234, 179, 8, 0.25);
}
html[data-theme="dark"] .rating-summary-card.negative {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(239, 68, 68, 0.06) 100%);
border-color: rgba(239, 68, 68, 0.25);
}
html[data-theme="dark"] .rating-bar-track {
background: rgba(51, 65, 85, 0.5);
}
html[data-theme="dark"] .rating-bar-row:hover {
background: rgba(30, 41, 59, 0.5) !important;
}
/* ============================================
RESPONSIVE - TIMELINE & RATINGS
============================================ */
@media (max-width: 640px) {
.rating-summary-row {
grid-template-columns: 1fr;
gap: 8px;
}
.rating-summary-card {
padding: 10px 12px;
}
.summary-value {
font-size: 16px;
}
.rating-bar-row {
grid-template-columns: 45px 1fr 70px;
gap: 8px;
}
.timeline-period-btn {
padding: 5px 10px;
font-size: 11px;
}
}