/* Queue calendar (dashboard.html): the Month, Week and List views of the Queue, drawn by js/queue-calendar.js */

/* ---- Status colours: one colour + one tint + one edge each ---- */
.qc-s-scheduled { --qc-c: #0d6efd; --qc-bg: #EFF6FF; --qc-bd: #C7DBFE; }
.qc-s-published { --qc-c: #10B981; --qc-bg: #ECFDF5; --qc-bd: #B5ECD4; }
.qc-s-review { --qc-c: #F59E0B; --qc-bg: #FFFBEB; --qc-bd: #FBE3A6; }
.qc-s-client { --qc-c: #0891B2; --qc-bg: #ECFEFF; --qc-bd: #B3ECF5; }
.qc-s-draft { --qc-c: #6B7280; --qc-bg: #F3F4F6; --qc-bd: #DDE0E5; }
.qc-s-failed { --qc-c: #DC2626; --qc-bg: #FEF2F2; --qc-bd: #F9CACA; }
.qc-s-idea { --qc-c: #8B5CF6; --qc-bg: #F5F3FF; --qc-bd: #DCD3FD; }
.qc-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--qc-c); background: var(--qc-bg); border-radius: 999px; padding: 2px 8px; }

/* Network marks, overlapped slightly like avatars */
.qc-nets { display: inline-flex; align-items: center; }
.qc-nets img { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #fff; margin-left: -3px; background: #fff; }
.qc-nets img:first-child { margin-left: 0; }
.qc-nets-more { font-size: 10px; color: #6B7280; margin-left: 3px; }

/* Assignee initials */
.qc-av { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; }
.qc-av-ps { background: #7C3AED; }
.qc-av-mj { background: #0D9488; }
.qc-av-rk { background: #2563EB; }

/* ---- Month grid ---- */
/* The grids keep a working width; a narrow window scrolls them sideways */
.qc-month, .qc-week { min-width: 880px; }
/* Room under the last week: the support launcher (common/sidebar.js) floats over the bottom right, so the
   grid can scroll its last cards up clear of it and their icons keep their tooltips */
#qcMonth, #qcWeek { padding-bottom: 70px; }
/* clip, not hidden: it rounds the corners without becoming a scroll box, so the day names can stick */
.qc-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; overflow: clip; }
/* The day names stay pinned while the weeks scroll under them (#qcMonth is the scroller) */
.qc-dow { position: sticky; top: 0; z-index: 2; background: #fff; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #6B7280; text-align: center; padding: 8px 0; border-bottom: 1px solid #E5E7EB; }
.qc-cell { min-height: 158px; padding: 6px; background: #fff; border-right: 1px solid #dde3ea; border-bottom: 1px solid #dde3ea; position: relative; }
.qc-cell:nth-child(7n + 14) { border-right: 0; }
.qc-cell-head { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; min-height: 26px; }
.qc-num { font-size: 12px; font-weight: 600; color: #374151; min-width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.qc-out .qc-num, .qc-past .qc-num { color: #9CA3AF; font-weight: 500; }
.qc-today .qc-num { background: #0d6efd; color: #fff; }
/* Post and Idea under the date: their space is kept at rest (blank), so cards never move; hover or focus shows them */
.qc-add-row { display: flex; gap: 4px; min-height: 26px; margin-bottom: 8px; opacity: 0; transition: opacity .12s; }
.qc-cell:hover .qc-add-row, .qc-cell:focus-within .qc-add-row { opacity: 1; }
/* Month: Post and Idea sit at the right of the date line as bare dark icons, blue when hovered, so the posts start right under the date */
.qc-cell-head .qc-add-row { margin: 0 0 0 auto; min-height: 0; }
/* A day's Post and Idea: a blue dashed outline in blue text; hover only tints the fill, the line and colour stay */
.btn.qc-add { flex: none; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: #585858; border: 1px solid #dee2e6; }
.qc-add i { font-size: 12px; }
.btn.qc-add:hover, .btn.qc-add:focus-visible {background: #EFF6FF; color: #0d6efd; }
.btn.qc-more { justify-content: flex-start; border: 0; background: transparent; font-size: 11px; font-weight: 600; color: #374151; padding: 2px 6px; border-radius: 4px; }
.btn.qc-more:hover { background: #F3F4F6; }
/* Past days: a neutral light grey, so the past reads as done next to the white days ahead */
.qc-month .qc-cell.qc-past, .qc-week .qc-wk-col.qc-past, .qc-week .qc-wk-day.qc-past { background: #F4F5F7; }

/* ---- The post card: one shape for every status (the time and title beside the thumbnail, then the status in words with
   the networks). A published post is plain white, a scheduled one light grey; a post still being written, in
   manager or client review, or failed takes its status tint; an idea is a dashed outline ---- */
.qc-stack { display: flex; flex-direction: column; gap: 8px; }
.qc-card { --qc-card: #fff; display: flex; flex-direction: column; gap: 5px; width: 100%; min-width: 0; border: 1px solid #E5E7EB; border-radius: 8px; padding: 6px; text-align: left; background: var(--qc-card); cursor: pointer; transition: box-shadow .12s, transform .12s; }
.qc-card:hover { border-color: var(--qc-c); opacity: 1; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16, 24, 40, .12); }
.qc-card.qc-s-draft, .qc-card.qc-s-review, .qc-card.qc-s-client, .qc-card.qc-s-failed { --qc-card: var(--qc-bg); border-color: var(--qc-bd); }
/* A scheduled card takes Bootstrap's light grey (bg-light) and a firmer grey border (#CED4DA, no status colour) */
.qc-card.qc-s-scheduled { --qc-card: #F8F9FA; border-color: #CED4DA; }
.qc-card.qc-s-idea { border: 1px dashed var(--qc-bd); }
.qc-card-main { display: flex; gap: 7px; min-width: 0; }
/* On a narrow card the networks wrap under the status word rather than run over it */
.qc-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; min-width: 0; }
.qc-card-foot .qc-nets { margin-left: auto; }
/* The status word in a darker shade of its status colour, so it reads at 4.5:1 or more on the card's own tint */
.qc-card-st { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; white-space: nowrap; color: #212529; }
.qc-s-published .qc-card-st { color: #047857; }
.qc-s-failed .qc-card-st { color: #B91C1C; }
.qc-s-review .qc-card-st { color: #B45309; }
.qc-s-client .qc-card-st { color: #0E7490; }
.qc-s-draft .qc-card-st { color: #4B5563; }
.qc-s-idea .qc-card-st { color: #6D28D9; }
.qc-card-st i { font-size: 12px; }
.qc-card-img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.qc-card-noimg { background: color-mix(in srgb, var(--qc-c) 14%, #fff); color: var(--qc-c); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.qc-card-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
/* The time is one colour on every card; the footer names the status */
.qc-card-time { font-size: 11px; font-weight: 700; color: #101010; }
.qc-card-title { font-size: 11px; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.qc-card .qc-nets img { border-color: var(--qc-card); }
/* Two zones: on a post that can still move, the thumbnail is the drag handle (a grip on a dark scrim, so it reads on any
   photo, shown on hover and focus, with a grab cursor); the rest of the card opens it with a pointer.
   An upcoming library post wears an info mark on the same scrim instead, its tooltip explaining the date may change */
.qc-card-media { position: relative; flex-shrink: 0; width: 36px; height: 36px; }
.qc-card-cover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(16, 16, 16, .75); color: #fff; font-size: 18px; line-height: 1; opacity: 0; transition: opacity .12s; }
.qc-card:hover .qc-card-cover, .qc-card:focus-visible .qc-card-cover, .qc-card.qc-chosen .qc-card-cover { opacity: 1; }
@media (hover: none) { .qc-card-cover { opacity: 1; } }
.qc-tip .tooltip-inner { max-width: 260px; text-align: left; }
/* The day list behind "+N more" does not drag */
.qc-day-list .qc-card-grip { display: none; }
/* The past keeps no colour: grey text. A failed post still has work left, so it keeps its red */
.qc-past .qc-card:not(.qc-s-failed) .qc-card-time, .qc-past .qc-card:not(.qc-s-failed) .qc-card-title { color: #636A75; }
/* ...and lies flat on the grey day: no fill of its own, a faint edge, so the cards ahead (a fill and a firmer grey edge) stand out */
.qc-past .qc-card:not(.qc-s-failed) { --qc-card: transparent; border-color: #E5E7EB; }
.qc-past .qc-card:not(.qc-s-failed) .qc-nets img { border-color: #F4F5F7; }
/* A published post lifts onto white under the pointer */
.qc-past .qc-card.qc-s-published:hover { --qc-card: #fff; }
.qc-past .qc-card.qc-s-published:hover .qc-nets img { border-color: #fff; }
/* Keyboard focus in the card's own colour; a mouse click leaves no outline */
.qc-card:focus { outline: none; }
.qc-card:focus-visible { outline: 2px solid var(--qc-c); outline-offset: 2px; }
/* The card whose detail is open: lifted above the backdrop (.qc-backdrop is 1060), full white, its status edge and a soft ring */
.qc-open { position: relative; z-index: 1061; }
.qc-card.qc-open, .qc-past .qc-card.qc-open { opacity: 1; background: #fff; border-color: var(--qc-c); transform: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--qc-c) 25%, transparent); }
.qc-qcard.qc-open { border-color: #0d6efd; box-shadow: 0 0 0 3px rgba(13, 110, 253, .2); }

/* ---- Drag and drop: a day's cards fill the rest of the cell, so an empty day still takes a drop ---- */
.qc-cell, .qc-wk-col { display: flex; flex-direction: column; }
.qc-cell > .qc-stack, .qc-wk-col > .qc-stack { flex: 1; }
.qc-month .qc-draggable .qc-card-media, .qc-week .qc-draggable .qc-card-media { cursor: grab; }
.qc-card.qc-chosen { cursor: grabbing; transform: none; box-shadow: none; }
.qc-card.qc-ghost { opacity: .5; border-style: dashed; border-color: #0d6efd; background: #EFF6FF; }
/* The day under the pointer while dragging */
.qc-month .qc-cell.qc-drop, .qc-week .qc-wk-col.qc-drop { background: #EFF6FF; }

/* ---- Week view: one column per day, cards in time order ---- */
.qc-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; overflow: clip; }
.qc-wk-day, .qc-wk-col { border-left: 1px solid #dde3ea; }
.qc-week > :nth-child(7n + 1) { border-left: 0; }
.qc-wk-day { position: sticky; top: 0; z-index: 2; background: #fff; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-bottom: 1px solid #E5E7EB; }
/* Scrolled: the grid's top border has gone up out of view, so the pinned day names draw the edge themselves */
.qc-pinned .qc-dow, .qc-pinned .qc-wk-day { box-shadow: inset 0 1px 0 #E5E7EB; }
.qc-wk-dow { font-size: 11px; font-weight: 600; text-transform: uppercase; color: #6B7280; }
.qc-wk-day .qc-add-row { width: 100%; margin: 6px 0 0; }
.qc-wk-day:hover .qc-add-row, .qc-wk-day:focus-within .qc-add-row { opacity: 1; }
.qc-wk-col { min-height: 560px; padding: 6px; }

/* ---- List: the queue as a centred column of post cards, grouped under a date tile ---- */
.qc-queue { max-width: 960px; }
.qc-qdate { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; }
.qc-qdate b { font-size: 16px; }
.qc-qdate span { font-size: 10px; font-weight: 600; text-transform: uppercase; color: #6B7280; }
.qc-qdate-today { background: #0d6efd; border-color: #0d6efd; color: #fff; }
.qc-qdate-today span { color: rgba(255, 255, 255, .85); }
.qc-qcard { border: 1px solid #E5E7EB; border-radius: 10px; transition: border-color .12s; }
.qc-qcard:hover { border-color: #C7DBFE; }
.qc-qtext { color: #1F2937; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Version tabs: a small segmented control, network marks sized to the label */
.qc-views { display: inline-flex; background: #F1F4F8; border-radius: 8px; padding: 2px; }
.qc-views button { border: 0; background: transparent; border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 500; color: #6B7280; }
.qc-views button.active { background: #fff; color: #101010; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.qc-views img { width: 12px; height: 12px; display: block; }
/* Profiles overlap like the mobile card's account stack, each with its network badge */
.qc-qacc img:first-child { width: 26px; height: 26px; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.qc-qacc + .qc-qacc { margin-left: -6px; }
.qc-qacc-net { position: absolute; right: -3px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #fff; }
.qc-qacc-more { width: 26px; height: 26px; margin-left: -6px; border-radius: 50%; background: #F1F4F8; box-shadow: 0 0 0 2px #fff; color: #374151; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.qc-qstack:hover .text-body { color: #0d6efd !important; }
/* The small stack the cards use: 20px faces, 10px badges */
.qc-qstack-sm .qc-qacc img:first-child { width: 20px; height: 20px; }
.qc-qstack-sm .qc-qacc + .qc-qacc { margin-left: -5px; }
/* +N stands on its own after the faces, a small pill clear of the last face and its badge */
.qc-qstack-sm .qc-qacc-more {margin-left: 5px;}
.qc-qstack-sm .qc-qacc-net { width: 10px; height: 10px; }
.qc-qstack-sm .qc-qacc-more { font-size: 10px; }
/* Earlier faces sit on top, so each network badge shows over the next face instead of under it */
.qc-qstack .qc-qacc:nth-child(1) { z-index: 3; }
.qc-qstack .qc-qacc:nth-child(2) { z-index: 2; }
.qc-qstack .qc-qacc:nth-child(3) { z-index: 1; }
/* The post type on the image corner, like the video length on the mobile card */
.qc-type { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(16, 24, 40, .7); border-radius: 4px; padding: 1px 6px; }

/* ---- The cards a click opens (Bootstrap popover) ---- */
.qc-pop { max-width: 400px; border-color: #E5E7EB; border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 24, 40, .16); }
.qc-pop .popover-body { padding: 16px; }
/* Backdrop behind an open card: the same dim as the app dialogs (.rp-modal), under the popover (z-index 1070) */
.qc-backdrop { position: fixed; inset: 0; background: #1F1F1F78; z-index: 1060; }
/* Post detail: larger status, faces and badges, so they read without leaning in */
.qc-detail { width: 360px; }
.qc-detail .qc-pill { font-size: 13px; padding: 4px 10px; }
.qc-detail .qc-qacc img:first-child { width: 32px; height: 32px; }
.qc-detail .qc-qacc-net { width: 14px; height: 14px; }
.qc-detail .icon-tile-xs { width: 22px; height: 22px; flex-basis: 22px; font-size: 12px; }
.qc-detail .clw-libpick-name { font-size: 13px; }
.qc-detail .rp-label-icon-trigger { font-size: 18px; }
.qc-detail-profiles { max-height: 260px; overflow-y: auto; margin-right: -16px; padding-right: 10px; }
.qc-d-thumb { width: 88px; height: 88px; object-fit: cover; display: block; }
.qc-detail-caption { color: #101010; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* The whole day behind "+N more": a fixed width, the cards scrolling past about six, the scrollbar on the card's right edge */
.qc-day { width: 300px; }
.qc-day-list { max-height: 336px; overflow-y: auto; margin-right: -16px; padding-right: 10px; }
/* The list scrolls, so a lift or shadow on hover would be clipped at its edge: the border colour alone marks hover here */
.qc-day-list .qc-card:hover { transform: none; box-shadow: none; }
/* Scheduled details: a little wider than the post card, each row carries a time and a timezone; the list scrolls with
   its scrollbar on the card's right edge, like the day list */
.qc-pop:has(.qc-sched) { max-width: 370px; }
/* 370 less the card's 1px borders and 16px padding, so the list's scrollbar lands on the edge, not past it */
.qc-sched { width: 336px; }
.qc-sched-list { max-height: 300px; overflow-y: auto; margin-right: -16px; padding-right: 10px; }
/* Post now: small; not btn-sm, which style.css pins at 14px with !important */
.qc-sched-list .btn, .qc-detail-profiles .btn { font-size: 12px; }

/* ---- History in the Queue: status badge, failed marks, the Status filter, the failed line and the List timeline ---- */
/* On a failed post, the networks (Month, Week) and the faces (List) that did not go out wear a red ring */
.qc-card .qc-nets img.qp-net-fail { position: relative; border-color: #fff; box-shadow: 0 0 0 1.5px #e81313; }
.qc-qacc.qp-acc-fail img:first-child { box-shadow: 0 0 0 2px #e81313; }
/* Week: a day's Post and Idea buttons show while its column is hovered, not only its header */
.qc-wk-day.qp-hover .qc-add-row { opacity: 1; }

/* The List: each day is a row, its date card in a sticky column on the left of its posts. The list widens by that
   column, so the post cards keep their 960px */
.qp-timeline { max-width: 1140px; padding-top: 10px; }
.qp-day-rail { position: sticky; top: 16px; align-self: flex-start; flex: none; width: 88px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; z-index: 3; }
.qp-day-card { width: 56px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 2px; background: #fff; border-radius: 10px; }
.qp-day-dow { font-size: 11px; font-weight: 500; line-height: 1.2; color: #0d6efd; }
.qp-day-num { font-size: 18px; font-weight: 700; line-height: 1.15; color: #0d6efd; font-variant-numeric: tabular-nums; }
.qp-day-today { background: #0d6efd; }
.qp-day-today span { color: #fff; }
.qp-day-count { font-size: 11px; line-height: 1.3; color: #6B7280; }
.qp-day-posts { flex: 1; min-width: 0; }
/* A day's "+N more" / "Show less": a full-width dashed strip under its posts */
.qp-more-btn { justify-content: center; font-weight: 600; color: #101010; background: #fff; border: 1px dashed #DEE2E6; }
.qp-more-btn:hover, .qp-more-btn:focus-visible { color: #0d6efd; background: #fff; border-color: #0d6efd; }
/* The Today line: what went out sits above it, what is queued below it */
.qp-today-line { display: flex; align-items: center; gap: 10px; color: #0d6efd; font-size: 12px; font-weight: 600; margin: 28px 0 16px; }
.qp-today-line::before, .qp-today-line::after { content: ""; flex: 1; height: 1px; background: #0d6efd; opacity: .45; }
.qp-today-line span { white-space: nowrap; }

/* The Status filter: a dropdown of checkboxes, several on at once. Each row's dot wears the card's own colour, so the
   menu is also the colour key */
.qp-status-menu { min-width: 270px; }
/* Its quick picks (Needs action, Past results): small pills, blue while their mix is exactly what is on */
.btn.qp-quick { border: 1px solid #DEE2E6; background: #fff; color: #374151; border-radius: 999px; padding: 3px 10px; font-size: 12px !important; /* .btn-sm in style.css sets .875rem !important */ font-weight: 500; }
.btn.qp-quick:hover, .btn.qp-quick:focus-visible { border-color: #0d6efd; color: #0d6efd; background: #fff; }
.btn.qp-quick.active { border-color: #0d6efd; background: #EFF6FF; color: #0d6efd; }
.qp-st-dot { width: 8px; height: 8px; flex-shrink: 0; background: var(--qc-c); }
.qp-status-row .qp-n { font-variant-numeric: tabular-nums; min-width: 18px; text-align: right; }
.qp-status-row.qc-s-failed .qp-n:not(:empty) { color: #DC2626; font-weight: 700; }
/* The button reads red while only failed posts are shown */
#qpStatusBtn.qp-show-failed, #qpStatusBtn.qp-show-failed i { color: #DC2626; }
/* The failed line: plain red text in the toolbar (no pill, no border), Review underlined */
.qp-fail-chip { background: transparent; color: #DC2626; font-size: 12px !important; /* .btn-sm in style.css sets .875rem !important */ font-weight: 500; }
.qp-fail-chip:hover, .qp-fail-chip:focus-visible { background: transparent; color: #B91C1C; }

@media (prefers-reduced-motion: reduce) {
  .qc-card, .qc-add-row, .qc-qcard, .qc-card-cover { transition: none; }
  .qc-card:hover { transform: none; }
}