* {
    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;
}

.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;
}

/* 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); }
}

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