* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 90%;
    overflow-y: scroll;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: white;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* Page background */
#login-container {
    min-height: 100vh;
    background: radial-gradient(
        circle at top left,
        #eef2ff,
        #f5f7fa 40%,
        #ffffff
    );
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Center wrapper */
.login-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px;
}

/* Card */
.login-card {
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 40px 36px;
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.06),
        0 4px 10px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeUp 0.6s ease-out;
}

/* Logo */
.logo {
    width: 72px;
    margin-bottom: 16px;
}

/* Title */
.logo-text {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    color: #111827;
    letter-spacing: -0.02em;
}

/* Subtitle */
.logo-info-text {
    margin-top: 8px;
    margin-bottom: 28px;
    font-size: 16px;
    color: #6b7280;
    text-align: center;
}

/* Google button */
.google-signin-btn {
    width: 100%;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    color: #111827;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Google icon */
.google-icon {
    width: 18px;
    height: 18px;
}

/* Hover / active states */
.google-signin-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.google-signin-btn:active {
    transform: translateY(1px);
}

/* Error message */
.login-error {
    margin-top: 16px;
    color: #dc2626;
    font-size: 15px;
    text-align: center;
}

/* Animation */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.main-container {
    animation: fadeIn 0.8s ease-out;
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
    padding-top: 0;
}

.header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    margin-bottom: 30px;
    animation: slideIn 0.6s ease-out;
}

.header h1 {
    margin: 0;
    font-size: 2.5em;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.header p {
    margin: 10px 0 0 0;
    font-size: 1.1em;
    opacity: 0.9;
}

/* Navbar styles */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 25px;
    background-color: white;
    border-bottom: 1px solid #e5e7eb;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

/* Push page content below the fixed navbar */
#tab-content {
    padding-top: 100px;
}

.navbar-brand {
    display: flex;
    align-items: center;
}

.navbar-logo {
    width: 50px;
    height: auto;
    margin-right: 12px;
}

.navbar-title {
    margin: 0;
    font-size: 25px;
    font-weight: 600;
    color: #1f2937;
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 16px;
}

.navbar-nav a {
    display: inline-block;
}

.navbar-link {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    padding: 6px 18px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.navbar-link:hover {
    color: #374151;
    background: rgba(102, 126, 234, 0.1);
}

.navbar-link.active {
    background: #e0e7ff;
    color: #4338ca;
    font-weight: 500;
}

.navbar-actions {
    display: flex;
    align-items: center;
}

.navbar-logout-btn {
    font-size: 16px !important;
}

.navbar-logout-icon {
    margin-right: 6px;
}

/* Hamburger menu button — hidden by default, shown on mobile */
.navbar-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 20px;
    color: #4338ca;
    cursor: pointer;
    padding: 6px 10px;
    margin-right: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.navbar-menu-btn:hover {
    background: rgba(102, 126, 234, 0.1);
}

/* --- Mobile nav Drawer --- */

/* Drawer surface — slightly off-white with a soft inner gradient for depth */
.navbar-drawer-content {
    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%) !important;
}

/* Slim header that just holds the close button (no title text) */
.navbar-drawer-header {
    padding: 12px 12px 0 12px !important;
    min-height: 0 !important;
    border-bottom: none !important;
    background: transparent !important;
}

.navbar-drawer-body {
    padding: 8px 16px 24px 16px !important;
}

/* Mini-brand at the top of the drawer */
.navbar-drawer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px 16px 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid #f3f4f6;
}

.navbar-drawer-brand-logo {
    width: 32px;
    height: auto;
}

.navbar-drawer-brand-text {
    font-size: 17px;
    font-weight: 600;
    color: #1f2937;
    letter-spacing: -0.01em;
}

/* Nav link list */
.navbar-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.navbar-drawer-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    font-size: 15px;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    border-radius: 10px;
    position: relative;
    transition: background 0.18s ease, color 0.18s ease,
        transform 0.18s ease;
}

.navbar-drawer-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, #667eea, #764ba2);
    border-radius: 2px;
    transform: translateY(-50%);
    transition: height 0.2s ease;
}

.navbar-drawer-link:hover {
    background: linear-gradient(
        90deg,
        rgba(102, 126, 234, 0.08),
        rgba(118, 75, 162, 0.04)
    );
    color: #4338ca;
    transform: translateX(2px);
}

.navbar-drawer-link:hover::before {
    height: 60%;
}

.navbar-drawer-link:active {
    transform: translateX(2px) scale(0.99);
}

.navbar-drawer-link-icon {
    font-size: 16px;
    width: 22px;
    text-align: center;
    color: #9ca3af;
    transition: color 0.18s ease;
}

.navbar-drawer-link:hover .navbar-drawer-link-icon {
    color: #4338ca;
}

.navbar-drawer-link-label {
    flex: 1;
}

.navbar-drawer-link-chevron {
    font-size: 11px;
    color: #d1d5db;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.navbar-drawer-link:hover .navbar-drawer-link-chevron {
    opacity: 1;
    transform: translateX(2px);
    color: #4338ca;
}

/* ≤1200px — tighten spacing, no layout change yet */
@media (max-width: 1200px) {
    .navbar { padding: 6px 16px; }
    .navbar-link { padding: 5px 12px; font-size: 13px; }
    .navbar-nav { gap: 4px; margin-right: 8px; }
    .navbar-title { font-size: 22px; }
}

/* ≤900px — drop the brand title text, shrink the logo, allow nav wrap */
@media (max-width: 930px) {
    .navbar-title { display: none; }
    .navbar-logo { width: 36px; margin-right: 8px; }
    .navbar-nav { flex-wrap: wrap; justify-content: flex-end; }
    .navbar-link { padding: 4px 10px; font-size: 12px; }
}

/* ≤768px — collapse inline nav into the hamburger drawer */
@media (max-width: 768px) {
    .navbar-nav { display: none; }
    .navbar-menu-btn { display: inline-flex; align-items: center; }
    .navbar-logout-text { display: none; }
    .navbar-logout-icon { margin-right: 0; }
    .navbar { padding: 6px 12px; }
}

/* Bootstrap's negative-margin utilities are disabled in the precompiled
   dash-bootstrap-components bundle, so define this one manually. Scoped to the
   md breakpoint only (768px–991.98px). !important is needed to override the
   inline margin styles on the columns that use it. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .mt-md-n2 {
        margin-top: 1rem !important;
    }
}

/* On xs (≤575.98px) each filter stacks one per row, so its 20px top margin
   adds to the previous filter's 10px bottom margin, making the gap look too
   big. Trim the top margin to 10px on xs so the gaps match the rest of the
   form. !important overrides the inline column margins. */
@media (max-width: 575.98px) {
    .mt-xs-trim {
        margin-top: 10px !important;
    }
}

/* ASC Finance Device / Page Type filter+exclude cols: trim their 20px top
   margin to 10px on md and below (≤991.98px) so the gap matches the rest of
   the form. */
@media (max-width: 991.98px) {
    .mt-smdown-trim {
        margin-top: 10px !important;
    }
}

/* ASC Finance Source Type filter + exclude: tighter top space on sm + xs. */
@media (max-width: 767.98px) {
    .asc-source-type-tight {
        margin-top: 0 !important;
    }
    .asc-source-type-tight > * {
        margin-top: 0 !important;
    }
    /* Source filter exclude + Source Type filter exclude: drop down 5px more
       than their filters so the checkbox lines up nicely on sm + xs. */
    #asc-finance-source-exclude-col-id {
        margin-top: 17px !important;
    }
    #asc-finance-source-type-exclude-col-id {
        margin-top: 5px !important;
    }
}

.card {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
    transition: all 0.3s ease;
    animation: fadeIn 0.8s ease-out;
}

.mantine-Accordion-root {
    margin-top: 0 !important;
}

.mantine-Accordion-item {
    margin-bottom: 20px;
    border-radius: 10px;
}

.export-btn-modern {
    margin-bottom: 10px;
}

#ltv-v2-accordion-control-ltv_v2_section {
    margin-top: 0 !important;
}

#asc-finance-accordion-control-asc_finance_section {
    margin-top: 0 !important;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.kpi-container {
    display: grid;
    /* Auto-fit: each card sits at minimum 160px wide; available width decides
       column count. Naturally gives 5 cards on desktop, 3 on tablet, 2 on
       larger phones, and 1 on small phones. */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

@media (max-width: 600px) {
    .kpi-container { gap: 10px; margin-bottom: 16px; }
    .kpi-card { padding: 12px; }
    .kpi-label { font-size: 11px; margin-bottom: 4px; }
    .kpi-value { font-size: 20px; }
    .kpi-icon { font-size: 1.5em; margin-top: -4px; }
}

@media (max-width: 380px) {
    .kpi-container { grid-template-columns: 1fr; }
}

.kpi-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    border-left: 4px solid;
    animation: fadeIn 1s ease-out;
}

.kpi-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: pulse 0.6s ease-in-out;
}

.kpi-card.revenue {
    border-left-color: #3b82f6;
}

.kpi-card.cost {
    border-left-color: #ef4444;
}

.kpi-card.profit {
    border-left-color: #10b981;
}

.kpi-card.roas {
    border-left-color: #f59e0b;
}

.kpi-card.installs {
    border-left-color: #8b5cf6;
}

.kpi-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

/* A KPI value can be a link (e.g. the acquisition Revenue card → Sensor Tower):
   keep the big value styling and just add a hover affordance. */
.kpi-value a {
    color: inherit;
    text-decoration: none;
}
.kpi-value a:hover {
    text-decoration: underline;
}

.kpi-icon {
    font-size: 2em;
    opacity: 0.2;
    float: right;
    margin-top: -8px;
}

.filter-section {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
}

.filter-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.filter-row-single {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 15px;
}

.filter-row-split {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: center;
}

.filter-column {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    width: 100%;
}

.mantine-MultiSelect-option {
    font-size: 15px;
    white-space: normal;
    word-break: break-word;
}

.mantine-MultiSelect-pill, .mantine-Pill-label {
    font-size: 14px;
}

.mantine-MultiSelect-input::placeholder, .mantine-MultiSelect-placeholder {
    font-size: 13px;
}

.mantine-InputPlaceholder-placeholder {
    font-size: 16px !important;
}

.mantine-PillsInputField-field {
    font-size: 15px;
}

.exclude-checkbox .mantine-Checkbox-label {
    font-size: 15px;
    padding-left: 6px;
}

.mantine-DatePickerInput-input {
    font-size: 13px !important;
}

.mantine-DatePickerInput-placeholder {
    font-size: 14px !important;
}

/* Remove filter-input styling from date picker container */
.filter-input.SingleDatePickerInput,
.filter-input .DateRangePickerInput_wrapper {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Date range picker styling in filter column */
.filter-column .DateRangePickerInput {
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: white !important;
    transition: border-color 0.3s ease !important;
}

.filter-column .DateRangePickerInput:hover {
    border-color: #667eea !important;
}

.filter-column .DateRangePickerInput:focus-within {
    border-color: #667eea !important;
    box-shadow: 0 0 0 1px #667eea !important;
}

.filter-column .DateInput {
    width: 50% !important;
    height: 42px !important;
}

.filter-column .DateInput_input {
    height: 38px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    border: none !important;
    font-size: 14px !important;
    background: transparent !important;
}

.filter-column .DateInput_input::placeholder {
    color: #9ca3af !important;
    font-size: 14px !important;
}

.filter-column .DateRangePickerInput_arrow {
    padding: 0 8px !important;
    color: #9ca3af !important;
}

.filter-column .DateRangePickerInput_calendarIcon,
.filter-column .DateRangePickerInput_clearDates,
.filter-column button[aria-label="Clear Dates"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

.filter-column .DateInput_fang {
    display: none !important;
}

/* Consistent filter input styling */
.filter-input {
    width: 100%;
    height: 42px;
    padding: 8px;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
    box-sizing: border-box;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.filter-input:focus {
    outline: none;
    border-color: #667eea;
}

/* Multi-select dropdown styling */
.filter-dropdown {
    width: 100%;
}

.filter-dropdown .Select-control {
    min-height: 42px !important;
    border-radius: 8px !important;
    border: 2px solid #e5e7eb !important;
    box-sizing: border-box;
    font-size: 14px;
    transition: border-color 0.3s ease !important;
}

.filter-dropdown .Select-control:hover {
    border-color: #667eea !important;
}

.filter-dropdown .Select-control.is-focused {
    border-color: #667eea !important;
    box-shadow: 0 0 0 1px #667eea !important;
}

.filter-dropdown .Select-placeholder {
    padding-left: 8px;
    font-size: 14px;
    color: #9ca3af;
}

.filter-dropdown .Select-multi-value-wrapper {
    min-height: 26px;
    padding: 4px 8px;
}

.filter-dropdown .Select-value {
    background-color: #d1d5db !important;
    color: #1f2937 !important;
    border-radius: 6px !important;
    border-color: #d1d5db !important;
    padding: 4px 8px;
    margin: 2px 4px 2px 0;
    font-size: 13px;
    font-weight: 500;
}

.filter-dropdown .Select-value-icon {
    border-color: #d1d5db !important;
    color: #6b7280 !important;
}

.filter-dropdown .Select-value-icon:hover {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}

.filter-dropdown .Select-input {
    padding-left: 8px;
}

.filter-dropdown .Select-menu-outer {
    border-radius: 8px;
    border: 2px solid #e5e7eb;
    margin-top: 4px;
}

.filter-dropdown .Select-option {
    font-size: 13px !important;
    color: #6b7280 !important;
    padding: 8px 12px !important;
}

.filter-dropdown .Select-option.is-selected {
    background-color: #667eea !important;
    color: white !important;
}

.filter-dropdown .Select-option.is-focused {
    background-color: rgba(102, 126, 234, 0.1) !important;
    color: #374151 !important;
}

/* Group by dropdown styling - same as filter dropdowns */
#group-by-columns .Select-value {
    background-color: #d1d5db !important;
    color: #1f2937 !important;
    border-radius: 6px !important;
    border-color: #d1d5db !important;
    padding: 4px 8px;
    margin: 2px 4px 2px 0;
    font-size: 13px;
    font-weight: 500;
}

#group-by-columns .Select-value-icon {
    border-color: #d1d5db !important;
    color: #6b7280 !important;
}

#group-by-columns .Select-value-icon:hover {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}

#group-by-columns .Select-option {
    font-size: 13px !important;
    color: #6b7280 !important;
    padding: 8px 12px !important;
}

#group-by-columns .Select-option.is-selected {
    background-color: #667eea !important;
    color: white !important;
}

#group-by-columns .Select-option.is-focused {
    background-color: rgba(102, 126, 234, 0.1) !important;
    color: #374151 !important;
}

.filter-row input {
    height: 42px;
    box-sizing: border-box;
}

.filter-row .SingleDatePickerInput {
    height: 42px;
}

.filter-row .DateInput_input {
    height: 42px;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 8px;
}

.filter-row .DateRangePickerInput {
    height: 42px;
    display: flex;
    align-items: center;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
}

.filter-row .DateRangePickerInput:hover {
    border-color: #667eea;
}

.filter-row .DateRangePickerInput .DateInput {
    height: 42px;
}

.filter-row .DateRangePickerInput .DateInput_input {
    height: 42px;
    padding: 8px;
    box-sizing: border-box;
    border: none;
}

.filter-row .DateRangePickerInput .DateRangePickerInput_arrow {
    padding: 0 8px;
}

.filter-row .DateRangePickerInput .DateRangePickerInput_calendarIcon {
    display: none !important;
}

.filter-row .DateRangePickerInput .DateRangePickerInput_clearDates {
    display: none !important;
}

.filter-row .DateRangePickerInput_clearDates {
    display: none !important;
}

.filter-row .DateInput_fang {
    display: none !important;
}

.filter-row-split .DateRangePickerInput {
    height: 42px;
    display: flex;
    align-items: center;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
}

.filter-row-split .DateRangePickerInput:hover {
    border-color: #667eea;
}

.filter-row-split .DateRangePickerInput .DateInput {
    height: 42px;
}

.filter-row-split .DateRangePickerInput .DateInput_input {
    height: 42px;
    padding: 8px;
    box-sizing: border-box;
    border: none;
}

.filter-row-split .DateRangePickerInput .DateRangePickerInput_arrow {
    padding: 0 8px;
}

.filter-row-split .DateRangePickerInput .DateRangePickerInput_calendarIcon {
    display: none !important;
}

.filter-row-split .DateRangePickerInput .DateRangePickerInput_clearDates {
    display: none !important;
}

.filter-row-split .DateRangePickerInput_clearDates {
    display: none !important;
}

.filter-row-split .DateInput_fang {
    display: none !important;
}

/* Global rule to hide all calendar icons and clear buttons */
.DateRangePickerInput_calendarIcon,
.DateRangePickerInput_clearDates,
.DateInput_fang,
.DateRangePicker_picker__directionLeft .DateInput_fang,
.DateRangePicker_picker__directionRight .DateInput_fang,
.DateRangePickerInput_calendarIcon_svg,
button[aria-label="Clear Dates"],
.DateRangePickerInput > button,
.DateRangePickerInput_clearDates_default,
.DateRangePickerInput_clearDates_default:focus,
.DateRangePickerInput_clearDates_default:hover {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
}

.filter-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    font-size: 0.9em;
}

.Select-control, .dropdown {
    border-radius: 8px !important;
    border: 2px solid #e5e7eb !important;
    transition: all 0.3s ease !important;
}

.Select-control:hover, .dropdown:hover {
    border-color: #667eea !important;
}

.button-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

.button-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4);
}

.chart-container {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
}

.section-title, .table-title {
    font-size: 18px;
}

.section-icon {
    color: #3b82f6;
    margin-right: 8px;
}

.table-header {
    display: flex;
    justify-content: space-between;
}

.datatable-container {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Modern export button styling */
.export-btn-modern {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    padding: 10px 24px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
}

.export-btn-modern:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.5) !important;
    opacity: 0.92 !important;
}

.export-btn-modern:active {
    transform: translateY(0) !important;
}

/* Acquisition tab: make the primary "Search" button stand out from its
   secondary siblings (Random App / Show Query) with a distinct pink gradient
   so it reads as the main call-to-action. Size and label are left unchanged.
   Layered on top of .export-btn-modern. */
.acquisition-search-btn {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.4) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

.acquisition-search-btn:hover {
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.55) !important;
}

/* On medium and smaller screens (≤991.98px) let the ASC Finance Export CSV
   button fill its column so it's wider and easier to tap. Trim the side padding
   and drop the nowrap so the full label always fits (wraps as a fallback)
   instead of being clipped. Font size is left unchanged. */
@media (max-width: 991.98px) {
    .asc-export-btn {
        width: 100% !important;
        justify-content: center !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        white-space: normal !important;
    }
}

/* On xs (<576px) the ASA filter cols stack one per row; their `mb-3` (16px)
   plus the multiselect's inline 10px top/bottom margins produces a ~36px gap
   between filters, which feels too wide on mobile. Drop the col bottom margin
   on xs so the gap is just the multiselect's own 20px. sm+ is unaffected
   (mb-sm-0 in ASC_TABLE_COL_CLASSNAME already handles those breakpoints). */
@media (max-width: 575.98px) {
    .asa-filters-row > [class*="col-"],
    .postbacks-filters-row > [class*="col-"] {
        margin-bottom: 0 !important;
    }
}

/* Events: sm + md top margin for Bundle ID + Country Code filter rows. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .events-md-mt {
        margin-top: 20px !important;
    }
}

/* Events: xs top margin between App ID, Bundle ID, Country Code filter rows. */
@media (max-width: 575.98px) {
    .events-xs-mt {
        margin-top: 20px !important;
    }
}

/* Events: xs tighter top space above Event Name, Install Date, Activation Date. */
@media (max-width: 575.98px) {
    #events-event-name-filter,
    #events-install-date-filter,
    #events-activation-date-filter {
        margin-top: 0 !important;
    }
    .events-xs-decrease {
        margin-top: 10px !important;
    }
    .events-xs-decrease > * {
        margin-top: 0 !important;
    }
    .events-xs-decrease [style*="margin-top"] {
        margin-top: 0 !important;
    }
}

/* Events: default top margin for Install/Activation Date exclude checkboxes to
   align with the date picker's visible input on lg+ (no other rules apply). */
.events-date-exclude {
    margin-top: 18px;
}

/* Events: md tighter top space above Install Date and Activation Date. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .events-date-tight {
        margin-top: -10px !important;
    }
    .events-date-tight > * {
        margin-top: 0 !important;
    }
    .events-date-exclude {
        margin-top: 10px !important;
    }
}

/* Events: sm slightly tighter top space above Install Date and Activation Date. */
@media (min-width: 576px) and (max-width: 767.98px) {
    .events-date-tight {
        margin-top: -10px !important;
    }
    .events-date-tight > * {
        margin-top: 0 !important;
    }
    .events-date-exclude {
        margin-top: 13px !important;
    }
}

/* LTV chart titles rendered as HTML above each chart. The container is a flex
   block so the subtitle wraps to a new line responsively when there isn't
   enough horizontal space — exactly the behavior Plotly's SVG title can't do. */
.ltv-chart-html-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: 16px 16px 0 16px;
    font-family: inherit;
}

@media (max-width: 767.98px) {
    .ltv-chart-html-title {
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

.ltv-chart-html-title-number {
    font-size: 44px;
    font-weight: 900;
    line-height: 1.1;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.ltv-chart-html-title-subtitle {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.ltv-chart-html-title-number:empty,
.ltv-chart-html-title-subtitle:empty {
    display: none;
}

/* Keyword Ranks header buttons (Export CSV + Show Request): in the 768-1099px
   range (md + lg below 1100) let them grow to fill their flex container
   equally so they read at a usable width. Above 1100px they fall back to
   natural content width; below 768px the buttons column wraps to its own row
   under the title, and we don't want them stretched to the full row width —
   so the growth rule is scoped to min-width 768px. */
@media (max-width: 1099.98px) and (min-width: 768px) {
    .kw-action-btn {
        flex: 1 1 0 !important;
    }
}

/* Table group-by multiselect wrapper */
.table-group-by-wrapper {
    margin-bottom: 20px;
}

.dash-table-container {
    border-radius: 12px;
    overflow: hidden;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-spinner {
    border: 5px solid #f3f4f6;
    border-top: 5px solid #667eea;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Segmented Control Styling */
.segmented-control {
    display: inline-flex;
    background: #f3f4f6;
    border-radius: 10px;
    padding: 4px;
    gap: 0;
    width: auto;
    max-width: 400px;
    height: 42px;
    align-items: center;
    box-sizing: border-box;
}

.segmented-control label {
    padding: 0 28px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6b7280;
    background: transparent;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
    min-width: 80px;
    height: 34px;
    line-height: 34px;
    text-align: center;
}

.segmented-control label:hover {
    color: #374151;
    background: rgba(102, 126, 234, 0.1);
}

/* Active/checked state for segmented control */
.segmented-control input[type="radio"]:checked + label,
.segmented-control input:checked + label,
.segmented-control label.checked,
.segmented-control label:has(input:checked),
#time-aggregation input[type="radio"]:checked + label,
#time-aggregation label input[type="radio"]:checked,
#time-aggregation label:has(input:checked) {
    background: #d1d5db !important;
    color: #1f2937 !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Override any default Dash RadioItems checked styling */
div#time-aggregation.segmented-control label input[type="radio"]:checked ~ *,
div#time-aggregation.segmented-control input[type="radio"]:checked ~ label,
div.segmented-control input[type="radio"]:checked ~ label {
    background: #d1d5db !important;
    color: #1f2937 !important;
}

/* Target the wrapper label that contains the checked radio input */
.segmented-control label:has(> input[type="radio"]:checked),
#time-aggregation label:has(> input[type="radio"]:checked) {
    background: #d1d5db !important;
    color: #1f2937 !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* AG Grid header styling - prevent wrapping and add spacing */
.ag-theme-alpine .ag-header-cell-label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 0 8px !important;
    justify-content: center !important;
}

.ag-theme-alpine .ag-header-cell-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.ag-theme-alpine .ag-header-cell {
    overflow: hidden !important;
    padding: 6px 4px !important;
    min-height: 48px !important;

}

.ag-theme-alpine .ag-header-row {
    min-height: 48px !important;
}

.ag-theme-alpine .ag-header {
    min-height: 48px !important;
}

.ag-theme-alpine .ag-header-cell-text {
    font-size: 15px !important;
}

.ag-theme-alpine .ag-cell {
    font-size: 15px !important;
    /* display: flex;
    justify-content: center;
    align-items: center; */
}

/* AG Grid pinned columns styling */
.ag-theme-alpine .ag-pinned-left-header,
.ag-theme-alpine .ag-pinned-left-cols-container {
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

/* Keyword Ranks table - smaller font */
.keyword-ranks-grid .ag-cell {
    font-size: 15px !important;
}
.keyword-ranks-grid .ag-header-cell-text {
    font-size: 15px !important;
    color: #374151 !important;
}
.keyword-ranks-grid .ag-header-cell {
    padding-left: 12px !important;
    padding-right: 12px !important;
}
.keyword-ranks-grid .ag-floating-filter {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* ASA date range picker — larger input text */
#asa-date-filter input {
    font-size: 1rem !important;
}

/* Skeleton loading animation */
@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

/* Loading overlay styling */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Circular spinner for loading overlay */
.spinner {
    width: 60px;
    height: 60px;
    border: 5px solid #e5e7eb;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.mantine-Accordion-control {
    margin-top: 0 !important;
}

/* DMC DatePicker dropdown fix */
.mantine-Popover-dropdown,
.mantine-DatePicker-dropdown,
[data-mantine-portal] {
    z-index: 10000 !important;
}

/* Ensure filter section doesn't clip the dropdown */
.filter-section {
    overflow: visible !important;
}

.filter-column {
    overflow: visible !important;
}


/* ── 404 Page ─────────────────────────────────────────────── */
.not-found-container {
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 20%, #eef2ff, #f5f7fa 50%, #ffffff);
    padding: 40px 20px;
}

.not-found-card {
    background: rgba(255, 255, 255, 0.97);
    border-radius: 20px;
    padding: 56px 64px;
    max-width: 520px;
    width: 100%;
    text-align: center;
    box-shadow:
        0 20px 60px rgba(102, 126, 234, 0.1),
        0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(224, 231, 255, 0.8);
    animation: notFoundFadeUp 0.5s ease-out both;
}

.not-found-code {
    font-size: 96px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -4px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    user-select: none;
}

.not-found-divider {
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 99px;
    margin: 0 auto 24px;
}

.not-found-title {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.not-found-subtitle {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 36px;
}

.not-found-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 28px;
    border-radius: 10px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.35);
    letter-spacing: 0.01em;
}

.not-found-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.45);
    color: white !important;
}

.not-found-btn:active {
    transform: translateY(0);
}

@keyframes notFoundFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* ────────────────────────────────────────────────────────── */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ==========================================================================
   Theme toggle button (works in both light + dark)
   ========================================================================== */
.navbar-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-left: 8px;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    color: #4338ca;
    font-size: 17px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
        transform 0.15s ease;
}

.navbar-theme-btn:hover {
    background: rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

.navbar-theme-btn:active {
    transform: translateY(0);
}

/* Show the moon in light mode (click → go dark); the sun in dark mode. */
.theme-icon-sun {
    display: none;
}
html[data-mantine-color-scheme="dark"] .theme-icon-moon {
    display: none;
}
html[data-mantine-color-scheme="dark"] .theme-icon-sun {
    display: inline-block;
}

/* ==========================================================================
   DARK MODE
   Mantine sets data-mantine-color-scheme="dark" on <html> when the provider's
   forceColorScheme flips. Mantine's own components (Modal, Drawer, Accordion,
   MultiSelect, Button, etc.) re-theme automatically; the rules below cover the
   app's custom-CSS surfaces.

   Palette:
     --gm-bg       page background        #0f172a (slate-900)
     --gm-surface  cards / panels         #1e293b (slate-800)
     --gm-surface-2 inputs / elevated     #273449
     --gm-border   borders / dividers     #334155 (slate-700)
     --gm-text     primary text           #e2e8f0 (slate-200)
     --gm-muted    secondary text         #94a3b8 (slate-400)
   ========================================================================== */
html[data-mantine-color-scheme="dark"] {
    --gm-bg: #0f172a;
    --gm-surface: #1e293b;
    --gm-surface-2: #273449;
    --gm-border: #334155;
    --gm-text: #e2e8f0;
    --gm-muted: #94a3b8;
    --gm-shadow: rgba(0, 0, 0, 0.4);
    /* Shared panel background — same as the KPI cards, so the filters accordion,
       graphs, group-by section and cards all read as one consistent surface. */
    --gm-card: linear-gradient(135deg, #243043 0%, #1b2536 100%);
}

html[data-mantine-color-scheme="dark"] body,
html[data-mantine-color-scheme="dark"] #main-app-container {
    background: var(--gm-bg);
    color: var(--gm-text);
}

/* ---- Navbar ---- */
html[data-mantine-color-scheme="dark"] .navbar {
    background-color: var(--gm-surface);
    border-bottom: 1px solid var(--gm-border);
}
html[data-mantine-color-scheme="dark"] .navbar-title {
    color: var(--gm-text);
}
html[data-mantine-color-scheme="dark"] .navbar-link {
    color: var(--gm-muted);
}
html[data-mantine-color-scheme="dark"] .navbar-link:hover {
    color: #c7d2fe;
    background: rgba(99, 102, 241, 0.18);
}
html[data-mantine-color-scheme="dark"] .navbar-link.active {
    background: rgba(99, 102, 241, 0.22);
    color: #c7d2fe;
}
html[data-mantine-color-scheme="dark"] .navbar-theme-btn {
    border-color: var(--gm-border);
    color: #fbbf24;
}
html[data-mantine-color-scheme="dark"] .navbar-theme-btn:hover {
    background: rgba(251, 191, 36, 0.12);
}
html[data-mantine-color-scheme="dark"] .navbar-drawer-content {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
}
html[data-mantine-color-scheme="dark"] .navbar-drawer-brand-text {
    color: var(--gm-text);
}
/* Mobile drawer nav links — light text on the dark drawer. */
html[data-mantine-color-scheme="dark"] .navbar-drawer-link {
    color: var(--gm-text);
}
html[data-mantine-color-scheme="dark"] .navbar-drawer-link-icon {
    color: var(--gm-muted);
}
html[data-mantine-color-scheme="dark"] .navbar-drawer-link-chevron {
    color: var(--gm-muted);
}
html[data-mantine-color-scheme="dark"] .navbar-drawer-link:hover {
    background: linear-gradient(
        90deg,
        rgba(99, 102, 241, 0.18),
        rgba(118, 75, 162, 0.08)
    );
    color: #c7d2fe;
}
html[data-mantine-color-scheme="dark"] .navbar-drawer-link:hover .navbar-drawer-link-icon {
    color: #c7d2fe;
}

/* ---- Surfaces: cards, filter sections, charts, tables ---- */
html[data-mantine-color-scheme="dark"] .card,
html[data-mantine-color-scheme="dark"] .filter-section,
html[data-mantine-color-scheme="dark"] .chart-container,
html[data-mantine-color-scheme="dark"] .datatable-container {
    background: var(--gm-card);
    box-shadow: 0 2px 8px var(--gm-shadow);
    color: var(--gm-text);
}
html[data-mantine-color-scheme="dark"] .card:hover {
    box-shadow: 0 4px 14px var(--gm-shadow);
}

/* ---- Filters accordion (Mantine) → match the shared card surface ---- */
html[data-mantine-color-scheme="dark"] .mantine-Accordion-item {
    background: var(--gm-card);
    border-color: var(--gm-border);
}
html[data-mantine-color-scheme="dark"] .mantine-Accordion-control {
    background: transparent;
    color: var(--gm-text);
}
html[data-mantine-color-scheme="dark"] .mantine-Accordion-control:hover {
    background: rgba(255, 255, 255, 0.03);
}
html[data-mantine-color-scheme="dark"] .mantine-Accordion-label,
html[data-mantine-color-scheme="dark"] .mantine-Accordion-chevron {
    color: var(--gm-text);
}
/* The control's filter icon is hardcoded black inline — recolor for dark. */
html[data-mantine-color-scheme="dark"] .mantine-Accordion-control svg,
html[data-mantine-color-scheme="dark"] .mantine-Accordion-control .iconify {
    color: var(--gm-text) !important;
}

/* ---- KPI cards ---- */
html[data-mantine-color-scheme="dark"] .kpi-card {
    background: var(--gm-card);
    box-shadow: 0 2px 8px var(--gm-shadow);
}
html[data-mantine-color-scheme="dark"] .kpi-label {
    color: var(--gm-muted);
}
html[data-mantine-color-scheme="dark"] .kpi-value {
    color: var(--gm-text);
}

/* ---- Section + table titles / text ---- */
html[data-mantine-color-scheme="dark"] .section-title,
html[data-mantine-color-scheme="dark"] .table-title,
html[data-mantine-color-scheme="dark"] .table-header {
    color: var(--gm-text);
}

/* Graph value title (big number) + subtitle — hardcoded near-black for light. */
html[data-mantine-color-scheme="dark"] .ltv-chart-html-title-number {
    color: var(--gm-text);
}
html[data-mantine-color-scheme="dark"] .ltv-chart-html-title-subtitle {
    color: var(--gm-muted);
}
html[data-mantine-color-scheme="dark"] .filter-label {
    color: var(--gm-text);
}

/* ---- Custom (non-Mantine) inputs ---- */
html[data-mantine-color-scheme="dark"] .filter-input {
    background: var(--gm-surface-2);
    border-color: var(--gm-border);
    color: var(--gm-text);
}
html[data-mantine-color-scheme="dark"] .filter-input::placeholder {
    color: var(--gm-muted);
}
html[data-mantine-color-scheme="dark"] .filter-dropdown .Select-control {
    background: var(--gm-surface-2) !important;
    border-color: var(--gm-border) !important;
    color: var(--gm-text);
}

/* ---- Mantine inputs (MultiSelect / Select / TextInput / DateInput) ----
   Mantine's default dark input shade clashes with our card surface, so align
   the input field to --gm-surface-2 (a touch lighter than the card for a subtle
   raised look). */
html[data-mantine-color-scheme="dark"] .mantine-Input-input,
html[data-mantine-color-scheme="dark"] .mantine-MultiSelect-input,
html[data-mantine-color-scheme="dark"] .mantine-Select-input {
    background-color: var(--gm-surface-2);
    border-color: var(--gm-border);
    color: var(--gm-text);
}
/* Dropdown option panels that pop over the inputs. */
html[data-mantine-color-scheme="dark"] .mantine-MultiSelect-dropdown,
html[data-mantine-color-scheme="dark"] .mantine-Select-dropdown,
html[data-mantine-color-scheme="dark"] .mantine-Combobox-dropdown {
    background-color: var(--gm-surface);
    border-color: var(--gm-border);
}

/* ---- Mantine checkboxes (exclude toggles) ----
   Only restyle the UNCHECKED box; the :checked state keeps Mantine's accent fill. */
html[data-mantine-color-scheme="dark"] .mantine-Checkbox-input:not(:checked) {
    background-color: var(--gm-surface-2);
    border-color: var(--gm-border);
}

/* ---- Mantine radio circles (granularity, value-col, stack-by groups) ----
   Match the input surface; keep the accent fill on the selected radio. */
html[data-mantine-color-scheme="dark"] .mantine-Radio-radio:not(:checked) {
    background-color: var(--gm-surface-2);
    border-color: var(--gm-border);
}

/* ---- Mantine slider: unfilled track (the "path") matches the input surface;
   the filled bar keeps its accent colour. ---- */
html[data-mantine-color-scheme="dark"] .mantine-Slider-track::before {
    background-color: var(--gm-surface-2) !important;
}

/* ---- Mantine SegmentedControl (Finance / LTV / Events granularity) ----
   Track matches the input surface; the selected pill sits a shade lighter. */
html[data-mantine-color-scheme="dark"] .mantine-SegmentedControl-root {
    background-color: var(--gm-surface-2);
}
html[data-mantine-color-scheme="dark"] .mantine-SegmentedControl-indicator {
    background-color: #475569;
}
html[data-mantine-color-scheme="dark"] .mantine-SegmentedControl-label {
    color: var(--gm-muted);
}
html[data-mantine-color-scheme="dark"] .mantine-SegmentedControl-label[data-active] {
    color: #f8fafc;
}

/* ---- Custom segmented control (ROAS time aggregation, dcc.RadioItems) ---- */
html[data-mantine-color-scheme="dark"] .segmented-control {
    background: var(--gm-surface-2);
}
html[data-mantine-color-scheme="dark"] .segmented-control label {
    color: var(--gm-muted);
}
html[data-mantine-color-scheme="dark"] .segmented-control label:has(> input[type="radio"]:checked),
html[data-mantine-color-scheme="dark"] #time-aggregation label:has(> input[type="radio"]:checked) {
    background: #475569 !important;
    color: #f8fafc !important;
}

/* ---- Plotly charts: transparent background so the figure blends into the
   dark chart card surface. ---- */
html[data-mantine-color-scheme="dark"] .js-plotly-plot,
html[data-mantine-color-scheme="dark"] .js-plotly-plot .main-svg {
    background: transparent !important;
}
/* Legend background box (set to semi-white in the figures) → transparent on dark
   so it blends into the chart card instead of showing a pale box. */
html[data-mantine-color-scheme="dark"] .js-plotly-plot .legend .bg {
    fill: transparent !important;
    fill-opacity: 0 !important;
}
/* Axis titles, tick labels, chart title and legend text are colored for the light
   theme (near-black) — soften them to a readable grey on dark. Plotly sets fill
   inline, so !important is needed. */
html[data-mantine-color-scheme="dark"] .js-plotly-plot .xtick text,
html[data-mantine-color-scheme="dark"] .js-plotly-plot .ytick text,
html[data-mantine-color-scheme="dark"] .js-plotly-plot .xtitle,
html[data-mantine-color-scheme="dark"] .js-plotly-plot .ytitle,
html[data-mantine-color-scheme="dark"] .js-plotly-plot .gtitle,
html[data-mantine-color-scheme="dark"] .js-plotly-plot .legendtext,
html[data-mantine-color-scheme="dark"] .js-plotly-plot .legendtitletext {
    fill: #cbd5e1 !important;
}

/* ---- AG Grid (alpine) dark theming via its CSS variables ---- */
html[data-mantine-color-scheme="dark"] .ag-theme-alpine {
    --ag-background-color: #1e293b;
    --ag-foreground-color: #e2e8f0;
    --ag-header-background-color: #273449;
    --ag-header-foreground-color: #e2e8f0;
    --ag-border-color: #334155;
    --ag-row-border-color: #334155;
    --ag-odd-row-background-color: #1b2536;
    --ag-row-hover-color: rgba(99, 102, 241, 0.14);
    --ag-control-panel-background-color: #1e293b;
    --ag-subheader-background-color: #273449;
    --ag-input-border-color: #334155;
    --ag-secondary-foreground-color: #94a3b8;
    --ag-disabled-foreground-color: #64748b;
}
html[data-mantine-color-scheme="dark"] .keyword-ranks-grid .ag-header-cell-text {
    color: #e2e8f0 !important;
}
html[data-mantine-color-scheme="dark"] .ag-theme-alpine .ag-pinned-left-header,
html[data-mantine-color-scheme="dark"] .ag-theme-alpine .ag-pinned-left-cols-container {
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.35);
}

/* ---- Login page ---- */
html[data-mantine-color-scheme="dark"] #login-container {
    background: radial-gradient(circle at top left, #1e293b, #0f172a 45%, #020617);
}
html[data-mantine-color-scheme="dark"] .login-card {
    background: rgba(30, 41, 59, 0.95);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.4);
}
html[data-mantine-color-scheme="dark"] .logo-text {
    color: var(--gm-text);
}
html[data-mantine-color-scheme="dark"] .logo-info-text {
    color: var(--gm-muted);
}
html[data-mantine-color-scheme="dark"] .google-signin-btn {
    background: var(--gm-surface-2);
    border-color: var(--gm-border);
    color: var(--gm-text);
}
html[data-mantine-color-scheme="dark"] .google-signin-btn:hover {
    background: #334155;
    border-color: #475569;
}

/* ---- 404 page ---- */
html[data-mantine-color-scheme="dark"] .not-found-card {
    background: var(--gm-surface);
    box-shadow: 0 2px 8px var(--gm-shadow);
}

/* ---- Loading overlay ---- */
html[data-mantine-color-scheme="dark"] .loading-overlay {
    background: var(--gm-bg);
}
html[data-mantine-color-scheme="dark"] .loading-text {
    color: var(--gm-muted);
}

/* ---- Scrollbars ---- */
html[data-mantine-color-scheme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
html[data-mantine-color-scheme="dark"] ::-webkit-scrollbar-track {
    background: #0f172a;
}
html[data-mantine-color-scheme="dark"] ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 6px;
}
html[data-mantine-color-scheme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ==========================================================================
   Acquisition tab — title + KPI sub-label (KPIs reuse the shared .kpi-card)
   ========================================================================== */
.acquisition-title-name {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: #1f2328;
}
.acquisition-title-name a {
    color: #0969da;
    text-decoration: none;
    transition: color 0.15s ease;
}
.acquisition-title-name a:hover {
    color: #0550ae;
    text-decoration: underline;
}
.acquisition-title-sub {
    margin-top: 4px;
    font-size: 16px;
    color: #6b7280;
}
.acquisition-title-sub a {
    color: #0969da;
    text-decoration: none;
    transition: color 0.15s ease;
}
.acquisition-title-sub a:hover {
    color: #0550ae;
    text-decoration: underline;
}
.acquisition-kpi-sub {
    font-size: 13px;
    color: #6b7280;
    margin-top: 2px;
}
/* Acquisition KPIs: lock to exactly five per row (two rows of five) on desktop,
   overriding the shared .kpi-container auto-fit. Steps down on smaller screens. */
#acquisition-kpis {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 992px) {
    #acquisition-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    #acquisition-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
    #acquisition-kpis { grid-template-columns: 1fr; }
}
html[data-mantine-color-scheme="dark"] .acquisition-title-name {
    color: var(--gm-text);
}
html[data-mantine-color-scheme="dark"] .acquisition-title-sub,
html[data-mantine-color-scheme="dark"] .acquisition-kpi-sub {
    color: var(--gm-muted);
}
/* Links stay blue (a brighter shade) on dark. */
html[data-mantine-color-scheme="dark"] .acquisition-title-name a,
html[data-mantine-color-scheme="dark"] .acquisition-title-sub a {
    color: #4493f8;
}
html[data-mantine-color-scheme="dark"] .acquisition-title-name a:hover,
html[data-mantine-color-scheme="dark"] .acquisition-title-sub a:hover {
    color: #6cb6ff;
}

/* Keyword chart y-axis labels are clickable links with a hardcoded near-black
   color — lighten them on dark so they're readable on the dark card. */
html[data-mantine-color-scheme="dark"] #acquisition-keyword-graph .ytick text,
html[data-mantine-color-scheme="dark"] #acquisition-keyword-graph .ytick text a,
html[data-mantine-color-scheme="dark"] #acquisition-keyword-graph .ytick text tspan {
    fill: #cbd5e1 !important;
}

/* Chart grid lines are baked light (#d8dee4); dim them on dark across every tab
   so they sit subtly against the dark cards instead of glaring. */
html[data-mantine-color-scheme="dark"] .js-plotly-plot .gridlayer path {
    stroke: #334155 !important;
}

/* Show Query / Show Request modals: the SQL is a highlight.js code block baked
   light — give it a dark background + light text on dark theme. */
html[data-mantine-color-scheme="dark"] .mantine-Modal-content pre,
html[data-mantine-color-scheme="dark"] .mantine-Modal-content code {
    background-color: #0f172a !important;
    border-radius: 8px;
}
html[data-mantine-color-scheme="dark"] .mantine-Modal-content pre,
html[data-mantine-color-scheme="dark"] .mantine-Modal-content pre *,
html[data-mantine-color-scheme="dark"] .mantine-Modal-content code,
html[data-mantine-color-scheme="dark"] .mantine-Modal-content code * {
    color: #e2e8f0 !important;
}

/* Scatter chart point labels are the same hardcoded-dark keyword links —
   lighten them on dark so they're readable on the dark card. */
html[data-mantine-color-scheme="dark"] #acquisition-scatter-graph .textpoint text,
html[data-mantine-color-scheme="dark"] #acquisition-scatter-graph .textpoint tspan,
html[data-mantine-color-scheme="dark"] #acquisition-scatter-graph .textpoint a {
    fill: #cbd5e1 !important;
}

/* AI Acquisition Score gauge: the value + axis ticks are baked dark — lighten
   all of the gauge's text on dark so it's readable. */
html[data-mantine-color-scheme="dark"] #acquisition-gauge-graph text {
    fill: #e2e8f0 !important;
}

/* Bar-tip value labels (keyword chart + acquirability bars) are baked dark —
   lighten them on dark so they're readable on the dark card. */
html[data-mantine-color-scheme="dark"] #acquisition-keyword-graph .bartext,
html[data-mantine-color-scheme="dark"] #acquisition-acquirability-graph .bartext {
    fill: #e2e8f0 !important;
}

/* Acquisition results cards: spacing is handled by the flex gap on the section
   wrapper + the gap on each chart row, so zero the cards' own margin to keep the
   vertical rhythm uniform (incl. stacked cards on small screens). */
#acquisition-keyword-section .chart-container {
    margin-bottom: 0;
}

/* ---- Keyword Detail table (HTML, so fully styleable + themeable) ---- */
/* Scroll the table inside its own card on small screens instead of widening
   (and horizontally scrolling) the whole page. */
#acquisition-table-graph {
    overflow-x: auto;
}
.acquisition-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.acquisition-detail-table th {
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: #6b7280;
    text-transform: uppercase;
    padding: 10px 14px;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}
.acquisition-detail-table td {
    padding: 10px 14px;
    color: #374151;
    border-bottom: 1px solid #eef1f4;
}
.acquisition-detail-table tbody tr:last-child td {
    border-bottom: none;
}
.acquisition-detail-table tbody tr {
    transition: background 0.12s ease;
}
.acquisition-detail-table tbody tr:hover {
    background: #f9fafb;
}
/* Right-align the numeric columns (Rank, Volume, Organic dls/mo). */
.acquisition-detail-table th:not(:first-child),
.acquisition-detail-table td:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.acquisition-detail-table td:first-child {
    font-weight: 600;
    color: #1f2328;
}

/* Dark theme */
html[data-mantine-color-scheme="dark"] .acquisition-detail-table th {
    color: var(--gm-muted);
    border-bottom-color: #334155;
}
html[data-mantine-color-scheme="dark"] .acquisition-detail-table td {
    color: #cbd5e1;
    border-bottom-color: #2a3344;
}
html[data-mantine-color-scheme="dark"] .acquisition-detail-table td:first-child {
    color: var(--gm-text);
}
html[data-mantine-color-scheme="dark"] .acquisition-detail-table tbody tr:hover {
    background: rgba(99, 102, 241, 0.10);
}

/* ---- Similar Apps list (HTML) ---- */
.acquisition-similar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.acquisition-similar-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 4px;
    border-bottom: 1px solid #eef1f4;
}
.acquisition-similar-item:last-child {
    border-bottom: none;
}
.acquisition-similar-name {
    font-size: 14px;
    font-weight: 600;
    color: #0969da;
    text-decoration: none;
    transition: color 0.12s ease;
}
.acquisition-similar-name:hover {
    color: #0550ae;
    text-decoration: underline;
}
.acquisition-similar-id {
    font-size: 12px;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.acquisition-similar-empty {
    padding: 11px 4px;
    color: #6b7280;
    font-size: 14px;
}

/* Dark theme */
html[data-mantine-color-scheme="dark"] .acquisition-similar-item {
    border-bottom-color: #2a3344;
}
html[data-mantine-color-scheme="dark"] .acquisition-similar-name {
    color: #4493f8;
}
html[data-mantine-color-scheme="dark"] .acquisition-similar-name:hover {
    color: #6cb6ff;
}
html[data-mantine-color-scheme="dark"] .acquisition-similar-id,
html[data-mantine-color-scheme="dark"] .acquisition-similar-empty {
    color: var(--gm-muted);
}