:root {
/* Color Palette - Premium SaaS Light (Stape.io Inspired) */
--bg-base: #f4f7f6;
--bg-surface: #ffffff;
--bg-surface-hover: #f8fafc;
--border-light: #e2e8f0;
--border-highlight: #cbd5e1;
--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #64748b;
/* Accents */
--primary: #f25e36;
/* Stape Orange */
--primary-glow: rgba(242, 94, 54, 0.1);
--success: #10b981;
--success-bg: rgba(16, 185, 129, 0.1);
--danger: #ef4444;
--danger-bg: rgba(239, 68, 68, 0.1);
--warning: #f59e0b;
--warning-bg: rgba(245, 158, 11, 0.1);
--info: #3b82f6;
/* Fonts */
--font-sans: 'Inter', system-ui, sans-serif;
--font-heading: 'Outfit', system-ui, sans-serif;
/* Layout */
--sidebar-width: 260px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
html.dark {
--bg-base: #0a0e17;
--bg-surface: #111827;
--bg-surface-hover: #1f2937;
--border-light: #1f2937;
--border-highlight: #374151;
--text-primary: #f9fafb;
--text-secondary: #cbd5e1;
--text-muted: #64748b;
--primary: #ff6f47;
--primary-glow: rgba(255, 111, 71, 0.15);
--success: #34d399;
--success-bg: rgba(52, 211, 153, 0.15);
--danger: #f87171;
--danger-bg: rgba(248, 113, 113, 0.15);
--warning: #fbbf24;
--warning-bg: rgba(251, 191, 36, 0.15);
--info: #60a5fa;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Author display rules must never override HTML's built-in hidden contract. */
[hidden] {
display: none !important;
}
body {
background-color: var(--bg-base);
color: var(--text-primary);
font-family: var(--font-sans);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
padding-top: env(safe-area-inset-top);
}
.app-bootstrap {
position: fixed;
inset: 0;
z-index: 2000;
display: grid;
place-items: center;
padding: 1.25rem;
background: radial-gradient(circle at top, rgba(242, 94, 54, 0.12), transparent 30%), var(--bg-base);
}
.app-bootstrap-card {
display: grid;
justify-items: center;
gap: 0.65rem;
max-width: 320px;
padding: 1.5rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
background: var(--bg-surface);
color: var(--text-secondary);
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
text-align: center;
}
.app-bootstrap-card img {
width: 56px;
height: 56px;
border-radius: 16px;
}
.app-bootstrap-card strong {
color: var(--text-primary);
font-family: var(--font-heading);
font-size: 1.1rem;
}
.app-booting .app-container,
.app-booting .mobile-bottom-nav,
.app-booting .more-sheet,
.app-booting .more-sheet-backdrop,
.app-booting .pwa-banner {
visibility: hidden;
pointer-events: none;
}
h1,
h2,
h3,
h4 {
font-family: var(--font-heading);
font-weight: 600;
letter-spacing: -0.01em;
}
/* Layout Container */
.app-container {
display: flex;
height: 100vh;
overflow: hidden;
}
.pwa-banner {
position: fixed;
left: calc(var(--sidebar-width) + 1rem);
right: 1rem;
bottom: calc(1rem + env(safe-area-inset-bottom));
z-index: 80;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 1rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-surface);
color: var(--text-primary);
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}
.pwa-banner button {
min-height: 36px;
border: 0;
border-radius: var(--radius-sm);
padding: 0 0.9rem;
background: var(--primary);
color: #fff;
font-weight: 700;
cursor: pointer;
}
.pwa-banner--update {
border-color: rgba(59, 130, 246, 0.35);
bottom: calc(5rem + env(safe-area-inset-bottom));
}
.mobile-bottom-nav,
.more-sheet,
.more-sheet-backdrop {
display: none;
}
.pending-sync-label {
display: inline-flex;
margin-bottom: 0.35rem;
border-radius: 999px;
padding: 0.15rem 0.5rem;
background: var(--warning-bg);
color: var(--warning);
font-size: 0.72rem;
font-weight: 800;
}
/* Sidebar */
.sidebar {
width: var(--sidebar-width);
background: var(--bg-surface);
border-right: 1px solid var(--border-light);
display: flex;
flex-direction: column;
padding: 1.5rem 0;
z-index: 10;
flex-shrink: 0;
}
.logo {
padding: 0 1.5rem 1.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
border-bottom: 1px solid var(--border-light);
margin-bottom: 1.5rem;
}
.logo h2 {
font-size: 1.25rem;
letter-spacing: -0.02em;
background: linear-gradient(to right, #0f172a, #f25e36);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-menu {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0 1rem;
flex-grow: 1;
}
.nav-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: transparent;
border: none;
color: var(--text-secondary);
font-size: 0.95rem;
font-weight: 500;
border-radius: var(--radius-md);
cursor: pointer;
transition: var(--transition);
text-align: left;
}
.nav-item:hover {
background: var(--bg-surface-hover);
color: var(--text-primary);
}
.nav-item.active {
background: var(--primary-glow);
color: var(--primary);
font-weight: 600;
position: relative;
}
.nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 60%;
width: 4px;
background: var(--primary);
border-radius: 0 4px 4px 0;
}
.header-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
max-width: 100%;
}
.global-filters {
order: 1;
display: flex;
align-items: center;
gap: 0.5rem;
margin-right: 0.5rem;
min-width: 0;
flex: 0 1 auto;
}
.filter-group {
display: flex;
align-items: center;
gap: 0.4rem;
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
height: 38px;
min-width: 0;
padding: 0 0.5rem 0 0.6rem;
color: var(--text-secondary);
flex: 0 1 260px;
}
.filter-group svg {
flex-shrink: 0;
color: var(--text-muted);
}
.header-select {
border: none !important;
background: transparent !important;
width: 100%;
min-width: 0;
height: 100%;
padding: 0 0.5rem !important;
font-weight: 500;
line-height: 1;
box-shadow: none !important;
}
.header-select:focus,
.header-select:focus-visible {
box-shadow: none !important;
}
.date-picker-btn {
order: 2;
display: flex;
align-items: center;
gap: 0.5rem;
height: 38px;
min-width: 285px;
padding: 0 1rem;
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
color: var(--text-secondary);
cursor: pointer;
line-height: 1;
white-space: nowrap;
flex: 0 0 auto;
}
.date-picker-btn svg {
flex-shrink: 0;
}
.date-picker-btn span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.proposal-badge-container {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
}
.badge {
background: var(--primary);
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
margin-left: auto;
}
.sidebar-bottom {
padding: 1.25rem 1.25rem 1.35rem;
border-top: 1px solid var(--border-light);
display: grid;
gap: 1rem;
}
.logout-form {
display: none;
margin: 0;
}
.session-auth-mode .logout-form {
display: block;
}
.logout-btn {
appearance: none;
-webkit-appearance: none;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.65rem;
min-height: 42px;
padding: 0 0.9rem;
border: 1px solid transparent;
border-radius: var(--radius-md);
background: transparent;
color: var(--text-secondary);
font: inherit;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
box-shadow: none;
}
.logout-btn svg {
flex: 0 0 auto;
color: var(--text-muted);
transition: var(--transition);
}
.logout-btn span {
line-height: 1;
white-space: nowrap;
}
.logout-btn:hover {
border-color: rgba(239, 68, 68, 0.22);
color: var(--danger);
background: var(--danger-bg);
}
.logout-btn:hover svg {
color: var(--danger);
}
.logout-btn:focus-visible {
outline: 2px solid rgba(239, 68, 68, 0.35);
outline-offset: 2px;
}
/* Theme Switcher (Zenseeo Pill Style) */
.theme-switcher {
order: 4;
display: inline-flex;
background: var(--bg-surface-hover);
border-radius: 50px;
padding: 3px;
border: 1px solid var(--border-light);
gap: 2px;
}
.theme-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
background: transparent;
border: none;
border-radius: 50%;
cursor: pointer;
transition: var(--transition);
}
.theme-btn:hover {
color: var(--text-primary);
}
.theme-btn.active {
background: var(--primary);
color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.meta-info {
display: flex;
flex-direction: column;
gap: 0.5rem;
font-size: 0.8rem;
color: var(--text-muted);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.6rem 1rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: var(--radius-sm);
cursor: pointer;
transition: var(--transition);
border: none;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 85%, black) 100%);
color: white;
font-weight: 600;
box-shadow: 0 4px 10px var(--primary-glow);
border: none;
}
.btn-primary:hover {
filter: brightness(1.1);
box-shadow: 0 6px 15px var(--primary-glow);
transform: translateY(-2px);
}
.btn-secondary {
background: var(--bg-base);
border: 1px solid var(--border-light);
color: var(--text-primary);
}
.btn-secondary:hover {
background: var(--bg-surface-hover);
border-color: var(--border-highlight);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
/* Main Content */
.main-content {
flex-grow: 1;
display: flex;
flex-direction: column;
overflow-y: auto;
padding: 2rem 2.5rem;
}
.top-header {
margin-bottom: 2.5rem;
display: grid;
grid-template-columns: minmax(220px, 1fr) auto;
align-items: center;
gap: 1rem;
}
.header-title h1 {
font-size: 2rem;
letter-spacing: -0.02em;
margin-bottom: 0.25rem;
background: linear-gradient(90deg, var(--text-primary), var(--text-muted));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.subtitle {
color: var(--text-muted);
font-size: 0.875rem;
}
/* Tab Content */
.tab-content {
display: none;
transition: display 0.3s allow-discrete, opacity 0.3s ease, transform 0.3s ease;
opacity: 0;
transform: translateY(10px);
}
.tab-content.active {
display: block;
opacity: 1;
transform: translateY(0);
}
@starting-style {
.tab-content.active {
opacity: 0;
transform: translateY(10px);
}
}
.status-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 72px;
height: 26px;
padding: 0 0.55rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
border: 1px solid var(--border-light);
white-space: nowrap;
}
.status-enabled {
color: var(--success);
background: color-mix(in srgb, var(--success-bg) 60%, var(--bg-surface));
border-color: color-mix(in srgb, var(--success) 30%, var(--border-light));
}
.status-paused {
color: var(--warning);
background: color-mix(in srgb, var(--warning-bg) 65%, var(--bg-surface));
border-color: color-mix(in srgb, var(--warning) 34%, var(--border-light));
}
.status-removed,
.status-failed {
color: var(--danger);
background: color-mix(in srgb, var(--danger-bg) 65%, var(--bg-surface));
border-color: color-mix(in srgb, var(--danger) 30%, var(--border-light));
}
.status-applied,
.status-success,
.status-completed {
color: var(--success);
background: color-mix(in srgb, var(--success-bg) 60%, var(--bg-surface));
border-color: color-mix(in srgb, var(--success) 30%, var(--border-light));
}
.status-pending,
.status-previewed {
color: var(--info);
background: color-mix(in srgb, rgba(59, 130, 246, 0.12) 70%, var(--bg-surface));
border-color: color-mix(in srgb, var(--info) 30%, var(--border-light));
}
.controls-card {
margin-top: 1.5rem;
}
.keyword-subpanel>.card+.card,
.keyword-subpanel>.dashboard-grid+.card {
margin-top: 1.5rem;
}
#tab-ad-schedule .controls-card,
#tab-activity-history .controls-card {
margin-top: 0;
}
.controls-card .card-header {
gap: 1rem;
align-items: center;
}
.controls-card .card-header>div:first-child {
min-width: 0;
}
.controls-card .card-header h3 {
margin-bottom: 0.2rem;
}
.controls-card .grid-controls {
flex-wrap: wrap;
}
.controls-card .table-search {
min-width: 180px;
}
.controls-card .table-responsive {
border-top: 1px solid var(--border-light);
}
.control-note {
margin: 0;
color: var(--text-muted);
font-size: 0.82rem;
line-height: 1.45;
}
.control-form-shell {
padding: 1rem 1.5rem;
border-top: 1px solid var(--border-light);
background: var(--bg-base);
}
.schedule-form-shell {
padding: 1.1rem 1.5rem;
}
.control-form {
display: grid;
grid-template-columns: minmax(220px, 1.4fr) minmax(220px, 1.4fr) minmax(130px, 0.7fr) auto;
align-items: end;
gap: 0.75rem;
}
.control-form-keyword {
grid-template-columns: minmax(260px, 1.35fr) minmax(260px, 1.2fr) minmax(140px, 0.55fr) max-content;
}
.control-form-negative {
grid-template-columns: minmax(150px, 0.7fr) minmax(220px, 1.1fr) minmax(260px, 1.15fr) minmax(140px, 0.55fr) max-content;
}
.control-form-wide {
grid-template-columns: minmax(220px, 1.25fr) minmax(360px, 2fr) repeat(4, minmax(96px, 0.55fr)) minmax(128px, auto);
}
.schedule-control-form {
display: block;
width: 100%;
}
.schedule-form-container {
display: flex;
flex-direction: column;
gap: 1.25rem;
width: 100%;
}
.form-row {
width: 100%;
}
.form-row.time-actions-row {
display: flex;
align-items: flex-end;
gap: 1.25rem;
width: 100%;
}
.form-row.time-actions-row .time-field {
flex: 1;
min-width: 150px;
}
.form-row.time-actions-row .actions-field {
display: flex;
gap: 0.6rem;
}
.campaign-field {
max-width: 500px;
}
.days-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.6rem;
}
.days-header span {
color: var(--text-secondary);
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.schedule-presets {
display: flex;
align-items: center;
gap: 0.5rem;
}
.schedule-preset-btn {
height: 24px;
padding: 0 0.75rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-surface);
color: var(--text-secondary);
font-size: 0.72rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
white-space: nowrap;
}
.schedule-preset-btn:hover {
border-color: var(--border-highlight);
color: var(--text-primary);
background: var(--bg-surface-hover);
}
.schedule-preset-btn.active {
border-color: var(--primary);
color: #ffffff !important;
background: var(--primary);
box-shadow: 0 2px 6px var(--primary-glow);
}
.schedule-day-options {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.schedule-day-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
min-width: 40px;
border: 1px solid var(--border-light);
border-radius: 50%;
background: var(--bg-surface);
color: var(--text-secondary);
font: inherit;
font-size: 0.8rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: var(--transition);
white-space: nowrap;
}
.schedule-day-btn:hover {
border-color: var(--border-highlight);
color: var(--text-primary);
background: var(--bg-surface-hover);
transform: translateY(-2px);
}
.schedule-day-btn.active {
border-color: var(--primary);
color: #ffffff !important;
background: var(--primary);
box-shadow: 0 4px 12px var(--primary-glow);
}
/* Time Input Group Styles */
.time-input-group {
display: flex;
align-items: center;
height: 42px;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-base);
padding: 0 0.75rem;
transition: var(--transition);
}
.time-input-group:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 2px var(--primary-glow);
background: var(--bg-surface);
}
.time-input-group input[type="number"] {
border: none;
background: transparent;
height: 100%;
width: 48px;
font-size: 0.9rem;
font-weight: 500;
color: var(--text-primary);
outline: none;
text-align: center;
padding: 0;
margin: 0;
-moz-appearance: textfield;
}
.time-input-group input[type="number"]::-webkit-outer-spin-button,
.time-input-group input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.time-separator {
color: var(--text-muted);
font-weight: 600;
padding: 0 4px;
font-size: 0.95rem;
}
.time-input-group select {
border: none;
background: transparent;
height: 100%;
flex-grow: 1;
font-size: 0.9rem;
font-weight: 500;
color: var(--text-primary);
outline: none;
padding-left: 6px;
padding-right: 18px;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("data:image/svg+xml;utf8,") no-repeat right 4px center;
}
.control-field {
display: grid;
gap: 0.35rem;
min-width: 0;
}
.control-field span {
color: var(--text-secondary);
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0;
}
.control-field .styled-select {
width: 100%;
height: 42px;
min-height: 42px;
padding: 0 0.75rem;
line-height: 1.2;
}
.control-field textarea.styled-select {
height: 42px;
min-height: 42px;
max-height: 42px;
padding-top: 0.65rem;
padding-bottom: 0.65rem;
resize: none;
}
.control-day-picker {
margin: 0;
padding: 0;
border: 0;
align-self: end;
}
@media (max-width: 768px) {
.form-row.time-actions-row {
flex-direction: column;
align-items: stretch;
}
.form-row.time-actions-row .actions-field {
margin-top: 0.5rem;
}
.form-row.time-actions-row .actions-field .btn {
width: 100%;
}
}
.control-submit {
width: auto;
min-width: 92px;
height: 42px;
min-height: 42px;
padding: 0 1.1rem;
align-self: end;
justify-self: end;
font-size: 0.875rem;
line-height: 1;
white-space: nowrap;
}
.schedule-form-actions .control-submit {
min-width: 116px;
}
.control-row-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 0.45rem;
width: 100%;
}
.control-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
transition: var(--transition);
}
.control-icon-btn:hover {
background: var(--bg-surface-hover);
transform: translateY(-1px);
}
.control-icon-btn--edit {
color: var(--info);
}
.control-icon-btn--edit:hover {
color: color-mix(in srgb, var(--info) 80%, var(--text-primary));
background: color-mix(in srgb, var(--info) 10%, transparent);
}
.control-icon-btn--danger {
color: var(--danger);
}
.control-icon-btn--danger:hover {
color: color-mix(in srgb, var(--danger) 82%, var(--text-primary));
background: var(--danger-bg);
}
.control-icon-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.control-actions-row {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
padding: 0 1rem 1rem;
flex-wrap: wrap;
}
.controls-modal {
width: fit-content;
min-width: 320px;
max-width: min(450px, 90vw);
}
.schedule-conflict-modal {
max-width: min(560px, 92vw);
}
.schedule-conflict-body {
display: grid;
gap: 1rem;
}
.schedule-conflict-copy {
margin: 0;
color: var(--text-secondary);
font-size: 0.88rem;
line-height: 1.5;
}
.schedule-conflict-list {
display: grid;
gap: 0.55rem;
margin: 0;
padding: 0;
list-style: none;
}
.schedule-conflict-item {
display: grid;
gap: 0.2rem;
padding: 0.8rem 0.9rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-base);
}
.schedule-conflict-main {
display: flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
color: var(--text-primary);
font-size: 0.9rem;
}
.schedule-conflict-main strong {
flex: 0 0 auto;
}
.schedule-conflict-main span {
min-width: 0;
overflow-wrap: anywhere;
}
.schedule-conflict-meta,
.schedule-conflict-more {
color: var(--text-muted);
font-size: 0.78rem;
}
.schedule-conflict-actions {
padding: 0.9rem 0 0;
margin-top: 0;
border-top: 1px solid var(--border-light);
}
.btn-danger-action {
background: var(--danger);
border-color: var(--danger);
color: white;
}
.btn-danger-action:hover {
background: color-mix(in srgb, var(--danger) 88%, black);
border-color: color-mix(in srgb, var(--danger) 88%, black);
}
.controls-preview {
max-height: 360px;
overflow: auto;
padding: 1rem;
border: 1px solid var(--border-light);
border-radius: 8px;
background: var(--bg-base);
color: var(--text-primary);
font-size: 0.82rem;
font-family: var(--font-sans);
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
}
/* Solid Cards */
.glass-card {
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.04), 0 2px 6px -1px rgba(0, 0, 0, 0.02);
overflow: hidden;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
html.dark .glass-card {
box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.15), 0 2px 6px -1px rgba(0, 0, 0, 0.08);
}
html.dark .logo h2 {
background: linear-gradient(to right, #fff, #ff6f47);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
html.dark .logo-icon {
filter: invert(0.9) brightness(1.2) hue-rotate(180deg);
}
.card-header {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--border-light);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.grid-controls {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: flex-end;
min-width: min(100%, 560px);
}
.grid-controls .btn,
.grid-controls .styled-select,
.grid-controls .table-search,
.mobile-sort-select,
.mobile-sort-dir {
height: 40px;
margin: 0 !important;
}
.grid-controls .btn {
padding: 0 0.9rem;
white-space: nowrap;
}
.grid-controls .table-search {
width: clamp(180px, 22vw, 320px);
}
.lead-review-controls {
min-width: min(100%, 680px);
}
.lead-review-export-btn {
gap: 0.5rem;
min-width: 154px;
border-color: color-mix(in srgb, var(--success) 26%, var(--border-light));
background: color-mix(in srgb, var(--success-bg) 54%, var(--bg-surface));
}
.lead-review-export-btn:hover {
border-color: color-mix(in srgb, var(--success) 42%, var(--border-highlight));
}
.lead-export-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.lead-export-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.75rem;
height: 1.35rem;
padding: 0 0.45rem;
border-radius: 999px;
background: var(--success);
color: #fff;
font-size: 0.74rem;
font-weight: 700;
line-height: 1;
}
.mobile-sort-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
}
.mobile-sort-select {
width: 150px;
}
.mobile-sort-dir {
padding: 0 0.85rem !important;
white-space: nowrap;
}
.card-header h3 {
font-size: 1.1rem;
font-weight: 500;
}
/* KPI Grid */
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.25rem;
margin-bottom: 1.5rem;
}
@media (min-width: 1200px) {
.kpi-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.kpi-card {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
transition: var(--transition);
}
.kpi-card:hover {
transform: translateY(-4px);
border-color: var(--border-highlight);
background: var(--bg-surface-hover);
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.05);
}
html.dark .kpi-card:hover {
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
}
.kpi-label {
color: var(--text-secondary);
font-size: 0.875rem;
font-weight: 500;
}
.kpi-value {
font-size: 1.75rem;
font-weight: 600;
font-family: var(--font-heading);
letter-spacing: -0.02em;
}
.kpi-trend {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.8rem;
font-weight: 500;
}
.trend-up.good {
color: var(--success);
}
.trend-up.bad {
color: var(--danger);
}
.trend-down.good {
color: var(--success);
}
.trend-down.bad {
color: var(--danger);
}
.trend-neutral {
color: var(--text-muted);
}
.danger-text {
color: var(--danger);
}
.empty-cell {
color: var(--text-muted);
padding: 1.5rem !important;
text-align: center;
}
.table-link,
.table-link-wrap {
color: var(--text-primary);
overflow-wrap: anywhere;
word-break: break-word;
}
.table-link {
color: var(--primary);
text-decoration: none;
}
.table-link:hover {
text-decoration: underline;
}
/* Dashboard Grid */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.span-full {
grid-column: 1 / -1;
}
.chart-container {
padding: 1.5rem;
height: 350px;
position: relative;
width: 100%;
}
.keyword-subtabs {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1.25rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border-light);
}
.keyword-subtab {
height: 38px;
padding: 0 0.95rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-surface);
color: var(--text-secondary);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.keyword-subtab:hover,
.keyword-subtab.active {
color: var(--primary);
border-color: var(--primary);
background: var(--primary-glow);
}
.keyword-subpanel {
display: none;
}
.keyword-subpanel.active {
display: block;
}
.keyword-metric-grid,
.planner-summary-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.85rem;
margin-bottom: 1.25rem;
}
.planner-summary-grid {
gap: 0;
padding: 0.9rem 1.5rem 1rem;
margin-bottom: 0;
}
.lp-metric-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0.85rem;
margin-bottom: 1.25rem;
}
@media (max-width: 1200px) {
.lp-metric-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.lp-metric-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.lp-subtab-bar {
display: flex;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid var(--border-light);
margin-bottom: 1.25rem;
}
.lp-subtab {
height: 32px;
padding: 0 0.85rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-surface);
color: var(--text-secondary);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: 0.35rem;
}
.lp-subtab:hover {
color: var(--text-primary);
border-color: var(--border-highlight);
background: var(--bg-surface-hover);
}
.lp-subtab.active {
color: var(--primary);
border-color: var(--primary);
background: var(--primary-glow);
}
.keyword-metric,
.planner-metric {
display: grid;
gap: 0.25rem;
min-width: 0;
padding: 0.95rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-surface);
}
.planner-metric {
grid-template-columns: minmax(0, 1fr);
align-content: center;
min-height: 74px;
padding: 0.25rem 1.15rem;
border: 0;
border-right: 1px solid var(--border-light);
border-radius: 0;
background: transparent;
}
.planner-metric:last-child {
border-right: 0;
}
.keyword-metric span,
.keyword-metric small,
.planner-metric span,
.planner-metric small {
color: var(--text-muted);
font-size: 0.75rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.planner-metric small {
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.35;
}
.keyword-metric strong,
.planner-metric strong {
color: var(--text-primary);
font-size: 1.15rem;
font-weight: 700;
overflow-wrap: anywhere;
}
.keyword-action-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1.25rem;
}
.keyword-action-card {
display: grid;
gap: 0.8rem;
padding: 1rem;
border: 1px solid var(--border-light);
border-left: 4px solid var(--text-muted);
border-radius: var(--radius-sm);
background: var(--bg-surface);
}
.keyword-action-card--success {
border-left-color: var(--success);
}
.keyword-action-card--danger {
border-left-color: var(--danger);
}
.keyword-action-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.keyword-action-head h4 {
color: var(--text-primary);
font-size: 0.95rem;
}
.keyword-action-head span {
color: var(--text-muted);
font-size: 0.8rem;
font-weight: 700;
}
.keyword-action-list {
display: grid;
gap: 0.5rem;
}
.keyword-action-list p {
color: var(--text-muted);
font-size: 0.82rem;
}
.keyword-action-row {
display: grid;
gap: 0.15rem;
min-width: 0;
padding: 0.55rem 0.65rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-base);
}
.keyword-action-row strong,
.keyword-action-row span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.keyword-action-row strong {
color: var(--text-primary);
font-size: 0.82rem;
}
.keyword-action-row span {
color: var(--text-muted);
font-size: 0.75rem;
}
.source-pill {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 0.45rem;
margin-right: 0.25rem;
border: 1px solid var(--border-light);
border-radius: 999px;
background: var(--bg-base);
color: var(--text-secondary);
font-size: 0.72rem;
font-weight: 600;
}
.sankey-container {
height: 500px;
/* Taller for flow diagram */
overflow-x: auto;
}
.sankey-scroll-inner {
position: relative;
height: 100%;
min-width: 720px;
}
.sankey-scroll-inner canvas {
width: 100% !important;
height: 100% !important;
}
.sankey-mobile-paths {
display: none;
}
.sankey-path-card {
display: grid;
gap: 0.75rem;
min-width: 0;
padding: 1rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-surface);
}
.sankey-path-head {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: center;
}
.sankey-path-head span {
color: var(--text-muted);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
}
.sankey-path-head strong {
color: var(--text-primary);
font-size: 0.95rem;
white-space: nowrap;
}
.sankey-path-meter {
height: 0.4rem;
overflow: hidden;
border-radius: 999px;
background: var(--bg-base);
}
.sankey-path-meter i {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #3b82f6, #8b5cf6, #10b981);
}
.sankey-path-steps {
display: grid;
gap: 0.45rem;
}
.sankey-path-step {
display: grid;
gap: 0.2rem;
min-width: 0;
padding: 0.7rem 0.75rem;
border-left: 4px solid var(--info);
border-radius: var(--radius-sm);
background: var(--bg-base);
}
.sankey-path-step--keyword {
border-left-color: #8b5cf6;
}
.sankey-path-step--action {
border-left-color: var(--success);
}
.sankey-path-step span {
color: var(--text-muted);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
}
.sankey-path-step strong {
color: var(--text-primary);
font-size: 0.88rem;
line-height: 1.3;
overflow-wrap: anywhere;
}
.sankey-path-arrow {
color: var(--text-muted);
font-size: 1rem;
font-weight: 700;
line-height: 1;
text-align: center;
}
.sankey-path-empty {
padding: 1rem;
border: 1px dashed var(--border-highlight);
border-radius: var(--radius-sm);
color: var(--text-muted);
background: var(--bg-base);
text-align: center;
}
/* Lead Funnel */
.lead-funnel {
padding: 1.5rem;
}
.lead-funnel-title {
color: var(--text-primary);
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1.4rem;
}
.lead-funnel-visual {
display: grid;
grid-template-columns: repeat(var(--stage-count), minmax(0, 1fr));
gap: 1.1rem;
align-items: end;
}
.lead-funnel-stage {
display: grid;
grid-template-rows: 170px auto auto auto;
gap: 0.35rem;
min-width: 0;
align-items: end;
text-align: center;
}
.lead-funnel-bar-wrap {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
height: 100%;
min-width: 0;
}
.lead-funnel-bar {
width: min(100%, 180px);
min-height: 8px;
height: var(--bar-height, 100%);
border-radius: 5px 5px 0 0;
background: linear-gradient(180deg, color-mix(in srgb, var(--bar-color) 88%, white), var(--bar-color));
box-shadow: 0 10px 20px -14px var(--bar-color);
}
.lead-funnel-stage:not(:last-child) .lead-funnel-bar-wrap::after {
content: '';
position: absolute;
right: calc(-0.55rem - 1px);
top: 14%;
width: 1.1rem;
height: 72%;
background: linear-gradient(90deg, color-mix(in srgb, var(--bar-color) 24%, transparent), transparent);
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.lead-funnel-value {
color: var(--text-primary);
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.1;
}
.lead-funnel-label {
color: var(--text-secondary);
font-size: 0.9rem;
font-weight: 600;
line-height: 1.25;
overflow-wrap: anywhere;
}
.lead-funnel-rate {
color: var(--text-muted);
font-size: 0.75rem;
min-height: 1rem;
}
/* Lead Review */
.lead-review-note {
margin: 1rem 1.5rem 0;
padding: 0.8rem 0.95rem;
border: 1px solid rgba(59, 130, 246, 0.18);
border-radius: var(--radius-sm);
background: rgba(59, 130, 246, 0.06);
color: var(--text-secondary);
font-size: 0.875rem;
}
.lead-contact-cell,
.lead-source-cell,
.lead-progress-cell {
display: grid;
gap: 0.15rem;
min-width: 0;
line-height: 1.35;
}
.lead-contact-cell strong,
.lead-source-cell strong,
.lead-progress-cell strong {
color: var(--text-primary);
font-size: 0.86rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lead-contact-cell span,
.lead-source-cell span,
.lead-progress-cell span {
color: var(--text-muted);
font-size: 0.75rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.clickable-qualification-cell {
cursor: pointer;
}
.clickable-qualification-cell:hover strong {
color: var(--primary) !important;
}
.clickable-qualification-cell .lead-progress-action-link {
color: var(--primary) !important;
font-weight: 500;
text-decoration: underline;
}
.clickable-qualification-cell:hover .lead-progress-action-link {
color: var(--primary) !important;
opacity: 0.85;
}
.lead-field-value,
.lead-field-missing {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lead-field-value {
color: var(--text-primary);
font-weight: 600;
}
.lead-field-missing {
color: var(--text-muted);
}
.lead-status-chip,
.lead-upload-ready,
.lead-upload-missing {
display: inline-flex;
align-items: center;
width: fit-content;
max-width: 100%;
min-height: 24px;
padding: 0.15rem 0.55rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
line-height: 1.25;
white-space: nowrap;
}
.lead-status-chip--new {
color: var(--text-secondary);
background: var(--bg-base);
border: 1px solid var(--border-light);
}
.lead-status-chip--qualified {
color: var(--info);
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.22);
}
.lead-status-chip--converted {
color: var(--success);
background: var(--success-bg);
border: 1px solid rgba(16, 185, 129, 0.22);
}
.lead-status-chip--qualified_lost {
color: var(--warning);
background: var(--warning-bg);
border: 1px solid rgba(245, 158, 11, 0.24);
}
.lead-status-chip--useless {
color: var(--danger);
background: var(--danger-bg);
border: 1px solid rgba(239, 68, 68, 0.24);
}
.lead-upload-ready {
color: var(--success);
background: var(--success-bg);
}
.lead-upload-missing {
color: var(--warning);
background: var(--warning-bg);
}
.lead-status-select {
display: inline-block;
min-width: 116px;
height: 30px;
border-style: solid;
outline: none;
cursor: pointer;
}
.lead-status-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 2px var(--primary-glow);
}
.lead-status-select:disabled {
cursor: wait;
opacity: 0.6;
}
.lead-status-select option {
background: var(--bg-surface);
color: var(--text-primary);
}
.lead-progress-link {
width: fit-content;
margin-top: 0.25rem;
border: 1px solid rgba(59, 130, 246, 0.24);
border-radius: var(--radius-sm);
background: rgba(59, 130, 246, 0.08);
color: var(--primary);
font-size: 0.75rem;
font-weight: 700;
line-height: 1.2;
padding: 0.25rem 0.45rem;
cursor: pointer;
}
.lead-progress-link:hover {
border-color: rgba(59, 130, 246, 0.42);
background: rgba(59, 130, 246, 0.14);
}
.lead-progress-modal {
max-width: 760px;
}
.lead-progress-modal-body {
padding: 1.25rem;
overflow: auto;
}
.lead-progress-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}
.lead-progress-summary div {
display: grid;
gap: 0.2rem;
padding: 0.75rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-base);
}
.lead-progress-summary span,
.lead-progress-answer-row small {
color: var(--text-muted);
font-size: 0.72rem;
font-weight: 600;
}
.lead-progress-summary strong {
color: var(--text-primary);
font-size: 0.88rem;
overflow-wrap: anywhere;
}
.lead-progress-answer-list {
display: grid;
gap: 0.65rem;
}
.lead-progress-answer-row {
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
gap: 0.75rem;
padding: 0.85rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-surface);
}
.lead-progress-answer-row > span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--primary-glow);
color: var(--primary);
font-size: 0.78rem;
font-weight: 800;
}
.lead-progress-answer-row strong {
display: block;
color: var(--text-primary);
font-size: 0.9rem;
margin: 0.15rem 0 0.45rem;
}
.lead-progress-answer-row p {
margin: 0 0 0.25rem;
color: var(--text-secondary);
font-size: 0.86rem;
}
.lead-progress-empty {
padding: 1rem;
border: 1px dashed var(--border-light);
border-radius: var(--radius-sm);
color: var(--text-muted);
}
@media (max-width: 768px) {
.lead-progress-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ── Ads (Campaign / Ad Group) inline-status chip ─────────────────────────── */
.ads-status-chip {
display: inline-flex;
align-items: center;
width: fit-content;
max-width: 100%;
min-height: 26px;
padding: 0.15rem 0.6rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
line-height: 1.25;
white-space: nowrap;
border-width: 1px;
border-style: solid;
}
.ads-status-chip--enabled {
color: var(--success);
background: var(--success-bg);
border-color: color-mix(in srgb, var(--success) 28%, transparent);
}
.ads-status-chip--paused {
color: var(--warning);
background: var(--warning-bg);
border-color: color-mix(in srgb, var(--warning) 30%, transparent);
}
.ads-status-chip--removed {
color: var(--text-muted);
background: var(--bg-base);
border-color: var(--border-light);
}
.ads-status-select {
display: inline-block;
width: 100%;
max-width: 120px;
min-width: 100px;
height: 28px;
border-style: solid;
outline: none;
cursor: pointer;
font-weight: 700;
font-size: 0.72rem;
appearance: auto;
padding: 0 4px;
}
.ads-status-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 2px var(--primary-glow);
}
.ads-status-select:disabled {
cursor: wait;
opacity: 0.6;
}
.ads-status-select option {
background: var(--bg-surface);
color: var(--text-primary);
font-weight: 500;
}
/* Lead Journey Map */
.lead-journey-map-shell {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.7fr);
gap: 1rem;
padding: 0 1.5rem 1.5rem;
}
.lead-journey-map-main,
.lead-journey-map-side {
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background:
linear-gradient(145deg, color-mix(in srgb, var(--bg-surface) 92%, var(--primary) 8%), var(--bg-surface-hover));
min-width: 0;
overflow: hidden;
}
.lead-journey-map-title {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 0.9rem 1rem;
border-bottom: 1px solid var(--border-light);
font-weight: 700;
color: var(--text-primary);
}
.lead-journey-map-title small {
color: var(--text-muted);
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
}
.lead-journey-map-canvas {
height: 460px;
padding: 1rem;
}
.lead-journey-map-side {
display: grid;
align-content: start;
gap: 0.85rem;
padding: 0.9rem;
}
.journey-detail-block {
display: grid;
gap: 0.65rem;
}
.journey-detail-block h4 {
font-size: 0.85rem;
color: var(--text-primary);
}
.journey-outcome-list,
.journey-path-list {
display: grid;
gap: 0.5rem;
}
.journey-outcome-row {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.5rem;
align-items: center;
padding: 0.65rem 0.7rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-surface);
overflow: hidden;
}
.journey-outcome-row span,
.journey-outcome-row b {
position: relative;
z-index: 1;
}
.journey-outcome-row span {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: 0.45rem;
min-width: 0;
color: var(--text-secondary);
font-size: 0.82rem;
}
.journey-outcome-row span i {
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
flex-shrink: 0;
grid-row: 1 / span 2;
}
.journey-outcome-row span strong,
.journey-outcome-row span small {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.journey-outcome-row span strong {
color: var(--text-primary);
font-size: 0.8rem;
}
.journey-outcome-row span small {
color: var(--text-muted);
font-size: 0.68rem;
}
.journey-outcome-row b {
color: var(--text-primary);
font-size: 0.86rem;
}
.journey-outcome-row em {
position: absolute;
inset: auto auto 0 0;
height: 3px;
min-width: 8px;
background: var(--primary);
}
.journey-path-row {
display: grid;
gap: 0.2rem;
padding: 0.65rem 0.7rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-surface);
}
.journey-path-row strong {
color: var(--text-primary);
font-size: 0.82rem;
line-height: 1.35;
overflow-wrap: anywhere;
}
.journey-path-row span,
.journey-detail-empty {
color: var(--text-muted);
font-size: 0.75rem;
}
.journey-detail-empty {
display: grid;
gap: 0.25rem;
padding: 0.8rem;
border: 1px dashed var(--border-highlight);
border-radius: var(--radius-sm);
background: var(--bg-base);
}
.journey-detail-empty strong {
color: var(--text-primary);
}
.journey-detail-empty.compact {
text-align: center;
}
/* Inputs */
.styled-select {
background: var(--bg-base);
color: var(--text-primary);
border: 1px solid var(--border-light);
padding: 0.4rem 0.75rem;
border-radius: var(--radius-sm);
font-size: 0.875rem;
outline: none;
cursor: pointer;
transition: var(--transition);
}
.styled-select:focus,
.styled-select:focus-visible {
border-color: var(--primary);
box-shadow: 0 0 0 2px var(--primary-glow);
}
.keyword-planner-card {
--planner-accent: var(--primary);
--planner-accent-soft: var(--primary-glow);
--planner-surface: var(--bg-surface);
--planner-page: var(--bg-base);
--planner-text: var(--text-primary);
--planner-subtext: var(--text-secondary);
--planner-border: var(--border-light);
--planner-muted: var(--text-muted);
overflow: hidden;
background: var(--planner-surface);
color: var(--planner-text);
border-color: var(--planner-border);
}
.keyword-planner-card .card-header {
padding: 1.15rem 1.6rem;
background: var(--planner-surface);
border-bottom: 1px solid var(--planner-border);
}
.keyword-planner-card .card-header h3 {
color: var(--planner-text);
font-size: 1.15rem;
font-weight: 600;
}
.planner-explorer-surface {
padding: 2rem 2.4rem 0;
background: var(--planner-surface);
color: var(--planner-text);
}
.planner-title-row h2 {
color: var(--planner-text);
font-family: var(--font-heading);
font-size: clamp(1.45rem, 2.2vw, 1.95rem);
font-weight: 600;
line-height: 1.2;
}
.planner-mode-tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 1.7rem;
border-bottom: 1px solid var(--planner-border);
}
.planner-mode-tab {
position: relative;
min-height: 56px;
padding: 0 1rem;
border: 0;
background: transparent;
color: var(--planner-subtext);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: color 0.18s ease;
}
.planner-mode-tab::after {
content: "";
position: absolute;
right: 0;
bottom: -1px;
left: 0;
height: 3px;
background: transparent;
}
.planner-mode-tab:hover,
.planner-mode-tab.active {
color: var(--planner-text);
}
.planner-mode-tab.active::after {
background: var(--planner-accent);
}
.planner-content-grid {
display: grid;
grid-template-columns: minmax(420px, 1fr) minmax(260px, 0.42fr);
gap: 2rem;
padding: 2.25rem 0 2rem;
}
.planner-input-column {
display: grid;
gap: 1.75rem;
min-width: 0;
}
.planner-mode-panel {
display: none;
gap: 1.75rem;
}
.planner-mode-panel.active {
display: grid;
}
.planner-field {
display: grid;
gap: 0.7rem;
color: var(--planner-text);
font-size: 0.95rem;
font-weight: 500;
}
.planner-field small {
color: var(--planner-subtext);
font-size: 0.85rem;
font-weight: 400;
}
.planner-input-shell {
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
align-items: center;
min-height: 60px;
padding: 0 1rem;
border: 1px solid var(--planner-border);
border-radius: var(--radius-sm);
background: var(--planner-page);
color: var(--planner-subtext);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.planner-input-shell--textarea {
align-items: flex-start;
padding-top: 0.7rem;
}
.planner-input-shell:focus-within {
border-color: var(--planner-accent);
box-shadow: 0 0 0 2px var(--planner-accent-soft);
}
.planner-input-shell svg {
margin-top: 0.05rem;
color: var(--planner-subtext);
}
.planner-input-shell input,
.planner-input-shell textarea {
width: 100%;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
color: var(--planner-text);
font: inherit;
}
.planner-input-shell input {
height: 56px;
}
.planner-textarea {
min-height: 72px;
padding: 0.55rem 0 0.45rem;
resize: vertical;
cursor: text;
}
.planner-field--optional {
margin-top: 1.2rem;
}
.planner-targeting-row {
display: flex;
flex-wrap: wrap;
gap: 0.85rem 1.2rem;
}
.planner-targeting-row label {
display: grid;
gap: 0.35rem;
min-width: min(210px, 100%);
color: var(--planner-subtext);
font-size: 0.78rem;
font-weight: 600;
}
.planner-targeting-row select {
height: 40px;
padding: 0 2rem 0 0.75rem;
border: 1px solid var(--planner-border);
border-radius: var(--radius-sm);
background: var(--planner-page);
color: var(--planner-text);
font: inherit;
cursor: pointer;
outline: 0;
}
.planner-targeting-row select:focus {
border-color: var(--planner-accent);
box-shadow: 0 0 0 2px var(--planner-accent-soft);
}
.planner-radio-stack {
display: grid;
gap: 1rem;
margin-top: 0.3rem;
}
.planner-radio {
display: flex;
align-items: center;
gap: 0.85rem;
color: var(--planner-text);
font-size: 0.96rem;
font-weight: 500;
cursor: pointer;
}
.planner-radio input {
position: relative;
width: 24px;
height: 24px;
margin: 0;
appearance: none;
border: 2px solid var(--planner-subtext);
border-radius: 50%;
background: var(--planner-page);
cursor: pointer;
}
.planner-radio input:checked {
border-color: var(--planner-accent);
}
.planner-radio input:checked::after {
content: "";
position: absolute;
inset: 4px;
border-radius: 50%;
background: var(--planner-accent);
}
.planner-help-column {
display: flex;
align-items: center;
min-width: 0;
padding-left: 1.8rem;
border-left: 1px solid var(--planner-border);
}
.planner-help-copy {
display: none;
color: var(--planner-text);
}
.planner-help-copy.active {
display: grid;
gap: 1.2rem;
}
.planner-help-copy p {
max-width: 34ch;
color: var(--planner-text);
font-size: 0.95rem;
line-height: 1.45;
}
.planner-help-copy a {
width: fit-content;
color: var(--planner-accent);
font-weight: 500;
}
.planner-action-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.9rem;
margin-top: 0.35rem;
}
.planner-action-row .btn {
min-width: 124px;
height: 44px;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 85%, black) 100%);
box-shadow: 0 4px 10px var(--primary-glow);
}
.planner-action-row .btn:hover {
transform: translateY(-1px);
filter: brightness(1.06);
box-shadow: 0 6px 15px var(--primary-glow);
}
.planner-action-row .btn:disabled {
background: var(--planner-page);
color: var(--planner-muted);
border: 1px solid var(--planner-border);
cursor: not-allowed;
box-shadow: none;
transform: none;
filter: none;
}
.planner-validation {
color: var(--planner-subtext);
font-size: 0.82rem;
}
.keyword-planner-card .planner-summary-grid {
border-top: 1px solid var(--planner-border);
background: var(--planner-surface);
}
.keyword-planner-card .planner-metric {
border-right-color: var(--planner-border);
}
.keyword-planner-card .planner-metric span,
.keyword-planner-card .planner-metric small {
color: var(--planner-subtext);
}
.keyword-planner-card .planner-metric strong {
color: var(--planner-text);
}
.keyword-planner-badge--ok {
background: var(--success);
}
.keyword-planner-badge--failed {
background: var(--danger);
}
.keyword-planner-badge--empty {
background: var(--text-muted);
}
/* Insights Grid */
.insights-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
padding: 1.5rem;
}
.insight-item {
background: linear-gradient(145deg, var(--bg-base), var(--bg-surface-hover));
padding: 1.25rem;
border-radius: var(--radius-md);
border-left: 4px solid var(--info);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.insight-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}
.insight-item h4 {
margin-bottom: 0.5rem;
font-size: 0.95rem;
color: var(--text-primary);
}
.insight-item p {
color: var(--text-secondary);
font-size: 0.875rem;
}
/* Auction Insights */
.auction-insights-shell {
padding: 1.25rem 1.5rem 1.5rem;
border-bottom: 1px solid var(--border-light);
}
.auction-summary-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}
.auction-metric {
background: var(--bg-base);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 0.9rem;
min-width: 0;
}
.auction-metric span,
.auction-metric small {
display: block;
color: var(--text-muted);
font-size: 0.75rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.auction-metric strong {
display: block;
color: var(--text-primary);
font-size: 1.2rem;
font-weight: 700;
margin: 0.25rem 0;
overflow-wrap: anywhere;
}
.auction-visual-grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
gap: 1rem;
}
.auction-panel {
background: linear-gradient(145deg, var(--bg-surface), var(--bg-surface-hover));
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
min-width: 0;
overflow: hidden;
}
.auction-panel-wide {
grid-column: 1 / -1;
}
.auction-panel-title {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 0.9rem 1rem;
border-bottom: 1px solid var(--border-light);
color: var(--text-primary);
font-size: 0.9rem;
font-weight: 700;
}
.auction-panel-meta {
color: var(--text-muted);
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
}
.auction-chart-container {
height: 330px;
padding: 1rem;
}
.auction-line-container {
height: 310px;
padding: 1rem;
}
.auction-pressure-list {
max-height: 330px;
overflow: auto;
padding: 0.75rem;
}
.auction-pressure-row {
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 0.75rem;
margin-bottom: 0.75rem;
background: var(--bg-surface);
}
.auction-pressure-row:last-child {
margin-bottom: 0;
}
.auction-pressure-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.7rem;
}
.auction-pressure-head strong {
display: block;
color: var(--text-primary);
font-size: 0.9rem;
overflow-wrap: anywhere;
}
.auction-pressure-head span {
display: block;
color: var(--text-muted);
font-size: 0.75rem;
margin-top: 0.1rem;
}
.auction-pressure-head b {
color: var(--primary);
font-size: 0.95rem;
white-space: nowrap;
}
.auction-bars {
display: grid;
gap: 0.45rem;
}
.auction-bar-line {
display: grid;
grid-template-columns: 4.5rem minmax(80px, 1fr) 3.8rem;
align-items: center;
gap: 0.5rem;
color: var(--text-secondary);
font-size: 0.75rem;
}
.auction-bar-line em {
color: var(--text-muted);
font-style: normal;
text-align: right;
}
.auction-bar-track {
height: 0.45rem;
overflow: hidden;
border-radius: 999px;
background: var(--border-light);
}
.auction-bar-track i {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--primary), var(--warning));
}
.auction-empty {
grid-column: 1 / -1;
padding: 1rem;
border: 1px dashed var(--border-highlight);
border-radius: var(--radius-sm);
color: var(--text-secondary);
background: var(--bg-base);
}
.auction-empty h4 {
margin-bottom: 0.25rem;
color: var(--text-primary);
}
.auction-empty.compact {
text-align: center;
font-size: 0.85rem;
}
.auction-settings-shell {
padding: 1.25rem 1.5rem 1.5rem;
display: grid;
gap: 1rem;
}
/* Auction Sheet Settings Table & Badge Styling */
.settings-table {
width: 100%;
margin-top: 0.5rem;
}
.settings-table td {
vertical-align: middle;
}
.settings-badge {
display: inline-block;
padding: 0.25rem 0.6rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid transparent;
text-align: center;
}
.settings-badge.account {
background: rgba(59, 130, 246, 0.1);
color: #60a5fa;
border-color: rgba(59, 130, 246, 0.2);
}
.settings-badge.campaign {
background: rgba(168, 85, 247, 0.1);
color: #c084fc;
border-color: rgba(168, 85, 247, 0.2);
}
.settings-badge.ad-group {
background: rgba(234, 179, 8, 0.1);
color: #facc15;
border-color: rgba(234, 179, 8, 0.2);
}
.entity-details {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.entity-name {
font-weight: 500;
color: var(--text-primary);
}
.entity-id {
font-size: 0.75rem;
color: var(--text-muted);
}
.sheet-name-text {
font-weight: 500;
color: var(--success);
background: rgba(16, 185, 129, 0.08);
border: 1px solid rgba(16, 185, 129, 0.15);
padding: 0.35rem 0.75rem;
border-radius: var(--radius-sm);
display: inline-block;
font-size: 0.85rem;
}
.sheet-name-text.empty {
color: var(--text-muted);
background: rgba(255, 255, 255, 0.03);
border: 1px dashed var(--border-light);
font-style: italic;
font-weight: normal;
}
.auction-setting-input {
width: 100%;
max-width: 400px;
padding: 0.4rem 0.75rem;
min-height: 36px;
font-size: 0.875rem;
}
/* Edit Mode styling toggles */
.auction-settings-shell:not(.is-editing) .auction-setting-input {
display: none;
}
.auction-settings-shell.is-editing .sheet-name-text {
display: none;
}
.auction-settings-table-wrapper {
overflow-x: auto;
width: 100%;
}
/* Responsive settings table style to display as clean cards on mobile */
@media (max-width: 768px) {
.auction-settings-table-wrapper {
display: block !important;
overflow-x: visible !important;
}
.settings-table,
.settings-table tbody,
.settings-table tr,
.settings-table td {
display: block !important;
width: 100% !important;
}
.settings-table thead {
display: none !important;
}
.settings-table tr {
margin-bottom: 1rem !important;
background: var(--bg-surface-hover) !important;
border: 1px solid var(--border-light) !important;
border-radius: var(--radius-md) !important;
padding: 1rem !important;
transform: none !important;
box-shadow: none !important;
}
.settings-table tr:hover {
transform: none !important;
box-shadow: none !important;
}
.settings-table td {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0.5rem !important;
padding: 0.5rem 0 !important;
border-bottom: none !important;
text-align: left !important;
}
.settings-table td::before {
content: none !important;
}
.settings-table td:first-child {
padding-top: 0 !important;
}
.settings-table td:last-child {
padding-bottom: 0 !important;
}
.settings-table .auction-setting-input {
max-width: 100% !important;
width: 100% !important;
}
.settings-table .sheet-name-text {
width: 100% !important;
box-sizing: border-box !important;
text-align: left !important;
}
}
.settings-note {
padding: 0.75rem 0.9rem;
border-radius: var(--radius-sm);
font-size: 0.875rem;
border: 1px solid var(--border-light);
}
.settings-note--ok {
color: var(--success);
background: var(--success-bg);
border-color: rgba(16, 185, 129, 0.25);
}
.settings-note--warn {
color: var(--warning);
background: var(--warning-bg);
border-color: rgba(245, 158, 11, 0.25);
}
.offline-auth-shell {
padding: 1.25rem 1.5rem 1.5rem;
display: grid;
gap: 1rem;
}
.offline-auth-form {
display: grid;
grid-template-columns: minmax(260px, 1.2fr) minmax(180px, 0.9fr) minmax(220px, 1fr);
gap: 0.85rem;
align-items: end;
}
.offline-auth-form input[readonly],
.offline-auth-form input:disabled {
color: var(--text-secondary);
background: var(--bg-base);
border-color: var(--border-light);
cursor: default;
opacity: 1;
}
.password-reveal-field {
position: relative;
display: flex;
align-items: center;
}
.password-reveal-field .styled-select {
padding-right: 2.75rem;
}
.password-eye-btn {
position: absolute;
right: 0.25rem;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
}
.password-eye-btn:hover {
transform: translateY(-50%);
}
.password-eye-btn .eye-icon-hide {
display: none;
}
.password-eye-btn.is-revealed .eye-icon-show {
display: none;
}
.password-eye-btn.is-revealed .eye-icon-hide {
display: block;
}
.offline-auth-shell.is-editing .password-eye-btn {
display: none;
}
@media (max-width: 900px) {
.offline-auth-form {
grid-template-columns: 1fr;
}
}
.auction-status-list {
display: grid;
gap: 0.5rem;
margin-top: 0.9rem;
}
.auction-status-row {
display: grid;
gap: 0.15rem;
padding: 0.65rem 0.75rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-surface);
}
.auction-status-row strong {
color: var(--text-primary);
font-size: 0.85rem;
}
.auction-status-row span {
color: var(--text-secondary);
font-size: 0.8rem;
}
.auction-status-row--ok {
border-color: rgba(16, 185, 129, 0.3);
}
.auction-status-row--missing_credentials,
.auction-status-row--missing_sheet,
.auction-status-row--fetch_failed {
border-color: rgba(245, 158, 11, 0.3);
}
/* Scope Badges — indicate filter limitations on data sections */
.scope-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.7rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.02em;
white-space: nowrap;
cursor: help;
transition: background 0.2s ease, color 0.2s ease;
}
.scope-badge svg {
flex-shrink: 0;
opacity: 0.7;
}
.scope-badge--account {
background: rgba(59, 130, 246, 0.08);
color: var(--text-muted);
border: 1px solid rgba(59, 130, 246, 0.15);
}
.scope-badge--account:hover {
background: rgba(59, 130, 246, 0.14);
color: var(--text-secondary);
}
html.dark .scope-badge--account {
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.2);
}
html.dark .scope-badge--account:hover {
background: rgba(59, 130, 246, 0.18);
}
/* Data Tables */
.table-responsive {
overflow-x: auto;
}
.data-table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
.data-table th,
.data-table td {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--border-light);
font-size: 0.875rem;
}
.data-table th {
font-weight: 500;
color: var(--text-secondary);
background: var(--bg-base);
position: sticky;
top: 0;
z-index: 2;
white-space: nowrap;
}
.data-table tbody tr {
transition: var(--transition);
}
.data-table tbody tr:nth-child(even) {
background: rgba(0, 0, 0, 0.1);
}
.data-table tbody tr:hover {
background: var(--bg-surface-hover);
transform: translateX(2px);
box-shadow: inset 3px 0 0 var(--primary);
}
.data-table .num {
text-align: right;
font-family: var(--font-sans);
font-variant-numeric: tabular-nums;
}
/* Badges for tables */
.status-badge {
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
background: var(--bg-base);
}
.status-badge.enabled {
background: var(--success-bg);
color: var(--success);
}
.status-badge.paused {
background: var(--warning-bg);
color: var(--warning);
}
.status-badge.removed {
background: var(--danger-bg);
color: var(--danger);
}
.status-badge.excluded {
background: var(--danger-bg);
color: var(--danger);
}
.status-badge.added {
background: var(--success-bg);
color: var(--success);
}
.ai-label {
display: inline-block;
padding: 0.25rem 0.6rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
}
.ai-label.watch {
background: var(--bg-base);
color: var(--text-secondary);
}
.ai-label.pause,
.ai-label.negative {
background: var(--danger-bg);
color: var(--danger);
border: 1px solid rgba(239, 68, 68, 0.3);
}
.ai-label.scale,
.ai-label.promote {
background: var(--success-bg);
color: var(--success);
border: 1px solid rgba(16, 185, 129, 0.3);
}
.ai-label.waste {
background: var(--warning-bg);
color: var(--warning);
}
/* Proposals Grid */
.proposal-controls {
margin-bottom: 1.5rem;
}
.filters {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.filter-btn {
background: var(--bg-surface);
border: 1px solid var(--border-light);
color: var(--text-secondary);
padding: 0.5rem 1rem;
border-radius: 999px;
font-size: 0.85rem;
cursor: pointer;
transition: var(--transition);
}
.filter-btn:hover,
.filter-btn.active {
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
.proposals-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 1.5rem;
}
.candidate-signal-grid,
.proposal-lifecycle-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
.candidate-signal-card,
.proposal-lifecycle-card {
background: var(--bg-base);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 1rem;
min-width: 0;
}
.candidate-signal-card {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.candidate-signal-head,
.proposal-lifecycle-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.candidate-signal-title,
.proposal-lifecycle-title {
color: var(--text-primary);
font-size: 0.95rem;
font-weight: 700;
line-height: 1.35;
overflow-wrap: anywhere;
}
.candidate-signal-meta,
.proposal-lifecycle-meta {
color: var(--text-muted);
font-size: 0.78rem;
line-height: 1.45;
}
.status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
height: 24px;
padding: 0 0.55rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
white-space: nowrap;
border: 1px solid transparent;
}
.status-pill.pending,
.status-pill.medium,
.status-pill.watchlist {
color: var(--warning);
background: var(--warning-bg);
border-color: rgba(245, 158, 11, 0.22);
}
.status-pill.accepted,
.status-pill.user_marked_implemented,
.status-pill.monitoring_14,
.status-pill.monitoring_30,
.status-pill.detected_implemented,
.status-pill.high,
.status-pill.critical {
color: var(--primary);
background: var(--primary-glow);
border-color: rgba(242, 94, 54, 0.22);
}
.status-pill.completed,
.status-pill.low,
.status-pill.success_high_confidence,
.status-pill.success_low_confidence {
color: var(--success);
background: var(--success-bg);
border-color: rgba(16, 185, 129, 0.24);
}
.status-pill.failure_high_confidence,
.status-pill.failure_low_confidence {
color: var(--danger);
background: var(--danger-bg);
border-color: rgba(239, 68, 68, 0.24);
}
.status-pill.neutral_confounded,
.status-pill.neutral_mixed,
.status-pill.neutral_insufficient_data {
color: var(--warning);
background: var(--warning-bg);
border-color: rgba(245, 158, 11, 0.22);
}
.status-pill.rejected,
.status-pill.ignored,
.status-pill.expired,
.status-pill.superseded {
color: var(--text-muted);
background: var(--bg-surface);
border-color: var(--border-light);
}
.impact-explanation-card {
margin-top: 0.9rem;
padding: 0.85rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-surface);
}
.impact-explanation-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.impact-explanation-title {
color: var(--text-primary);
font-size: 0.86rem;
font-weight: 800;
}
.impact-explanation-subtitle {
color: var(--text-muted);
font-size: 0.74rem;
line-height: 1.4;
margin-top: 0.15rem;
}
.impact-explanation-summary {
color: var(--text-secondary);
font-size: 0.84rem;
line-height: 1.45;
margin-top: 0.65rem;
}
.impact-explanation-section {
margin-top: 0.75rem;
}
.impact-explanation-section ul {
margin: 0.4rem 0 0;
padding-left: 1.05rem;
color: var(--text-secondary);
font-size: 0.8rem;
line-height: 1.45;
}
.proposal-card {
display: flex;
flex-direction: column;
padding: 1.5rem;
gap: 1rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.proposal-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
}
html.dark .proposal-card:hover {
box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.3), 0 4px 8px -2px rgba(0, 0, 0, 0.15);
}
.proposal-header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.proposal-type {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--primary);
background: var(--primary-glow);
padding: 0.2rem 0.6rem;
border-radius: 4px;
font-weight: 700;
}
.proposal-badges {
display: flex;
gap: 0.5rem;
}
.prop-badge {
padding: 0.25rem 0.75rem;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
border: 1px solid transparent;
}
.badge-critical {
background: var(--danger-bg);
color: var(--danger);
border-color: rgba(239, 68, 68, 0.2);
}
.badge-high {
background: var(--danger-bg);
color: var(--danger);
border-color: rgba(239, 68, 68, 0.2);
}
.badge-medium {
background: var(--warning-bg);
color: var(--warning);
border-color: rgba(245, 158, 11, 0.2);
}
.badge-low {
background: var(--success-bg);
color: var(--success);
border-color: rgba(16, 185, 129, 0.2);
}
.proposal-summary {
font-size: 1.1rem;
line-height: 1.4;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--text-primary);
}
.proposal-evidence {
background: var(--bg-base);
padding: 1rem;
border-radius: var(--radius-md);
margin-bottom: 0.5rem;
font-size: 0.85rem;
color: var(--text-secondary);
border-left: 3px solid var(--primary);
}
.proposal-reasoning {
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.5;
flex-grow: 1;
}
/* Unified Proposal Cards */
.proposal-card-unified {
display: flex;
flex-direction: column;
border-bottom: 1px solid var(--border-light);
}
.proposal-card-unified:last-child {
border-bottom: none;
}
.proposal-card-unified.glass-card {
border-bottom: none;
margin-bottom: 1.5rem;
}
.proposal-card-body {
padding: 1.25rem 1.5rem;
flex: 1;
}
.proposal-window {
display: inline-flex;
margin-top: 0.45rem;
padding: 0.25rem 0.55rem;
border-radius: 999px;
background: var(--bg-base);
border: 1px solid var(--border-light);
color: var(--text-muted);
font-size: 0.75rem;
font-weight: 500;
}
.proposal-memory-context {
margin-top: 0.85rem;
padding: 0.85rem;
border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border-light));
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--primary) 7%, var(--bg-base));
}
.proposal-memory-head {
display: flex;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.45rem;
}
.proposal-memory-kicker {
color: var(--primary);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.proposal-memory-subtitle {
color: var(--text-muted);
font-size: 0.78rem;
}
.proposal-memory-summary {
color: var(--text-primary);
font-size: 0.86rem;
line-height: 1.45;
}
.proposal-memory-list {
display: flex;
flex-direction: column;
gap: 0.55rem;
margin-top: 0.65rem;
}
.proposal-memory-item {
padding-top: 0.55rem;
border-top: 1px solid var(--border-light);
}
.proposal-memory-meta {
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
margin-bottom: 0.35rem;
}
.proposal-memory-meta span {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 0 0.45rem;
border-radius: 999px;
background: var(--bg-surface);
border: 1px solid var(--border-light);
color: var(--text-muted);
font-size: 0.72rem;
font-weight: 600;
}
.proposal-memory-content {
color: var(--text-primary);
font-size: 0.86rem;
line-height: 1.45;
}
.proposal-memory-reason {
color: var(--text-secondary);
font-size: 0.82rem;
line-height: 1.45;
margin-top: 0.3rem;
}
.proposal-memory-foot {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
color: var(--text-muted);
font-size: 0.75rem;
margin-top: 0.35rem;
}
.proposal-memory-caveats {
margin-top: 0.65rem;
}
.proposal-memory-caveats ul {
margin: 0.4rem 0 0;
padding-left: 1.1rem;
color: var(--text-secondary);
font-size: 0.82rem;
line-height: 1.45;
}
.proposal-feedback-box {
margin-top: 1.05rem;
padding: 1rem;
border: 1px solid color-mix(in srgb, var(--border-light) 78%, var(--primary));
border-radius: var(--radius-sm);
background: linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 92%, var(--primary)) 0%, var(--bg-surface) 100%);
}
.proposal-feedback-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.85rem;
}
.proposal-feedback-eyebrow {
color: var(--primary);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.06em;
line-height: 1;
text-transform: uppercase;
margin-bottom: 0.28rem;
}
.proposal-feedback-title {
color: var(--text-primary);
font-size: 0.94rem;
font-weight: 800;
line-height: 1.25;
}
.proposal-feedback-subtitle {
color: var(--text-muted);
font-size: 0.78rem;
line-height: 1.4;
margin-top: 0.2rem;
max-width: 620px;
}
.proposal-feedback-status {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 24px;
padding: 0 0.55rem;
border-radius: 999px;
border: 1px solid var(--border-light);
color: var(--text-muted);
background: var(--bg-base);
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
white-space: nowrap;
}
.proposal-feedback-status.raw,
.proposal-feedback-status.reviewed {
color: var(--primary);
background: var(--primary-glow);
border-color: rgba(242, 94, 54, 0.24);
}
.proposal-feedback-status.converted_to_memory {
color: var(--success);
background: var(--success-bg);
border-color: rgba(16, 185, 129, 0.24);
}
.proposal-feedback-status.ignored {
color: var(--text-muted);
background: var(--bg-base);
}
.proposal-feedback-list {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin-bottom: 0.85rem;
}
.proposal-feedback-item {
padding: 0.75rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-base);
box-shadow: 0 8px 18px -16px rgba(0, 0, 0, 0.35);
}
.proposal-feedback-meta {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-bottom: 0.4rem;
}
.proposal-feedback-meta span {
display: inline-flex;
align-items: center;
min-height: 21px;
padding: 0 0.45rem;
border-radius: 999px;
background: var(--bg-surface);
border: 1px solid var(--border-light);
color: var(--text-muted);
font-size: 0.7rem;
font-weight: 600;
}
.proposal-feedback-comment {
color: var(--text-primary);
font-size: 0.86rem;
line-height: 1.45;
overflow-wrap: anywhere;
}
.proposal-feedback-note {
color: var(--text-muted);
font-size: 0.78rem;
line-height: 1.4;
margin-top: 0.35rem;
}
.proposal-feedback-form {
display: grid;
grid-template-columns: minmax(132px, 180px) minmax(0, 1fr) auto;
gap: 0.65rem;
align-items: end;
padding-top: 0.85rem;
border-top: 1px solid var(--border-light);
}
.proposal-feedback-field {
display: flex;
flex-direction: column;
gap: 0.35rem;
min-width: 0;
}
.proposal-feedback-field span {
color: var(--text-muted);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.proposal-feedback-kind {
grid-column: 1;
}
.proposal-feedback-form .proposal-feedback-field:not(.proposal-feedback-kind) {
grid-column: 1 / -1;
}
.proposal-feedback-type,
.proposal-feedback-text {
width: 100%;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-base);
color: var(--text-primary);
font: inherit;
}
.proposal-feedback-type {
height: 40px;
padding: 0 0.65rem;
font-size: 0.82rem;
}
.proposal-feedback-text {
min-height: 40px;
resize: vertical;
padding: 0.55rem 0.65rem;
font-size: 0.82rem;
line-height: 1.4;
}
.proposal-feedback-type:focus,
.proposal-feedback-text:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px var(--primary-glow);
}
.proposal-feedback-submit {
align-self: end;
justify-self: end;
grid-column: 1 / -1;
min-width: 120px;
height: 40px;
background: var(--bg-base);
}
.proposal-option-card {
background: var(--bg-base);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 1rem;
}
.proposal-option-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 0.55rem;
}
.proposal-option-type {
color: var(--text-primary);
font-size: 0.95rem;
font-weight: 800;
letter-spacing: 0;
overflow-wrap: anywhere;
}
.proposal-option-hypothesis {
color: var(--text-primary);
font-size: 0.92rem;
line-height: 1.45;
margin-top: 0.35rem;
}
.proposal-option-prob {
color: var(--primary);
background: var(--primary-glow);
border-radius: 999px;
padding: 0.2rem 0.45rem;
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
}
.proposal-option-recommendation {
color: var(--text-secondary);
font-size: 0.86rem;
line-height: 1.45;
margin-bottom: 0.9rem;
}
.proposal-option-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.proposal-option-label {
color: var(--text-muted);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.proposal-option-label.success {
color: var(--success);
}
.proposal-option-label.warning {
color: var(--warning);
}
.proposal-manual-steps {
margin-top: 0.9rem;
padding-top: 0.9rem;
border-top: 1px solid var(--border-light);
}
.proposal-expected {
color: var(--primary);
font-size: 0.85rem;
margin-top: 0.9rem;
}
.proposal-option-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 1rem;
}
.proposal-actions-bar {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem 1.25rem;
flex-wrap: wrap;
}
.proposal-actions-secondary {
border-top: 1px solid var(--border-light);
justify-content: flex-end;
}
.prop-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0 1rem;
height: 36px;
font-size: 0.8rem;
font-weight: 600;
border-radius: var(--radius-sm);
border: 1px solid var(--border-light);
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
background: transparent;
color: var(--text-secondary);
min-width: 96px;
}
.prop-action-btn:hover {
transform: translateY(-1px);
}
.prop-action-accept {
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
.prop-action-accept:hover {
background: #e54e20;
box-shadow: 0 4px 12px rgba(242, 94, 54, 0.3);
}
.prop-action-implemented {
background: rgba(16, 185, 129, 0.1);
color: var(--success);
border-color: rgba(16, 185, 129, 0.25);
}
.prop-action-implemented:hover {
background: rgba(16, 185, 129, 0.2);
border-color: var(--success);
}
.prop-action-reject:hover {
background: var(--danger-bg);
color: var(--danger);
border-color: var(--danger);
}
.prop-action-ignore:hover {
background: var(--bg-surface-hover);
color: var(--text-primary);
}
.proposal-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
border-top: 1px solid var(--border-light);
padding-top: 1.25rem;
margin-top: auto;
}
.btn-action {
flex: 1;
padding: 0.6rem 0.5rem;
font-size: 0.85rem;
font-weight: 600;
border-radius: var(--radius-md);
border: none;
cursor: pointer;
transition: var(--transition);
min-width: 80px;
}
.btn-accept {
background: var(--success);
color: white;
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}
.btn-accept:hover {
background: #059669;
/* darker emerald */
transform: translateY(-1px);
}
.btn-reject {
background: transparent;
border: 1px solid var(--border-light);
color: var(--text-secondary);
}
.btn-reject:hover {
background: var(--danger-bg);
color: var(--danger);
border-color: var(--danger);
transform: translateY(-1px);
}
.btn-watch {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border-light);
}
.btn-watch:hover {
background: var(--bg-surface-hover);
color: var(--text-primary);
}
/* Toast */
.toast {
position: fixed;
bottom: 2rem;
right: 2rem;
background: var(--primary);
color: white;
padding: 0.75rem 1.5rem;
border-radius: var(--radius-md);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
font-weight: 500;
transform: translateY(100px);
opacity: 0;
transition: var(--transition);
z-index: 100;
}
.toast.show {
transform: translateY(0);
opacity: 1;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--border-highlight);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
/* Responsive Table -> Cards */
@media (max-width: 768px) {
.data-table,
.data-table tbody,
.data-table tr,
.data-table td {
display: block;
width: 100%;
}
.data-table thead {
display: none;
}
.data-table tr {
margin-bottom: 1rem;
background: var(--bg-surface-hover);
border: 1px solid var(--border-highlight);
border-radius: var(--radius-md);
padding: 0.5rem;
}
.data-table td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
text-align: right;
}
.data-table td:last-child {
border-bottom: none;
}
.data-table td::before {
content: attr(data-label);
font-weight: 500;
color: var(--text-secondary);
text-align: left;
margin-right: 1rem;
}
.data-table .num {
text-align: right;
}
}
/* Responsive Mobile Layout */
.mobile-nav-toggle {
display: none;
background: transparent;
border: none;
color: var(--text-primary);
font-size: 1.5rem;
cursor: pointer;
padding: 0.5rem;
}
@media (max-width: 480px) {
.dashboard-grid {
grid-template-columns: 1fr;
}
}
/* DateRangePicker Dark Mode Overrides */
.daterangepicker {
background-color: var(--bg-surface) !important;
border: 1px solid var(--border-highlight) !important;
color: var(--text-primary) !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}
.daterangepicker:before,
.daterangepicker:after {
display: none !important;
/* Hide the top arrows which are hard to theme */
}
.daterangepicker .calendar-table {
background-color: var(--bg-surface) !important;
border: none !important;
}
.daterangepicker .calendar-table td,
.daterangepicker .calendar-table th {
color: var(--text-primary) !important;
border-radius: 4px;
}
.daterangepicker .calendar-table td.off,
.daterangepicker .calendar-table td.off.in-range,
.daterangepicker .calendar-table td.off.start-date,
.daterangepicker .calendar-table td.off.end-date {
background-color: transparent !important;
color: var(--text-muted) !important;
}
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
background-color: var(--bg-surface-hover) !important;
}
.daterangepicker td.in-range {
background-color: var(--primary-glow) !important;
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
background-color: var(--primary) !important;
color: white !important;
}
.daterangepicker .ranges li {
color: var(--text-secondary) !important;
background-color: transparent !important;
transition: var(--transition);
text-align: left !important;
padding: 10px 16px !important;
font-size: 15px !important;
border-radius: 6px !important;
margin: 4px 8px !important;
}
.daterangepicker .ranges li:hover {
background-color: var(--bg-surface-hover) !important;
color: var(--text-primary) !important;
}
.daterangepicker .ranges li.active {
background-color: var(--primary) !important;
color: white !important;
}
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
background-color: var(--bg-base) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-light) !important;
padding: 2px 4px;
border-radius: 4px;
}
.daterangepicker.show-ranges.ltr .drp-calendar.left {
border-left: 1px solid var(--border-light) !important;
}
.daterangepicker .drp-buttons {
border-top: 1px solid var(--border-light) !important;
background-color: var(--bg-surface) !important;
}
.daterangepicker .cancelBtn {
background-color: var(--bg-surface-hover) !important;
border: 1px solid var(--border-light) !important;
color: var(--text-primary) !important;
}
.daterangepicker .applyBtn {
background-color: var(--primary) !important;
border: none !important;
color: white !important;
}
.attribution-subtabs {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1.25rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border-light);
}
.attribution-subtab {
height: 38px;
padding: 0 0.95rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-surface);
color: var(--text-secondary);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: 0.5rem;
}
.attribution-subtab:hover,
.attribution-subtab.active {
color: var(--primary);
border-color: var(--primary);
background: var(--primary-glow);
}
.attribution-subtab .badge {
margin-left: 0.25rem;
font-size: 0.7rem;
padding: 0.1rem 0.4rem;
}
.attribution-subpanel {
display: none;
}
.attribution-subpanel.active {
display: block;
}
.rank-subtabs {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1.25rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border-light);
}
.rank-subtab {
height: 38px;
padding: 0 0.95rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-surface);
color: var(--text-secondary);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: 0.5rem;
}
.rank-subtab:hover,
.rank-subtab.active {
color: var(--primary);
border-color: var(--primary);
background: var(--primary-glow);
}
.rank-subpanel {
display: none;
}
.rank-subpanel.active {
display: block;
}
/* Technical Details Accordion */
.tech-details-accordion {
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
background: var(--bg-surface);
margin-top: 1.5rem;
overflow: hidden;
transition: var(--transition);
}
.tech-details-accordion[open] {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.tech-details-summary {
padding: 1rem 1.25rem;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
user-select: none;
list-style: none;
/* Hide default arrow */
display: flex;
align-items: center;
justify-content: space-between;
transition: background 0.2s ease;
}
.tech-details-summary::-webkit-details-marker {
display: none;
/* Hide default chrome/safari arrow */
}
.tech-details-summary:hover {
background: var(--bg-surface-hover);
color: var(--text-primary);
}
.tech-details-summary::after {
content: "▼";
font-size: 0.75rem;
transition: transform 0.2s ease;
color: var(--text-muted);
}
.tech-details-accordion[open] .tech-details-summary::after {
transform: rotate(-180deg);
}
.tech-details-content {
padding: 1.25rem;
border-top: 1px solid var(--border-light);
display: flex;
flex-direction: column;
gap: 1.5rem;
}
@media (max-width: 1024px) {
.keyword-metric-grid,
.planner-summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.keyword-action-grid {
grid-template-columns: 1fr;
}
.top-header {
grid-template-columns: 1fr;
align-items: flex-start;
}
.header-actions {
width: 100%;
margin-left: 0;
justify-content: flex-start;
flex-wrap: wrap;
}
.global-filters {
flex-wrap: wrap;
}
.dashboard-grid {
grid-template-columns: 1fr;
}
.auction-summary-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.auction-visual-grid {
grid-template-columns: 1fr;
}
.planner-content-grid {
grid-template-columns: 1fr;
}
.planner-help-column {
align-items: flex-start;
padding-top: 1.4rem;
padding-left: 0;
border-top: 1px solid var(--planner-border);
border-left: 0;
}
}
@media (min-width: 769px) and (max-width: 1400px) {
.top-header {
grid-template-columns: 1fr;
align-items: flex-start;
}
.header-actions {
width: 100%;
margin-left: 0;
justify-content: flex-start;
flex-wrap: wrap;
}
.global-filters {
flex: 1 1 440px;
}
.filter-group {
flex: 1 1 210px;
}
}
@media (max-width: 768px) {
.app-container {
flex-direction: column;
overflow: auto;
}
.planner-textarea {
min-height: 88px;
}
.planner-explorer-surface {
padding: 1.35rem 1.15rem 0;
}
.planner-title-row h2 {
font-size: 1.45rem;
}
.planner-mode-tabs {
grid-template-columns: 1fr;
margin-top: 1.1rem;
}
.planner-mode-tab {
min-height: 48px;
text-align: left;
}
.planner-content-grid {
gap: 1.2rem;
padding: 1.35rem 0 1.5rem;
}
.planner-input-shell {
min-height: 56px;
}
.planner-targeting-row label {
width: 100%;
}
.planner-action-row .btn {
width: 100%;
}
.keyword-metric-grid,
.keyword-action-grid {
grid-template-columns: 1fr;
}
.planner-summary-grid {
grid-template-columns: 1fr;
gap: 0;
padding: 0.75rem 1rem 1rem;
}
.planner-metric {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"label value"
"detail value";
align-items: center;
min-height: 0;
padding: 0.75rem 0;
border-right: 0;
border-bottom: 1px solid var(--border-light);
}
.planner-metric:last-child {
border-bottom: 0;
}
.planner-metric span {
grid-area: label;
}
.planner-metric strong {
grid-area: value;
font-size: 1.05rem;
text-align: right;
white-space: nowrap;
}
.planner-metric small {
grid-area: detail;
padding-right: 0.75rem;
}
.keyword-subtabs {
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 0.6rem;
}
.keyword-subtab {
white-space: nowrap;
}
.sidebar {
position: fixed;
left: -100%;
top: 0;
bottom: 0;
width: 280px;
z-index: 1000;
transition: left 0.3s ease;
border-right: 1px solid var(--border-light);
box-shadow: 4px 0 15px rgba(0, 0, 0, 0.5);
}
.sidebar.open {
left: 0;
}
.logo {
margin-bottom: 0.5rem;
}
.mobile-nav-toggle {
display: block;
margin-right: 1rem;
}
.nav-menu {
display: flex;
}
.sidebar-bottom {
display: block;
}
.main-content {
padding: 1rem;
overflow-y: visible;
}
.top-header {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.75rem;
padding: 1rem;
position: relative;
}
.mobile-nav-toggle {
grid-column: 1;
grid-row: 1;
margin-right: 0;
}
.header-title {
grid-column: 1 / -1;
grid-row: 2;
min-width: 0;
margin-right: 0;
}
.header-title h1 {
margin-bottom: 0;
}
.header-actions {
display: contents;
width: auto;
margin-left: 0 !important;
}
.theme-switcher {
grid-column: 3;
grid-row: 1;
justify-self: end;
position: static;
margin-left: 0;
z-index: auto;
}
.global-filters {
grid-column: 1 / -1;
grid-row: 3;
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.5rem;
justify-content: stretch;
margin-right: 0;
margin-bottom: 0;
}
.filter-group {
min-width: 0;
width: 100%;
}
.filter-group .header-select {
min-width: 0;
width: 100%;
}
.date-range-container {
width: 100%;
}
#dateRangePicker {
grid-column: 1 / -1;
grid-row: 4;
width: 100% !important;
min-width: 0;
justify-content: flex-start;
}
.refresh-header-btn {
grid-column: 3;
grid-row: 2;
justify-self: end;
flex-shrink: 0;
}
/* Compact modal-style range picker for touch screens. */
body.date-picker-open {
overflow: hidden;
}
body.date-picker-open::before {
content: '';
position: fixed;
inset: 0;
z-index: 1090;
background: rgba(2, 6, 23, 0.62);
backdrop-filter: blur(3px);
}
.daterangepicker {
position: fixed !important;
inset: auto 0 0 !important;
z-index: 1100 !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
width: 100% !important;
max-height: calc(100dvh - env(safe-area-inset-top) - 0.75rem);
overflow-y: auto !important;
padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
border-radius: 20px 20px 0 0 !important;
box-shadow: 0 -18px 50px rgba(2, 6, 23, 0.45) !important;
}
.daterangepicker.mobile-date-picker-open {
display: grid !important;
}
.daterangepicker .ranges {
grid-column: 1 / -1;
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 0.6rem !important;
overflow: hidden;
}
.daterangepicker .ranges ul {
display: flex;
gap: 0.45rem;
width: 100% !important;
max-width: 100% !important;
overflow-x: auto;
margin: 0 !important;
padding: 0.1rem 0 0.55rem !important;
scrollbar-width: thin;
scroll-snap-type: x proximity;
}
.daterangepicker .ranges li {
flex: 0 0 auto;
margin: 0 !important;
padding: 0.55rem 0.8rem !important;
border: 1px solid var(--border-light);
white-space: nowrap;
scroll-snap-align: start;
}
.daterangepicker .drp-calendar {
float: none !important;
width: 100% !important;
max-width: none !important;
padding: 0.65rem !important;
}
.daterangepicker .calendar-table table {
width: 100% !important;
table-layout: fixed;
border-collapse: separate;
border-spacing: 2px;
}
.daterangepicker .calendar-table td,
.daterangepicker .calendar-table th {
width: auto !important;
min-width: 0 !important;
height: 34px !important;
line-height: 34px !important;
}
.daterangepicker .drp-calendar.left {
grid-column: 1;
border-left: none !important;
border-right: 1px solid var(--border-light) !important;
border-bottom: none !important;
margin: 0 !important;
}
.daterangepicker .drp-calendar.right {
grid-column: 2;
border-top: none !important;
}
.daterangepicker .drp-buttons {
grid-column: 1 / -1;
float: none !important;
width: 100% !important;
text-align: right !important;
margin-top: 0.5rem;
padding: 0.75rem 0.25rem 0 !important;
}
.daterangepicker .drp-selected {
display: inline-block;
margin: 0.25rem 0.5rem 0.5rem 0;
}
.chart-container {
height: 280px;
}
.sankey-container {
display: none;
}
.sankey-legend {
display: none !important;
}
.sankey-mobile-paths {
display: grid;
gap: 0.75rem;
padding: 1rem;
border-top: 1px solid var(--border-light);
}
.lead-funnel {
padding: 1rem;
}
.lead-funnel-title {
font-size: 0.95rem;
line-height: 1.35;
margin-bottom: 0.85rem;
}
.lead-funnel-visual {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.lead-funnel-stage {
grid-template-columns: minmax(3.25rem, auto) minmax(0, 1fr) auto;
grid-template-rows: auto 0.55rem;
grid-template-areas:
"value label rate"
"bar bar bar";
align-items: center;
gap: 0.55rem 0.75rem;
padding: 0.8rem 0.85rem;
border: 1px solid var(--border-light);
border-left: 4px solid var(--bar-color);
border-radius: var(--radius-sm);
background: var(--bg-surface-hover);
text-align: left;
}
.lead-funnel-stage:not(:last-child) .lead-funnel-bar-wrap::after {
display: none;
}
.lead-funnel-bar-wrap {
grid-area: bar;
height: 0.55rem;
justify-content: flex-start;
border-radius: 999px;
background: var(--bg-base);
overflow: hidden;
}
.lead-funnel-bar {
width: var(--bar-height, 100%);
min-width: 0.55rem;
min-height: 0;
height: 100%;
border-radius: inherit;
box-shadow: none;
}
.lead-funnel-value {
grid-area: value;
font-size: 1.2rem;
}
.lead-funnel-label {
grid-area: label;
font-size: 0.9rem;
}
.lead-funnel-rate {
grid-area: rate;
min-height: 0;
text-align: right;
white-space: nowrap;
}
.kpi-value {
font-size: 1.5rem;
}
}
/* AG Grid Custom Theme Overrides */
.ag-theme-alpine {
--ag-background-color: var(--bg-surface);
--ag-foreground-color: var(--text-primary);
--ag-header-background-color: var(--bg-base);
--ag-header-foreground-color: var(--text-secondary);
--ag-border-color: var(--border-light);
--ag-row-border-color: var(--border-light);
--ag-odd-row-background-color: var(--bg-base);
--ag-row-hover-color: var(--bg-surface-hover);
--ag-font-family: var(--font-sans);
--ag-font-size: 0.875rem;
--ag-borders: solid 1px;
--ag-border-radius: var(--radius-md);
--ag-wrapper-border-radius: var(--radius-md);
--ag-header-column-separator-display: none;
}
html.dark .ag-theme-alpine {
--ag-odd-row-background-color: rgba(0, 0, 0, 0.1);
}
.ag-theme-alpine .ag-root-wrapper {
border: 1px solid var(--border-light) !important;
border-radius: var(--radius-md) !important;
overflow: hidden;
}
.ag-theme-alpine .ag-header {
border-bottom: 1px solid var(--border-light) !important;
}
/* Sidebar Pin & Collapse (Zensapp Inspired) */
.sidebar {
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.logo {
position: relative;
white-space: nowrap;
overflow: hidden;
}
.logo-icon {
height: 100px;
width: auto;
object-fit: contain;
transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pin-btn {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: 6px;
border-radius: var(--radius-sm);
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
}
.pin-btn:hover {
background: var(--bg-surface-hover);
color: var(--text-primary);
}
.pin-btn.pinned {
color: var(--primary);
}
.nav-item {
transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), justify-content 0.3s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
overflow: hidden;
}
.nav-item span:not(.badge) {
display: inline-block;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
max-width: 150px;
opacity: 1;
transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), margin 0.3s ease;
}
.sidebar-bottom {
transition: padding 0.3s ease, border-color 0.3s ease;
opacity: 1;
overflow: hidden;
}
.meta-info {
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
max-height: 120px;
}
/* Collapsed Overrides */
.sidebar.collapsed {
width: 72px;
}
.sidebar.collapsed .logo {
padding: 0 0.5rem 1rem;
justify-content: center;
gap: 0;
}
.sidebar.collapsed .logo-icon {
height: 60px;
}
.sidebar.collapsed .pin-btn {
display: none;
}
.sidebar.collapsed .nav-item {
justify-content: center;
padding: 0.75rem 0;
gap: 0;
}
.sidebar.collapsed .nav-item span:not(.badge) {
max-width: 0;
opacity: 0;
margin: 0;
}
.sidebar.collapsed .sidebar-bottom {
padding: 0.75rem 0.75rem 1rem;
border-top-color: var(--border-light);
gap: 0;
pointer-events: auto;
}
.sidebar.collapsed .meta-info {
max-height: 0;
opacity: 0;
pointer-events: none;
}
.sidebar.collapsed .logout-btn {
width: 46px;
height: 46px;
min-height: 46px;
padding: 0;
justify-content: center;
border-radius: 14px;
}
.sidebar.collapsed .logout-btn span {
width: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
}
.sidebar.collapsed .logout-btn svg {
width: 18px;
height: 18px;
}
.sidebar.collapsed .proposal-badge-container {
justify-content: center;
width: auto !important;
gap: 0;
}
.sidebar.collapsed .proposal-badge-container span:not(.badge) {
max-width: 0;
opacity: 0;
}
.sidebar.collapsed .proposal-badge-container .badge {
position: absolute;
top: -4px;
right: -6px;
margin-left: 0;
padding: 0.1rem 0.35rem;
font-size: 0.65rem;
line-height: 1;
min-width: 16px;
height: 16px;
border-radius: 99px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 2px var(--bg-surface);
}
@media (max-width: 768px) {
.sidebar.collapsed {
width: 280px;
}
.sidebar.collapsed .logo {
padding: 0 1.5rem 1.5rem;
justify-content: center;
gap: 0.75rem;
}
.sidebar.collapsed .logo-icon {
height: 100px;
}
.sidebar.collapsed .pin-btn {
display: flex;
}
.sidebar.collapsed .nav-item {
justify-content: flex-start;
padding: 0.75rem 1rem;
gap: 0.75rem;
}
.sidebar.collapsed .nav-item span:not(.badge) {
max-width: 150px;
opacity: 1;
margin: 0;
}
.sidebar.collapsed .proposal-badge-container {
justify-content: flex-start;
width: 100% !important;
gap: 0.75rem;
}
.sidebar.collapsed .proposal-badge-container span:not(.badge) {
max-width: 150px;
opacity: 1;
}
.sidebar.collapsed .proposal-badge-container .badge {
position: static;
margin-left: auto;
min-width: auto;
height: auto;
padding: 0.15rem 0.5rem;
font-size: 0.75rem;
box-shadow: none;
}
.sidebar.collapsed .sidebar-bottom {
padding: 1.25rem 1.25rem 1.35rem;
gap: 1rem;
}
.sidebar.collapsed .meta-info {
max-height: 120px;
opacity: 1;
pointer-events: auto;
}
.sidebar.collapsed .logout-btn {
width: 100%;
height: auto;
min-height: 42px;
padding: 0 0.9rem;
justify-content: flex-start;
border-radius: var(--radius-md);
}
.sidebar.collapsed .logout-btn span {
width: auto;
max-width: 160px;
opacity: 1;
overflow: visible;
}
}
/* Header Refresh Button */
.refresh-header-btn {
order: 3;
background: var(--bg-surface);
border: 1px solid var(--border-light);
color: var(--text-secondary);
width: 38px;
height: 38px;
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.refresh-header-btn:hover {
background: var(--bg-surface-hover);
color: var(--text-primary);
border-color: var(--border-highlight);
}
.refresh-header-btn:active .refresh-icon {
transform: rotate(180deg);
}
.page-reload-btn {
display: none;
}
.refresh-icon {
transition: transform 0.4s ease;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
.spin {
animation: spin 1s linear infinite;
}
/* Mobile Data Cards */
.mobile-card-container {
display: none;
}
.mobile-card-controls {
display: none;
margin-bottom: 1rem;
gap: 0.5rem;
align-items: center;
}
.mobile-card {
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 1.5rem;
margin-bottom: 0;
box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.08), 0 2px 6px -2px rgba(0, 0, 0, 0.04);
position: relative;
overflow: hidden;
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
animation: fadeUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
min-width: 0;
}
html.dark .mobile-card {
background: linear-gradient(145deg, var(--bg-surface), rgba(255, 255, 255, 0.02));
border-color: rgba(255, 255, 255, 0.05);
box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.2), 0 4px 8px -4px rgba(0, 0, 0, 0.1);
}
.mobile-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.08), 0 4px 12px -4px rgba(0, 0, 0, 0.04);
}
html.dark .mobile-card:hover {
box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.3), 0 4px 12px -4px rgba(0, 0, 0, 0.15);
}
.mobile-card-header {
margin-bottom: 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
min-width: 0;
}
.mobile-card-title {
font-family: var(--font-sans);
font-weight: 600;
font-size: 1rem;
color: var(--text-primary);
line-height: 1.2;
letter-spacing: -0.01em;
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.mobile-card-body {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem 1rem;
}
.mobile-card-stat {
display: flex;
flex-direction: column;
min-width: 0;
}
.mobile-card-label {
font-size: 0.75rem;
color: var(--text-muted);
margin-bottom: 0.2rem;
text-transform: uppercase;
letter-spacing: 0.02em;
font-weight: 500;
}
.mobile-card-value {
font-weight: 600;
color: var(--text-primary);
font-size: 0.95rem;
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.mobile-card-value .lead-field-value,
.mobile-card-value .lead-field-missing,
.mobile-card-value .lead-contact-cell strong,
.mobile-card-value .lead-contact-cell span,
.mobile-card-value .lead-source-cell strong,
.mobile-card-value .lead-source-cell span {
max-width: 100%;
overflow: visible;
text-overflow: clip;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.table-responsive {
display: none !important;
}
.mobile-card-container {
display: block;
margin-top: 1rem;
}
.mobile-card-list {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.glass-card:has(.mobile-card-container) {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
.glass-card:has(.mobile-card-container)>.card-header {
padding: 0 0 1rem 0;
border-bottom: none;
background: transparent;
}
.glass-card:has(.mobile-card-container)>.card-header h3 {
font-size: 1.25rem;
font-weight: 600;
}
.card-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.grid-controls {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
width: 100%;
background: transparent;
padding: 0;
border: none;
box-shadow: none;
}
html.dark .grid-controls {
background: transparent;
border: none;
}
.grid-controls .table-search {
width: 100%;
order: 1;
border-radius: 12px;
margin: 0 !important;
background: var(--bg-surface);
border: 1px solid var(--border-light);
padding: 0.6rem 1.2rem;
height: 44px;
box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.03);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.grid-controls .table-search:focus {
box-shadow: 0 0 0 2px var(--primary-glow);
border-color: var(--primary);
outline: none;
}
.lead-review-controls .lead-review-export-btn {
order: 2;
flex: 1 1 100%;
height: 44px;
min-width: 0;
border-radius: 12px;
background: var(--bg-surface);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
justify-content: space-between;
}
.lead-review-controls .mobile-sort-wrapper {
order: 3;
flex: 1 1 100%;
}
.mobile-sort-wrapper {
flex: 1;
order: 2;
display: flex;
gap: 0.5rem;
border-top: none;
padding-top: 0;
margin-top: 0;
}
.mobile-sort-select {
flex: 1;
border-radius: 12px;
background: var(--bg-surface);
border: 1px solid var(--border-light);
height: 44px;
padding: 0 1rem;
margin: 0 !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.mobile-sort-dir {
border-radius: 12px !important;
padding: 0 1rem !important;
margin: 0 !important;
font-weight: 500;
height: 44px;
background: var(--bg-surface) !important;
border: 1px solid var(--border-light) !important;
color: var(--text-primary) !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}
.grid-controls button.btn-sm[onclick^="saveView"] {
order: 3;
}
.grid-controls button.btn-sm[onclick^="loadView"] {
order: 4;
}
.grid-controls button.btn-sm[onclick^="saveView"],
.grid-controls button.btn-sm[onclick^="loadView"] {
font-size: 0 !important;
width: 44px;
height: 44px;
border-radius: 12px;
padding: 0;
margin: 0 !important;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-surface);
border: 1px solid var(--border-light);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.grid-controls button.btn-sm[onclick^="saveView"]::after,
.grid-controls button.btn-sm[onclick^="loadView"]::after {
content: '';
display: block;
width: 18px;
height: 18px;
background-color: var(--text-primary);
}
.grid-controls button.btn-sm[onclick^="saveView"]::after {
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center;
mask: url('data:image/svg+xml;utf8,') no-repeat center;
}
.grid-controls button.btn-sm[onclick^="loadView"]::after {
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center;
mask: url('data:image/svg+xml;utf8,') no-repeat center;
}
.proposal-option-grid {
grid-template-columns: 1fr;
}
.proposal-option-head {
flex-direction: column;
gap: 0.5rem;
}
.proposal-option-actions,
.proposal-actions-secondary {
justify-content: stretch;
}
.proposal-option-actions .prop-action-btn,
.proposal-actions-secondary .prop-action-btn {
flex: 1 1 140px;
}
.proposal-feedback-head {
flex-direction: column;
gap: 0.5rem;
}
.proposal-feedback-form {
grid-template-columns: 1fr;
align-items: stretch;
}
.proposal-feedback-submit {
width: 100%;
}
.lead-journey-map-shell {
grid-template-columns: 1fr;
padding: 0 1rem 1rem;
}
.lead-journey-map-title {
align-items: flex-start;
flex-direction: column;
gap: 0.25rem;
}
.lead-journey-map-title small {
white-space: normal;
}
.lead-journey-map-canvas {
height: 380px;
padding: 0.75rem;
}
.auction-insights-shell {
padding: 1rem 0;
border-bottom: none;
}
.auction-setting-row {
grid-template-columns: 1fr;
}
.auction-summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.auction-panel-title {
align-items: flex-start;
flex-direction: column;
gap: 0.25rem;
}
.auction-panel-meta {
white-space: normal;
}
.auction-chart-container,
.auction-line-container,
.auction-pressure-list {
height: 300px;
max-height: 300px;
}
.auction-bar-line {
grid-template-columns: 3.8rem minmax(70px, 1fr) 3.4rem;
}
.attribution-subtabs {
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 0.6rem;
}
.attribution-subtab {
white-space: nowrap;
}
.rank-subtabs {
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 0.6rem;
}
.rank-subtab {
white-space: nowrap;
}
}
/* Modal Overlay */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(15, 23, 42, 0.65);
/* Dark background with glassmorphism blur */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.modal-overlay.show {
opacity: 1;
pointer-events: auto;
}
.modal-content-card {
width: 90%;
max-width: 1100px;
max-height: 85vh;
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
overflow: hidden;
transform: scale(0.95);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-overlay.show .modal-content-card {
transform: scale(1);
}
.modal-header {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--border-light);
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(0, 0, 0, 0.02);
}
.modal-header h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.modal-close-btn {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 0.5rem;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
width: 36px;
height: 36px;
font-size: 1.5rem;
line-height: 1;
}
.modal-close-btn:hover {
background: var(--bg-surface-hover);
color: var(--text-primary);
transform: rotate(90deg);
}
.modal-body {
padding: 1.5rem;
overflow-y: auto;
flex-grow: 1;
}
/* Clickable KPI Card styles */
.kpi-card.overall-clicks-card {
cursor: pointer;
position: relative;
overflow: hidden;
}
.kpi-card.overall-clicks-card::after {
content: 'View Details';
position: absolute;
bottom: 0.75rem;
right: 1rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--primary);
opacity: 0.8;
transition: var(--transition);
}
.kpi-card.overall-clicks-card:hover::after {
opacity: 1;
}
.kpi-card.overall-clicks-card:hover {
border-color: var(--primary);
box-shadow: 0 10px 20px -5px var(--primary-glow);
}
@media (max-width: 900px) {
.control-form,
.control-form-keyword,
.control-form-negative,
.control-form-wide {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.schedule-form-main,
.schedule-form-time {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.control-day-picker {
grid-column: 1 / -1;
}
.control-submit,
.schedule-form-actions {
grid-column: 1 / -1;
}
.control-submit {
justify-self: start;
}
}
@media (max-width: 768px) {
.controls-card {
margin-top: 1rem;
}
.controls-card .card-header {
padding: 1rem;
align-items: stretch;
}
.controls-card .grid-controls {
margin-left: 0 !important;
width: 100%;
}
.controls-card .table-search {
width: 100%;
}
.control-form-shell {
padding: 1rem;
}
.control-form,
.control-form-keyword,
.control-form-negative,
.control-form-wide {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.schedule-form-main,
.schedule-form-time {
grid-template-columns: 1fr;
}
.control-submit {
width: 100%;
}
.schedule-form-actions {
flex-direction: column;
align-items: stretch;
}
.schedule-presets,
.schedule-day-options {
flex-wrap: wrap;
}
.schedule-conflict-main {
align-items: flex-start;
flex-direction: column;
gap: 0.25rem;
}
.schedule-conflict-actions .btn {
width: 100%;
}
}
/* ── Confirmation Modal Sizing and Inner Elements ────────────────────────── */
.controls-preview-container {
max-height: 380px;
overflow-y: auto;
padding: 0.5rem 0.2rem;
margin-bottom: 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.confirm-change-item {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
background: var(--bg-base);
transition: var(--transition);
}
.confirm-change-item:hover {
border-color: var(--border-highlight);
background: var(--bg-surface-hover);
}
.change-badge {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 0.2rem 0.55rem;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.badge--success {
color: var(--success);
background: var(--success-bg);
}
.badge--paused {
color: var(--warning);
background: var(--warning-bg);
}
.badge--danger {
color: var(--danger);
background: var(--danger-bg);
}
.badge--neutral {
color: var(--text-secondary);
background: var(--border-light);
}
.card-change--success {
border-left: 4px solid var(--success);
}
.card-change--paused {
border-left: 4px solid var(--warning);
}
.card-change--danger {
border-left: 4px solid var(--danger);
}
.card-change--neutral {
border-left: 4px solid var(--text-muted);
}
.change-description {
font-size: 0.88rem;
color: var(--text-primary);
line-height: 1.5;
}
.change-description code {
background: var(--border-light);
padding: 2px 6px;
border-radius: 4px;
font-family: monospace;
font-size: 0.82rem;
}
.confirm-change-text {
font-size: 0.95rem;
color: var(--text-primary);
font-weight: normal;
line-height: 1.65;
}
.confirm-change-text code {
background: var(--border-light);
padding: 2px 6px;
border-radius: 4px;
font-family: monospace;
font-size: 0.88rem;
}
.confirm-change-text strong {
font-weight: 600;
}
.confirm-change-list {
margin-top: 0.75rem;
}
.confirm-change-list ul {
margin: 0.35rem 0 0;
padding-left: 1.25rem;
}
.confirm-change-list li {
margin: 0.2rem 0;
}
.confirm-warning-alert {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.85rem 1rem;
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: var(--radius-md);
margin-bottom: 1.25rem;
color: var(--danger);
}
.warning-icon {
font-size: 1.1rem;
line-height: 1;
}
.warning-text {
font-size: 0.82rem;
line-height: 1.45;
font-weight: 500;
}
.confirm-token-container {
background: var(--bg-base);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: 1rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
.token-title-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
flex-wrap: wrap;
gap: 0.5rem;
}
.token-copy-hint {
font-size: 0.72rem;
color: var(--text-muted);
font-weight: 500;
}
.token-input {
font-family: monospace;
font-size: 0.88rem;
letter-spacing: 0.05em;
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 0.55rem 0.75rem;
width: 100%;
color: var(--text-primary);
outline: none;
}
.token-input:focus {
border-color: var(--primary);
}
/* Inline keyword cell action styles */
.keyword-cell-inline {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
gap: 8px;
}
.keyword-cell-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-grow: 1;
}
.keyword-cell-inline .control-row-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
width: auto;
margin: 0;
padding: 0;
gap: 0;
}
.keyword-cell-inline .control-icon-btn {
width: 26px;
height: 26px;
}
.keyword-cell-inline .control-icon-btn svg {
width: 14px;
height: 14px;
}
@media (max-width: 768px) {
body {
padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
.app-container {
height: auto;
min-height: 100vh;
overflow: visible;
}
.sidebar {
display: none;
}
.sidebar.open {
display: flex;
position: fixed;
inset: env(safe-area-inset-top) 0 auto 0;
width: 100%;
max-height: calc(100vh - 72px - env(safe-area-inset-bottom));
z-index: 70;
overflow: auto;
}
.main-content {
width: 100%;
margin-left: 0;
padding-bottom: calc(88px + env(safe-area-inset-bottom));
}
.top-header {
position: sticky;
top: env(safe-area-inset-top);
z-index: 40;
padding-left: 1rem;
padding-right: 1rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
background: var(--bg-surface);
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
isolation: isolate;
}
.header-actions {
flex-wrap: wrap;
width: 100%;
margin-left: 0;
}
.page-reload-btn:not([hidden]) {
display: inline-flex;
grid-column: 2;
grid-row: 1;
justify-self: end;
align-self: center;
flex: none;
width: 36px;
height: 36px;
margin: 0;
border-color: transparent;
border-radius: 999px;
background: transparent;
}
.page-reload-btn:not([hidden]):hover,
.page-reload-btn:not([hidden]):focus-visible {
border-color: var(--border-light);
background: var(--bg-surface-hover);
}
.page-reload-btn .refresh-icon {
width: 18px;
height: 18px;
}
.global-filters {
width: 100%;
flex-wrap: wrap;
margin-right: 0;
}
.filter-group,
.date-picker-btn {
flex: 1 1 100%;
min-width: 0;
width: 100%;
}
.pwa-banner {
left: 0.75rem;
right: 0.75rem;
bottom: calc(78px + env(safe-area-inset-bottom));
font-size: 0.85rem;
}
.pwa-banner--update {
bottom: calc(138px + env(safe-area-inset-bottom));
}
.mobile-bottom-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 90;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom));
background: var(--bg-surface);
border-top: 1px solid var(--border-light);
box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
}
.mobile-bottom-item {
min-height: 44px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-secondary);
font-size: 0.76rem;
font-weight: 800;
cursor: pointer;
}
.mobile-bottom-item.active {
background: var(--primary-glow);
color: var(--primary);
}
.more-sheet-backdrop {
position: fixed;
inset: 0;
z-index: 95;
display: block;
background: rgba(15, 23, 42, 0.4);
}
.more-sheet-backdrop[hidden],
.more-sheet[hidden] {
display: none;
}
.more-sheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
display: block;
max-height: min(76vh, 640px);
overflow: auto;
padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom));
background: var(--bg-surface);
border-top-left-radius: 16px;
border-top-right-radius: 16px;
box-shadow: 0 -20px 50px rgba(15, 23, 42, 0.25);
}
.more-sheet-handle {
width: 42px;
height: 4px;
margin: 0 auto 0.75rem;
border-radius: 999px;
background: var(--border-highlight);
}
.more-sheet-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
}
.more-sheet-header h2,
.account-panel h3 {
margin: 0;
font-size: 1rem;
}
.icon-btn {
width: 44px;
height: 44px;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-surface);
color: var(--text-primary);
font-size: 1.5rem;
}
.more-sheet-section {
display: grid;
gap: 0.5rem;
padding: 0.75rem 0;
border-top: 1px solid var(--border-light);
}
.more-nav-item,
.account-actions .btn {
min-height: 44px;
width: 100%;
justify-content: center;
}
.more-nav-item {
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--bg-surface-hover);
color: var(--text-primary);
font-weight: 700;
}
.account-actions {
display: grid;
gap: 0.5rem;
}
#grid-leadReview {
min-width: 980px;
}
.table-responsive:has(#grid-leadReview) {
border-radius: var(--radius-md);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 520px) {
.daterangepicker {
grid-template-columns: minmax(0, 1fr);
}
.daterangepicker .drp-calendar.left,
.daterangepicker .drp-calendar.right {
grid-column: 1;
}
.daterangepicker .drp-calendar.left {
border-right: none !important;
border-bottom: 1px solid var(--border-light) !important;
}
.daterangepicker .drp-buttons {
grid-column: 1;
}
}