/* Ambassador Program — dashboard styles.
 *
 * Enqueued as 'cbn-ambassador' by cbn_amb_enqueue_assets() in functions/ambassador.php.
 * Hand-written, not compiled: gulp's `sass` task writes scss/**\/*.scss into css/, and this
 * file has no scss source, so it is never clobbered — but do not add one without moving
 * this content there first.
 *
 * Consolidated from the inline <style> blocks that part-ambassador-my-applications.php and
 * part-ambassador-manufacturer.php each carried; both render on the same dashboard, so the
 * ~20 rules they shared were being emitted twice per page.
 */

/* ── Vehicle tile actions ───────────────────────────────────────────────────────── */
/* item-media-project.php separates [edit] [delete] [new ambassadorship] with a single space
 * each. global.scss gives .delete-item a 10px padding-left, which widened only the gap before
 * [delete] and left the row looking unevenly spaced once a third link joined it. The padding
 * is inside the link's box, so it shows up as whitespace between the brackets rather than as
 * a gap between the boxes. Repeating global's ancestor chain here is what outweighs its
 * `.page-wrap .newsfeed-wrap .nf-item .nf-top .delete-item` — a plain .nf-actions selector
 * loses on specificity. */
.page-wrap .newsfeed-wrap .nf-item .nf-top.nf-actions .delete-item { padding-left: 0; }

/* ── Application lists ──────────────────────────────────────────────────────────── */
.amb-app-list { margin: 0; padding: 0; list-style: none; }
.amb-app-list .amb-app-row,
.amb-app-row {
    list-style: none;
    padding: 14px 0;
    border-bottom: 1px solid #e8e8e8;
}
.amb-app-row:last-child { border-bottom: none; }
.amb-app-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.amb-app-title { font-weight: 600; font-size: 14px; }
.amb-app-components {
    margin: 4px 0 8px 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: #555;
}
.amb-app-components li { margin-bottom: 2px; }

/* ── Negotiation turn ───────────────────────────────────────────────────────────── */
.amb-turn-line { font-size: 12px; color: #666; margin-bottom: 6px; }
/* Nobody has moved in CBN_AMB_STALE_DAYS. */
.amb-turn-stale { color: #b36a00; font-weight: 600; }
/* A component the other party struck out. Still on the record, still arguable. */
.amb-comp-declined { opacity: 0.7; }
.amb-comp-declined .amb-comp-name { text-decoration: line-through; }
.amb-comp-reason { color: #8a1f1f; font-style: italic; }

/* ── Status badges ──────────────────────────────────────────────────────────────── */
.amb-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.amb-status-pending  { background: #fff3cd; color: #856404; }
.amb-status-accepted { background: #d4edda; color: #1d5b1d; }
.amb-status-rejected,
.amb-status-withdrawn,
.amb-status-terminated { background: #e9ecef; color: #555; }

/* ── Manufacturer card ──────────────────────────────────────────────────────────── */
.amb-mfr-card { display: flex; gap: 14px; align-items: flex-start; }
.amb-mfr-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: #f0f0f0;
}
.amb-mfr-thumb-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 4px;
    background: #e0e0e0;
    flex-shrink: 0;
}
.amb-mfr-body { flex: 1; min-width: 0; }
.amb-mfr-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.amb-mfr-meta { font-size: 12px; color: #666; margin-bottom: 6px; }
.amb-mfr-links { font-size: 12px; margin-bottom: 6px; }
.amb-mfr-links a { margin-right: 10px; }
.amb-mfr-message { font-size: 13px; font-style: italic; color: #444; margin-bottom: 8px; }
.amb-mfr-other-mfrs { font-size: 12px; color: #666; margin-bottom: 8px; }

/* Project context: other ambassadorships + pending applications (§4.2.2). */
.amb-context {
    font-size: 12px;
    color: #555;
    margin-bottom: 8px;
    background: #f7f7f7;
    border: 1px solid #ececec;
    border-radius: 3px;
    padding: 8px 10px;
}
.amb-context-label { font-weight: 700; color: #333; margin-bottom: 2px; }
.amb-context-label:not(:first-child) { margin-top: 6px; }
.amb-context-list { margin: 0; padding: 0 0 0 16px; list-style: disc; }
.amb-context-list li { margin-bottom: 2px; }

/* ── Component rows ─────────────────────────────────────────────────────────────── */
.amb-comp-list { margin: 0; padding: 0; list-style: none; }
.amb-comp-row { padding: 5px 0; border-top: 1px solid #f0f0f0; }
.amb-comp-row-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.amb-comp-label { font-size: 13px; flex: 1; min-width: 0; }

/* ── Proposal editor ────────────────────────────────────────────────────────────── */
.amb-pe { margin-top: 10px; }
.amb-pe-label { font-size: 12px; font-weight: 600; margin: 8px 0 6px; color: #333; }

.amb-pe-comp { padding: 6px 0; border-top: 1px solid #f0f0f0; }
.amb-pe-comp-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.amb-pe-comp-head .amb-comp-name { font-weight: 600; }
.amb-pe-comp-actions { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }
/* Whatever identifies the component takes fixed room on the line and the description absorbs
   the rest; min-width:0 lets it shrink instead of wrapping onto a line of its own. */
.amb-pe-comp-desc { flex: 1 1 0; min-width: 0; }
.amb-pe-desc { width: 100%; box-sizing: border-box; font-size: 12px; padding: 3px 6px; }
.amb-pe-desc-text { font-size: 12px; color: #555; font-style: italic; }
.amb-pe-comp-reason { font-size: 12px; color: #8a1f1f; font-style: italic; margin-top: 2px; }
.amb-pe-byline { font-size: 11px; color: #888; }
.amb-pe-warn { font-size: 11px; color: #b36a00; font-weight: 600; }

/* A change staged this turn but not yet sent. */
.amb-pe-staged { background: #fffdf5; }
.amb-pe-dropped .amb-comp-name,
.amb-pe-dropped .amb-pe-desc-text { text-decoration: line-through; opacity: 0.6; }
.amb-pe-dropped .amb-pe-comp-desc input { display: none; }

.amb-pe-section, .amb-pe-term { font-size: 12px; padding: 3px 4px; max-width: 100%; }

/* A row being added spends its fixed room on the two selects. */
.amb-pe-comp-new .amb-pe-section { flex: 0 0 22%; min-width: 0; }
.amb-pe-comp-new .amb-pe-term    { flex: 0 0 32%; min-width: 0; }
.amb-pe-decline-form { margin-top: 5px; }
.amb-pe-decline-reason,
.amb-pe-my-note {
    width: 100%;
    box-sizing: border-box;
    font-size: 12px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 2px;
    resize: vertical;
    min-height: 48px;
}
.amb-pe-my-note { margin-top: 8px; }
.amb-pe-their-note {
    font-size: 13px;
    font-style: italic;
    color: #444;
    background: #f7f7f7;
    border-left: 3px solid #ddd;
    padding: 6px 10px;
    margin: 8px 0;
}

.amb-pe-comp-actions button,
.amb-pe-add-comp {
    font-size: 11px;
    padding: 2px 8px;
    background: #fff;
    border: 1px solid #c4c4c4;
    border-radius: 2px;
    cursor: pointer;
    color: #555;
}
.amb-pe-add-comp { font-size: 12px; padding: 3px 10px; margin-top: 8px; }
.amb-pe-decline:hover, .amb-pe-remove:hover, .amb-pe-remove-new:hover {
    border-color: #8a1f1f; color: #8a1f1f; background: #fbe8e8;
}

/* ── Turn actions ───────────────────────────────────────────────────────────────── */
.amb-pe-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.amb-pe-accept {
    font-size: 12px;
    padding: 4px 14px;
    background: #1d5b1d;
    color: #fff;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    font-weight: 600;
}
.amb-pe-counter {
    font-size: 12px;
    padding: 4px 14px;
    background: #fff;
    border: 1px solid #1d5b1d;
    border-radius: 2px;
    cursor: pointer;
    color: #1d5b1d;
    font-weight: 600;
}
.amb-pe-end {
    font-size: 12px;
    padding: 4px 12px;
    background: #fff;
    border: 1px solid #c4c4c4;
    border-radius: 2px;
    cursor: pointer;
    color: #8a1f1f;
    margin-left: auto;
}
.amb-pe-end:hover { background: #fbe8e8; border-color: #8a1f1f; }
.amb-pe-actions button:disabled { opacity: 0.5; cursor: default; }

/* ── Review: the shared deliverable set ─────────────────────────────────────────── */
.amb-deliverables {
    margin-top: 10px;
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
}
.amb-req-form-label { font-size: 12px; font-weight: 600; margin: 0 0 6px 0; color: #333; }
.amb-req-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.amb-req-row-input { display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap; }
/* Capped at the width the section + component pair spends above it, so the type select does not
   grow to fill the editor and strand qty and rebate against the far edge. */
.amb-req-type-select { font-size: 12px; flex: 0 1 54%; min-width: 0; padding: 3px 4px; }
.amb-req-required .amb-req-type-select { background: #f5f5f5; color: #555; }
/* Stacked micro-label: stays legible once the field holds a value, unlike a placeholder. */
.amb-req-field { display: inline-flex; flex-direction: column; gap: 2px; }
.amb-req-field > span {
    font-size: 10px;
    line-height: 1;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.amb-req-rebate-pct { font-size: 12px; width: 72px; padding: 3px 4px; }
.amb-req-qty { font-size: 12px; width: 56px; padding: 3px 4px; }
/* Backstop for anything the input gate misses (spinner stepping, autofill). */
.amb-req-rebate-pct:invalid,
.amb-req-qty:invalid { border-color: #a02020; background: #fff6f6; }
.amb-remove-req-btn {
    font-size: 11px;
    padding: 2px 7px;
    background: #fff;
    border: 1px solid #c4c4c4;
    border-radius: 2px;
    cursor: pointer;
    color: #555;
}
.amb-add-req-btn {
    font-size: 12px;
    padding: 3px 10px;
    background: #fff;
    border: 1px solid #b0b0b0;
    border-radius: 2px;
    cursor: pointer;
    margin-bottom: 8px;
}
.amb-reset-defaults-btn {
    font-size: 12px;
    margin-left: 8px;
    background: none;
    border: none;
    padding: 0;
    color: #1d5b1d;
    text-decoration: underline;
    cursor: pointer;
}
.amb-save-defaults-label { display: block; font-size: 12px; margin-top: 8px; cursor: pointer; }
.amb-save-defaults-label input { vertical-align: middle; margin-right: 4px; }

/* ── Default deliverables (the ACF repeater on tpl_form-ambassador-deliverables.php) ──
 *
 * A manufacturer edits the same three fields here and in the proposal editor above, so size
 * them the same. ACF's form defaults are built for wp-admin and read a good deal heavier.
 * Scoped by data-key: the generated class follows the field's name, the key does not.
 */
.acf-field[data-key="field_amb_default_deliverables"] .acf-th > label {
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.acf-field[data-key="field_amb_default_deliverables"] .acf-th .description {
    font-size: 10px;
    line-height: 1.3;
    color: #888;
    margin: 3px 0 0;
}
.acf-field[data-key="field_amb_default_deliverables"] select,
.acf-field[data-key="field_amb_default_deliverables"] input[type="number"] {
    box-sizing: border-box;
    font-size: 12px;
    line-height: 1.4;
    height: auto;
    min-height: 0;
    padding: 3px 4px;
}
.acf-field[data-key="field_amb_default_deliverables"] select { width: 100%; }
/* The same widths .amb-req-qty and .amb-req-rebate-pct use. Fixed rather than a share of the
   column: ACF's conditional-logic JS rewrites these two columns to width:auto once a type is
   chosen, so a percentage here would not survive. */
.acf-field[data-key="field_amb_default_deliverables"] .acf-field-number[data-name="qty"] input { width: 56px; }
.acf-field[data-key="field_amb_default_deliverables"] .acf-field-number[data-name="rebate_pct"] input { width: 72px; }
/* Matches .amb-add-req-btn rather than the page's primary submit, which stays a full button. */
.acf-field[data-key="field_amb_default_deliverables"] .acf-actions .acf-button {
    font-size: 12px;
    padding: 3px 10px;
    background: #fff;
    border: 1px solid #b0b0b0;
    border-radius: 2px;
    color: #333;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Deliverable display + fulfillment (both dashboards) ────────────────────────── */
/* Waiting on the required deliverable. Dimmed rather than hidden so the owner can see the
   whole agreement and what order it has to happen in. */
.amb-deliv-locked { opacity: 0.55; }
.amb-deliv-locked-note,
.amb-deliv-auto-note { font-size: 11px; color: #666; font-style: italic; margin: 2px 0 0; }

.amb-deliverables-display { margin: 6px 0; }
.amb-req-display-row { font-size: 12px; color: #444; margin-bottom: 2px; }
.amb-deliv-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.amb-earned { font-size: 12px; font-weight: 700; color: #1d5b1d; }
.amb-deliv { border-top: 1px solid #f0f0f0; padding: 8px 0; }
.amb-deliv-row { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.amb-deliv-label { color: #333; }
.amb-deliv-check { color: #1d5b1d; font-weight: 700; }
.amb-deliv-progress { color: #666; white-space: nowrap; }

/* ── Proof ──────────────────────────────────────────────────────────────────────── */
.amb-proof-items { list-style: none; margin: 6px 0 0; padding: 0; }
.amb-proof-item { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12px; flex-wrap: wrap; }
.amb-proof-thumb { width: 48px; height: 32px; object-fit: cover; border-radius: 2px; border: 1px solid #ddd; }
.amb-proof-url-link { word-break: break-all; color: #333; }
.amb-proof-reason { color: #8a1f1f; font-style: italic; }
.amb-proof-pending  { background: #fff3cd; color: #856404; }
.amb-proof-approved { background: #d4edda; color: #1d5b1d; }
.amb-proof-rejected { background: #e9ecef; color: #555; }
.amb-proof-download { color: #1d5b1d; font-weight: 600; }
.amb-proof-item button:disabled { opacity: .5; cursor: default; }
.amb-proof-approve-btn {
    font-size: 11px;
    padding: 2px 10px;
    background: #28a745;
    color: #fff;
    border: 1px solid #1e7e34;
    border-radius: 2px;
    cursor: pointer;
}
.amb-proof-reject-btn {
    font-size: 11px;
    padding: 2px 10px;
    background: #fff;
    border: 1px solid #c4c4c4;
    border-radius: 2px;
    cursor: pointer;
    color: #8a1f1f;
}
.amb-proof-reject-reason { font-size: 12px; padding: 2px 6px; min-width: 160px; }
.amb-proof-confirm-reject-btn {
    font-size: 11px;
    padding: 2px 10px;
    background: #8a1f1f;
    color: #fff;
    border: none;
    border-radius: 2px;
    cursor: pointer;
}

/* Owner-side proof submission. */
.amb-proof-submit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.amb-kind-toggle { font-size: 12px; cursor: pointer; }
.amb-kind-toggle input { vertical-align: middle; margin-right: 3px; }
.amb-proof-url-input { font-size: 12px; padding: 3px 6px; min-width: 220px; }
.amb-proof-submit-btn {
    font-size: 12px;
    padding: 3px 12px;
    background: #1d5b1d;
    color: #fff;
    border: none;
    border-radius: 2px;
    cursor: pointer;
}
.amb-proof-submit-btn:disabled { opacity: .5; cursor: default; }
.amb-proof-rec { font-size: 11px; color: #888; margin: 8px 0 0; }

/* ── Active ambassadorships ─────────────────────────────────────────────────────── */
.amb-active-comp-list { margin: 4px 0 0 0; padding: 0; list-style: none; font-size: 13px; }
.amb-active-comp-list li { list-style: none; margin-bottom: 3px; }
.amb-active-subtext { font-size: 11px; color: #888; margin-top: 3px; }

/* ── Contact details ────────────────────────────────────────────────────────────── */
.amb-contact-notice {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 12px;
    font-size: 13px;
}
.amb-contact-info { font-size: 12px; color: #555; margin-top: 6px; }
.amb-contact-info a { color: #333; }

/* ── Ending an ambassadorship ───────────────────────────────────────────────────── */
.amb-terminate-btn,
.ambassador-terminate-btn {
    font-size: 12px;
    padding: 3px 12px;
    margin-top: 8px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #b36a00;
    border-radius: 2px;
    color: #b36a00;
}
.amb-terminate-btn:hover,
.ambassador-terminate-btn:hover { background: #fff8e1; }
.amb-terminate-btn:disabled,
.ambassador-terminate-btn:disabled { opacity: 0.6; cursor: default; }
.ambassador-withdraw-btn {
    font-size: 12px;
    padding: 3px 10px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #c4c4c4;
    border-radius: 2px;
    color: #8a1f1f;
}
.ambassador-withdraw-btn:hover { background: #fbe8e8; border-color: #8a1f1f; }
.ambassador-withdraw-btn:disabled { opacity: 0.6; cursor: default; }

.amb-pe-empty { font-size: 12px; color: #888; font-style: italic; margin: 8px 0; }

/* ── Narrow screens ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* The action row stacks; margin-left:auto would otherwise strand "end" on its own line. */
    .amb-pe-comp-actions,
    .amb-pe-end { margin-left: 0; }
    .amb-pe-actions { flex-direction: column; align-items: stretch; }
    .amb-pe-actions button { width: 100%; }

    /* Section + component selects each get a full line rather than being squeezed. */
    .amb-pe-comp-head { align-items: flex-start; }
    .amb-pe-section, .amb-pe-term { flex: 1 1 100%; width: 100%; }
    .amb-pe-comp-new .amb-pe-section,
    .amb-pe-comp-new .amb-pe-term { flex: 1 1 100%; width: 100%; }
    .amb-pe-comp-desc { flex: 1 1 100%; margin-top: 4px; }

    /* Deliverable rows: the type select takes the line, qty and rebate share the next. */
    .amb-req-row-input { align-items: flex-start; }
    .amb-req-type-select { flex: 1 1 100%; }

    .amb-mfr-card { gap: 10px; }
    .amb-mfr-thumb, .amb-mfr-thumb-placeholder { width: 48px; height: 48px; }
}