/*
 * Red Sea Hub account skin - standard Listeo account surfaces.
 * Preview-only. This covers customer account routes; vendor/store dashboard
 * pages, Products, Orders, Basket, Withdrawal and Store Settings are excluded.
 */

/* Shared panels and section headers: bookings, messages, account lists and
 * the Choose Listing Type step all use this common sea surface. */
body.rsh-account-skin.rsh-account-skin-preview #dashboard .dashboard-list-box,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .dashboard-list-box h4,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .dashboard-list-box h4.gray,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .dashboard-list-box ul,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .dashboard-list-box > ul > li,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .dashboard-list-box-static,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .messages-container,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .messages-headline,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .messages-container-inner,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .messages-container-inner .messages-inbox,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .messages-container-inner .message-content,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .messages-inbox ul,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .messages-inbox ul li,
body.rsh-account-skin.rsh-account-skin-preview #dashboard #add-listing .add-listing-section,
body.rsh-account-skin.rsh-account-skin-preview #dashboard #add-listing .add-listing-headline,
body.rsh-account-skin.rsh-account-skin-preview #dashboard #add-listing .listing-type-container {
    background-color: 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.rsh-account-skin-preview #dashboard .dashboard-list-box h4,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .dashboard-list-box h4.gray,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .messages-headline,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .messages-headline h4,
body.rsh-account-skin.rsh-account-skin-preview #dashboard #add-listing .add-listing-headline h3,
body.rsh-account-skin.rsh-account-skin-preview #dashboard #add-listing .listing-type h3 {
    color: var(--rsh-brand-ink) !important;
}

body.rsh-account-skin.rsh-account-skin-preview #dashboard .dashboard-list-box h4,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .messages-headline,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .messages-container-inner .messages-inbox,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .messages-inbox ul li,
body.rsh-account-skin.rsh-account-skin-preview #dashboard #add-listing .add-listing-headline {
    border-color: var(--rsh-brand-line) !important;
}

body.rsh-account-skin.rsh-account-skin-preview #dashboard .messages-inbox ul li.unread,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .messages-inbox ul li:hover,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .messages-inbox ul li.active-message,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .dashboard-list-box > ul > li:hover,
body.rsh-account-skin.rsh-account-skin-preview #dashboard #add-listing .listing-type:hover {
    background-color: var(--rsh-brand-sea-800) !important;
}

body.rsh-account-skin.rsh-account-skin-preview #dashboard .messages-inbox .message-by,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .messages-inbox .message-by p,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .message-by-headline span,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .message-by-headline h5 {
    color: var(--rsh-brand-muted) !important;
}

/* My Bookings' date control is a compact field, not an alert: make it dark
 * and readable while keeping its picker behaviour unchanged. */
body.rsh-account-skin.rsh-account-skin-preview #dashboard .booking-requests-filter,
body.rsh-account-skin.rsh-account-skin-preview #dashboard #booking-date-range,
body.rsh-account-skin.rsh-account-skin-preview #dashboard #chart-date-range,
body.rsh-account-skin.rsh-account-skin-preview #dashboard input#date-picker {
    background-color: var(--rsh-brand-sea-800) !important;
    color: var(--rsh-brand-ink) !important;
    border-color: var(--rsh-brand-line) !important;
}

body.rsh-account-skin.rsh-account-skin-preview #dashboard #booking-date-range span::after,
body.rsh-account-skin.rsh-account-skin-preview #dashboard #chart-date-range span::after {
    color: var(--rsh-brand-accent) !important;
}

/* Wallet payout method choices. Inline white backgrounds from Listeo are
 * overridden here without changing the form, values or payout behaviour. */
body.rsh-account-skin.rsh-account-skin-preview #dashboard .payouts-method > ul,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .payouts-method > ul > li,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .payouts-method .payouts-method-content,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .payouts-method .payment,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .payouts-method .payment-tab,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .payouts-method .payment-tab-trigger,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .payouts-method .payment-tab-content {
    background-color: 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.rsh-account-skin-preview #dashboard .payouts-method .payment-tab-trigger label,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .payouts-method .payment-tab-content label,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .payouts-method .payment-tab-content,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .payouts-method .payment-tab-content p {
    color: var(--rsh-brand-ink) !important;
}

body.rsh-account-skin.rsh-account-skin-preview #dashboard .payouts-method input[type="radio"] {
    accent-color: var(--rsh-brand-accent);
}

body.rsh-account-skin.rsh-account-skin-preview #dashboard .payouts-method input[type="email"],
body.rsh-account-skin.rsh-account-skin-preview #dashboard .payouts-method textarea {
    background-color: var(--rsh-brand-sea-950) !important;
    color: var(--rsh-brand-ink) !important;
    border-color: var(--rsh-brand-line) !important;
}

/* Retain semantic warning/success/error colours; only their container edges
 * are blended into the account skin. */
body.rsh-account-skin.rsh-account-skin-preview #dashboard .notification,
body.rsh-account-skin.rsh-account-skin-preview #dashboard .notice {
    border-color: var(--rsh-brand-line);
}