/* CQ Studio — mobile-first layer on top of Pico classless. */

:root {
  --cq-maroon: #5e1420;
  --cq-ivory: #f4ece0;
  --cq-gold: #d9b67e;
}

/* --- shell / nav ---------------------------------------------------------- */
body { margin: 0; }
.cq-main { padding: 0.75rem; max-width: 64rem; margin: 0 auto; }
@media (min-width: 768px) { .cq-main { padding: 1.25rem 2rem; } }

.cq-nav {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.5rem 0.75rem;
  background: var(--cq-maroon); color: var(--cq-ivory);
}
.cq-nav a { color: var(--cq-ivory); text-decoration: none; padding: 0.4rem 0.5rem; }
.cq-nav a:hover { color: var(--cq-gold); }
.cq-brand { font-weight: 700; letter-spacing: 0.04em; }
.cq-nav-links { display: flex; gap: 0.25rem; flex-wrap: wrap; flex: 1; }
.cq-logout { margin: 0; }
.cq-logout button { margin: 0; padding: 0.25rem 0.75rem; font-size: 0.85rem; }

/* --- login ---------------------------------------------------------------- */
.cq-login-wrap { display: flex; justify-content: center; padding-top: 12vh; }
.cq-login-card { width: 100%; max-width: 22rem; padding: 1.5rem; }
.cq-login-card h1 { margin-bottom: 0.25rem; color: var(--cq-maroon); }
.cq-login-sub { margin-top: 0; opacity: 0.7; font-size: 0.9rem; }
.cq-login-error {
  background: #fde8e8; color: #9b1c1c; border: 1px solid #f5b5b5;
  border-radius: 6px; padding: 0.5rem 0.75rem; font-size: 0.9rem;
}

/* --- plan cards ----------------------------------------------------------- */
.cq-card {
  border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 10px;
  padding: 0.9rem; margin-bottom: 0.9rem; background: var(--pico-card-background-color, #fff);
}
.cq-card h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.cq-card .cq-meta { font-size: 0.8rem; opacity: 0.7; margin-bottom: 0.5rem; }

/* thumb-friendly action buttons */
.cq-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.cq-actions form { margin: 0; }
.cq-actions button, .cq-actions a[role="button"] {
  min-height: 44px; min-width: 44px; padding: 0.55rem 1rem;
  font-size: 0.95rem; margin: 0;
}

/* media previews */
.cq-video, .cq-thumb {
  width: 100%; max-width: 320px; aspect-ratio: 9 / 16;
  border-radius: 8px; background: #000; object-fit: cover; display: block;
}
.cq-imgrow { display: flex; gap: 0.5rem; overflow-x: auto; }
.cq-imgrow img { height: 180px; border-radius: 6px; }

/* --- status badges -------------------------------------------------------- */
.badge {
  display: inline-block; padding: 0.12rem 0.55rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; white-space: nowrap;
}
/* approval */
.badge-planned      { background: #e5e7eb; color: #374151; }
.badge-needs_review { background: #fef3c7; color: #92400e; }
.badge-approved     { background: #d1fae5; color: #065f46; }
/* generation */
.badge-none        { background: #e5e7eb; color: #6b7280; }
.badge-queued      { background: #dbeafe; color: #1e40af; }
.badge-generating  { background: #e0e7ff; color: #3730a3; }
.badge-ready       { background: #d1fae5; color: #065f46; }
.badge-error       { background: #fee2e2; color: #991b1b; }
.badge-regenerate  { background: #fce7f3; color: #9d174d; }
/* publish */
.badge-unpublished { background: #e5e7eb; color: #6b7280; }
.badge-scheduled   { background: #dbeafe; color: #1e40af; }
.badge-publishing  { background: #e0e7ff; color: #3730a3; }
.badge-published   { background: #d1fae5; color: #065f46; }
.badge-failed      { background: #fee2e2; color: #991b1b; }
.badge-deferred    { background: #fef3c7; color: #92400e; }

/* --- alerts / banners ----------------------------------------------------- */
.cq-alert-error {
  background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5;
  border-radius: 8px; padding: 0.6rem 0.9rem; margin-bottom: 0.9rem;
}
.cq-alert-ok {
  background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7;
  border-radius: 8px; padding: 0.6rem 0.9rem; margin-bottom: 0.9rem;
}

/* --- tables (metrics / admin) -------------------------------------------- */
.cq-table-wrap { overflow-x: auto; }
.cq-table-wrap table { font-size: 0.85rem; }

/* --- misc ----------------------------------------------------------------- */
.cq-muted { opacity: 0.65; font-size: 0.85rem; }
.htmx-request { opacity: 0.55; pointer-events: none; }