/*
 * Ad Creative Prep Management Dashboard — view-specific styles
 *
 * Layers on top of the shared .ai-* primitives in ad-info-dashboard.css (tables,
 * pager, banner, toolbar, detail panes). Only the prep-specific pieces live here:
 * the board badges/stage-pills/capability chips, the detail summary grid, the
 * typed file-location + rendition + targeting + timeline + replacement blocks.
 * All colours come from theme-variables.css so dark/light both work.
 */

/* ---- view visibility ---------------------------------------------------- */

.ap-hidden { display: none !important; }

.ap-muted { color: var(--theme-text-tertiary); }

/* ---- generic badges ----------------------------------------------------- */

.ap-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.78em;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* prep_state */
.ap-state-published { background: var(--theme-status-green-bg); color: var(--theme-status-green-text); border-color: var(--theme-status-green-border); }
.ap-state-ready     { background: var(--theme-status-blue-bg);  color: var(--theme-status-blue-text);  border-color: var(--theme-status-blue-border); }
.ap-state-active    { background: var(--theme-status-yellow-bg); color: var(--theme-status-yellow-text); border-color: var(--theme-status-yellow-border); }
.ap-state-failed    { background: var(--theme-status-red-bg);   color: var(--theme-status-red-text);   border-color: var(--theme-status-red-border); }
.ap-state-retired   { background: var(--theme-bg-tertiary);     color: var(--theme-text-tertiary);     border-color: var(--theme-border-secondary); }
.ap-state-neutral   { background: var(--theme-bg-tertiary);     color: var(--theme-text-secondary);    border-color: var(--theme-border-secondary); }

/* purposes / role (was intended_use) */
.ap-use-detection { background: var(--theme-status-blue-bg);   color: var(--theme-status-blue-text);   border-color: var(--theme-status-blue-border); }
.ap-use-insertion { background: var(--theme-status-orange-bg); color: var(--theme-status-orange-text); border-color: var(--theme-status-orange-border); }
.ap-use-watermark { background: var(--theme-status-purple-bg, var(--theme-bg-tertiary)); color: var(--theme-status-purple-text, var(--status-purple)); border-color: var(--status-purple); }
.ap-use-both      { background: var(--theme-status-purple-bg, var(--theme-bg-tertiary)); color: var(--theme-status-purple-text, var(--status-purple)); border-color: var(--status-purple); }

/* wg3-c visibility-board readiness (CONFIGURED/INTENDED catalog truth — NOT live
   serving-node arming, which is driven by the published ad_library_index.json). */
.ap-ready-yes { background: var(--theme-status-green-bg); color: var(--theme-status-green-text); border-color: var(--theme-status-green-border); }
.ap-ready-no  { background: var(--theme-bg-tertiary);     color: var(--theme-text-secondary);    border-color: var(--theme-border-secondary); }

/* wg3-c per-channel targeting matrix (detail) + per-purpose activation state. */
.ap-act-active  { background: var(--theme-status-green-bg);  color: var(--theme-status-green-text);  border-color: var(--theme-status-green-border); }
.ap-act-pending { background: var(--theme-status-yellow-bg); color: var(--theme-status-yellow-text); border-color: var(--theme-status-yellow-border); }
.ap-act-paused  { background: var(--theme-status-orange-bg); color: var(--theme-status-orange-text); border-color: var(--theme-status-orange-border); }
.ap-act-draft   { background: var(--theme-bg-tertiary);      color: var(--theme-text-secondary);     border-color: var(--theme-border-secondary); }
.ap-datatruth-note { margin: 0 0 0.5rem; font-size: 0.85em; }
.ap-matrix-table th { text-align: center; }
.ap-matrix-table td:first-child, .ap-matrix-table th:first-child { text-align: left; }
.ap-matrix-on, .ap-matrix-off { text-align: center; }
.ap-matrix-all { font-style: italic; }

/* Replacement-event Outcome (server-classified; same four meanings and hues as the
   Ad Information dashboard's Outcome pill). Missed is gray, not blue, so it is not
   read as the blue "ready"/"authored" badges on this board. */
.ap-outcome-rejected { background: var(--theme-status-red-bg);    color: var(--theme-status-red-text);    border-color: var(--status-red); }
.ap-outcome-failed   { background: var(--theme-status-orange-bg); color: var(--theme-status-orange-text); border-color: var(--status-orange); }
.ap-outcome-missed   { background: var(--theme-status-gray-bg);   color: var(--theme-status-gray-text);   border-color: var(--status-gray); }
/* Departed (accepted in time; the viewer sent no spliceable manifest request before the
   window passed): Missed's gray family -- neither is our failure -- told apart by label. */
.ap-outcome-departed { background: var(--theme-status-gray-bg);   color: var(--theme-status-gray-text);   border-color: var(--status-gray); }
.ap-outcome-inserted { background: var(--theme-status-green-bg);  color: var(--theme-status-green-text);  border-color: var(--status-green); }
/* Pending: transient, so DASHED, in the Ad Information Pending pill's purple. */
.ap-outcome-pending  { background: var(--theme-status-purple-bg); color: var(--theme-status-purple-text); border-color: var(--status-purple); border-style: dashed; }
.ap-outcome-reason   { font-size: 0.85em; }

/* vast_source / fingerprint */
.ap-vast-none      { background: var(--theme-bg-tertiary); color: var(--theme-text-tertiary); border-color: var(--theme-border-secondary); }
.ap-vast-ingested  { background: var(--theme-status-green-bg); color: var(--theme-status-green-text); border-color: var(--theme-status-green-border); }
.ap-vast-authored  { background: var(--theme-status-blue-bg);  color: var(--theme-status-blue-text);  border-color: var(--theme-status-blue-border); }
.ap-fp-generated   { background: var(--theme-status-green-bg); color: var(--theme-status-green-text); border-color: var(--theme-status-green-border); }
.ap-fp-pending     { background: var(--theme-status-yellow-bg); color: var(--theme-status-yellow-text); border-color: var(--theme-status-yellow-border); }
.ap-fp-failed      { background: var(--theme-status-red-bg);   color: var(--theme-status-red-text);   border-color: var(--theme-status-red-border); }

.ap-ladder         { background: var(--theme-status-blue-bg); color: var(--theme-status-blue-text); border-color: var(--theme-status-blue-border); }
.ap-track          { background: var(--theme-bg-tertiary); color: var(--theme-text-secondary); border-color: var(--theme-border-secondary); font-family: monospace; }
.ap-stage-badge    { background: var(--theme-bg-selected); color: var(--theme-text-primary); border-color: var(--theme-border-primary); }

/* ---- creative identity (Phase F2) --------------------------------------- */
/* Display leads with the outward identity — Universal Ad ID > creative_slug >
   title — never the bare creative_uuid. The UAID lead is a subtle monospace
   pill so a registry-backed creative reads as "registered" at a glance. */
.ap-identity-uaid {
    font-family: monospace;
    font-weight: 600;
    color: var(--theme-status-blue-text);
}
.ap-identity-slug {
    font-family: monospace;
    color: var(--theme-text-primary);
}
.ap-identity-title { color: var(--theme-text-primary); }
.ap-identity-secondary { font-weight: 400; font-size: 0.9em; }
.ap-hint { font-size: 0.85em; font-style: italic; }
.ap-identity-section .ap-target-vals { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---- board table -------------------------------------------------------- */

.ap-board-table .ap-title { font-weight: 600; color: var(--theme-text-primary); }
.ap-board-row { cursor: pointer; }
.ap-board-row:hover { background: var(--theme-table-hover-bg); }
.ap-board-row:focus { outline: 2px solid var(--theme-link-color); outline-offset: -2px; }
.ap-num { text-align: right; font-variant-numeric: tabular-nums; }

/* per-stage status pills */
.ap-stage-group { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ap-stage {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.72em;
    font-weight: 600;
    border: 1px solid var(--theme-border-secondary);
}
.ap-stage-glyph { font-weight: 700; }
.ap-stage-done    { background: var(--theme-status-green-bg); color: var(--theme-status-green-text); border-color: var(--theme-status-green-border); }
.ap-stage-pending { background: var(--theme-status-yellow-bg); color: var(--theme-status-yellow-text); border-color: var(--theme-status-yellow-border); }
.ap-stage-failed  { background: var(--theme-status-red-bg); color: var(--theme-status-red-text); border-color: var(--theme-status-red-border); }
.ap-stage-na      { background: transparent; color: var(--theme-text-disabled); border-color: var(--theme-border-secondary); border-style: dashed; }

/* capability chips */
.ap-cap-group { display: inline-flex; gap: 3px; }
.ap-cap {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: 1px solid var(--theme-border-secondary);
}
.ap-cap-on  { background: var(--theme-status-green-bg); color: var(--theme-status-green-text); border-color: var(--theme-status-green-border); }
.ap-cap-off { background: var(--theme-bg-tertiary); color: var(--theme-text-disabled); }

/* ---- detail view -------------------------------------------------------- */

.ap-detail-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.ap-detail-title {
    margin: 0;
    font-size: 1.25em;
    color: var(--theme-text-primary);
}
.ap-detail-body { display: block; }

.ap-detail-section {
    background: var(--theme-bg-surface);
    border: 1px solid var(--theme-border-primary);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: var(--theme-shadow);
}
.ap-detail-section h3 {
    margin: 0 0 10px;
    font-size: 1.05em;
    color: var(--theme-text-primary);
    border-bottom: 1px solid var(--theme-border-secondary);
    padding-bottom: 6px;
}
.ap-detail-section h4 {
    margin: 14px 0 6px;
    font-size: 0.92em;
    color: var(--theme-text-secondary);
}
.ap-section-hint { font-weight: 400; font-size: 0.78em; }

/* key/value summary grid */
.ap-summary-grid { display: block; }
.ap-kv {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 4px 18px;
    margin: 0;
}
.ap-kv dt {
    font-weight: 600;
    color: var(--theme-text-secondary);
    font-size: 0.82em;
    grid-column: 1;
}
.ap-kv dd {
    margin: 0 0 6px;
    color: var(--theme-text-primary);
}

/* typed file-location table */
.ap-file-type { font-weight: 600; color: var(--theme-text-secondary); white-space: nowrap; }
.ap-path { font-size: 0.85em; word-break: break-all; }

/* renditions */
.ap-rendition {
    border: 1px solid var(--theme-border-secondary);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--theme-bg-secondary);
}
.ap-rendition-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ap-rendition-meta { font-size: 0.85em; margin-bottom: 8px; word-break: break-all; }
.ap-rungs-table { font-size: 0.9em; }

/* targeting */
.ap-target-grid { display: grid; gap: 8px; }
.ap-target-row { display: grid; grid-template-columns: 150px 1fr; align-items: baseline; gap: 10px; }
.ap-target-label { font-weight: 600; color: var(--theme-text-secondary); font-size: 0.85em; }
.ap-target-vals { display: flex; flex-wrap: wrap; gap: 5px; }
.ap-target-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.8em;
    background: var(--theme-bg-tertiary);
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border-secondary);
}

/* stage-event timeline */
.ap-timeline { list-style: none; margin: 0; padding: 0; }
.ap-timeline-item {
    display: grid;
    grid-template-columns: 190px 220px 1fr;
    gap: 12px;
    padding: 7px 10px;
    border-left: 3px solid var(--theme-border-secondary);
    margin-bottom: 4px;
    background: var(--theme-bg-secondary);
    border-radius: 0 4px 4px 0;
    align-items: baseline;
}
/* Phase tokens mirror the live ad_prep_stage_event.phase CHECK + the C++
   AdPrepStagePhase enum (start | success | failure) — NOT started/completed. */
.ap-timeline-item.ap-phase-success { border-left-color: var(--status-green); }
.ap-timeline-item.ap-phase-start   { border-left-color: var(--status-blue); }
.ap-timeline-item.ap-phase-failure { border-left-color: var(--status-red); }
.ap-timeline-when { font-size: 0.82em; color: var(--theme-text-secondary); }
.ap-phase-label { font-size: 0.85em; color: var(--theme-text-secondary); }
.ap-timeline-detail { font-size: 0.88em; color: var(--theme-text-primary); word-break: break-word; }
.ap-exit {
    display: inline-block;
    padding: 0 5px;
    border-radius: 3px;
    font-size: 0.78em;
    font-weight: 600;
}
.ap-exit-ok  { background: var(--theme-status-green-bg); color: var(--theme-status-green-text); }
.ap-exit-bad { background: var(--theme-status-red-bg); color: var(--theme-status-red-text); }

/* replacement events */
.ap-replacement-table { font-size: 0.9em; }

.ap-detail-error { padding: 20px; }

/* inline VAST authoring (vast_source='none') */
.ap-btn {
    padding: 5px 12px;
    font-size: 0.85em;
    border: 1px solid var(--theme-border-primary);
    border-radius: 5px;
    background: var(--theme-bg-tertiary);
    color: var(--theme-text-primary);
    cursor: pointer;
}
.ap-btn:hover { background: var(--theme-bg-selected); }
.ap-btn-sm { padding: 3px 8px; font-size: 0.8em; }
.ap-btn-primary {
    background: var(--theme-status-blue-bg);
    color: var(--theme-status-blue-text);
    border-color: var(--theme-status-blue-border);
    font-weight: 600;
}

.ap-vast-author { margin-top: 8px; }
.ap-vast-author h4 { margin: 14px 0 6px; }
.ap-author-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
.ap-author-field { display: flex; flex-direction: column; gap: 3px; font-size: 0.85em; }
.ap-author-field > span { color: var(--theme-text-secondary); }
.ap-author-field input,
.ap-author-row input,
.ap-author-row select {
    padding: 5px 7px;
    border: 1px solid var(--theme-border-secondary);
    border-radius: 4px;
    background: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
    font-size: 0.85em;
}
.ap-author-rows { display: flex; flex-direction: column; gap: 6px; }
.ap-author-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.ap-author-row .ap-author-url { flex: 1 1 240px; min-width: 180px; }
.ap-author-row input[type="number"] { width: 80px; }
.ap-author-actions { margin-top: 14px; display: flex; gap: 8px; }
.ap-author-result { margin-top: 10px; font-size: 0.88em; }
.ap-author-ok { color: var(--theme-status-green-text); }
.ap-author-error { color: var(--theme-status-red-text); }
.ap-author-payload {
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--theme-bg-tertiary);
    border: 1px solid var(--theme-border-secondary);
    border-radius: 5px;
    color: var(--theme-text-secondary);
    font-size: 0.85em;
    overflow-x: auto;
    white-space: pre;
}

/* Actions (the §7.1 mutating endpoints). */
.ap-actions-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ap-action-btn { white-space: nowrap; }
.ap-action-result { margin-top: 8px; font-size: 0.88em; min-height: 1.1em; }

/* Summary-card head row (wg3-d clause e "promote"): section title on the left, the
   promoted edit control on the right. The ROW carries the section rule so the title
   and the control share a baseline above it; an OPEN edit form wraps to its own
   full-width line beneath them. */
.ap-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid var(--theme-border-secondary);
    padding-bottom: 6px;
    margin-bottom: 10px;
}
.ap-summary-head h3 { margin: 0; border-bottom: none; padding-bottom: 0; }
.ap-summary-head .ap-edit-collapsed { margin-top: 0; }
.ap-summary-head .ap-edit-form { flex: 1 1 100%; margin-top: 4px; }

/* Inline edit-an-ad (title + campaign, wd-7e). */
.ap-edit-collapsed { margin-top: 10px; }
.ap-edit-form { margin-top: 10px; }
.ap-edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.ap-edit-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.85em; }
.ap-edit-field > span { color: var(--theme-text-secondary); }
.ap-edit-actions { margin-top: 12px; display: flex; gap: 8px; }
.ap-edit-result { min-height: 1.1em; }

/* Board-level add-new-ad (wg3-d clause a). Reuses the .ap-edit-* form primitives
   so the create form and the inline edit form read as one control family; only
   the host spacing, the purpose checkbox row, and the not-available note are new. */
.ap-create-host:empty { display: none; }
/* The operator create form's partner field. Its label is a real <label for=…> (not
   the wrapping-<label> shape the other fields use) so the async status note can be a
   SIBLING of the control rather than part of its accessible name. */
.ap-edit-field > label { color: var(--theme-text-secondary); }
/* The note must NOT inherit the label styling above — it is status text, not a second
   label — and an empty note must not occupy a flex gap, which would make the partner
   cell taller than every sibling in the auto-fit grid. */
.ap-create-partner-note { color: inherit; font-size: 0.95em; }
.ap-create-partner-note:empty { display: none; }

.ap-create-collapsed { padding: 10px 0 0; }
.ap-create-unavailable { font-size: 0.85em; max-width: 70ch; }
.ap-create-form { margin-bottom: 10px; }
.ap-create-purposes { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.ap-create-purpose { display: flex; align-items: center; gap: 4px; font-size: 0.95em; }
.ap-create-result { min-height: 1.1em; }

/* Per-purpose policy panels (wg3-d clause d): activation transitions + channel
   targeting, one card per declared purpose. Reuses the .ap-edit-* form primitives
   and the .ap-target-chip / .ap-badge display primitives rather than forking them —
   the editor is the same control family as the inline edit and create forms. */
.ap-policy-card {
    border: 1px solid var(--theme-border-secondary);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 10px 0;
}
.ap-policy-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.ap-policy-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px;
    align-items: start;
    padding: 5px 0;
}
.ap-policy-label { font-size: 0.85em; color: var(--theme-text-secondary); }
.ap-policy-controls { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ap-policy-note { font-size: 0.82em; max-width: 80ch; margin: 0; }
.ap-policy-arming { font-size: 0.82em; max-width: 80ch; margin: 6px 0 0; }
.ap-policy-modes { display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: 6px; }
.ap-policy-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-height: 180px;
    overflow-y: auto;
    padding: 4px 2px;
}
.ap-policy-form { width: 100%; }
.ap-policy-result { min-height: 1.1em; }

@media (max-width: 760px) {
    .ap-timeline-item { grid-template-columns: 1fr; gap: 2px; }
    .ap-target-row { grid-template-columns: 1fr; }
    .ap-policy-row { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   Partner Portal (AdPartnerPortal.html, P1 Task 5) — the login-gated partner
   self-service surface. Reuses the .ap-* identity/muted styles above and the
   shared .ai-* panel/table primitives; these add only the login + form layout.
   --------------------------------------------------------------------------- */
.pp-login-panel { max-width: 420px; margin: 0 auto; }

.pp-form { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; }

.pp-field { display: flex; flex-direction: column; gap: 4px; }
.pp-field > span { font-size: 0.85em; color: var(--theme-text-secondary); }

.pp-form-actions { display: flex; gap: 8px; margin-top: 4px; }

.pp-status { min-height: 1.1em; font-size: 0.88em; }
.pp-status-info  { color: var(--theme-text-secondary); }
.pp-status-ok    { color: var(--theme-status-green-text); }
.pp-status-error { color: var(--theme-status-red-text); }

/* wg3-c operator login gate (injected into #ap-board-view when unauthenticated). */
.ap-operator-login { max-width: 420px; }

.pp-upload-note { font-size: 0.82em; margin: 2px 0 0; }

/* Inline title edit on a partner's own creative (title only; wd-7e).
   (.ai-button-sm lives beside .ai-button in ad-info-dashboard.css.) */
.pp-edit-inline { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pp-edit-input { min-width: 160px; }
.pp-edit-status { min-height: 0; }

/* Partner activation-management controls (WD.8 S3 org plane, per-purpose state) */
.pp-activation-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0; }
.pp-activation-purpose { font-size: 0.82em; color: var(--theme-text-secondary); }
.pp-activation-state { font-size: 0.82em; font-weight: 600; }

/* ==================== Partners & Accounts (WD.8 S2 admin plane) ============ */
.ap-section-nav { display: flex; gap: 8px; margin: 0 0 12px; }
.ap-nav-active { font-weight: 600; border-bottom: 2px solid var(--theme-accent, #4a90d9); }
.ap-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 20px; }
.ap-inline-form .ai-input, .ap-inline-form .ai-select { max-width: 240px; }
.ap-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.ap-btn-small { padding: 2px 8px; font-size: 0.82em; }
.ap-badge { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 0.75em; }
.ap-badge-pending { background: var(--theme-status-yellow-bg, #f5e6a8); color: var(--theme-status-yellow-text, #7a5c00); }
.ap-invite-result { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--theme-border, #ccc); border-radius: 6px; background: var(--theme-panel-bg, #fafafa); }
.ap-invite-note { font-size: 0.86em; margin: 0 0 6px; }
.ap-invite-url { display: block; word-break: break-all; font-size: 0.9em; padding: 6px 8px; background: var(--theme-code-bg, #eee); border-radius: 4px; }
.ai-empty { font-size: 0.88em; color: var(--theme-text-secondary); padding: 8px 2px; }