/*
 * Dealer dashboard CSS — applies to both endpoints:
 *   /my-account/my-listings/   (.ddl-dash)
 *   /my-account/contribute/    (.ddl-contribute)
 *
 * Visual language matches the marketplace landing page:
 *   navy hero, gold accents, Poppins font, light grey content sections.
 *   But hero is compact (this is a daily-use surface, not a marketing pitch).
 *
 * Sections:
 *   1. Page layout overrides (theme + WC My Account wrapper width
 *      and visual constraint reset)
 *   2. Root + utilities
 *   3. Hero (compact)
 *   4. Notices
 *   5. Stat tiles
 *   6. Cards (shared card style for add/listings/contribute sections)
 *   7. Segmented control (Single / Bulk)
 *   8. Forms
 *   9. Listings table
 *  10. Buttons + badges
 *  11. Coffee CTA strip
 *  12. Contribute page specifics
 *  13. Mobile responsive
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ── 1. Page layout overrides ───────────────────────────── */
/* WC My Account wraps content in narrow constraints. Reset on our
   endpoint so the hero + cards can use available width. */

body.ddl-dealer-account-page .woocommerce-MyAccount-content,
body.ddl-dealer-account-page .woocommerce-MyAccount-content > * {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Reset the white-box-with-padding default WC applies to account content
   so our hero can extend edge-to-edge of the content column. */
body.ddl-dealer-account-page .woocommerce-MyAccount-content {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* ── 2. Root + utilities ────────────────────────────────── */

.ddl-dash, .ddl-contribute {
    --navy: #1a2744;
    --navy-soft: #2c326b;
    --gold: #f5c518;
    --gold-deep: #d4a813;
    --blue: #2E3687;
    --light: #f7f8fb;
    --light-2: #eef0f6;
    --border: #e5e7eb;
    --text-dark: #1a2744;
    --text-body: #3a3f55;
    --text-muted: #64748b;
    --subtitle: #c7cbe6;
    --green: #16a34a;
    --green-light: #d4edda;
    --amber: #f59e0b;
    --amber-light: #fef3c7;
    --red: #dc2626;
    --red-light: #fee2e2;

    line-height: 1.5;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;
    color: var(--text-body);
}
.ddl-dash *, .ddl-contribute * { box-sizing: border-box; }

/* ── 3. Hero ─────────────────────────────────────────────── */

.ddl-dash__hero, .ddl-contribute__hero {
    background: linear-gradient(135deg, var(--navy) 0%, #232f55 100%) !important;
    padding: 32px 28px !important;
    border-radius: 14px !important;
    margin-bottom: 20px !important;
    position: relative;
    overflow: hidden;
}
.ddl-dash__hero::before, .ddl-contribute__hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold) 0%, transparent 70%);
}

.ddl-dash__hero-inner,
.ddl-contribute__inner {
    display: block !important;
    color: #fff;
    max-width: 720px;
    text-align: left;
}

.ddl-dash__eyebrow, .ddl-contribute__eyebrow {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--gold) !important;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin-bottom: 6px !important;
}

.ddl-dash__h1, .ddl-contribute__h1 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 8px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.ddl-dash__sub, .ddl-contribute__lede {
    font-size: 14.5px !important;
    color: #d6dbef !important;
    margin: 0 !important;
    line-height: 1.55 !important;
    font-weight: 300 !important;
    max-width: 680px;
}
.ddl-dash__sub a, .ddl-contribute__lede a {
    color: var(--gold) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
.ddl-dash__sub a:hover, .ddl-contribute__lede a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

.ddl-dash__trust-badge {
    display: inline-block !important;
    background: var(--gold) !important;
    color: var(--navy) !important;
    padding: 4px 12px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

/* ── 4. Notices ──────────────────────────────────────────── */

.ddl-dash__notices { margin-bottom: 16px; }
.ddl-dash__notice {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.5;
    border-left: 3px solid;
}
.ddl-dash__notice--success {
    background: var(--green-light);
    color: #155724;
    border-left-color: var(--green);
}
.ddl-dash__notice--error {
    background: var(--red-light);
    color: #7f1d1d;
    border-left-color: var(--red);
}

/* ── 5. Stat tiles ───────────────────────────────────────── */

.ddl-dash__stats {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}
.ddl-dash__stat {
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 18px 20px !important;
    text-align: left !important;
    position: relative;
    transition: box-shadow .15s;
}
.ddl-dash__stat:hover {
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.ddl-dash__stat--warn {
    border-color: var(--amber) !important;
    background: var(--amber-light) !important;
}
.ddl-dash__stat-value {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    line-height: 1.1 !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.ddl-dash__stat--warn .ddl-dash__stat-value { color: #92400e !important; }
.ddl-dash__stat-label {
    font-size: 11px !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin-top: 6px !important;
    font-weight: 500 !important;
}
.ddl-dash__stat--warn .ddl-dash__stat-label { color: #b45309 !important; }

/* ── 6. Cards ────────────────────────────────────────────── */

.ddl-dash__card {
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
    overflow: hidden;
}
.ddl-dash__card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 22px !important;
    border-bottom: 1px solid var(--border) !important;
    flex-wrap: wrap;
    gap: 12px;
}
.ddl-dash__card-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--navy) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}
.ddl-dash__card-count {
    font-size: 12px;
    color: var(--text-muted);
    background: var(--light);
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: 500;
}

/* ── 7. Segmented control ────────────────────────────────── */

.ddl-dash__seg {
    display: inline-flex !important;
    background: var(--light) !important;
    border-radius: 8px !important;
    padding: 3px !important;
    gap: 2px !important;
}
.ddl-dash__seg-btn {
    background: transparent !important;
    border: none !important;
    padding: 7px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    font-family: inherit !important;
    transition: background-color .12s, color .12s;
}
.ddl-dash__seg-btn:hover { color: var(--navy) !important; }
.ddl-dash__seg-btn.is-active {
    background: #fff !important;
    color: var(--navy) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
    font-weight: 600 !important;
}

/* ── 8. Forms ────────────────────────────────────────────── */

.ddl-dash__panel { padding: 22px !important; }
.ddl-dash__form-grid {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr auto !important;
    gap: 14px !important;
    align-items: end !important;
}
.ddl-dash__field { display: block !important; }
.ddl-dash__field--full { display: block !important; width: 100% !important; }
.ddl-dash__field--submit { align-self: end !important; }
.ddl-dash__field-label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--navy) !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}
.ddl-dash__panel input[type="text"],
.ddl-dash__panel input[type="number"],
.ddl-dash__panel textarea {
    width: 100% !important;
    padding: 11px 14px !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    background: #fff !important;
    color: var(--text-dark) !important;
    box-sizing: border-box !important;
    transition: border-color .12s, box-shadow .12s;
}
.ddl-dash__panel input:focus,
.ddl-dash__panel textarea:focus {
    outline: none !important;
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 3px rgba(46, 54, 135, 0.10) !important;
}
.ddl-dash__panel textarea {
    resize: vertical !important;
    min-height: 140px !important;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace !important;
    font-size: 13px !important;
}
.ddl-dash__form-help {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    margin: 12px 0 0 !important;
    line-height: 1.55 !important;
}
.ddl-dash__form-help code {
    background: var(--light-2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--navy);
    border: 1px solid var(--border);
}
.ddl-dash__form-submit { margin-top: 14px; text-align: right; }

/* ── 9. Listings table ───────────────────────────────────── */

.ddl-dash__table-wrap { overflow-x: auto; }
.ddl-dash__table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: #fff !important;
}
.ddl-dash__table thead th {
    background: var(--light) !important;
    color: var(--text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    text-align: left !important;
    padding: 12px 18px !important;
    border-bottom: 1px solid var(--border) !important;
}
.ddl-dash__th-actions { text-align: right !important; }
.ddl-dash__table tbody td {
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: 14px !important;
    color: var(--text-body) !important;
    vertical-align: top !important;
}
.ddl-dash__table tbody tr:last-child td { border-bottom: none !important; }
.ddl-dash__table tbody tr:hover { background: #fafbfd !important; }
.ddl-dash__row--stale { background: #fffbeb !important; }
.ddl-dash__row--sold { opacity: 0.65; }
.ddl-dash__td-actions { text-align: right !important; white-space: nowrap; }
.ddl-dash__td-actions form { margin: 0 0 0 4px; display: inline-block; }
.ddl-dash__plate {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace !important;
    font-size: 15px !important;
    color: var(--navy) !important;
    letter-spacing: 0.5px;
    font-weight: 600 !important;
}
.ddl-dash__dim { color: #a7aaad; }

.ddl-dash__status {
    display: inline-block !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    background: var(--light-2) !important;
    color: var(--text-body) !important;
    letter-spacing: 0.2px;
}
.ddl-dash__status--live {
    background: var(--green-light) !important;
    color: #155724 !important;
}
.ddl-dash__status--awaiting-approval {
    background: var(--amber-light) !important;
    color: #856404 !important;
}
.ddl-dash__status--sold {
    background: var(--light-2) !important;
    color: var(--text-muted) !important;
}

.ddl-dash__row-flag {
    font-size: 11px !important;
    color: var(--text-muted) !important;
    margin-top: 6px !important;
    line-height: 1.4 !important;
}
.ddl-dash__row-flag--warn {
    color: #92400e !important;
    background: var(--amber-light) !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    border-left: 3px solid var(--amber) !important;
    font-weight: 500 !important;
    display: inline-block !important;
}

/* ── 10. Buttons + badges ────────────────────────────────── */

.ddl-dash__btn {
    display: inline-block !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: 1px solid var(--border) !important;
    background: #fff !important;
    color: var(--text-body) !important;
    transition: all .12s !important;
    line-height: 1.3 !important;
}
.ddl-dash__btn:hover {
    border-color: var(--navy) !important;
    color: var(--navy) !important;
}
.ddl-dash__btn--primary {
    background: var(--navy) !important;
    color: #fff !important;
    border-color: var(--navy) !important;
}
.ddl-dash__btn--primary:hover {
    background: #0f1729 !important;
    border-color: #0f1729 !important;
    color: #fff !important;
}
.ddl-dash__btn--small {
    padding: 6px 12px !important;
    font-size: 12px !important;
}
.ddl-dash__btn--danger {
    color: var(--red) !important;
    border-color: var(--red-light) !important;
}
.ddl-dash__btn--danger:hover {
    background: var(--red) !important;
    color: #fff !important;
    border-color: var(--red) !important;
}
.ddl-dash__btn--ghost {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    color: #fff !important;
}
.ddl-dash__btn--ghost:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.7) !important;
    color: #fff !important;
}

/* ── 11. Coffee CTA strip ────────────────────────────────── */

.ddl-dash__coffee-cta {
    background: linear-gradient(135deg, var(--navy) 0%, #232f55 100%) !important;
    border-radius: 12px !important;
    padding: 20px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin-top: 12px !important;
    color: #fff !important;
    flex-wrap: wrap;
}
.ddl-dash__coffee-text { flex: 1 1 auto; }
.ddl-dash__coffee-text strong {
    display: block !important;
    color: var(--gold) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
}
.ddl-dash__coffee-text span {
    color: #d6dbef !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* ── Empty state ─────────────────────────────────────────── */

.ddl-dash__card--empty .ddl-dash__empty {
    padding: 56px 32px !important;
    text-align: center !important;
}
.ddl-dash__empty-icon { font-size: 38px; margin-bottom: 12px; opacity: 0.5; }
.ddl-dash__empty h3 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 18px !important;
    color: var(--navy) !important;
    margin: 0 0 8px !important;
    font-weight: 600 !important;
}
.ddl-dash__empty p { font-size: 14px !important; color: var(--text-muted) !important; margin: 0 !important; }

/* ── 12. Contribute page ─────────────────────────────────── */

.ddl-contribute__body { padding-top: 8px; }
.ddl-contribute__body-grid {
    display: grid !important;
    grid-template-columns: 1.7fr 1fr !important;
    gap: 24px !important;
    margin-top: 0 !important;
    color: var(--text-body) !important;
    align-items: start !important;
}
.ddl-contribute__card {
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 30px !important;
}
.ddl-contribute__card-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    margin: 0 0 12px !important;
}
.ddl-contribute__card-help {
    font-size: 14.5px !important;
    color: var(--text-body) !important;
    line-height: 1.65 !important;
    margin: 0 0 22px !important;
}
.ddl-contribute__card-help em {
    color: var(--navy);
    font-style: italic;
}
.ddl-contribute__form {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
}
.ddl-contribute__input-wrap {
    position: relative;
}
.ddl-contribute__currency {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--navy) !important;
    pointer-events: none;
}
.ddl-contribute__input {
    width: 100% !important;
    padding: 14px 16px 14px 36px !important;
    border: 2px solid var(--border) !important;
    border-radius: 10px !important;
    font-size: 22px !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    color: var(--navy) !important;
    background: #fff !important;
    box-sizing: border-box !important;
    transition: border-color .12s;
}
.ddl-contribute__input:focus {
    outline: none !important;
    border-color: var(--blue) !important;
}
.ddl-contribute__btn {
    width: 100% !important;
    background: var(--gold) !important;
    color: var(--navy) !important;
    border: none !important;
    padding: 14px 22px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: background-color .12s !important;
}
.ddl-contribute__btn:hover {
    background: var(--gold-deep) !important;
}
.ddl-contribute__footnote {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    margin: 6px 0 0 !important;
    line-height: 1.5 !important;
}
.ddl-contribute__sidebar {
    background: var(--light) !important;
    border-radius: 12px !important;
    padding: 24px 26px !important;
    border: 1px solid var(--border) !important;
}
.ddl-contribute__side-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--navy) !important;
    margin: 0 0 6px !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.ddl-contribute__side-title:not(:first-child) { margin-top: 22px !important; }
.ddl-contribute__sidebar p {
    font-size: 13.5px !important;
    color: var(--text-body) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* ── 13. Mobile responsive ───────────────────────────────── */

@media (max-width: 960px) {
    .ddl-dash__stats { grid-template-columns: repeat(2, 1fr) !important; }
    .ddl-dash__form-grid {
        grid-template-columns: 1fr !important;
    }
    .ddl-dash__card-header { flex-direction: column; align-items: stretch !important; }
    .ddl-dash__seg { align-self: flex-start; }
    .ddl-dash__hero, .ddl-contribute__hero { padding: 24px 22px !important; }
    .ddl-dash__h1, .ddl-contribute__h1 { font-size: 24px !important; }

    .ddl-contribute__body-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 720px) {
    .ddl-dash__stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .ddl-dash__stat { padding: 14px 16px !important; }
    .ddl-dash__stat-value { font-size: 22px !important; }
    .ddl-dash__coffee-cta { flex-direction: column; align-items: flex-start !important; }

    /* Stack table cells on mobile. data-label attrs on each td become row labels. */
    .ddl-dash__table thead { display: none; }
    .ddl-dash__table, .ddl-dash__table tbody, .ddl-dash__table tr, .ddl-dash__table td {
        display: block !important;
        width: 100% !important;
    }
    .ddl-dash__table tr {
        border-bottom: 1px solid var(--border) !important;
        padding: 12px 16px !important;
    }
    .ddl-dash__table td {
        padding: 6px 0 !important;
        border-bottom: none !important;
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }
    .ddl-dash__table td::before {
        content: attr(data-label) !important;
        font-size: 11px !important;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--text-muted);
        font-weight: 600;
        flex-shrink: 0;
    }
    .ddl-dash__td-actions { justify-content: flex-end !important; flex-wrap: wrap; }
    .ddl-dash__td-actions::before { display: none; }
}

/* ── Enquiries page (/my-account/my-enquiries/) ────────────── */

.ddl-enq__count {
    font-size: 13px;
    color: #5a6178;
    margin: 18px 0 12px;
}

.ddl-enq__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ddl-enq__card {
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 12px;
    padding: 16px 18px;
}

.ddl-enq__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.ddl-enq__plate {
    font-family: 'CharlesWright', 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 16px;
    background: #fdd835;
    color: #111;
    border-radius: 6px;
    padding: 3px 12px;
    letter-spacing: .04em;
}

.ddl-enq__date {
    font-size: 12px;
    color: #8a90a4;
    white-space: nowrap;
}

.ddl-enq__buyer {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 14px;
}

.ddl-enq__buyer-name { font-weight: 600; color: #1a1f4e; }

.ddl-enq__contact {
    color: #3b5bdb !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(59, 91, 219, .3);
}
.ddl-enq__contact:hover { border-color: #3b5bdb; }

.ddl-enq__message {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: #3c4257;
    background: #f7f8fb;
    border-radius: 8px;
    padding: 10px 14px;
    white-space: pre-line;
}

.ddl-enq__card-foot { margin-top: 12px; }

.ddl-enq__reply {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #fff !important;
    background: #1a1f4e;
    padding: 8px 18px;
    border-radius: 999px;
    text-decoration: none !important;
    transition: background .2s;
}
.ddl-enq__reply:hover { background: #3b5bdb; }

.ddl-enq__empty {
    background: #fff;
    border: 1px dashed #cfd4e0;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    color: #5a6178;
    font-size: 14px;
    line-height: 1.7;
}
.ddl-enq__empty p { margin: 0 0 6px; }

.ddl-enq__empty-cta {
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
    color: #1a1f4e !important;
    text-decoration: none !important;
    border-bottom: 2px solid #fdd835;
}

.ddl-enq__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 22px 0 6px;
    font-size: 14px;
    color: #5a6178;
}
.ddl-enq__pagination a {
    font-weight: 600;
    color: #1a1f4e !important;
    text-decoration: none !important;
}
.ddl-enq__pagination a:hover { color: #3b5bdb !important; }

/* ============================================================
   DEALER DASHBOARD POLISH v2 (0.9.10)
   Professional pass over the My Listings surface to match the
   landing design language. Append-only overrides.
   ============================================================ */

.ddl-dash__hero {
    border-radius: 14px;
    background: linear-gradient(150deg, #1a1f4e 0%, #232a63 100%) !important;
}

/* Stats: landing tiles — bordered, centred, lift on hover. */
.ddl-dash__stats { gap: 14px !important; margin: 22px 0 !important; }

.ddl-dash__stat {
    border: 1px solid #e2e5ea !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 18px 12px !important;
    text-align: center;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.ddl-dash__stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 18, 53, .10);
    border-color: #cfd4e0;
}
.ddl-dash__stat-value {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #1a1f4e !important;
    line-height: 1.2 !important;
}
.ddl-dash__stat-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a90a4 !important;
    margin-top: 4px;
}
.ddl-dash__stat--warn {
    border-color: rgba(245, 197, 24, .8) !important;
    background: #fffdf4 !important;
}
.ddl-dash__stat--warn .ddl-dash__stat-value { color: #b45309 !important; }

/* Cards: consistent 14px radius, soft shadow, clear headers. */
.ddl-dash__card {
    border: 1px solid #e2e5ea !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(15, 18, 53, .05) !important;
    overflow: hidden;
}
.ddl-dash__card-header {
    padding: 18px 22px !important;
    border-bottom: 1px solid #eef0f6 !important;
    background: #fff;
}
.ddl-dash__card-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1f4e !important;
    letter-spacing: -0.01em;
    margin: 0 !important;
    position: relative;
    padding-left: 14px;
}
.ddl-dash__card-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 4px;
    border-radius: 4px;
    background: #fdd835;
}
.ddl-dash__card-count {
    font-size: 12px;
    font-weight: 600;
    color: #5a6178;
    background: #eef0f6;
    border-radius: 999px;
    padding: 4px 12px;
}

/* Segmented Single/Bulk control: mini version of the account tabs. */
.ddl-dash__seg {
    background: #eef0f6 !important;
    border-radius: 999px !important;
    padding: 4px !important;
    gap: 2px;
}
.ddl-dash__seg-btn {
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 7px 18px !important;
    color: #5a6178 !important;
    background: transparent !important;
    border: 0 !important;
    transition: background .2s, color .2s;
}
.ddl-dash__seg-btn.is-active {
    background: #1a1f4e !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(15, 18, 53, .2);
}

/* Form fields: calm inputs with a navy focus ring. */
.ddl-dash__field-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #5a6178 !important;
}
.ddl-dash__form input[type="text"],
.ddl-dash__form input[type="number"],
.ddl-dash__form textarea {
    border: 1px solid #d7dbe4 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    transition: border-color .2s, box-shadow .2s;
}
.ddl-dash__form input:focus,
.ddl-dash__form textarea:focus {
    border-color: #1a1f4e !important;
    box-shadow: 0 0 0 3px rgba(26, 31, 78, .12) !important;
    outline: none !important;
}

/* Buttons: brand pills. */
.ddl-dash__btn {
    border-radius: 999px !important;
    font-weight: 600 !important;
    transition: background .2s, color .2s, border-color .2s !important;
}
.ddl-dash__btn--primary {
    background: #d9342b !important;
    color: #fff !important;
    border: 0 !important;
    padding: 12px 26px !important;
}
.ddl-dash__btn--primary:hover { background: #b8251d !important; }
.ddl-dash__btn--danger:hover {
    background: #d9342b !important;
    color: #fff !important;
    border-color: #d9342b !important;
}

/* Listings table: professional data-table rhythm. */
.ddl-dash__table thead th {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a90a4 !important;
    background: #f7f8fb !important;
    border-bottom: 1px solid #e2e5ea !important;
    padding: 12px 16px !important;
}
.ddl-dash__table tbody td {
    padding: 14px 16px !important;
    border-bottom: 1px solid #eef0f6 !important;
    vertical-align: middle;
}
.ddl-dash__table tbody tr { transition: background .15s; }
.ddl-dash__table tbody tr:hover { background: #f7f8fb; }
.ddl-dash__table tbody tr:last-child td { border-bottom: 0 !important; }

.ddl-dash__plate {
    font-family: 'CharlesWright', 'Poppins', sans-serif;
    font-weight: 800;
    background: #fdd835;
    color: #111;
    border-radius: 6px;
    padding: 3px 12px;
    letter-spacing: .04em;
    display: inline-block;
}

.ddl-dash__status {
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .04em;
    padding: 4px 12px !important;
    text-transform: uppercase;
}


/* ============================================================
   DEALER DASHBOARD v2.1 (0.9.11) — visible-by-default pass
   The v2 block mostly styled populated/hover/focus states; this
   one changes what you see on an empty dashboard: KPI tiles that
   overlap the hero card, colour-coded numbers, a bolder hero,
   and a stronger active nav state. Appended last so equal-
   specificity !important rules here win the cascade.
   ============================================================ */

/* Hero: taller, room for the KPI row to overlap its bottom edge. */
.ddl-dash__hero {
    padding: 36px 32px 64px !important;
    margin-bottom: 0 !important;
}
.ddl-dash__h1 { font-size: 30px !important; letter-spacing: -0.01em; }
.ddl-dash__sub { max-width: 560px; }

/* KPI tiles: centred, floating over the hero, colour-coded. */
.ddl-dash__stats {
    margin: -34px 20px 26px !important;
    gap: 14px !important;
    position: relative;
    z-index: 2;
}
.ddl-dash__stat {
    text-align: center !important;
    padding: 20px 12px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e5ea !important;
    box-shadow: 0 10px 28px rgba(15, 18, 53, .12) !important;
    transition: transform .18s, box-shadow .18s !important;
}
.ddl-dash__stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(15, 18, 53, .16) !important;
}
.ddl-dash__stat-value {
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}
.ddl-dash__stat-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #8a90a4 !important;
    margin-top: 4px !important;
}

/* Colour coding by position: Live / Awaiting / Sold / Needs review. */
.ddl-dash__stats .ddl-dash__stat:nth-child(1) .ddl-dash__stat-value { color: #16a34a !important; }
.ddl-dash__stats .ddl-dash__stat:nth-child(2) .ddl-dash__stat-value { color: #d97706 !important; }
.ddl-dash__stats .ddl-dash__stat:nth-child(3) .ddl-dash__stat-value { color: #1a1f4e !important; }
.ddl-dash__stats .ddl-dash__stat:nth-child(4) .ddl-dash__stat-value { color: #8a90a4 !important; }
.ddl-dash__stats .ddl-dash__stat:nth-child(1) { border-top: 3px solid #16a34a !important; }
.ddl-dash__stats .ddl-dash__stat:nth-child(2) { border-top: 3px solid #d97706 !important; }
.ddl-dash__stats .ddl-dash__stat:nth-child(3) { border-top: 3px solid #1a1f4e !important; }
.ddl-dash__stats .ddl-dash__stat:nth-child(4) { border-top: 3px solid #cfd4e0 !important; }
.ddl-dash__stat--warn {
    border-top-color: #d97706 !important;
    background: #fffdf4 !important;
}
.ddl-dash__stat--warn .ddl-dash__stat-value { color: #b45309 !important; }

/* Empty-listings card: friendlier, dashboard-like. */
.ddl-dash__card--empty { background: #fff !important; }
.ddl-dash__empty { padding: 40px 24px !important; text-align: center; }
.ddl-dash__empty-icon { font-size: 34px; opacity: .6; }

/* Keep mobile sizes sane (this block sits after the old media
   queries, so restate them). */
@media (max-width: 960px) {
    .ddl-dash__stats { margin: -28px 12px 22px !important; }
}
@media (max-width: 720px) {
    .ddl-dash__stat { padding: 14px 10px !important; }
    .ddl-dash__stat-value { font-size: 24px !important; }
    .ddl-dash__hero { padding: 26px 20px 54px !important; }
}

/* ============================================================
   v2.2 fixes (0.9.12)
   ============================================================ */

/* Coffee CTA: back to the navy band (the v2 white variant broke
   contrast with its light-on-navy text colours), with the v2
   radius kept. */
.ddl-dash__coffee-cta {
    background: linear-gradient(150deg, #1a1f4e 0%, #232a63 100%) !important;
    border: 0 !important;
    border-radius: 14px !important;
    padding: 20px 24px !important;
}

/* The v2.1 flush-bottom hero (margin-bottom:0, extra padding) exists
   for the KPI overlap on My Listings. The Enquiries page shares the
   hero class but has no KPI row, leaving it glued to the next block —
   restore normal proportions and a proper gap there. */
.ddl-enq .ddl-dash__hero {
    padding: 32px 28px !important;
    margin-bottom: 22px !important;
}
.ddl-enq .ddl-enq__empty,
.ddl-enq .ddl-enq__count { margin-top: 0; }

/* Overflow guards: nothing inside the dashboard may widen the page
   (the source of the phantom right-hand gap on small screens). */
.ddl-dash, .ddl-enq { min-width: 0; max-width: 100%; }
.ddl-dash__table-wrap { overflow-x: auto; max-width: 100%; }

@media (max-width: 720px) {
    .ddl-dash__stats { margin: -26px 10px 20px !important; gap: 10px !important; }
}

/* ── ID Verification page ─────────────────────────────────── */
.ddl-kyc .ddl-dash__hero { padding: 32px 28px !important; margin-bottom: 22px !important; }

.ddl-kyc__panel {
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 14px;
    padding: 24px 26px;
    margin-bottom: 18px;
}
.ddl-kyc__panel h3 { margin: 0 0 10px; font-size: 18px; color: #1a1f4e; }
.ddl-kyc__panel p { font-size: 14px; line-height: 1.65; color: #3c4257; }

.ddl-kyc__benefits { margin: 14px 0; padding-left: 20px; }
.ddl-kyc__benefits li { font-size: 14px; line-height: 1.65; margin-bottom: 8px; color: #3c4257; }

.ddl-kyc__smallprint { font-size: 12px !important; color: #8a90a4 !important; }
.ddl-kyc__buy { display: inline-block; margin-top: 6px; text-decoration: none !important; }

.ddl-kyc__panel--verified { border-top: 3px solid #0d9488; }
.ddl-kyc__panel--pending  { border-top: 3px solid #d97706; background: #fffdf4; }
.ddl-kyc__panel--rejected { border-top: 3px solid #d9342b; background: #fff7f6; }

.ddl-kyc__form { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.ddl-kyc__field { display: flex; flex-direction: column; gap: 6px; }
.ddl-kyc__field input[type="file"] {
    border: 1px dashed #cfd4e0;
    border-radius: 10px;
    padding: 12px;
    font-size: 14px;
    background: #f7f8fb;
}

.ddl-kyc__notice {
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    margin: 0 0 16px;
}
.ddl-kyc__notice--ok    { background: #f0fdf4; border: 1px solid #86efac; color: #15803d; }
.ddl-kyc__notice--error { background: #fff7f6; border: 1px solid #fca5a5; color: #b8251d; }

/* ── Notice vs floating KPI tiles ─────────────────────────────
   The KPI row deliberately overlaps the hero's bottom edge via a
   negative top margin (see "KPI tiles: floating over the hero"
   above). When a notice renders between the hero and the tiles,
   that same negative margin pulls the tiles up over the NOTICE
   and half-hides it. Fix: whenever a notice is present, cancel
   the overlap and give the notice breathing room on both sides.

   The sibling selector (.ddl-dash__notices + .ddl-dash__stats)
   carries higher specificity than the base/media-query rules, so
   its margin-top wins at every breakpoint. The :has() rule is
   progressive polish: it trims the hero's tile-landing padding
   when a notice follows, so the hero doesn't look oddly tall.
   Browsers without :has() still get a fully un-overlapped,
   readable notice. */
.ddl-dash__notices {
    position: relative;
    z-index: 3;
    margin: 18px 0 20px !important;
}
.ddl-dash__notices + .ddl-dash__stats {
    margin: 0 0 26px !important;
}
.ddl-dash__hero:has(+ .ddl-dash__notices) {
    padding-bottom: 36px !important;
}

/* ── Embed widget card (v0.9.23, restyled v0.9.24) ──────────── */
.ddl-dash__card--embed { margin-top: 20px; }
.ddl-dash__embed-badge { background: #ffde00; color: #111; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.ddl-dash__embed-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: start; padding: 20px 24px 24px; }
.ddl-dash__embed-blurb { color: #6b7280; font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.ddl-dash__embed-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #0f173e; margin: 0 0 6px; }
.ddl-dash__embed-code { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #0f173e; color: #cfe0ff; resize: vertical; box-sizing: border-box; }
.ddl-dash__embed-code:focus { outline: 2px solid #ffde00; outline-offset: 1px; }
.ddl-dash__embed-hint { color: #6b7280; font-size: 13px; margin: 8px 0 0; }
.ddl-dash__embed-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e5e7eb; }
.ddl-dash__embed-form-row { display: flex; gap: 8px; }
.ddl-dash__embed-form-row input { flex: 1; height: 40px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; }
.ddl-dash__embed-form-row input:focus { outline: 2px solid #0f173e; outline-offset: 1px; }
.ddl-dash__embed-preview { background: #f6f7fb; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; }
.ddl-dash__embed-preview iframe { width: 100%; height: 300px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; display: block; }
.ddl-dash__embed-open { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; }
@media (max-width: 860px) { .ddl-dash__embed-grid { grid-template-columns: 1fr; } }