/*
 * Red Sea Hub campaign-manager correction layer.
 *
 * Scoped to Listeo's dashboard-template pages by the account-skin loader.
 * It changes presentation and owned navigation chrome only; campaign form
 * values, listing selection, submission, payment and account permissions are
 * deliberately left to Listeo.
 */

/* The dashboard header is a full-width application bar.  Clear only the
 * leftover Listeo framing that created the narrow light rectangle/strip. */
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 {
    background: var(--rsh-brand-sea-900) !important;
    border: 0 !important;
    box-shadow: none !important;
    max-width: none !important;
}

body.rsh-account-skin #header-container.dashboard,
body.rsh-account-skin #header-container.dashboard #header {
    min-height: 84px !important;
    width: 100% !important;
}

body.rsh-account-skin #header-container.dashboard #header .container {
    align-items: center !important;
    display: flex !important;
    min-height: 84px !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
}

body.rsh-account-skin #header-container.dashboard #header .left-side,
body.rsh-account-skin #header-container.dashboard #logo,
body.rsh-account-skin #header-container.dashboard #logo > a {
    align-items: center !important;
    display: flex !important;
    height: 84px !important;
    justify-content: flex-start !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

body.rsh-account-skin #header-container.dashboard #logo {
    min-width: 0 !important;
    padding: 0 24px !important;
}

body.rsh-account-skin #header-container.dashboard #logo img {
    display: block !important;
    height: auto !important;
    max-height: 56px !important;
    max-width: min(220px, 62vw) !important;
    object-fit: contain !important;
    object-position: left center !important;
    width: auto !important;
}

body.rsh-account-skin #header-container.dashboard::before,
body.rsh-account-skin #header-container.dashboard::after,
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 {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* The native campaign template needs an explicit, compact dark surface. */
body.rsh-account-skin #dashboard .submit-page.submit-ad,
body.rsh-account-skin #dashboard .submit-page.submit-ad .add-listing-section,
body.rsh-account-skin #dashboard .submit-page.submit-ad .campaign-form-field,
body.rsh-account-skin #dashboard .submit-page.submit-ad .notification {
    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 .submit-page.submit-ad .add-listing-section {
    border-radius: 14px !important;
    margin-bottom: 20px !important;
    padding: 20px !important;
}

/* This is a form heading, not a navigation control.  Keep it readable and
 * avoid letting its words split into a tall three-line block on phones. */
body.rsh-account-skin #dashboard .submit-page.submit-ad .add-listing-headline,
body.rsh-account-skin #dashboard .submit-page.submit-ad .add-listing-headline h3 {
    align-items: center !important;
    color: var(--rsh-brand-ink) !important;
    display: inline-flex !important;
    gap: 9px !important;
    line-height: 1.2 !important;
    margin: 0 0 16px !important;
    max-width: 100% !important;
    white-space: nowrap !important;
}

body.rsh-account-skin #dashboard .submit-page.submit-ad .add-listing-headline h3 i {
    flex: 0 0 auto;
}

body.rsh-account-skin #dashboard .submit-page.submit-ad label,
body.rsh-account-skin #dashboard .submit-page.submit-ad .select2-selection__rendered,
body.rsh-account-skin #dashboard .submit-page.submit-ad .chosen-single span {
    color: var(--rsh-brand-ink) !important;
}

/* A visually clear, keyboard-visible mobile navigation control. */
body.rsh-account-skin .dashboard-responsive-nav-trigger {
    cursor: pointer;
    touch-action: manipulation;
}

body.rsh-account-skin .dashboard-responsive-nav-trigger:focus-visible,
body.rsh-account-skin #dashboard .dashboard-nav a:focus-visible {
    box-shadow: inset 0 0 0 3px var(--rsh-brand-focus) !important;
    outline: 0 !important;
}

@media (max-width: 767px) {
    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 #logo,
    body.rsh-account-skin #header-container.dashboard #logo > a {
        height: 72px !important;
        min-height: 72px !important;
    }

    body.rsh-account-skin #header-container.dashboard #logo {
        padding: 0 20px !important;
    }

    body.rsh-account-skin #header-container.dashboard #logo img {
        max-height: 46px !important;
        max-width: min(190px, 60vw) !important;
    }

    body.rsh-account-skin #dashboard .submit-page.submit-ad .add-listing-section {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 16px !important;
    }

    body.rsh-account-skin #dashboard .submit-page.submit-ad .add-listing-headline h3 {
        font-size: 16px !important;
        letter-spacing: 0 !important;
        margin-bottom: 14px !important;
    }
}