/* ============================================ CSS VARIABLES - Modern Color Scheme ============================================ */ :root { /* ------------------------------------------------------------------ Brand tokens now track the app shell (indigo on cool grey). Token NAMES are unchanged so every existing page recolors for free; only the VALUES moved off the dropped orange theme. Values mirror --shell-* in MainLayout.razor. ------------------------------------------------------------------ */ --primary-color: #2563EB; --primary-hover: #1D4FD7; --primary-light: #60A5FA; --secondary-color: #2563EB; --secondary-hover: #1D4FD7; --accent-color: #2563EB; /* Gradient Colors — single-hue indigo, no more rainbow */ --gradient-primary: linear-gradient(135deg, #2563EB 0%, #1D4FD7 100%); --gradient-hero: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 100%); --gradient-accent: linear-gradient(135deg, #2563EB 0%, #1D4FD7 100%); --accent-wash: rgba(37, 99, 235, 0.08); /* Status Colors (semantic — independent of the accent) */ --success-color: #16A34A; --success-wash: rgba(22, 163, 74, 0.10); --danger-color: #DC2626; --danger-wash: rgba(220, 38, 38, 0.10); --warning-color: #D97706; --warning-wash: rgba(217, 119, 6, 0.10); --info-color: #2563EB; --accent-glow: rgba(37, 99, 235, 0.30); /* Background Colors */ --bg-color: #FFFFFF; --bg-secondary: #F4F6F9; --card-bg: #FFFFFF; --canvas: #EEF0F4; --inset: #F4F6F9; /* Text Colors */ --text-primary: #0F1115; --text-secondary: #4B5563; --text-muted: #6B7280; /* Border & Divider */ --border-color: rgba(15, 17, 21, 0.08); --border-light: rgba(15, 17, 21, 0.05); /* Sidebar */ --sidebar-bg: #FFFFFF; --sidebar-text: #0F1115; --sidebar-active: #2563EB; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.10); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.12); /* Muted, on-theme metric tints (kept distinct, no clashing gradients) */ --tint-indigo: #2563EB; --tint-indigo-bg: rgba(37, 99, 235, 0.10); --tint-teal: #0D9488; --tint-teal-bg: rgba(13, 148, 136, 0.10); --tint-violet: #7C3AED; --tint-violet-bg: rgba(124, 58, 237, 0.10); --tint-amber: #D97706; --tint-amber-bg: rgba(217, 119, 6, 0.10); /* Transitions */ --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================ DARK THEME — mirrors the shell's dark tokens. Driven by the `gp-dark` class the host toggles on (see _Host.cshtml / MainLayout), so warmup pages follow the exact same switch as the rest of the app. The app defaults to light and does NOT auto-follow the OS, so there is deliberately no prefers-color-scheme block here. ============================================ */ html.gp-dark { --primary-color: #3B82F6; --primary-hover: #2F73E6; --primary-light: #60A5FA; --secondary-color: #3B82F6; --secondary-hover: #2F73E6; --accent-color: #3B82F6; --gradient-primary: linear-gradient(135deg, #3B82F6 0%, #2F73E6 100%); --gradient-accent: linear-gradient(135deg, #3B82F6 0%, #2F73E6 100%); --accent-wash: rgba(59, 130, 246, 0.14); --success-color: #34D399; --success-wash: rgba(52, 211, 153, 0.14); --danger-color: #F87171; --danger-wash: rgba(248, 113, 113, 0.14); --warning-color: #FBBF24; --warning-wash: rgba(251, 191, 36, 0.14); --info-color: #3B82F6; --accent-glow: rgba(59, 130, 246, 0.35); --bg-color: #161719; --bg-secondary: #1E2023; --card-bg: #161719; --canvas: #0B0C0E; --inset: #1E2023; --text-primary: #F4F5F7; --text-secondary: #C3C7CE; --text-muted: #8A8F98; --border-color: rgba(255, 255, 255, 0.08); --border-light: rgba(255, 255, 255, 0.05); --sidebar-bg: #161719; --sidebar-text: #F4F5F7; --sidebar-active: #3B82F6; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.50); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.60); --tint-indigo: #60A5FA; --tint-indigo-bg: rgba(96, 165, 250, 0.14); --tint-teal: #2DD4BF; --tint-teal-bg: rgba(45, 212, 191, 0.14); --tint-violet: #A78BFA; --tint-violet-bg: rgba(167, 139, 250, 0.14); --tint-amber: #FBBF24; --tint-amber-bg: rgba(251, 191, 6, 0.14); } /* ============================================ GLOBAL STYLES ============================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; background: #FFFFFF; color: var(--text-primary); line-height: 1.6; margin: 0; padding: 0; overflow-x: hidden; } h1 { font-size: 28px; font-weight: 700; color: var(--text-primary); margin-bottom: 20px; } h1:focus { outline: none; } h2 { font-size: 24px; font-weight: 600; margin-bottom: 16px; } h3 { font-size: 18px; font-weight: 600; margin-bottom: 12px; } a { color: var(--primary-color); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--primary-hover); } /* ============================================ BUTTONS ============================================ */ .btn, .btn-link { display: inline-block; padding: 10px 20px; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; text-align: center; } .btn-primary { background-color: var(--primary-color); color: white !important; border: none; } .btn-primary:hover { background-color: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } .btn-secondary { background-color: #6B7280; color: white; } .btn-secondary:hover { background-color: #4B5563; } .btn-success { background-color: var(--secondary-color); color: white; } .btn-link { background: none; color: var(--primary-color); padding: 8px 16px; } .btn-link:hover { background-color: rgba(59, 130, 246, 0.1); } .btn-sm { padding: 6px 12px; font-size: 13px; } .btn-outline-danger { background-color: white; color: var(--danger-color); border: 1px solid var(--danger-color); } .btn-outline-danger:hover { background-color: var(--danger-color); color: white; } .btn-danger { background-color: var(--danger-color); color: white; } .btn-danger:hover { background-color: #DC2626; } .btn-warning { background-color: var(--warning-color); color: white; } .btn-warning:hover { background-color: #D97706; } /* ============================================ FORMS ============================================ */ .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 6px; font-weight: 500; color: var(--text-primary); font-size: 14px; } input[type="text"], input[type="email"], input[type="password"], input[type="datetime-local"], input[type="file"], select, textarea { width: 100%; padding: 10px 14px; border: 2px solid var(--border-color); border-radius: 8px; font-size: 14px; transition: all 0.2s; background-color: white; font-family: inherit; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } textarea { resize: vertical; min-height: 200px; font-family: 'Monaco', 'Courier New', monospace; font-size: 13px; } .valid.modified:not([type=checkbox]) { border-color: var(--secondary-color); } .invalid { border-color: var(--danger-color); } .validation-message { color: var(--danger-color); font-size: 13px; margin-top: 4px; } /* ============================================ LAYOUT ============================================ */ .page { position: relative; display: flex; flex-direction: column; height: 100vh; overflow: hidden; } main { flex: 1; padding: 0; background-color: var(--bg-color); overflow: hidden; } main > div { max-width: 100%; } .content { padding-top: 0; } /* ============================================ SIDEBAR ============================================ */ .sidebar { background-image: var(--sidebar-bg); padding: 24px 0; } .sidebar .top-row { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: white; padding: 0 24px 20px; } .sidebar .top-row h1 { color: white; font-size: 22px; font-weight: 700; letter-spacing: -0.5px; } .sidebar .nav { margin-top: 20px; } .sidebar .nav-item { margin: 4px 0; } .sidebar .nav-item .nav-link { display: flex; align-items: center; padding: 12px 24px; color: var(--sidebar-text); transition: all 0.2s; border-left: 3px solid transparent; font-weight: 500; } .sidebar .nav-item .nav-link:hover { background-color: rgba(255, 255, 255, 0.05); color: white; } .sidebar .nav-item .nav-link.active { background-color: rgba(59, 130, 246, 0.15); border-left-color: var(--sidebar-active); color: white; } .sidebar .nav-item .nav-link .oi { margin-right: 12px; } /* ============================================ TOP ROW ============================================ */ .top-row { background-color: white; border-bottom: 1px solid var(--border-color); justify-content: flex-end; height: 3.5rem; display: flex; align-items: center; padding: 0 24px; } .top-row ::deep a, .top-row .btn-link { white-space: nowrap; margin-left: 1.5rem; color: var(--text-primary); font-weight: 500; } .top-row a:first-child { overflow: hidden; text-overflow: ellipsis; } /* ============================================ CARDS ============================================ */ .card { background-color: var(--card-bg); border-radius: 16px; box-shadow: var(--shadow-md); padding: 32px; margin-bottom: 24px; border: 1px solid var(--border-color); transition: all 0.3s var(--transition-smooth); position: relative; overflow: hidden; } .card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .card:hover::before { transform: scaleX(1); } .card h2 { font-size: 20px; font-weight: 600; margin-bottom: 20px; color: var(--text-primary); } .card-header { background-color: var(--bg-color); padding: 16px 24px; border-bottom: 1px solid var(--border-color); margin: -28px -28px 20px -28px; border-radius: 12px 12px 0 0; font-weight: 600; } .card-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); } .card-subtitle { font-size: 14px; color: var(--text-secondary); margin-bottom: 12px; } .card-text { font-size: 14px; color: var(--text-primary); line-height: 1.6; } .card-body { padding: 24px; } /* ============================================ STATS ============================================ */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 30px; } .stat-card { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; padding: 28px; border-radius: 16px; box-shadow: var(--shadow-lg); transition: all 0.3s var(--transition-smooth); position: relative; overflow: hidden; } .stat-card h3 { font-size: 14px; font-weight: 500; opacity: 0.9; margin-bottom: 8px; } .stat-card .value { font-size: 36px; font-weight: 700; } .stat-box { background-color: white; border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; text-align: center; } .stat-value { font-size: 32px; font-weight: 700; color: var(--primary-color); display: block; margin-bottom: 8px; } .stat-label { font-size: 14px; color: var(--text-secondary); font-weight: 500; } /* Warmup stat tiles (WarmupInboxes.razor, WarmupInboxesTab.razor). Kept when the old landing-page block that used to define it was deleted. */ .stat-item { text-align: center; } /* ============================================ TABLES ============================================ */ .table-container { width: 100%; overflow-x: auto; overflow-y: visible; margin-bottom: 20px; } .table { width: 100%; min-width: 800px; border-collapse: collapse; background-color: white; border-radius: 8px; overflow: hidden; } .table th { background-color: var(--bg-color); padding: 14px 16px; text-align: left; font-weight: 600; font-size: 13px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } .table td { padding: 14px 16px; border-top: 1px solid var(--border-color); } .table tr:hover td { background-color: var(--bg-color); } /* ============================================ BADGES ============================================ */ .badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; } .badge-draft { background-color: #E5E7EB; color: #374151; } .badge-scheduled { background-color: #DBEAFE; color: #1E40AF; } .badge-sending { background-color: #FEF3C7; color: #92400E; } .badge-completed { background-color: #D1FAE5; color: #065F46; } .bg-success { background-color: #10B981 !important; color: white !important; } .bg-danger { background-color: #EF4444 !important; color: white !important; } .bg-warning { background-color: #F59E0B !important; color: white !important; } .bg-secondary { background-color: #6B7280 !important; color: white !important; } .bg-dark { background-color: #374151 !important; color: white !important; } /* ============================================ HELPERS ============================================ */ .text-muted { color: var(--text-secondary); font-size: 14px; } .text-decoration-none { text-decoration: none !important; } .d-block { display: block !important; } .d-flex { display: flex !important; } .justify-content-between { justify-content: space-between !important; } .align-items-center { align-items: center !important; } .mb-2 { margin-bottom: 12px; } .mt-3 { margin-top: 20px; } .mb-3 { margin-bottom: 20px; } .mb-4 { margin-bottom: 28px; } .table-responsive { overflow-x: auto; } .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .col-md-3, .col-md-4, .col-md-6 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } @media (min-width: 768px) { .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } } .alert { padding: 14px 18px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; } .alert-success { background-color: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; } .alert-danger { background-color: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; } .alert-info { background-color: #DBEAFE; color: #1E40AF; border: 1px solid #BFDBFE; } /* ============================================ LOGIN PAGE ============================================ */ .login-container { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--gradient-primary); } .login-card { background: white; padding: 48px; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); width: 100%; max-width: 420px; } .login-card h1 { margin-bottom: 10px; font-size: 28px; } .login-card p { color: var(--text-secondary); margin-bottom: 30px; } .btn-google { background-color: white; color: #333; border: 2px solid var(--border-color); width: 100%; padding: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 500; border-radius: 8px; } .btn-google:hover { background-color: var(--bg-color); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } /* ============================================ MODALS ============================================ */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; z-index: 1050; } .modal.show { display: flex; align-items: center; justify-content: center; } .modal-dialog { max-width: 500px; width: 100%; margin: 20px; } .modal-content { background-color: white; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); } .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } .modal-title { font-size: 18px; font-weight: 600; color: var(--text-primary); } .modal-body { padding: 24px; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 12px; } .btn-close { background: transparent; border: none; font-size: 24px; line-height: 1; opacity: 0.5; cursor: pointer; padding: 0; width: 24px; height: 24px; } .btn-close:before { content: "×"; } .btn-close:hover { opacity: 1; } .modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1040; } .modal-backdrop.show { opacity: 1; } /* ============================================ CAMPAIGN GRID — modern / minimal Neutral slate ink, hairline structure, semantic color reserved for intent and live status only. ============================================ */ .camp-panel, .gmass-header-tabs, .gmass-toolbar, .gmass-table-container, .gmass-pagination, .empty-state { /* local design tokens — scoped to the grid, independent of the global orange --primary-color so this surface stays neutral */ --grid-ink: #0d0f12; /* primary text / focal */ --grid-ink-2: #4b5158; /* secondary text */ --grid-ink-3: #8a9098; /* muted / metadata */ --grid-line: var(--shell-border, rgba(15, 17, 21, 0.10)); /* light grey hairline, matches the page */ --grid-line-2: rgba(13, 15, 18, 0.06); /* softer row separation */ --grid-surface: #ffffff; --grid-hover: rgba(13, 15, 18, 0.035); --grid-accent: #2f6feb; /* one cool accent — links / focus */ --grid-accent-bg: rgba(47, 111, 235, 0.08); --grid-success: #16a34a; --grid-warning: #d97706; --grid-radius: 12px; } /* ---- Outer panel: one bordered card holding heading + tabs + toolbar + table ---- */ .camp-panel { background: var(--grid-surface); border: 1px solid var(--grid-line); border-radius: var(--grid-radius); /* Was overflow:hidden, which clipped the absolutely-positioned filter dropdown that opens from the toolbar. Keep the horizontal scroll of the wide table contained (via .gmass-table-container's own overflow-x) but let vertical overflow escape so the dropdown isn't cut off. */ overflow: visible; margin-bottom: 28px; } /* The wide table still needs its own corner-clip so it doesn't poke out of the panel's rounded bottom edge now that .camp-panel no longer clips. */ .gmass-table-container { border-bottom-left-radius: var(--grid-radius); border-bottom-right-radius: var(--grid-radius); } /* Heading sits on the same row as the tabs — kills the big vertical gap */ .camp-panel-head { display: flex; align-items: center; gap: 24px; padding: 0 18px; border-bottom: 1px solid var(--grid-line); flex-wrap: wrap; } .camp-panel-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--grid-ink); margin: 0; padding: 14px 0; white-space: nowrap; } /* ---- Tabs (inline with the heading) ---- */ .gmass-header-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 0; background: transparent; padding: 0; } .tab-link { background: none; border: none; padding: 16px 14px; font-size: 13.5px; font-weight: 500; color: var(--grid-ink-3); cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.16s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.16s ease; position: relative; top: 1.5px; white-space: nowrap; } .tab-link:hover { color: var(--grid-ink-2); } .tab-link.active { color: var(--grid-ink); border-bottom-color: var(--grid-ink); font-weight: 600; } /* ---- Toolbar: reload (left) + search (right), aligned on one row ---- */ .gmass-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; background: var(--grid-surface); border-bottom: 1px solid var(--grid-line); width: 100%; max-width: 100%; flex-wrap: wrap; gap: 12px; } .toolbar-btn { display: flex; align-items: center; gap: 7px; padding: 8px 15px; background: var(--grid-surface); border: 1px solid var(--grid-line); border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--grid-ink); cursor: pointer; transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; } .toolbar-btn:hover { background: var(--grid-ink); color: #fff; } .toolbar-btn:active { transform: scale(0.98); } .toolbar-right { display: flex; align-items: center; gap: 12px; } .search-with-filter-wrapper { position: relative; } .search-input-wrapper { position: relative; display: block; } /* Scoped to the wrapper so it always beats the global input[type="text"] rule, guaranteeing the left gutter for the search icon (no overlap). */ .search-input-wrapper input.search-input { width: 300px; box-sizing: border-box; display: block; /* room for the leading search icon (left) and the trailing filter button (right) */ padding: 9px 46px 9px 42px; border: 1px solid var(--grid-line); border-radius: 9px; font-size: 13.5px; color: var(--grid-ink); background: var(--grid-surface); transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .search-input::placeholder { color: var(--grid-ink-3); } .search-input:hover { border-color: rgba(20, 24, 31, 0.18); } .search-input:focus { outline: none; background: var(--grid-surface); border-color: var(--grid-accent); box-shadow: 0 0 0 3px var(--grid-accent-bg); } .search-input-wrapper .search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; color: var(--grid-ink-3); pointer-events: none; } .filter-toggle-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: background 0.16s ease, color 0.16s ease; display: flex; align-items: center; justify-content: center; color: var(--grid-ink-3); } .filter-toggle-btn:hover { background: var(--grid-hover); color: var(--grid-accent); } /* ============================================ TABLE ============================================ */ .gmass-table-container { background: var(--grid-surface); overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; width: 100%; max-width: 100%; margin-bottom: 0; } @media (max-width: 1400px) { .gmass-table th, .gmass-table td { padding: 9px 8px; font-size: 12px; } .action-btn { width: 28px; height: 28px; min-width: 28px; } .action-btn svg { width: 14px; height: 14px; } .action-buttons { gap: 4px; } } .gmass-table { width: 100%; min-width: 1200px; border-collapse: collapse; font-size: 13px; } .gmass-table thead { background: rgba(13, 15, 18, 0.025); border-bottom: 1px solid var(--grid-line); } .gmass-table th { padding: 12px 10px; text-align: left; font-weight: 700; color: var(--grid-ink-2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; user-select: none; white-space: nowrap; transition: color 0.16s ease; } .gmass-table th[style*="cursor: pointer"]:hover { color: var(--grid-ink); } .gmass-table tbody tr { border-bottom: 1px solid var(--grid-line-2); transition: background 0.14s ease; } .gmass-table tbody tr:hover { background: var(--grid-hover); } .gmass-table td { padding: 13px 10px; color: var(--grid-ink-2); vertical-align: middle; font-variant-numeric: tabular-nums; } .gmass-table .text-center { text-align: center; } .campaign-id { color: var(--grid-ink-3); font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace; font-size: 11.5px; letter-spacing: -0.01em; } /* Campaign name is the single focal point of each row */ .campaign-name a { color: var(--grid-ink); text-decoration: none; font-weight: 600; transition: color 0.16s ease; } .campaign-name a:hover { color: var(--grid-accent); } .percentage { color: var(--grid-ink-3); font-size: 11px; } .expand-btn { background: none; border: none; cursor: pointer; padding: 4px 8px; color: var(--grid-ink-3); font-size: 11px; border-radius: 4px; transition: color 0.16s ease, background 0.16s ease; } .expand-btn:hover { color: var(--grid-ink); background: var(--grid-hover); } .expanded-row { background: rgba(20, 24, 31, 0.02) !important; } .expanded-content { padding: 12px 14px; font-size: 13px; color: var(--grid-ink-2); } /* ---- Action buttons: bordered icon chips, color on intent ---- */ .action-buttons { display: flex; gap: 5px; align-items: center; flex-wrap: nowrap; justify-content: flex-start; } .action-btn { width: 30px; height: 30px; min-width: 30px; padding: 0; border: 1px solid var(--grid-line); border-radius: 8px; cursor: pointer; transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.1s ease; display: inline-flex; align-items: center; justify-content: center; background: var(--grid-surface); color: var(--grid-ink-2); flex-shrink: 0; } .action-btn svg { width: 15px; height: 15px; display: block; pointer-events: none; /* clicks always land on the button, never the icon */ } .action-btn:hover { background: var(--grid-ink); border-color: var(--grid-ink); color: #fff; } .action-btn:active { transform: scale(0.94); } /* Intent-bearing actions adopt their semantic color on hover */ .action-btn-success:hover { background: var(--grid-success); border-color: var(--grid-success); color: #fff; } .action-btn-warning:hover { background: var(--grid-warning); border-color: var(--grid-warning); color: #fff; } .action-btn-primary:hover, .action-btn-info:hover { background: var(--grid-accent); border-color: var(--grid-accent); color: #fff; } .gmass-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; background: rgba(13, 15, 18, 0.015); border-top: 1px solid var(--grid-line); color: var(--grid-ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; } .gmass-pg-btns { display: flex; gap: 8px; } .gmass-pg-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: var(--grid-surface); border: 1px solid var(--grid-line); border-radius: 8px; color: var(--grid-ink-2); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease; } .gmass-pg-btn:hover:not([disabled]) { background: var(--grid-hover); color: var(--grid-ink); } .gmass-pg-btn:active:not([disabled]) { transform: scale(0.95); } .gmass-pg-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--grid-accent-bg), 0 0 0 1.5px var(--grid-accent); } .gmass-pg-btn[disabled] { opacity: 0.4; cursor: default; } /* Sorted-column chevron (replaces the old text triangles) */ .sort-ico { vertical-align: -1px; margin-left: 3px; } /* Expand chevron rotates instead of swapping glyphs */ .expand-btn svg { transition: transform 0.15s ease; } .expand-btn.open svg { transform: rotate(90deg); } .empty-state { text-align: center; padding: 60px 20px; background: var(--grid-surface); color: var(--grid-ink-3); } .empty-state p { font-size: 14.5px; margin-bottom: 12px; color: var(--grid-ink-2); } .empty-state a:not(.btn-create-first) { color: var(--grid-accent); text-decoration: none; font-weight: 500; } .empty-state a:hover:not(.btn-create-first) { text-decoration: underline; } /* ============================================ BADGE STYLES (GMASS) ============================================ */ .badge-draft { background-color: #E5E7EB; color: #374151; } .badge-scheduled { background-color: #DBEAFE; color: #1E40AF; } .badge-sending { background-color: #FEF3C7; color: #92400E; } .badge-completed { background-color: #D1FAE5; color: #065F46; } .badge-failed { background-color: #FEE2E2; color: #991B1B; } /* ============================================ BLAZOR ERROR UI ============================================ */ #blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzggNTMuNjI5NCAyNTkuOTc1IDUyLjc5ODUgMjYwLjQyMSA1Mi4yNjU4QzI2MS4yMTQgNTEuNDgzNyAyNjIuMzEgNTEgMjYzLjUwNiA1MVoiIGZpbGw9IiNGMjVFM0UiLz48L2c+PC9zdmc+) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 768px) { .nav-container { flex-wrap: wrap; height: auto; padding: 10px; } .nav-tabs { order: 3; width: 100%; margin-top: 10px; overflow-x: auto; flex-wrap: nowrap; } .nav-tab { white-space: nowrap; padding: 8px 12px; font-size: 14px; } .logo-text { font-size: 42px; } .hero-title { font-size: 36px; } .hero-subtitle { font-size: 18px; padding: 0 10px; } .btn-signin { padding: 16px 36px; font-size: 16px; } .features-grid { grid-template-columns: 1fr; gap: 20px; } .logo-icon { width: 60px; height: 60px; } .section-title { font-size: 32px; } .section-subtitle { font-size: 16px; } .feature-item { flex-direction: column; text-align: center; } .use-cases-grid { grid-template-columns: 1fr; } .tour-steps { grid-template-columns: 1fr; } .pricing-grid { grid-template-columns: 1fr; } .blog-grid { grid-template-columns: 1fr; } } @media (max-width: 640.98px) { .top-row:not(.auth) { display: none; } .top-row.auth { justify-content: space-between; } .top-row a, .top-row .btn-link { margin-left: 0; } main { padding: 20px; } .stats-grid { grid-template-columns: 1fr; } } @media (min-width: 641px) { .page { flex-direction: row; height: 100vh; overflow: hidden; } .sidebar { width: 250px; height: 100vh; position: fixed; left: 0; top: 0; background: var(--sidebar-bg); box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1); transition: width 0.3s var(--transition-smooth); z-index: 1000; overflow-y: auto; overflow-x: hidden; } main { flex: 1; margin-left: 250px; height: 100vh; display: flex; flex-direction: column; transition: margin-left 0.3s var(--transition-smooth); overflow: hidden; } .page.sidebar-collapsed .sidebar { width: 70px; } .page.sidebar-collapsed main { margin-left: 70px; } .top-row { position: sticky; top: 0; z-index: 999; backdrop-filter: blur(12px); flex-shrink: 0; width: 100%; } main > div { padding-left: 0 !important; padding-right: 0 !important; } .content { padding: 32px !important; overflow-y: auto; overflow-x: hidden; flex: 1; height: calc(100vh - 80px); } article.content { max-width: 100%; } /* ---- App-shell floating layout (S-Money minimal). Scoped to .gpshell so only the authenticated app uses the gapped, rounded-card layout. ---- */ .gpshell.page { padding: 14px; gap: 14px; box-sizing: border-box; } .gpshell .sidebar { position: relative; /* sits in flow, not fixed — creates the canvas gap */ left: auto; top: auto; height: calc(100vh - 28px); /* 100vh minus top+bottom shell padding */ width: 222px; /* reduced 20% from 252px */ box-shadow: 0 1px 2px rgba(15, 17, 21, 0.04), 0 8px 24px rgba(15, 17, 21, 0.06); z-index: 10; } .gpshell.page.sidebar-collapsed .sidebar { width: 76px; } .gpshell main { margin-left: 0; /* sidebar is in flow now */ height: calc(100vh - 28px); gap: 14px; background: transparent !important; } .gpshell.page.sidebar-collapsed main { margin-left: 0; } .gpshell .top-row { position: relative; top: auto; z-index: 10; } .gpshell .content { padding: 24px !important; background: var(--shell-sidebar-bg); border: 1px solid var(--shell-border); border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 17, 21, 0.04), 0 6px 18px rgba(15, 17, 21, 0.05); } } /* ============================================================ APP SHELL — MOBILE (≤640px): off-canvas slide-in sidebar. The sidebar becomes a fixed drawer hidden off the left edge; the topbar hamburger toggles the `mobile-nav-open` class which slides it in over a dimming backdrop. ============================================================ */ @media (max-width: 640px) { .gpshell.page { flex-direction: column; height: 100vh; overflow: hidden; /* No left/right inset on mobile — content spans the full width */ padding: 4px 0; gap: 4px; box-sizing: border-box; } /* Sidebar = off-canvas drawer, parked off-screen by default. Force the rail back to its full expanded width on mobile even if the desktop `sidebar-collapsed` flag is set (the hamburger toggles both). */ .gpshell .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 264px !important; max-width: 84vw; height: 100vh !important; margin: 0; border-radius: 0 18px 18px 0; transform: translateX(-100%); transition: transform 0.28s var(--transition-smooth); z-index: 1200; box-shadow: 0 10px 40px rgba(15, 17, 21, 0.28); will-change: transform; } .gpshell.mobile-nav-open .sidebar { transform: translateX(0); } /* Keep nav labels visible in the drawer regardless of collapsed state */ .gpshell .sidebar .snav.collapsed { padding: 18px 14px; } .gpshell .sidebar .snav.collapsed .snav-item { justify-content: flex-start; padding: 10px 12px; } .gpshell .sidebar .snav.collapsed .snav-brand { justify-content: flex-start; } .gpshell .sidebar .snav.collapsed .snav-profile { justify-content: flex-start; padding: 10px; } /* Backdrop — fades in only while the drawer is open */ .gpshell .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(8, 10, 14, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0.28s ease; z-index: 1100; } .gpshell.mobile-nav-open .sidebar-backdrop { opacity: 1; visibility: visible; } /* Main column takes the full width; sidebar floats above it */ .gpshell main { margin-left: 0 !important; width: 100%; height: calc(100vh - 20px); display: flex; flex-direction: column; gap: 10px; background: transparent !important; overflow: hidden; } .gpshell .top-row { position: relative; z-index: 10; flex-shrink: 0; /* Sits edge-to-edge — keep a small side margin so the card isn't flush */ margin: 0 8px; } .gpshell .content { flex: 1; overflow-y: auto; overflow-x: hidden; /* Full-bleed card: no side inset, content keeps a modest 12px breathing room */ padding: 14px 12px !important; background: var(--shell-sidebar-bg); border: none; border-radius: 0; box-shadow: none; } } /* ============================================ FILTER DROPDOWN PANEL ============================================ */ .filter-dropdown-panel { position: absolute; top: 100%; right: 0; margin-top: 8px; background: #ffffff; border: 1px solid rgba(20, 24, 31, 0.08); border-radius: 10px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 8px 28px -6px rgba(20, 24, 31, 0.16); z-index: 1000; width: 460px; /* Never exceed the viewport: cap height to the space below the toolbar (minus a 16px breathing gap) so the Clear/Search actions stay reachable. */ max-height: min(480px, calc(100vh - 140px)); max-width: calc(100vw - 32px); overflow-y: auto; overscroll-behavior: contain; transform-origin: top right; animation: filterDropdownOpen 0.18s cubic-bezier(0.23, 1, 0.32, 1); } .filter-dropdown-panel::-webkit-scrollbar { width: 8px; } .filter-dropdown-panel::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } .filter-dropdown-panel::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; } .filter-dropdown-panel::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } /* ---- Dashboard grid surface: mobile (the GMass-style toolbar + filters) ---- */ @media (max-width: 640px) { .gmass-toolbar { padding: 12px 14px; } /* Search stretches full-width once it wraps below the Reload button */ .toolbar-right, .search-with-filter-wrapper, .search-input-wrapper { width: 100%; } .search-input { width: 100%; } /* Filter dropdown was 460px wide — fit it to the viewport */ .filter-dropdown-panel { width: calc(100vw - 32px); max-width: 460px; right: auto; left: 0; transform-origin: top left; } /* Filter rows stack so labels + inputs don't squeeze */ .filter-row { grid-template-columns: 1fr; align-items: stretch; gap: 8px; } .gmass-pagination { padding: 12px 14px; font-size: 12px; } } @keyframes filterDropdownOpen { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .filter-dropdown-content { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .filter-row { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 16px; } .filter-label { font-weight: 500; color: #5b6168; font-size: 13px; text-align: left; } .filter-inputs { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; } .filter-select { padding: 7px 10px; border: 1px solid rgba(20, 24, 31, 0.12); border-radius: 6px; font-size: 13px; background: rgba(20, 24, 31, 0.02); cursor: pointer; width: 130px; flex-shrink: 0; color: #1a1d21; transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; } .filter-select:focus { outline: none; background: #ffffff; border-color: #2f6feb; box-shadow: 0 0 0 3px rgba(47, 111, 235, 0.12); } .filter-input { width: 150px; padding: 7px 10px; border: 1px solid rgba(20, 24, 31, 0.12); border-radius: 6px; font-size: 13px; flex-shrink: 0; color: #1a1d21; background: rgba(20, 24, 31, 0.02); transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; } .filter-input-small { width: 70px; flex-shrink: 0; } .filter-input:focus { outline: none; background: #ffffff; border-color: #2f6feb; box-shadow: 0 0 0 3px rgba(47, 111, 235, 0.12); } .filter-date { padding: 7px 10px; border: 1px solid rgba(20, 24, 31, 0.12); border-radius: 6px; font-size: 13px; width: 130px; flex-shrink: 0; color: #1a1d21; background: rgba(20, 24, 31, 0.02); transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; } .filter-date:focus { outline: none; background: #ffffff; border-color: #2f6feb; box-shadow: 0 0 0 3px rgba(47, 111, 235, 0.12); } .filter-separator { color: #5f6368; font-size: 13px; padding: 0 6px; } .filter-percent { color: #5f6368; font-size: 13px; font-weight: 400; padding: 0 4px; } .filter-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #202124; cursor: pointer; user-select: none; } .filter-checkbox-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; margin: 0; accent-color: #1a1d21; } .filter-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 12px; margin-top: 4px; border-top: 1px solid rgba(20, 24, 31, 0.06); /* Pin the actions to the bottom of the (scrollable) panel so Clear/Search stay visible even when the panel is height-capped on short viewports. Offsets match .filter-dropdown-content's 16px bottom padding. */ position: sticky; bottom: -16px; background: #ffffff; margin-bottom: -16px; padding-bottom: 16px; } .btn-search { padding: 8px 20px; background: #1a1d21; color: white; border: 1px solid #1a1d21; border-radius: 6px; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background 0.16s ease, transform 0.1s ease; } .btn-search:hover { background: #2c3138; } .btn-search:active { transform: scale(0.98); } .btn-clear { padding: 8px 20px; background: #ffffff; color: #5b6168; border: 1px solid rgba(20, 24, 31, 0.12); border-radius: 6px; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.1s ease; } .btn-clear:hover { background: rgba(20, 24, 31, 0.03); border-color: rgba(20, 24, 31, 0.18); color: #1a1d21; } .btn-clear:active { transform: scale(0.98); } @media (max-width: 768px) { .filter-dropdown-panel { min-width: 320px; max-width: calc(100vw - 24px); right: 0; left: auto; } .filter-dropdown-content { padding: 14px; } .filter-row { grid-template-columns: 1fr; gap: 8px; } .filter-label { min-width: auto; } .filter-inputs { width: 100%; } .filter-select, .filter-input, .filter-date { flex: 1; min-width: 0; width: auto; } .filter-actions { width: 100%; } .btn-search, .btn-clear { flex: 1; } .search-input { width: 250px; } } /* ============================================ DASHBOARD OVERVIEW ============================================ */ .dash { margin-bottom: 28px; } @keyframes dash-pop { 0% { opacity: 0; transform: translateY(14px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes dash-fade { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes bar-grow { 0% { width: 0 !important; } } /* ---------- Welcome ---------- */ .dash-welcome { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; animation: dash-fade 0.5s ease both; } .dash-hello { font-size: 28px; font-weight: 800; color: var(--shell-ink, var(--text-primary)); margin: 0 0 4px 0; letter-spacing: -0.02em; } /* Greeting name: single indigo accent word, no loud gradient */ .dash-hello-name { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; color: var(--shell-accent, #2563EB); } .dash-sub { font-size: 15px; color: var(--shell-muted, var(--text-secondary)); margin: 0; } .dash-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: var(--shell-accent, #2563EB); color: #fff; border-radius: 10px; font-weight: 600; font-size: 15px; text-decoration: none; box-shadow: 0 4px 14px var(--shell-accent-glow, rgba(37,99,235,0.30)); transition: transform 0.2s, box-shadow 0.2s, background 0.18s; } .dash-cta:hover { transform: translateY(-2px); background: var(--shell-accent-hover, #1D4FD7); box-shadow: 0 7px 20px var(--shell-accent-glow, rgba(37,99,235,0.40)); color: #fff; } /* ---------- KPI stat cards ---------- */ .dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 22px; } .stat-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 22px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: transform 0.25s, box-shadow 0.25s; position: relative; overflow: hidden; } /* Stat cards are static info surfaces: no hover lift and no accent top-line (the scaleX ::before bar was removed on request). */ .stat-pop { animation: dash-pop 0.5s ease both; } .stat-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .stat-ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; } /* Cool-family KPI icon tints — no orange. ico-orange repurposed to indigo. */ .ico-orange { background: rgba(37,130,246,0.14); } .ico-blue { background: rgba(59,130,246,0.12); } .ico-green { background: rgba(16,185,129,0.12); } .ico-purple { background: rgba(99,102,241,0.14); } .stat-trend { font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--bg-secondary); padding: 3px 10px; border-radius: 20px; } .stat-value { font-size: 32px; font-weight: 800; color: var(--text-primary); line-height: 1; letter-spacing: -0.02em; } .stat-pct { font-size: 18px; font-weight: 700; color: var(--text-muted); } .stat-label { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-top: 8px; } .stat-foot { font-size: 12px; color: var(--text-muted); margin-top: 4px; } /* ---------- Rows / panels ---------- */ .dash-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-bottom: 22px; } .dash-row-2 { grid-template-columns: 1.2fr 1fr; } .dash-panel { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 22px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); animation: dash-fade 0.6s ease both; min-width: 0; /* grid child must be allowed to shrink, else inner content overflows */ overflow: hidden; } .panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .panel-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0; display: inline-flex; align-items: center; gap: 8px; } .panel-title svg { color: var(--shell-accent, #2563EB); flex-shrink: 0; } .panel-meta { font-size: 13px; color: var(--text-muted); } .panel-link { background: none; border: none; color: var(--shell-accent, #2563EB); font-weight: 600; font-size: 13px; cursor: pointer; padding: 0; } .panel-link:hover { text-decoration: underline; } /* ---------- Engagement bars ---------- */ .bars { display: flex; flex-direction: column; gap: 16px; } .bar-top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; } .bar-track { height: 10px; background: var(--bg-secondary); border-radius: 20px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 20px; animation: bar-grow 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; transition: width 0.6s ease; } .bf-open { background: linear-gradient(90deg, #2563EB, #60A5FA); } .bf-click { background: linear-gradient(90deg, #6366F1, #818CF8); } .bf-reply { background: linear-gradient(90deg, #10B981, #34D399); } .bf-bounce { background: linear-gradient(90deg, #EF4444, #F87171); } /* ---------- Status breakdown ---------- */ .status-list { display: flex; flex-direction: column; gap: 14px; } .status-item { display: flex; align-items: center; gap: 10px; font-size: 13px; } .status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .status-name { width: 84px; font-weight: 600; color: var(--text-secondary); flex-shrink: 0; } .status-bar-track { flex: 1; height: 8px; background: var(--bg-secondary); border-radius: 20px; overflow: hidden; } .status-bar-fill { display: block; height: 100%; border-radius: 20px; animation: bar-grow 1s cubic-bezier(0.22, 1, 0.36, 1) both; } .status-count { width: 28px; text-align: right; font-weight: 700; color: var(--text-primary); flex-shrink: 0; } /* ---------- Recent campaigns ---------- */ .recent-list { display: flex; flex-direction: column; } .recent-item { display: flex; align-items: center; gap: 12px; padding: 12px 8px; border-radius: 10px; text-decoration: none; border-bottom: 1px solid var(--border-light); transition: background 0.15s, transform 0.15s; } .recent-item:last-child { border-bottom: none; } .recent-item:hover { background: var(--bg-secondary); transform: translateX(3px); } .recent-badge { color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; flex-shrink: 0; min-width: 76px; text-align: center; } .recent-name { flex: 1; min-width: 0; /* allow the name to shrink + ellipsis instead of forcing the row wider */ font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .recent-meta { font-size: 12px; color: var(--text-muted); flex-shrink: 0; } .recent-date { font-size: 12px; color: var(--text-muted); width: 64px; text-align: right; flex-shrink: 0; } .recent-empty { text-align: center; padding: 24px 0; color: var(--text-muted); } .dash-link { color: var(--shell-accent, #2563EB); font-weight: 600; text-decoration: none; } .dash-link:hover { text-decoration: underline; } /* ---------- Quick actions ---------- */ .qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .qa-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px 12px; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 12px; text-decoration: none; transition: all 0.2s; } .qa-card:hover { background: var(--card-bg, #fff); border-color: var(--shell-accent, #2563EB); transform: translateY(-3px); box-shadow: 0 6px 16px var(--shell-accent-glow, rgba(37,99,235,0.18)); } .qa-ico { display: flex; align-items: center; justify-content: center; color: var(--shell-accent, #2563EB); } .qa-text { font-size: 13px; font-weight: 600; color: var(--text-primary); } /* ---------- Section divider ---------- */ .dash-section-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 8px 0 14px 0; padding-top: 8px; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .dash-stats { grid-template-columns: 1fr 1fr; } .dash-row, .dash-row-2 { grid-template-columns: 1fr; } } @media (max-width: 560px) { /* Tighter panel padding on phones frees horizontal room so nothing overflows. */ .dash-panel { padding: 16px; } .dash-row, .dash-row-2 { gap: 12px; margin-bottom: 16px; } /* Keep KPI cards as a compact 2×2 square block instead of one tall column. */ .dash-stats { grid-template-columns: 1fr 1fr; gap: 12px; } .dash-stats .stat-card { padding: 16px; } .dash-stats .stat-ico { width: 36px; height: 36px; } .dash-stats .stat-ico svg { width: 18px; height: 18px; } .dash-stats .stat-value { font-size: 26px; } /* Quick Actions: keep the 2×2 but tighten so both columns fit the phone width. */ .qa-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .qa-card { padding: 16px 8px; gap: 6px; min-width: 0; } .qa-text { font-size: 12px; text-align: center; line-height: 1.25; } .dash-hello { font-size: 23px; } /* Recent Campaigns rows overflow on narrow phones: tighten gaps, let the badge shrink, drop the relative-date column, and keep meta from clipping. */ .recent-item { gap: 8px; padding: 10px 4px; } .recent-badge { min-width: 0; padding: 3px 8px; font-size: 10px; } .recent-meta { white-space: nowrap; } .recent-date { display: none; } } /* ============================================================ APP-SHELL DARK MODE — page content Scoped under .gpshell.dark so the landing page (which never gets the .dark class) is completely untouched. Only the authenticated app's content surface and its common building blocks are themed. Surfaces: content #161719 · raised card #1E2023 · inset/inputs #232629. ============================================================ */ .gpshell.dark .content { background: #161719; border-color: rgba(255, 255, 255, 0.10); color: #C8CCD2; } /* Text hierarchy */ .gpshell.dark .content h1, .gpshell.dark .content h2, .gpshell.dark .content h3, .gpshell.dark .content h4, .gpshell.dark .content .card-title, .gpshell.dark .content .stat-value, .gpshell.dark .content .plan-name, .gpshell.dark .content strong { color: #F4F5F7; } .gpshell.dark .content .text-muted, .gpshell.dark .content .card-subtitle, .gpshell.dark .content .stat-label, .gpshell.dark .content .percentage, .gpshell.dark .content small { color: #8A8F98; } .gpshell.dark .content a { color: #6BA1FF; } .gpshell.dark .content a:hover { color: #93BBFF; } /* Cards / panels */ .gpshell.dark .content .card, .gpshell.dark .content .dash-panel, .gpshell.dark .content .feature-item, .gpshell.dark .content .use-case-card, .gpshell.dark .content .tour-step, .gpshell.dark .content .pricing-card, .gpshell.dark .content .stat-box { background: #1E2023; border-color: rgba(255, 255, 255, 0.08); box-shadow: none; } .gpshell.dark .content .card-header { background: #232629; border-color: rgba(255, 255, 255, 0.08); } /* Tables — base .table */ .gpshell.dark .content .table { background: #1E2023; } .gpshell.dark .content .table th { background: #232629; color: #8A8F98; } .gpshell.dark .content .table td { border-color: rgba(255, 255, 255, 0.08); } .gpshell.dark .content .table tr:hover td { background: rgba(255, 255, 255, 0.03); } /* GMass grid — retune the scoped tokens for dark (black hairline → light hairline) */ .gpshell.dark .content .camp-panel, .gpshell.dark .content .gmass-header-tabs, .gpshell.dark .content .gmass-toolbar, .gpshell.dark .content .gmass-table-container, .gpshell.dark .content .gmass-pagination, .gpshell.dark .content .empty-state { --grid-ink: #E4E6EA; --grid-ink-2: #A9AEB6; --grid-ink-3: #8A8F98; --grid-line: rgba(255, 255, 255, 0.16); --grid-line-2: rgba(255, 255, 255, 0.07); --grid-surface: #1E2023; --grid-hover: rgba(255, 255, 255, 0.04); --grid-accent: #6BA1FF; --grid-accent-bg: rgba(107, 161, 255, 0.14); } /* Outer panel + heading row */ .gpshell.dark .content .camp-panel { background: #1E2023; } .gpshell.dark .content .camp-panel-title { color: #E4E6EA; } /* Tables — GMass style */ .gpshell.dark .content .gmass-table-container { background: transparent; } .gpshell.dark .content .gmass-table { color: #C8CCD2; } .gpshell.dark .content .gmass-table thead { background: rgba(255, 255, 255, 0.03); border-bottom-color: rgba(255, 255, 255, 0.16); } .gpshell.dark .content .gmass-table th { color: #9aa0a8; } .gpshell.dark .content .gmass-table td { color: #C8CCD2; } .gpshell.dark .content .gmass-table tbody tr { border-bottom-color: rgba(255, 255, 255, 0.07); } .gpshell.dark .content .gmass-table tbody tr:hover { background: rgba(255, 255, 255, 0.035); } .gpshell.dark .content .expanded-row { background: rgba(255, 255, 255, 0.03) !important; } .gpshell.dark .content .expanded-content { color: #A9AEB6; } .gpshell.dark .content .campaign-id, .gpshell.dark .content .campaign-name a { color: #6BA1FF; } /* Tabs + toolbar */ .gpshell.dark .content .gmass-header-tabs, .gpshell.dark .content .gmass-toolbar { background: transparent; } .gpshell.dark .content .tab-link { color: #8A8F98; } .gpshell.dark .content .tab-link:hover { color: #E4E6EA; } .gpshell.dark .content .tab-link.active { color: #6BA1FF; border-bottom-color: #6BA1FF; } .gpshell.dark .content .toolbar-btn { background: #232629; border-color: rgba(255, 255, 255, 0.16); color: #D6D9DE; } .gpshell.dark .content .toolbar-btn:hover { background: #6BA1FF; border-color: #6BA1FF; color: #11141a; } /* Action icon chips */ .gpshell.dark .content .action-btn { background: #232629; border-color: rgba(255, 255, 255, 0.16); color: #C8CCD2; } .gpshell.dark .content .action-btn:hover { background: #E4E6EA; border-color: #E4E6EA; color: #11141a; } .gpshell.dark .content .gmass-pagination { background: transparent; color: #8A8F98; } .gpshell.dark .content .gmass-pg-btn { background: transparent; border-color: rgba(255, 255, 255, 0.12); color: #C8CCD2; } .gpshell.dark .content .gmass-pg-btn:hover:not([disabled]) { background: rgba(255, 255, 255, 0.06); color: #F4F5F7; } /* Inputs / selects / textareas */ .gpshell.dark .content input[type="text"], .gpshell.dark .content input[type="email"], .gpshell.dark .content input[type="password"], .gpshell.dark .content input[type="number"], .gpshell.dark .content input[type="date"], .gpshell.dark .content input[type="datetime-local"], .gpshell.dark .content select, .gpshell.dark .content textarea, .gpshell.dark .content .search-input, .gpshell.dark .content .filter-input, .gpshell.dark .content .filter-select, .gpshell.dark .content .filter-date { background: #232629; border-color: rgba(255, 255, 255, 0.12); color: #E4E6EA; } .gpshell.dark .content input::placeholder, .gpshell.dark .content textarea::placeholder { color: #6E747C; } .gpshell.dark .content input:focus, .gpshell.dark .content select:focus, .gpshell.dark .content textarea:focus, .gpshell.dark .content .search-input:focus { border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); } .gpshell.dark .content label { color: #C8CCD2; } /* Filter dropdown panel (floats inside content) */ .gpshell.dark .content .filter-dropdown-panel, .gpshell.dark .content .modal-content { background: #1E2023; border-color: rgba(255, 255, 255, 0.12); color: #C8CCD2; } .gpshell.dark .content .modal-header, .gpshell.dark .content .modal-footer { border-color: rgba(255, 255, 255, 0.10); } .gpshell.dark .content .modal-title { color: #F4F5F7; } /* Sticky filter action bar matches the dark panel surface (not white) */ .gpshell.dark .content .filter-actions { background: #1E2023; border-top-color: rgba(255, 255, 255, 0.10); } /* Empty state */ .gpshell.dark .content .empty-state { background: transparent; color: #8A8F98; } .gpshell.dark .content .empty-state p { color: #A9AEB6; } /* Status / engagement bar tracks on the dashboard */ .gpshell.dark .content .bar-track, .gpshell.dark .content .status-bar-track { background: rgba(255, 255, 255, 0.08); } /* Quick-action cards on the dashboard */ .gpshell.dark .content .qa-card, .gpshell.dark .content .recent-item { background: #232629; border-color: rgba(255, 255, 255, 0.08); color: #D6D9DE; } .gpshell.dark .content .qa-card:hover, .gpshell.dark .content .recent-item:hover { background: #2A2D31; } .gpshell.dark .content .recent-name { color: #E4E6EA; } .gpshell.dark .content .recent-meta, .gpshell.dark .content .recent-date { color: #8A8F98; } /* Alerts keep their semantic hue but on darker fills */ .gpshell.dark .content .alert-info { background: rgba(59,130,246,.12); color: #9DC0FF; border-color: rgba(59,130,246,.30); } .gpshell.dark .content .alert-success { background: rgba(16,185,129,.12); color: #6EE7B7; border-color: rgba(16,185,129,.30); } .gpshell.dark .content .alert-danger { background: rgba(239,68,68,.12); color: #FCA5A5; border-color: rgba(239,68,68,.30); } /* Dashboard KPI stat cards (distinct from .card — needs its own dark surface) */ .gpshell.dark .content .stat-card { background: #1E2023; border-color: rgba(255, 255, 255, 0.08); box-shadow: none; } .gpshell.dark .content .stat-card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); } .gpshell.dark .content .stat-value { color: #F4F5F7; } .gpshell.dark .content .stat-pct, .gpshell.dark .content .stat-foot { color: #8A8F98; } .gpshell.dark .content .stat-label { color: #C8CCD2; } .gpshell.dark .content .stat-trend { background: rgba(255, 255, 255, 0.06); color: #9aa0a8; } .gpshell.dark .content .dash-sub { color: #8A8F98; } .gpshell.dark .content .panel-meta { color: #8A8F98; } .gpshell.dark .content .status-name { color: #C8CCD2; } .gpshell.dark .content .status-count { color: #F4F5F7; } .gpshell.dark .content .bar-top { color: #C8CCD2; } .gpshell.dark .content .recent-item { border-bottom-color: rgba(255, 255, 255, 0.06); } /* Quiet scrollbar inside the dark content card */ .gpshell.dark .content ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); } /* ── Recipient lists table (page-scoped classes, need dark surface) ── */ .gpshell.dark .content .lists-table { background: #1E2023; border-color: rgba(255, 255, 255, 0.08); box-shadow: none; } .gpshell.dark .content .lists-table-head, .gpshell.dark .content .lists-table-row { border-bottom-color: rgba(255, 255, 255, 0.07); } .gpshell.dark .content .lists-table-head { color: #8A8F98; } .gpshell.dark .content .lists-table-row:hover { background: rgba(255, 255, 255, 0.035); } .gpshell.dark .content .row-name { color: #F4F5F7; } .gpshell.dark .content .row-description, .gpshell.dark .content .col-created { color: #8A8F98; } .gpshell.dark .content .row-avatar { background: #2A2D52; color: #A9B0F0; } .gpshell.dark .content .count-pill { background: rgba(255, 255, 255, 0.06); color: #C8CCD2; } /* Ghost actions on the dark table */ .gpshell.dark .content .btn-ghost { background: #232629; border-color: rgba(255, 255, 255, 0.12); color: #C8CCD2; } .gpshell.dark .content .btn-ghost:hover { background: #2A2D31; border-color: rgba(255, 255, 255, 0.18); color: #F4F5F7; } .gpshell.dark .content .btn-edit:hover { background: #2A2D52; border-color: #5b63d3; color: #A9B0F0; }