/*
 * Red Sea Hub account skin - unified account and commerce surfaces.
 *
 * This is a final, scoped layer over the existing account skin. It applies
 * only when the plugin adds .rsh-account-skin to Listeo dashboard templates
 * or WooCommerce's cart/checkout/account conditionals. No actions, form
 * values, payment providers, booking state or vendor permissions are touched.
 */

body.rsh-account-skin,
body.rsh-account-skin #wrapper,
body.rsh-account-skin #content,
body.rsh-account-skin .dashboard-content,
body.rsh-account-skin .dashboard-content-container,
body.rsh-account-skin .woocommerce-page #main,
body.rsh-account-skin .woocommerce-page .container {
    background-color: var(--rsh-brand-sea-950) !important;
    color: var(--rsh-brand-ink) !important;
}

/* One compact dashboard header with an unboxed, single logo. */
body.rsh-account-skin #header-container.dashboard,
body.rsh-account-skin #header-container.dashboard #header,
body.rsh-account-skin #header-container.dashboard #header .container,
body.rsh-account-skin #header-container.dashboard #header .left-side,
body.rsh-account-skin #header-container.dashboard #header::before,
body.rsh-account-skin #header-container.dashboard #header::after,
body.rsh-account-skin #header-container.dashboard::before,
body.rsh-account-skin #header-container.dashboard::after {
    background-color: var(--rsh-brand-sea-900) !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

body.rsh-account-skin #header-container.dashboard #logo,
body.rsh-account-skin #header-container.dashboard #logo a,
body.rsh-account-skin #header-container.dashboard #logo a.dashboard-logo {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.rsh-account-skin #header-container.dashboard #logo > a:not(.dashboard-logo) {
    display: none !important;
}

body.rsh-account-skin #header-container.dashboard #logo img {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    object-fit: contain !important;
}

/* Common elevated panels, including Listeo, WooCommerce and Dokan-style
 * store shells.  This deliberately avoids generic body/div selectors. */
body.rsh-account-skin #dashboard .dashboard-list-box,
body.rsh-account-skin #dashboard .dashboard-list-box-static,
body.rsh-account-skin #dashboard .dashboard-stat,
body.rsh-account-skin #dashboard .dashboard-chart-full,
body.rsh-account-skin #dashboard .dashboard-calendar-view,
body.rsh-account-skin #dashboard .dashboard-stats-box,
body.rsh-account-skin #dashboard .booking-requests-filter,
body.rsh-account-skin #dashboard .booking-request,
body.rsh-account-skin #dashboard .booking-request-list,
body.rsh-account-skin #dashboard .messages-container,
body.rsh-account-skin #dashboard .messages-container-inner,
body.rsh-account-skin #dashboard .messages-inbox,
body.rsh-account-skin #dashboard .add-listing-section,
body.rsh-account-skin #dashboard .listing-type-container,
body.rsh-account-skin #dashboard .listing-type,
body.rsh-account-skin #dashboard .wallet-content,
body.rsh-account-skin #dashboard .payouts-method,
body.rsh-account-skin #dashboard .payouts-method > ul,
body.rsh-account-skin #dashboard .payouts-method > ul > li,
body.rsh-account-skin #dashboard .payment-tab,
body.rsh-account-skin #dashboard .payment-tab-content,
body.rsh-account-skin #dashboard .campaign,
body.rsh-account-skin #dashboard .coupon,
body.rsh-account-skin .woocommerce .woocommerce-notices-wrapper,
body.rsh-account-skin .woocommerce .woocommerce-cart-form,
body.rsh-account-skin .woocommerce .cart-collaterals,
body.rsh-account-skin .woocommerce .woocommerce-checkout-review-order,
body.rsh-account-skin .woocommerce .woocommerce-billing-fields,
body.rsh-account-skin .woocommerce .woocommerce-shipping-fields,
body.rsh-account-skin .woocommerce .woocommerce-account,
body.rsh-account-skin .dokan-dashboard .dokan-dashboard-content,
body.rsh-account-skin .dokan-dashboard .dokan-dashboard-wrap,
body.rsh-account-skin .dokan-dashboard .dokan-dashboard-content article,
body.rsh-account-skin .dokan-dashboard .dokan-panel,
body.rsh-account-skin .dokan-dashboard .dokan-w6,
body.rsh-account-skin .dokan-store-wrap,
body.rsh-account-skin .store-dashboard,
body.rsh-account-skin .store-panel,
body.rsh-account-skin .vendor-dashboard {
    background: var(--rsh-brand-sea-900) !important;
    background-image: none !important;
    color: var(--rsh-brand-ink) !important;
    border-color: var(--rsh-brand-line) !important;
}

body.rsh-account-skin #dashboard .dashboard-list-box > h4,
body.rsh-account-skin #dashboard .dashboard-list-box > h4.gray,
body.rsh-account-skin #dashboard .dashboard-list-box > h4.submit-section-header,
body.rsh-account-skin #dashboard .messages-headline,
body.rsh-account-skin #dashboard .add-listing-headline,
body.rsh-account-skin #dashboard .dashboard-list-box > ul,
body.rsh-account-skin #dashboard .dashboard-list-box > form,
body.rsh-account-skin #dashboard .dashboard-list-box > ul > li,
body.rsh-account-skin #dashboard .booking-request,
body.rsh-account-skin #dashboard .calendar-wrapper,
body.rsh-account-skin #dashboard .fc-view-container,
body.rsh-account-skin .woocommerce table,
body.rsh-account-skin .woocommerce table th,
body.rsh-account-skin .woocommerce table td,
body.rsh-account-skin .dokan-dashboard table,
body.rsh-account-skin .dokan-dashboard table th,
body.rsh-account-skin .dokan-dashboard table td,
body.rsh-account-skin .dokan-dashboard .dokan-form-group,
body.rsh-account-skin .dokan-dashboard .dokan-settings-content,
body.rsh-account-skin .dokan-dashboard .dokan-product-listing,
body.rsh-account-skin .dokan-dashboard .dokan-orders-content,
body.rsh-account-skin .dokan-dashboard .dokan-withdraw-content {
    background-color: transparent !important;
    color: var(--rsh-brand-ink) !important;
    border-color: var(--rsh-brand-line) !important;
}

body.rsh-account-skin #dashboard h1,
body.rsh-account-skin #dashboard h2,
body.rsh-account-skin #dashboard h3,
body.rsh-account-skin #dashboard h4,
body.rsh-account-skin #dashboard h5,
body.rsh-account-skin #dashboard label,
body.rsh-account-skin .woocommerce h1,
body.rsh-account-skin .woocommerce h2,
body.rsh-account-skin .woocommerce h3,
body.rsh-account-skin .woocommerce h4,
body.rsh-account-skin .woocommerce label,
body.rsh-account-skin .dokan-dashboard h1,
body.rsh-account-skin .dokan-dashboard h2,
body.rsh-account-skin .dokan-dashboard h3,
body.rsh-account-skin .dokan-dashboard label {
    color: var(--rsh-brand-ink) !important;
}

body.rsh-account-skin #dashboard p,
body.rsh-account-skin #dashboard small,
body.rsh-account-skin #dashboard time,
body.rsh-account-skin #dashboard .listing-details,
body.rsh-account-skin .woocommerce p,
body.rsh-account-skin .woocommerce small,
body.rsh-account-skin .dokan-dashboard p,
body.rsh-account-skin .dokan-dashboard .dokan-product-title {
    color: var(--rsh-brand-muted) !important;
}

/* Inputs and their enhanced equivalents. Popovers can be rendered outside
 * #dashboard, so the body qualifier intentionally remains on those rules. */
body.rsh-account-skin #dashboard input:not([type="checkbox"]):not([type="radio"]),
body.rsh-account-skin #dashboard textarea,
body.rsh-account-skin #dashboard select,
body.rsh-account-skin .woocommerce input:not([type="checkbox"]):not([type="radio"]),
body.rsh-account-skin .woocommerce textarea,
body.rsh-account-skin .woocommerce select,
body.rsh-account-skin .dokan-dashboard input:not([type="checkbox"]):not([type="radio"]),
body.rsh-account-skin .dokan-dashboard textarea,
body.rsh-account-skin .dokan-dashboard select,
body.rsh-account-skin .chosen-container-single .chosen-single,
body.rsh-account-skin .select2-container--default .select2-selection--single,
body.rsh-account-skin .select2-container--default .select2-selection--multiple,
body.rsh-account-skin .select2-container--classic .select2-selection--single,
body.rsh-account-skin .daterangepicker,
body.rsh-account-skin .ui-datepicker,
body.rsh-account-skin .chosen-drop,
body.rsh-account-skin .select2-dropdown,
body.rsh-account-skin .pac-container {
    background: var(--rsh-brand-sea-950) !important;
    color: var(--rsh-brand-ink) !important;
    border-color: var(--rsh-brand-line) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28) !important;
}

body.rsh-account-skin input::placeholder,
body.rsh-account-skin textarea::placeholder,
body.rsh-account-skin .select2-container--default .select2-selection__placeholder,
body.rsh-account-skin .chosen-container-single .chosen-default,
body.rsh-account-skin .pac-item,
body.rsh-account-skin .pac-item-query {
    color: var(--rsh-brand-muted) !important;
    opacity: 1 !important;
}

body.rsh-account-skin .chosen-container .chosen-results li,
body.rsh-account-skin .select2-results__option,
body.rsh-account-skin .ui-datepicker td a,
body.rsh-account-skin .ui-datepicker th,
body.rsh-account-skin .daterangepicker td,
body.rsh-account-skin .daterangepicker th,
body.rsh-account-skin .daterangepicker .calendar-table,
body.rsh-account-skin .daterangepicker .calendar-table table,
body.rsh-account-skin .daterangepicker .ranges li,
body.rsh-account-skin .pac-item {
    background: transparent !important;
    color: var(--rsh-brand-ink) !important;
    border-color: var(--rsh-brand-line) !important;
}

body.rsh-account-skin .chosen-container .chosen-results li.highlighted,
body.rsh-account-skin .select2-results__option--highlighted[aria-selected],
body.rsh-account-skin .ui-datepicker td a:hover,
body.rsh-account-skin .daterangepicker td.available:hover,
body.rsh-account-skin .daterangepicker .ranges li:hover,
body.rsh-account-skin .pac-item:hover {
    background: var(--rsh-brand-sea-800) !important;
    color: #fff !important;
}

/* TinyMCE and its iframe cannot inherit colors; skin the owned chrome and
 * avoid touching any external map canvas or its legal attribution. */
body.rsh-account-skin #dashboard .mce-tinymce,
body.rsh-account-skin #dashboard .mce-container,
body.rsh-account-skin #dashboard .mce-toolbar-grp,
body.rsh-account-skin #dashboard .mce-statusbar,
body.rsh-account-skin #dashboard .wp-editor-container,
body.rsh-account-skin #dashboard .wp-editor-wrap,
body.rsh-account-skin #dashboard .map,
body.rsh-account-skin #dashboard .map-container,
body.rsh-account-skin #dashboard .leaflet-container {
    background: var(--rsh-brand-sea-900) !important;
    border-color: var(--rsh-brand-line) !important;
}

body.rsh-account-skin #dashboard .mce-ico,
body.rsh-account-skin #dashboard .mce-btn button,
body.rsh-account-skin #dashboard .mce-btn button span,
body.rsh-account-skin #dashboard .mce-menubtn button span {
    color: var(--rsh-brand-ink) !important;
}

/* Category imagery retains its original artwork but no longer sits in a white
 * rectangular frame when the source includes transparent padding. */
body.rsh-account-skin #dashboard .listing-type img,
body.rsh-account-skin #dashboard .listing-type-icon img,
body.rsh-account-skin #dashboard .listing-type-image img {
    background: transparent !important;
    box-shadow: none !important;
    object-fit: contain !important;
}

body.rsh-account-skin #dashboard .listing-type-icon,
body.rsh-account-skin #dashboard .listing-type-image {
    background: transparent !important;
    overflow: hidden;
}

/* FullCalendar's view has several nested white canvases by default. */
body.rsh-account-skin #dashboard .fc,
body.rsh-account-skin #dashboard .fc table,
body.rsh-account-skin #dashboard .fc-scrollgrid,
body.rsh-account-skin #dashboard .fc-theme-standard td,
body.rsh-account-skin #dashboard .fc-theme-standard th,
body.rsh-account-skin #dashboard .fc-theme-standard .fc-scrollgrid,
body.rsh-account-skin #dashboard .fc .fc-daygrid-day,
body.rsh-account-skin #dashboard .fc .fc-timegrid-slot,
body.rsh-account-skin #dashboard .fc .fc-col-header-cell {
    background: var(--rsh-brand-sea-900) !important;
    color: var(--rsh-brand-ink) !important;
    border-color: var(--rsh-brand-line) !important;
}

body.rsh-account-skin #dashboard .fc .fc-toolbar-title,
body.rsh-account-skin #dashboard .fc .fc-col-header-cell-cushion,
body.rsh-account-skin #dashboard .fc .fc-daygrid-day-number,
body.rsh-account-skin #dashboard .fc .fc-button {
    color: var(--rsh-brand-ink) !important;
}

body.rsh-account-skin #dashboard .fc .fc-button {
    background: var(--rsh-brand-sea-800) !important;
    border-color: var(--rsh-brand-line) !important;
}

body.rsh-account-skin #dashboard .fc .fc-button:hover,
body.rsh-account-skin #dashboard .fc .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--rsh-brand-accent) !important;
    border-color: var(--rsh-brand-accent) !important;
}

/* Footer and login bridge stay dark on the approved account pages. */
body.rsh-account-skin #footer,
body.rsh-account-skin footer,
body.rsh-account-skin #footer .container,
body.rsh-account-skin footer .container,
body.rsh-account-skin .login,
body.rsh-account-skin .login-form,
body.rsh-account-skin .woocommerce-form-login,
body.rsh-account-skin .woocommerce-form-register {
    background: var(--rsh-brand-sea-900) !important;
    color: var(--rsh-brand-ink) !important;
    border-color: var(--rsh-brand-line) !important;
}

body.rsh-account-skin #footer a,
body.rsh-account-skin footer a,
body.rsh-account-skin #footer p,
body.rsh-account-skin footer p,
body.rsh-account-skin .login a {
    color: var(--rsh-brand-muted) !important;
}

body.rsh-account-skin #footer a:hover,
body.rsh-account-skin footer a:hover {
    color: var(--rsh-brand-focus) !important;
}

@media (max-width: 767px) {
    body.rsh-account-skin #dashboard .dashboard-content,
    body.rsh-account-skin .woocommerce-page #main,
    body.rsh-account-skin .dokan-dashboard .dokan-dashboard-content {
        min-width: 0 !important;
        overflow-x: clip;
    }

    body.rsh-account-skin #dashboard .booking-request,
    body.rsh-account-skin #dashboard .dashboard-list-box,
    body.rsh-account-skin .woocommerce .woocommerce-cart-form,
    body.rsh-account-skin .woocommerce .cart-collaterals,
    body.rsh-account-skin .woocommerce .woocommerce-checkout-review-order,
    body.rsh-account-skin .dokan-dashboard .dokan-panel {
        min-width: 0 !important;
        overflow-wrap: anywhere;
    }

    body.rsh-account-skin #dashboard .fc .fc-toolbar {
        align-items: flex-start;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    body.rsh-account-skin #dashboard .fc .fc-toolbar-chunk {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        max-width: 100%;
    }

    body.rsh-account-skin .woocommerce table.shop_table,
    body.rsh-account-skin .dokan-dashboard table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}