/* Storyraise Video, Round 5 (R5-A weekly pull + manager loop, R5-C social style and the
   posting loop). Loaded on /compose and on the dashboard (/index.html). daisyUI tokens
   only, so it follows the light and dark themes. */

/* ---------------- R5-A: campaign picker (quick panel, Send panel) ---------------- */
.vq-campaign {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
}
.vq-campaign label { font-weight: 600; }
.vq-campaign select { min-width: 0; flex: 1 1 10rem; max-width: 100%; }
.vq-campaign small { flex-basis: 100%; }

/* ---------------- R5-A: batch handoff picker ---------------- */
.vq-batch {
    margin: 0.6rem 0;
    padding: 0.75rem;
    border-radius: 0.6rem;
    border: 1px solid color-mix(in oklab, var(--color-base-content) 18%, transparent);
    background: color-mix(in oklab, var(--color-base-content) 4%, var(--color-base-100));
}
.vq-batch-title { margin: 0 0 0.5rem; font-weight: 700; font-size: 0.9rem; }
.vq-batch-title small { display: block; font-weight: 400; }
.vq-batch-segs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.vq-batch-segs button {
    border: 1px solid color-mix(in oklab, var(--color-base-content) 25%, transparent);
    background: transparent;
    color: inherit;
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    min-height: 2rem;
    cursor: pointer;
}
.vq-batch-segs button[aria-checked="true"] { background: var(--sr-seg-on, #0f766e); border-color: var(--sr-seg-on, #0f766e); color: var(--sr-seg-on-content, #fff); font-weight: 700; }
.vq-batch-segs small { margin-left: 0.2rem; font-weight: 700; }
.vq-batch-list { list-style: none; margin: 0; padding: 0; max-height: 14rem; overflow: auto; }
.vq-batch-list li label { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.88rem; cursor: pointer; flex-wrap: wrap; }
.vq-batch-list li small { margin-left: auto; font-size: 0.75rem; }
.vq-batch-foot { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }

/* ---------------- R5-C: When will this go out? (Get the file) ---------------- */
.sp-post {
    margin-top: 0.9rem;
    padding: 0.85rem;
    border-radius: 0.7rem;
    border: 1px solid color-mix(in oklab, var(--color-base-content) 18%, transparent);
    background: color-mix(in oklab, var(--color-base-content) 4%, var(--color-base-100));
}
.sp-post h4 { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 700; }
.sp-when { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.sp-when button {
    border: 1px solid color-mix(in oklab, var(--color-base-content) 25%, transparent);
    background: transparent;
    color: inherit;
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    min-height: 2.25rem;
    font-size: 0.82rem;
    cursor: pointer;
}
.sp-when button[aria-checked="true"] { background: var(--sr-seg-on, #0f766e); border-color: var(--sr-seg-on, #0f766e); color: var(--sr-seg-on-content, #fff); font-weight: 700; }
.sp-when input[type="datetime-local"] { max-width: 100%; }
.sp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.6rem; font-size: 0.85rem; }
.sp-platforms { list-style: none; margin: 0.7rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.sp-platforms li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; padding: 0.35rem 0; border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent); }
.sp-platforms label { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; flex: 1 1 8rem; min-height: 2rem; cursor: pointer; }
.sp-platforms .sp-done { font-weight: 400; font-size: 0.78rem; opacity: 0.8; }
.sp-link { font-size: 0.75rem; opacity: 0.85; word-break: break-all; flex-basis: 100%; }
.sp-status { margin: 0.5rem 0 0; font-size: 0.82rem; }
.sp-status[data-state="due"], .sp-status[data-state="overdue"] { color: var(--color-warning); font-weight: 600; }
.sv-post-line { display: block; font-size: 0.75rem; opacity: 0.85; }
.sv-post-line[data-state="due"], .sv-post-line[data-state="overdue"] { color: var(--color-warning); opacity: 1; font-weight: 600; }

/* ---------------- R5-C: the version's own style bits ---------------- */
.sv-style-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.8rem; margin-top: 0.35rem; }
.sv-style-note { font-size: 0.78rem; opacity: 0.85; margin: 0 0 0.5rem; }
.sv-style-note a { text-decoration: underline; }

@media (max-width: 480px) {
    .sp-when button { flex: 1 1 calc(50% - 0.4rem); }
    .vq-batch-foot .btn { flex: 1 1 100%; }
}

/* ================= dashboard (dark-only, the video-team.css palette) ================= */
/* R5-A: CRM result on a Results row */
#dashboard .vt-crm { display: inline-block; font-size: 0.74rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 1rem; background: var(--vt-raise); color: var(--vt-muted); }
#dashboard .vt-crm[data-tone="ok"] { background: rgba(134, 239, 172, 0.14); color: var(--vt-watched); }
#dashboard .vt-crm[data-tone="off"] { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }
#dashboard .vt-crm[data-tone="warn"] { background: rgba(252, 211, 77, 0.16); color: var(--vt-call); }

/* R5-A: Nudge */
#dashboard .vt-nudge { display: inline-flex; margin-left: 0.4rem; vertical-align: middle; }
#dashboard .vt-nudged { font-size: 0.75rem; margin-left: 0.4rem; }
#dashboard .vt-nudge-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.4rem; font-size: 0.82rem; }
#dashboard .vt-nudge-ask.is-block { margin: 0 0 1rem; padding: 0.75rem; border-radius: 0.6rem; background: var(--vt-raise); justify-content: space-between; }
#dashboard .vt-nudge-note { display: block; margin-top: 0.3rem; font-size: 0.78rem; color: var(--vt-muted); }

/* R5-C: the Social row on Results, and the campaign line */
#dashboard .vt-social { margin: 0 0 1rem; padding: 0.9rem 1rem; border-radius: 0.75rem; background: var(--vt-raise); }
#dashboard .vt-social h3 { margin: 0 0 0.4rem; font-size: 0.9rem; font-weight: 700; }
#dashboard .vt-social ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: 0.88rem; }
#dashboard .vt-social p { margin: 0.45rem 0 0; font-size: 0.75rem; }
#dashboard .vt-campaign-social { display: block; margin-top: 0.2rem; }

/* R5-C: Home's posts to go out */
#dashboard .vt-posts { background: var(--vt-card, #222a34); border-radius: 1rem; padding: 1.5rem 1.75rem; margin-bottom: 2rem; color: #fff; }
#dashboard .vt-posts h2 { font-family: 'PPFragment TextRegular'; font-size: 1.3rem; font-weight: 800; margin: 0 0 0.75rem; }
#dashboard .vt-posts ul { list-style: none; margin: 0; padding: 0; }
#dashboard .vt-posts li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.6rem 0; border-top: 1px solid var(--vt-rule, rgba(255,255,255,0.1)); }
#dashboard .vt-post-main { display: flex; flex-direction: column; min-width: 0; }
#dashboard .vt-post-main .vt-name { font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 0.2rem; overflow-wrap: anywhere; }
#dashboard .vt-post-due { color: var(--vt-call, #fcd34d); font-weight: 600; }
#dashboard .vt-post-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; }

/* R5-A: the quick picker's campaign */
.vq-picker-campaign { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; font-size: 0.85rem; }
.vq-picker-campaign label { font-weight: 600; }
.vq-picker-campaign select { flex: 1 1 10rem; max-width: 100%; }

/* R5-C: Brand Kit > Video > Social style */
.bkv-social-body { border: 0; margin: 0.5rem 0 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.bkv-social-body:disabled .bkv-toggle, .bkv-social-body:disabled .bkv-seg button { cursor: not-allowed; }
.bkv-social-body .bkv-sub { display: flex; flex-direction: column; gap: 0.35rem; }
.bkv-social-donate input[type="text"] { min-width: 10rem; flex: 1 1 10rem; }
@media (max-width: 480px) {
    #dashboard .vt-posts { padding: 1.25rem 1rem; }
    #dashboard .vt-nudge-ask.is-block { flex-direction: column; align-items: flex-start; }
}
/* phone width: the social style's fields and Home's Posted buttons stay inside the card */
.bkv-social-body .bkv-row select, .bkv-social-body .bkv-row input[type="text"] { min-width: 0; flex: 1 1 12rem; max-width: 100%; }
#dashboard .vt-post-actions .btn { white-space: normal; height: auto; min-height: 2rem; text-align: left; }
@media (max-width: 480px) {
    #dashboard .vt-posts li { flex-direction: column; align-items: flex-start; }
    #dashboard .vt-post-actions { width: 100%; }
}
/* WCAG 2.2 target size: the batch picker's checkboxes are 24 px */
.vq-batch-list input[type="checkbox"] { width: 24px; height: 24px; flex: none; }
.vq-batch-list li label { min-height: 2.25rem; }

/* ---------------- R5: Home and Brand Kit on a phone ----------------
   Like the Videos tab (video-team.css, R4 WS7): under md the sidebar is replaced by the phone
   menu, but [data-dashboard-main] kept its 16rem left offset, pushing Home's reminders and
   Brand Kit's Social style off the right edge. Scoped to those two tabs. */
@media (max-width: 767px) {
    #dashboard.home [data-dashboard-main],
    #dashboard.brandkit [data-dashboard-main] { left: 0; width: 100%; }
    /* the header's hover tooltips (Start new project) are wider than the phone and there is no
       hover there: their hidden box alone made Home scroll sideways */
    #dashboard.home [data-dashboard-header] .tooltip::before,
    #dashboard.home [data-dashboard-header] .tooltip::after,
    #dashboard.brandkit [data-dashboard-header] .tooltip::before,
    #dashboard.brandkit [data-dashboard-header] .tooltip::after { display: none; }
}

/* ---------------- R5 integration: R5-C's lines inside R5-B's Export sheet ----------------
   The composer's page styles force a near-black paragraph color that the sheet's own rows
   override (video-variants.css); these lines need the same, or they read black on the dark
   sheet. */
.sx-kit :is(.sv-style-line, .sp-post, .sp-post h4, .sp-status, .sp-platforms label, .sp-when button){ color: var(--color-base-content, #111) !important; }
.sx-kit :is(.sv-style-note, .sv-post-line, .sp-link){ color: var(--sx-muted, inherit) !important; opacity: 1; }
.sx-kit .sv-style-note a{ color: var(--color-base-content, #111) !important; }
.sx-kit .sp-when button[aria-checked="true"]{ color: var(--sr-seg-on-content, #fff) !important; }
.sx-kit :is(.sp-status, .sv-post-line):is([data-state="due"], [data-state="overdue"]){ color: var(--color-warning) !important; }