/* =============================================================
   Kinwi: Date range dropdown styling — high specificity overrides
   Covers: header, preset/custom tabs, preset items, compare-to
   heading, previous period/year buttons, update button.
   2026-05-27 rev4 — correct WooCommerce component class names
   ============================================================= */

/* 1. "SELECT A DATE RANGE" header — Lora upload font */
html body .woocommerce-filters-date__text,
html body #dokan-analytics-app .woocommerce-filters-date__text {
    font-family: 'Lora upload', 'Lora', serif !important;
    font-style: normal !important;
    letter-spacing: 0.05em !important;
}

/* (Removed: CSS text-based ▼ arrow on date text — was creating a duplicate arrow.
   The original WooCommerce SVG chevron ::after on the button is used instead.) */

/* Date range dropdown chevron arrow — force the native WooCommerce ::after
   SVG-mask chevron to ALWAYS be visible and properly centred at ALL sizes.
   Uses maximum selector specificity to override Dokan, WooCommerce, and Elementor.
   Ancestor chain: .woocommerce-filters-filter > .components-dropdown > button */
html body .woocommerce-filters-filter .components-dropdown button.components-button.woocommerce-dropdown-button::after,
html body #dokan-analytics-app .woocommerce-filters-filter .components-dropdown button.components-button.woocommerce-dropdown-button::after,
html body .components-dropdown button.components-button.woocommerce-dropdown-button::after {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    background: #ffffff !important;
    -webkit-mask-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20%2F%3E%3C%2Fsvg%3E") !important;
    mask-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20%2F%3E%3C%2Fsvg%3E") !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    pointer-events: none !important;
}

/* Ensure the button has right-padding so text does not overlap the arrow */
html body .woocommerce-filters-filter .components-dropdown button.components-button.woocommerce-dropdown-button,
html body #dokan-analytics-app .woocommerce-filters-filter .components-dropdown button.components-button.woocommerce-dropdown-button,
html body .components-dropdown button.components-button.woocommerce-dropdown-button {
    position: relative !important;
    padding-right: 44px !important;
}

/* When open, rotate the chevron 180° */
html body .woocommerce-filters-filter .components-dropdown button.components-button.woocommerce-dropdown-button.is-open::after,
html body #dokan-analytics-app .woocommerce-filters-filter .components-dropdown button.components-button.woocommerce-dropdown-button.is-open::after,
html body .components-dropdown button.components-button.woocommerce-dropdown-button.is-open::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* Arrow colour: always white to contrast against green button background */
html body .woocommerce-filters-filter .components-dropdown button.components-button.woocommerce-dropdown-button:hover::after,
html body .woocommerce-filters-filter .components-dropdown button.components-button.woocommerce-dropdown-button:active::after,
html body .woocommerce-filters-filter .components-dropdown button.components-button.woocommerce-dropdown-button.is-open::after,
html body #dokan-analytics-app .woocommerce-filters-filter .components-dropdown button.components-button.woocommerce-dropdown-button:hover::after,
html body #dokan-analytics-app .woocommerce-filters-filter .components-dropdown button.components-button.woocommerce-dropdown-button:active::after,
html body #dokan-analytics-app .woocommerce-filters-filter .components-dropdown button.components-button.woocommerce-dropdown-button.is-open::after,
html body .components-dropdown button.components-button.woocommerce-dropdown-button:hover::after,
html body .components-dropdown button.components-button.woocommerce-dropdown-button:active::after,
html body .components-dropdown button.components-button.woocommerce-dropdown-button.is-open::after {
    background: #ffffff !important;
}

/* 2. Presets / Custom tab buttons — 16px, spacing so they don't overlap */
html body .woocommerce-filters-date__tabs .components-tab-panel__tabs,
html body #dokan-analytics-app .woocommerce-filters-date__tabs .components-tab-panel__tabs {
    display: flex !important;
    gap: 8px !important;
    padding: 6px 8px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

html body .woocommerce-filters-date__tabs .components-tab-panel__tabs .components-button,
html body #dokan-analytics-app .woocommerce-filters-date__tabs .components-tab-panel__tabs .components-button {
    font-family: 'Lora upload', 'Lora', serif !important;
    font-size: 16px !important;
    padding: 8px 20px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    flex: 1 1 0 !important;
}

/* 3. Preset/Compare selection grid (dark grey bg, equal cells) */
html body .woocommerce-segmented-selection__container,
html body #dokan-analytics-app .woocommerce-segmented-selection__container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    padding: 6px !important;
    background-color: #c8c8c8 !important;
    border: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* 3b. Each selection item + its label wrapper stretches to fill grid cell */
html body .woocommerce-segmented-selection__container .woocommerce-segmented-selection__item,
html body #dokan-analytics-app .woocommerce-segmented-selection__container .woocommerce-segmented-selection__item {
    border: none !important;
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
}

html body .woocommerce-segmented-selection__container .woocommerce-segmented-selection__item > label,
html body #dokan-analytics-app .woocommerce-segmented-selection__container .woocommerce-segmented-selection__item > label {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

/* 3c. The label inside each item — light grey, uniform height, centred, Lora italic.
       Left padding 28px leaves room for the blue selection dot (::before) */
html body .woocommerce-segmented-selection__container .woocommerce-segmented-selection__label,
html body #dokan-analytics-app .woocommerce-segmented-selection__container .woocommerce-segmented-selection__label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
    padding: 0 12px 0 28px !important;
    position: relative !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    font-family: 'Lora upload', 'Lora', serif !important;
    font-style: italic !important;
    font-size: 15px !important;
    line-height: 1 !important;
    background-color: #f0f0f0 !important;
    border-radius: 3px !important;
}

/* 3d. Blue selection dot — force to left side of button */
html body .woocommerce-segmented-selection__container .woocommerce-segmented-selection__label:before,
html body #dokan-analytics-app .woocommerce-segmented-selection__container .woocommerce-segmented-selection__label:before {
    left: 10px !important;
    transform: translateY(-50%) !important;
}

@media (max-width: 300px) {
    html body .woocommerce-segmented-selection__container .woocommerce-segmented-selection__label,
    html body #dokan-analytics-app .woocommerce-segmented-selection__container .woocommerce-segmented-selection__label {
        font-size: 14px !important;
    }
}

@media (max-width: 280px) {
    html body .woocommerce-segmented-selection__container .woocommerce-segmented-selection__label,
    html body #dokan-analytics-app .woocommerce-segmented-selection__container .woocommerce-segmented-selection__label {
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 0 2px 0 14px !important;
    }

    html body .woocommerce-segmented-selection__container .woocommerce-segmented-selection__label:before,
    html body #dokan-analytics-app .woocommerce-segmented-selection__container .woocommerce-segmented-selection__label:before {
        left: 4px !important;
        width: 5px !important;
        height: 5px !important;
    }
}

/* =====================================================================
   Custom date range calendar — fix 320px popover constraint
   ===================================================================== */

/* Override the hardcoded 320px popover width so the calendar has room */
html body .woocommerce-filters-date__content .components-popover__content,
html body #dokan-analytics-app .woocommerce-filters-date__content .components-popover__content {
    width: auto !important;
    min-width: 320px !important;
    max-width: 100vw !important;
}

/* Push popover down so toggle arrow stays visible and clickable */
html body .woocommerce-filters-date__content:not(.is-mobile) .components-popover__content,
html body #dokan-analytics-app .woocommerce-filters-date__content:not(.is-mobile) .components-popover__content {
    margin-top: 8px !important;
}

/* Mobile: restore hidden close button (header was collapsed to height:0) — shrunk to save vertical space */
html body .woocommerce-filters-date__content.is-mobile .components-popover__header,
html body #dokan-analytics-app .woocommerce-filters-date__content.is-mobile .components-popover__header {
    height: 28px !important;
    min-height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 8px !important;
    border-bottom: 1px solid #e2e4e7 !important;
    background-color: #fff !important;
    overflow: visible !important;
    position: relative !important;
}

html body .woocommerce-filters-date__content.is-mobile .components-popover__close.components-button,
html body #dokan-analytics-app .woocommerce-filters-date__content.is-mobile .components-popover__close.components-button {
    transform: none !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    z-index: 100 !important;
}

html body .woocommerce-filters-date__content.is-mobile .components-popover__close.components-button svg,
html body #dokan-analytics-app .woocommerce-filters-date__content.is-mobile .components-popover__close.components-button svg {
    width: 16px !important;
    height: 16px !important;
}

/* Kinwi: Auto-adaptive Calendar Inputs Layout (Absolute Shrink-Wrap)
   Instead of fragile media queries or flexbox column shrink-wrap (which bugs out in Safari),
   we use an inline-block wrapper that shrink-wraps solely to the DayPicker calendar grid.
   The inputs row is positioned absolutely at the top, perfectly matching the wrapper's width,
   naturally centering the "to" text over the month (1-month view) or dividing line (2-month view). */

/* 1. Make the calendar wrapper shrink-wrap its contents */
html body .woocommerce-calendar {
    display: inline-block !important; /* inline-block + min-content is bulletproof in all browsers */
    width: min-content !important;
    height: auto !important;
    margin: 0 auto !important;
    position: relative !important;
    padding-top: 64px !important; /* Reserve exact space for the absolute inputs row */
}

/* 2. Ensure DayPicker wrapper only takes exactly as much width as the DayPicker */
html body .woocommerce-calendar__react-dates {
    width: min-content !important;
    margin: 0 auto !important;
}
html body .DayPicker {
    margin: 0 auto !important;
}

/* 3. The inputs row sits absolutely at the top, stretching to match the wrapper exactly */
html body .woocommerce-filters-date__content .woocommerce-calendar__inputs,
html body #headlessui-portal-root .woocommerce-calendar__inputs,
html body .components-popover__content .woocommerce-calendar__inputs,
html body #dokan-analytics-app .woocommerce-filters-date__content .woocommerce-calendar__inputs {
    display: flex !important;
    align-items: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important; 
    max-width: none !important;
    margin: 0 !important;
    padding: 12px 14px !important; /* Uniform base padding */
    box-sizing: border-box !important;
    height: 64px !important;
    z-index: 10 !important;
}

/* 4. The "to" text sits exactly in the middle automatically */
html body .woocommerce-filters-date__content .woocommerce-calendar__inputs-to,
html body #headlessui-portal-root .woocommerce-calendar__inputs-to,
html body .components-popover__content .woocommerce-calendar__inputs-to,
html body #dokan-analytics-app .woocommerce-filters-date__content .woocommerce-calendar__inputs-to {
    flex: 0 0 auto !important;
    padding: 0 12px !important;
    position: static !important;
    transform: none !important;
}

/* 5. The input blocks absorb exactly 50% of the remaining space each, centering perfectly */
html body .woocommerce-filters-date__content .woocommerce-calendar__input,
html body #headlessui-portal-root .woocommerce-calendar__input,
html body .components-popover__content .woocommerce-calendar__input,
html body #dokan-analytics-app .woocommerce-filters-date__content .woocommerce-calendar__input {
    flex: 1 1 0% !important;
    min-width: 0 !important; /* Allows flex item to shrink below browser defaults */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

/* 6. Allow the actual text boxes to shrink below default browser sizes */
html body .woocommerce-filters-date__content .woocommerce-calendar__input-text, 
html body #headlessui-portal-root .woocommerce-calendar__input-text, 
html body .components-popover__content .woocommerce-calendar__input-text,
html body #dokan-analytics-app .woocommerce-filters-date__content .woocommerce-calendar__input-text {
    min-width: 0 !important;
    width: 95px !important;
    max-width: none !important;
    font-size: 13px !important;
    padding: 8px 0 !important;
    text-align: left !important;
    flex: 0 0 auto !important;
}

/* Kinwi: Full-height vertical separator between two side-by-side calendar months.
   Uses ::before pseudo-element because the wrapper has transparent background
   (box-shadow on transparent bg is invisible). The pseudo-element draws a solid
   2px line from top to bottom of the wrapper.
   Applies to all dashboard calendars (Reports, Statement via HeadlessUI, etc.). */
html body .woocommerce-filters-date__content .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) + .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden),
html body #dokan-analytics-app .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) + .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden),
html body .components-popover__content .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) + .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden),
html body #headlessui-portal-root .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) + .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) {
    position: relative !important;
}

html body .woocommerce-filters-date__content .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) + .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden)::before,
html body #dokan-analytics-app .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) + .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden)::before,
html body .components-popover__content .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) + .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden)::before,
html body #headlessui-portal-root .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) + .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden)::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    background: #ccc !important;
    z-index: 1 !important;
}

/* Hide the separator on small screens where only 1 month is visible */
@media (max-width: 600px) {
    html body .woocommerce-filters-date__content .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) + .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden)::before,
    html body #dokan-analytics-app .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) + .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden)::before,
    html body .components-popover__content .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) + .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden)::before,
    html body #headlessui-portal-root .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) + .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden)::before {
        display: none !important;
    }
}

/* Kinwi: Normalize calendar day borders for a professional, consistent grid look */
html body .woocommerce-filters-date__content .CalendarMonth_table,
html body #dokan-analytics-app .woocommerce-filters-date__content .CalendarMonth_table,
html body .components-popover__content .CalendarMonth_table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

html body .woocommerce-filters-date__content .CalendarDay,
html body #dokan-analytics-app .woocommerce-filters-date__content .CalendarDay,
html body .components-popover__content .CalendarDay {
    border: 1px solid #e0e0e0 !important;
    background-clip: padding-box !important;
}

/* Calendar icon — sits beside the text via flexbox, not absolute positioning.
   translateY(1px) nudges icon to match the text's visual centre (offset by input padding). */
html body .woocommerce-filters-date__content .woocommerce-calendar__input .calendar-icon, html body #headlessui-portal-root .woocommerce-calendar__input .calendar-icon, html body .components-popover__content .woocommerce-calendar__input .calendar-icon,
html body #dokan-analytics-app .woocommerce-filters-date__content .woocommerce-calendar__input .calendar-icon {
    position: static !important;
    flex-shrink: 0 !important;
    order: -1 !important;
    transform: translateY(1px) !important;
}

html body .woocommerce-filters-date__content .woocommerce-calendar__input .calendar-icon svg, html body #headlessui-portal-root .woocommerce-calendar__input .calendar-icon svg, html body .components-popover__content .woocommerce-calendar__input .calendar-icon svg,
html body #dokan-analytics-app .woocommerce-filters-date__content .woocommerce-calendar__input .calendar-icon svg {
    width: 14px !important;
    height: 14px !important;
}

/* ≤ 400px: smaller text on very narrow screens */
@media (max-width: 400px) {
    html body .woocommerce-filters-date__content .woocommerce-calendar__input-text, html body #headlessui-portal-root .woocommerce-calendar__input-text, html body .components-popover__content .woocommerce-calendar__input-text,
    html body #dokan-analytics-app .woocommerce-filters-date__content .woocommerce-calendar__input-text {
        font-size: 12px !important;
        padding: 6px 0 !important;
    }

    html body .woocommerce-filters-date__content .woocommerce-calendar__input .calendar-icon svg, html body #headlessui-portal-root .woocommerce-calendar__input .calendar-icon svg, html body .components-popover__content .woocommerce-calendar__input .calendar-icon svg,
    html body #dokan-analytics-app .woocommerce-filters-date__content .woocommerce-calendar__input .calendar-icon svg {
        width: 12px !important;
        height: 12px !important;
    }
}

/* ≤ 360px: Scale calendar to fit on mobile screens using CSS zoom.
   Unlike transform: scale, CSS zoom changes actual layout dimensions so
   react-dates click targets remain perfectly accurate. All font sizes,
   icon sizes, and spacing scale proportionally — no manual overrides needed. */
@media (max-width: 360px) {
    /* Make the popover take full viewport width */
    html body .woocommerce-filters-date__content .components-popover__content,
    html body #dokan-analytics-app .woocommerce-filters-date__content .components-popover__content {
        min-width: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        transform: none !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Centre the inline-block calendar within its parent */
    html body .woocommerce-filters-date__content .components-tab-panel__tab-content,
    html body #dokan-analytics-app .woocommerce-filters-date__content .components-tab-panel__tab-content,
    html body .components-popover__content .components-tab-panel__tab-content {
        text-align: center !important;
    }

    /* Scale the entire calendar down to fit.
       319px × 0.92 = 294px — fits comfortably in 300-360px screens */
    html body .woocommerce-calendar {
        zoom: 0.92 !important;
    }
}

/* ≤ 320px: More aggressive zoom for narrow phones */
@media (max-width: 320px) {
    html body .woocommerce-calendar {
        zoom: 0.82 !important; /* 319px × 0.82 = 262px */
    }
}

/* ≤ 280px: Maximum zoom for the narrowest screens */
@media (max-width: 280px) {
    html body .woocommerce-calendar {
        zoom: 0.72 !important; /* 319px × 0.72 = 230px */
    }
}

/* Short viewport (landscape mobile): fix popover to viewport and make it scrollable.
   The popover normally positions itself below the trigger button, but in landscape
   the viewport height is only ~360px, so the popover overflows off the bottom.
   Fix: anchor it to the top of the viewport with position: fixed so the entire
   calendar, Compare To, and Reset/Update buttons are reachable via scroll. */
@media (max-height: 500px) {
    /* iOS/Safari fix: if the parent has a transform, position: fixed on the child
       is relative to the parent, not the viewport. We must fix the parent. */
    html body .woocommerce-filters-date__content.components-popover,
    html body #dokan-analytics-app .woocommerce-filters-date__content.components-popover {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        transform: none !important;
        z-index: 3000010 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        background: #fff !important; /* Move background to the outer wrapper so it covers everything */
    }

    html body .woocommerce-filters-date__content .components-popover__content,
    html body #dokan-analytics-app .woocommerce-filters-date__content .components-popover__content {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        height: auto !important;
        max-height: none !important;
        width: 100vw !important;
        max-width: 100vw !important;
        flex: 1 !important; /* Flex grow to fill remaining space under the header */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transform: none !important;
        box-sizing: border-box !important;
        padding-bottom: 24px !important;
    }

    /* Force the react-dates transition container to auto height so it doesn't clip the bottom calendar row */
    html body .woocommerce-filters-date__content .DayPicker_transitionContainer,
    html body #dokan-analytics-app .woocommerce-filters-date__content .DayPicker_transitionContainer {
        height: auto !important;
        min-height: 340px !important;
    }

    html body .woocommerce-filters-date__content .components-tab-panel__tab-content,
    html body #dokan-analytics-app .woocommerce-filters-date__content .components-tab-panel__tab-content {
        overflow-y: visible !important;
    }
}

/* Kinwi: Apply Lora upload font to all text within the date picker calendar dropdown */
html body .components-popover__content .DayPicker,
html body #headlessui-portal-root .DayPicker,
html body .components-popover__content .DayPicker *,
html body #headlessui-portal-root .DayPicker *,
html body .components-popover__content .woocommerce-calendar__react-dates,
html body #headlessui-portal-root .woocommerce-calendar__react-dates,
html body .components-popover__content .woocommerce-calendar__react-dates *,
html body #headlessui-portal-root .woocommerce-calendar__react-dates *,
html body .components-popover__content .woocommerce-filters-date__content-controls,
html body #headlessui-portal-root .woocommerce-filters-date__content-controls,
html body .components-popover__content .woocommerce-filters-date__content-controls *,
html body #headlessui-portal-root .woocommerce-filters-date__content-controls *,
html body .woocommerce-filters-date__content .components-popover__content,
html body .woocommerce-filters-date__content #headlessui-portal-root,
html body .woocommerce-filters-date__content .components-popover__content *,
html body .woocommerce-filters-date__content #headlessui-portal-root * {
    font-family: 'Lora upload', 'Lora', serif !important;
}

/* 4. "COMPARE TO" heading — Lora upload font */
html body .woocommerce-filters-date__content-controls .woocommerce-filters-date__text,
html body #dokan-analytics-app .woocommerce-filters-date__content-controls .woocommerce-filters-date__text {
    font-family: 'Lora upload', 'Lora', serif !important;
    font-style: normal !important;
    letter-spacing: 0.05em !important;
}

/* 6. "Update" button — #00967d green, black text, vertically centred, 16px */
html body .woocommerce-filters-date__button-group .woocommerce-filters-date__button,
html body #dokan-analytics-app .woocommerce-filters-date__button-group .woocommerce-filters-date__button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Lora upload', 'Lora', serif !important;
    font-size: 16px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    padding: 12px 24px !important;
    height: auto !important;
    box-sizing: border-box !important;
    background-color: #00967d !important;
    color: #000 !important;
    border: none !important;
    border-radius: 3px !important;
}




/* =============================================================================
   Kinwi: Dokan Dashboard Analytics - Font and Button Fixes
   ============================================================================= */

/* (Removed: display:none on ::after — the original WooCommerce chevron is now
   forced visible via the high-specificity rules in the date range section above.) */

/* 1. Performance and Charts headings - 18px Gabriela font */
html body .woocommerce-section-header .woocommerce-section-header__title.woocommerce-section-header__header-item,
html body #dokan-analytics-app .woocommerce-section-header .woocommerce-section-header__title.woocommerce-section-header__header-item,
html body article.woocommerce-layout__main .woocommerce-section-header__title.woocommerce-section-header__header-item,
html body #dokan-analytics-app article.woocommerce-layout__main .woocommerce-section-header__title.woocommerce-section-header__header-item {
    font-family: 'Gabriela upload', 'Gabriela', serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
}

/* 2. Subheadings (Total sales, Net sales, Orders, etc.) - 18px Lora font */
html body .components-card__header .components-truncate.components-text,
html body #dokan-analytics-app .components-card__header .components-truncate.components-text,
html body article.woocommerce-layout__main .components-truncate.components-text,
html body #dokan-analytics-app article.woocommerce-layout__main .components-truncate.components-text {
    font-family: 'Lora upload', 'Lora', serif !important;
    font-size: 18px !important;
    font-weight: normal !important;
}

/* 3. Chart buttons - evenly spaced, visible down to 260px */
html body .woocommerce-section-header__actions.woocommerce-section-header__header-item,
html body #dokan-analytics-app .woocommerce-section-header__actions.woocommerce-section-header__header-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

html body .woocommerce-chart__types,
html body #dokan-analytics-app .woocommerce-chart__types {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

html body .woocommerce-chart__type-button,
html body #dokan-analytics-app .woocommerce-chart__type-button {
    flex: 0 0 auto !important;
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .woocommerce-ellipsis-menu__toggle,
html body #dokan-analytics-app .woocommerce-ellipsis-menu__toggle {
    flex: 0 0 auto !important;
    min-width: 28px !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 4. Center body content on smaller screen sizes */
@media (max-width: 768px) {
    html body .dokan-dashboard-content,
    html body #dokan-analytics-app .dokan-dashboard-content {
        margin: 0 auto !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }
}

@media (max-width: 480px) {
    html body .dokan-dashboard-content,
    html body #dokan-analytics-app .dokan-dashboard-content {
        padding: 0 5px !important;
    }
}

/* =============================================================================
   Kinwi: Additional Responsive Fixes - 2026-06-03 (Revised)
   Issues: 1) Keep titles and buttons inline (not stacked), 2) Body centering,
   3) Buttons/text fit within viewport
   ============================================================================= */

/* 1. Grid layout for section headers to ensure robust alignment on all screen sizes */
html body .woocommerce-section-header,
html body #dokan-analytics-app .woocommerce-section-header {
    display: grid !important;
    grid-template-columns: auto 1fr 28px !important;
    grid-template-areas: "title line menu" !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 16px !important;
    min-height: auto !important;
    padding: 5px 3px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

html body .woocommerce-section-header.has-interval-select,
html body #dokan-analytics-app .woocommerce-section-header.has-interval-select {
    grid-template-rows: auto auto !important;
    grid-template-areas: 
        "title line menu"
        "actions actions actions" !important;
}

html body .woocommerce-section-header__title,
html body #dokan-analytics-app .woocommerce-section-header__title,
html body .woocommerce-section-header__title.woocommerce-section-header__header-item,
html body #dokan-analytics-app .woocommerce-section-header__title.woocommerce-section-header__header-item {
    grid-area: title !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

html body .woocommerce-section-header hr,
html body #dokan-analytics-app .woocommerce-section-header hr {
    grid-area: line !important;
    margin: 0 !important;
    min-width: 10px !important;
    width: 100% !important;
    display: block !important;
    border: none !important;
    border-top: 1px solid #e0e0e0 !important;
}

html body .woocommerce-section-header__menu,
html body #dokan-analytics-app .woocommerce-section-header__menu {
    grid-area: menu !important;
    position: static !important;
    margin: 0 !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .woocommerce-section-header__actions,
html body #dokan-analytics-app .woocommerce-section-header__actions,
html body .woocommerce-section-header__actions.woocommerce-section-header__header-item,
html body #dokan-analytics-app .woocommerce-section-header__actions.woocommerce-section-header__header-item {
    grid-area: actions !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    justify-content: flex-end !important;
    display: flex !important;
}

/* 2. Make body truly centered and content fit within viewport */
@media (max-width: 800px) {
    html body {
        overflow-x: hidden !important;
    }
    
    html body .dokan-dashboard-wrap {
        padding: 0 !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    html body .dokan-dash-sidebar,
    html body #dokan-analytics-app .dokan-dash-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        right: auto !important;
        background-color: #000000 !important;
    }
    
    html body .dokan-dashboard-content,
    html body #dokan-analytics-app .dokan-dashboard-content {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 auto !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    html body .woocommerce-layout,
    html body #dokan-analytics-app .woocommerce-layout {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    html body #woocommerce-layout__primary,
    html body .woocommerce-layout__primary,
    html body #dokan-analytics-app .woocommerce-layout__primary {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    html body .woocommerce-layout__main,
    html body #dokan-analytics-app .woocommerce-layout__main {
        max-width: 100vw !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    html body .woocommerce-dashboard-section,
    html body #dokan-analytics-app .woocommerce-dashboard-section {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 480px) {
    html body .dokan-dashboard-content,
    html body #dokan-analytics-app .dokan-dashboard-content {
        padding: 0 8px !important;
    }
    
    html body .woocommerce-section-header,
    html body #dokan-analytics-app .woocommerce-section-header {
        padding: 8px 5px !important;
        gap: 8px !important;
    }
    
    html body .components-card__header,
    html body #dokan-analytics-app .components-card__header,
    html body .components-card__body,
    html body #dokan-analytics-app .components-card__body {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media (max-width: 360px) {
    html body .dokan-dashboard-content,
    html body #dokan-analytics-app .dokan-dashboard-content {
        padding: 0 5px !important;
    }
    
    html body .woocommerce-section-header,
    html body #dokan-analytics-app .woocommerce-section-header {
        padding: 5px 3px !important;
        gap: 5px !important;
    }
}

@media (max-width: 260px) {
    html body .dokan-dashboard-content,
    html body #dokan-analytics-app .dokan-dashboard-content {
        padding: 0 3px !important;
    }
    
    html body .woocommerce-section-header__title.woocommerce-section-header__header-item,
    html body #dokan-analytics-app .woocommerce-section-header__title.woocommerce-section-header__header-item {
        font-size: 16px !important;
    }
    
    html body .woocommerce-section-header__actions.woocommerce-section-header__header-item,
    html body #dokan-analytics-app .woocommerce-section-header__actions.woocommerce-section-header__header-item {
        gap: 3px !important;
    }
    
    html body .woocommerce-chart__type-button,
    html body #dokan-analytics-app .woocommerce-chart__type-button {
        min-width: 28px !important;
        width: 28px !important;
        height: 32px !important;
    }
    
    html body .woocommerce-ellipsis-menu__toggle,
    html body #dokan-analytics-app .woocommerce-ellipsis-menu__toggle {
        min-width: 28px !important;
        width: 28px !important;
        height: 28px !important;
    }
}

/* =============================================================================
   Kinwi: Dokan Dashboard Analytics Fixes - 2026-06-03
   Issues: 1) "No data" font size, 2) Full-width layout below 800px, 
   3) Line visibility at 960px, 4) "By day" button visibility
   ============================================================================= */

/* 1. Fix "No data for the selected date range" font size to 16px with Lora font */
html body .d3-chart__container .d3-chart__empty-message,
html body #dokan-analytics-app .d3-chart__container .d3-chart__empty-message,
html body div.dokan-dashboard-wrap div.dokan-dashboard-content article.dashboard-content-area div#dokan-analytics-app div.woocommerce-layout div#woocommerce-layout__primary div.woocommerce-layout__main div.customizable-dashboard div.woocommerce-dashboard-section div.woocommerce-dashboard__dashboard-charts div.woocommerce-dashboard__columns div.woocommerce-dashboard__chart-block-wrapper div.components-surface.components-card.woocommerce-dashboard__chart-block div.components-card__body.components-card-body div.woocommerce-chart div.woocommerce-chart__body.woocommerce-chart__body-column div.d3-chart__container div.d3-chart__empty-message,
html body #dokan-analytics-app div.woocommerce-layout div#woocommerce-layout__primary div.woocommerce-layout__main div.customizable-dashboard div.woocommerce-dashboard-section div.woocommerce-dashboard__dashboard-charts div.woocommerce-dashboard__columns div.woocommerce-dashboard__chart-block-wrapper div.components-surface.components-card.woocommerce-dashboard__chart-block div.components-card__body.components-card-body div.woocommerce-chart div.woocommerce-chart__body.woocommerce-chart__body-column div.d3-chart__container div.d3-chart__empty-message {
    font-size: 16px !important;
    font-family: 'Lora upload', 'Lora', serif !important;
    font-weight: normal !important;
}

/* 2. Full-width page layout for screens below 800px - ensure black background matches header */
@media (max-width: 800px) {
    html body .dokan-dash-sidebar,
    html body #dokan-analytics-app .dokan-dash-sidebar {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        background-color: #000000 !important;
    }
    
    html body .dokan-dashboard-content,
    html body #dokan-analytics-app .dokan-dashboard-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        margin: 0 auto !important;
    }
}



/* 4. Fix "By day" button text visibility on all screen sizes */
html body .woocommerce-chart__interval-select .components-select-control__input,
html body #dokan-analytics-app .woocommerce-chart__interval-select .components-select-control__input,
html body .components-select-control__input,
html body #dokan-analytics-app .components-select-control__input {
    font-size: 14px !important;
    color: #333333 !important;
    min-width: 100px !important;
    padding: 6px 32px 6px 12px !important;
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important;
    border-radius: 4px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@media (max-width: 480px) {
    html body .woocommerce-chart__interval-select .components-select-control__input,
    html body #dokan-analytics-app .woocommerce-chart__interval-select .components-select-control__input,
    html body .components-select-control__input,
    html body #dokan-analytics-app .components-select-control__input {
        font-size: 13px !important;
        min-width: 80px !important;
        padding: 4px 28px 4px 8px !important;
    }
}

/* =============================================================================
   Kinwi: Hide WooCommerce Admin "Not allowed" error flash on vendor dashboard.

   When navigating to /vendor-dashboard/new/#/analytics from the old dashboard,
   the WooCommerce Admin React app briefly renders a "Not allowed" / "no match"
   error before the Dokan React app mounts.  This CSS hides that flash
   immediately so the vendor never sees it.
   ============================================================================= */
.woocommerce-layout__no-match {
    display: none !important;
}

/* Also hide the WC Admin header that shows "Not allowed" title */
.dokan-vendor-analytics-wrapper .woocommerce-layout__header,
#dokan-analytics-app > .woocommerce-layout > .woocommerce-layout__header {
    display: none !important;
}

/* =============================================================================
   Kinwi: Hide Promotions and Keyword tabs from Store Stats.

   These tabs require Google Ads integration which Kinwi vendors do not use,
   so they always show empty data.  The tabs are the 5th and 6th children of
   the tab list inside .dokan-vendor-analytics-wrapper.
   ============================================================================= */
.dokan-vendor-analytics-wrapper [role="tablist"] > [role="tab"]:nth-child(5),
.dokan-vendor-analytics-wrapper [role="tablist"] > [role="tab"]:nth-child(6) {
    display: none !important;
}





/* Fix calendar popovers falling under Superfly's invisible 40px touch zone on the left edge */
html body #headlessui-portal-root,
html body .components-popover,
html body .components-popover__content {
    z-index: 3000005 !important;
}

/* =============================================================================
   Kinwi: Robust section header fix for ≤960px.
   WooCommerce's own CSS at 960px switches the header layout, hides the <hr>
   line, and repositions the ellipsis. We re-assert our grid layout so future
   WC updates can't break it. Placed at end of file for maximum cascade priority.
   ============================================================================= */

@media (max-width: 960px) {
    /* Kinwi: Re-assert grid layout that WC's 960px breakpoint overrides */
    html body .woocommerce-section-header,
    html body #dokan-analytics-app .woocommerce-section-header {
        display: grid !important;
        grid-template-columns: auto 1fr 28px !important;
        grid-template-areas: "title line menu" !important;
        align-items: center !important;
        column-gap: 8px !important;
        row-gap: 16px !important;
    }

    /* Kinwi: Charts header has actions row — keep 2-row grid */
    html body .woocommerce-section-header.has-interval-select,
    html body #dokan-analytics-app .woocommerce-section-header.has-interval-select {
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "title line menu"
            "actions actions actions" !important;
    }

    /* Kinwi: Force hr line visible — WC hides it at 960px */
    html body .woocommerce-section-header hr,
    html body #dokan-analytics-app .woocommerce-section-header hr {
        display: block !important;
        visibility: visible !important;
        grid-area: line !important;
        margin: 0 !important;
        min-width: 10px !important;
        width: 100% !important;
        border: none !important;
        border-top: 1px solid #e0e0e0 !important;
    }

    /* Kinwi: Title stays in its grid area */
    html body .woocommerce-section-header__title,
    html body #dokan-analytics-app .woocommerce-section-header__title {
        grid-area: title !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Kinwi: Ellipsis stays in top-right corner */
    html body .woocommerce-section-header__menu,
    html body #dokan-analytics-app .woocommerce-section-header__menu {
        grid-area: menu !important;
        position: static !important;
        margin: 0 !important;
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Kinwi: Actions (By day, chart buttons) on second row, right-aligned */
    html body .woocommerce-section-header__actions,
    html body #dokan-analytics-app .woocommerce-section-header__actions {
        grid-area: actions !important;
        display: flex !important;
        justify-content: flex-end !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
}