/* Canopy queue dashboard — page-specific styles on top of FV shared.css.
   Dark mode: see shared-assets/DARK-MODE-GUIDE.md. */

/* --- Type scale corrections (page rule: H1 = 2xl, not 3xl) ----------------- */

main h1 { font-size: var(--fv-fs-2xl); line-height: 1.3; }
main h2 { font-size: var(--fv-fs-xl);  line-height: 1.4; }
main h3 { font-size: var(--fv-fs-lg);  line-height: 1.4; }

/* --- Surface chrome ------------------------------------------------------
   shared.css renders body / .fv-card / .fv-header / .fv-footer with brand
   literals (--fv-white, --fv-navy, --fv-gray-*) which are theme-invariant
   under the new contract. Re-skin them with semantic tokens here so the
   page chrome flips with .dark. */

body                  { background-color: var(--background); color: var(--foreground); }
.fv-card              { background: var(--card); color: var(--card-foreground); }
.fv-header            { background: var(--background); border-bottom-color: var(--border); }
.fv-header-brand      { color: var(--foreground); }
.fv-header-nav a      { color: var(--muted-foreground); }
.fv-header-nav a:hover{ color: var(--primary); }
.fv-footer            { background: var(--muted); border-top-color: var(--border); }
.fv-footer-brand      { color: var(--muted-foreground); }
.fv-footer-links a    { color: var(--muted-foreground); }
.fv-footer-links a:hover { color: var(--primary); }
.fv-footer-copy       { color: var(--muted-foreground); border-top-color: var(--border); }
.fv-text-muted        { color: var(--muted-foreground); }

/* --- Auth shell (login page) --------------------------------------------- */

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
  padding: var(--fv-space-lg);
}
.auth-stack {
  width: 100%;
  max-width: 384px;
  display: flex;
  flex-direction: column;
  gap: var(--fv-space-lg);
}
.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fv-space-sm);
  text-align: center;
}
.auth-brand img { height: 56px; width: auto; }
.auth-brand h1 {
  font-size: var(--fv-fs-2xl);
  font-weight: 600;
  color: var(--foreground);
  margin: 0;
}
.auth-brand p {
  font-size: var(--fv-fs-sm);
  color: var(--muted-foreground);
  margin: 0;
}
.auth-card {
  display: flex;
  flex-direction: column;
  gap: var(--fv-space-md);
}
.auth-submit { width: 100%; justify-content: center; }
.auth-submit[disabled] { opacity: 0.5; cursor: progress; }

/* --- Form field (label + input + helper) --------------------------------- */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--fv-space-xs);
}
.form-field label {
  font-size: var(--fv-fs-sm);
  font-weight: 500;
  color: var(--foreground);
}
.form-field input {
  padding: var(--fv-space-sm) var(--fv-space-md);
  font-size: var(--fv-fs-sm);
  border: 1px solid var(--border);
  border-radius: var(--fv-radius-sm);
  background: var(--input);
  color: var(--foreground);
  height: 36px;
}
.form-field input:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
  border-color: var(--ring);
}

/* --- Logout button in header --------------------------------------------- */

.logout-form { margin: 0; }

/* --- Header bar tightened to ~56px ---------------------------------------- */

.fv-header { padding: var(--fv-space-sm) 0; }
.fv-header-logo { height: 28px; }

/* --- Buttons: icon alignment + focus ring + auto-icon size ---------------- */

.fv-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--fv-space-sm);
}
.fv-btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.fv-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.fv-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.fv-btn-danger {
  background: transparent;
  color: var(--fv-danger);
  border: 1px solid var(--fv-danger);
}
.fv-btn-danger:hover { background: var(--fv-danger); color: var(--fv-white); }

.fv-btn-ghost {
  background: transparent;
  color: var(--muted-foreground);
  border: 1px solid transparent;
}
.fv-btn-ghost:hover { background: var(--muted); color: var(--foreground); }

/* --- Header nav links --------------------------------------------------- */

.fv-header-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--fv-space-xs);
}
.fv-header-nav a svg { width: 16px; height: 16px; }

.icon-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--fv-radius);
  padding: 6px;
  cursor: pointer;
  color: var(--muted-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--fv-transition), color var(--fv-transition);
}
.icon-btn:hover { background: var(--muted); color: var(--foreground); }
.icon-btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.icon-btn svg { width: 16px; height: 16px; }

/* --- Inline alert (flash banner) ----------------------------------------- */

.flash {
  display: flex;
  align-items: center;
  gap: var(--fv-space-sm);
  padding: var(--fv-space-md) var(--fv-space-lg);
  border-radius: var(--fv-radius);
  margin: var(--fv-space-lg) 0;
  font-size: var(--fv-fs-sm);
  border: 1px solid transparent;
  transition: opacity 0.4s ease;
}
.flash svg { width: 18px; height: 18px; flex-shrink: 0; }
.flash.dismissed { opacity: 0; pointer-events: none; }
/* Status colors stay anchored to brand literals — UI-DESIGN-RULES §2:
   status identities are theme-invariant. */
.flash-success {
  background: color-mix(in srgb, var(--fv-green) 10%, transparent);
  color: var(--fv-green-dark);
  border-color: color-mix(in srgb, var(--fv-green) 30%, transparent);
}
.flash-info {
  background: color-mix(in srgb, var(--fv-info) 10%, transparent);
  color: color-mix(in srgb, var(--fv-info) 80%, var(--foreground));
  border-color: color-mix(in srgb, var(--fv-info) 30%, transparent);
}
.flash-warning {
  background: color-mix(in srgb, var(--fv-warning) 10%, transparent);
  color: color-mix(in srgb, var(--fv-warning) 70%, var(--foreground));
  border-color: color-mix(in srgb, var(--fv-warning) 30%, transparent);
}
.flash-danger {
  background: color-mix(in srgb, var(--fv-danger) 10%, transparent);
  color: var(--fv-danger);
  border-color: color-mix(in srgb, var(--fv-danger) 30%, transparent);
}

/* --- Status panel (last email + scheduler info) -------------------------- */

.status-panel {
  margin: var(--fv-space-md) 0 var(--fv-space-lg);
  padding: var(--fv-space-md) var(--fv-space-lg);
  font-size: var(--fv-fs-sm);
  color: var(--muted-foreground);
  display: flex;
  flex-wrap: wrap;
  gap: var(--fv-space-md);
}
.status-panel code {
  font-family: var(--fv-font-mono);
  color: var(--foreground);
  font-size: var(--fv-fs-xs);
}

/* --- Queue summary line -------------------------------------------------- */

.queue-summary {
  color: var(--muted-foreground);
  font-size: var(--fv-fs-sm);
  margin-bottom: var(--fv-space-md);
}

/* --- Empty state (dashed border + icon hero + headline + description) ---- */

.empty-state {
  border: 2px dashed var(--border);
  background: transparent;
  box-shadow: none;
  padding: var(--fv-space-3xl) var(--fv-space-lg);
  text-align: center;
  color: var(--muted-foreground);
}
.empty-state .icon-hero {
  width: 36px;
  height: 36px;
  margin: 0 auto var(--fv-space-md);
  color: var(--muted-foreground);
}
.empty-state h2 {
  font-size: var(--fv-fs-lg);
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: var(--fv-space-xs);
}
.empty-state p {
  color: var(--muted-foreground);
  margin-bottom: var(--fv-space-lg);
}

/* --- Queue card row ------------------------------------------------------ */

.queue-row { margin-bottom: var(--fv-space-lg); }
.queue-row .row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fv-space-sm);
  margin-bottom: var(--fv-space-sm);
  font-size: var(--fv-fs-sm);
  color: var(--muted-foreground);
}
.queue-row h3 { margin: var(--fv-space-sm) 0; }
.queue-row h3 a {
  color: var(--foreground);
  text-decoration: underline;
  text-decoration-color: var(--border);
}
.queue-row h3 a:hover {
  color: var(--primary);
  text-decoration-color: var(--primary);
}
.queue-row .submeta {
  color: var(--muted-foreground);
  font-size: var(--fv-fs-sm);
  margin-bottom: var(--fv-space-md);
}
.queue-row .draft-body {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--fv-radius-sm);
  padding: var(--fv-space-md);
  word-wrap: break-word;
  font-family: var(--fv-font-mono);
  font-size: var(--fv-fs-sm);
  margin-top: var(--fv-space-sm);
  color: var(--foreground);
}
.queue-row .draft-body p { margin: 0 0 var(--fv-space-md); }
.queue-row .draft-body p:last-child { margin-bottom: 0; }
/* Excludes .confirm-cancel so the action-row's <details> isn't pushed
   8px down relative to its <form> sibling. The shared utility's
   `.fv-action-row > details { margin: 0 }` ties this on specificity and
   loses by source order; scoping here is the cleanest fix. */
.queue-row details:not(.confirm-cancel) { margin: var(--fv-space-sm) 0; }
.queue-row details summary {
  cursor: pointer;
  font-size: var(--fv-fs-sm);
  color: var(--muted-foreground);
  padding: var(--fv-space-xs) 0;
  display: inline-flex;
  align-items: center;
  gap: var(--fv-space-xs);
}
.queue-row details summary:hover { color: var(--primary); }
.queue-row details summary svg { width: 14px; height: 14px; }
.queue-row label {
  display: block;
  font-size: var(--fv-fs-sm);
  color: var(--foreground);
  font-weight: 500;
  margin-top: var(--fv-space-sm);
  margin-bottom: var(--fv-space-xs);
}
.queue-row textarea {
  width: 100%;
  min-height: 280px;
  padding: var(--fv-space-md);
  font-family: var(--fv-font-mono);
  font-size: var(--fv-fs-sm);
  border: 1px solid var(--border);
  border-radius: var(--fv-radius-sm);
  background: var(--input);
  color: var(--foreground);
  resize: vertical;
}
.queue-row textarea:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
  border-color: var(--ring);
}
/* Layout primitives come from .fv-action-row (shared.css §5.1.1). The
   queue-card framing — the separator line above the row — stays here. */
.queue-row .actions {
  margin-top: var(--fv-space-md);
  padding-top: var(--fv-space-md);
  border-top: 1px solid var(--border);
}

/* --- Two-click cancel confirmation pattern ------------------------------- */

.confirm-cancel {
  display: inline-flex;
  flex-direction: column;
  gap: var(--fv-space-xs);
}
.confirm-cancel summary {
  list-style: none;
  cursor: pointer;
}
.confirm-cancel summary::-webkit-details-marker { display: none; }
.confirm-cancel[open] summary { display: none; }
/* Grid layout so the warning (icon + text) sits on row 1 and the
   confirm button gets its own full-width row 2. The parent <details>
   is a flex child of .fv-action-row pinned at ~50% column width, so a
   single-row icon+text+button layout would squash the text to 3 lines
   and clip the button label. */
.confirm-cancel .confirm-row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon text"
    "form form";
  align-items: center;
  gap: var(--fv-space-sm);
  padding: var(--fv-space-sm) var(--fv-space-md);
  background: color-mix(in srgb, var(--fv-danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--fv-danger) 30%, transparent);
  border-radius: var(--fv-radius);
}
.confirm-cancel .confirm-row > svg {
  grid-area: icon;
  width: 18px;
  height: 18px;
  color: var(--fv-danger);
}
.confirm-cancel .confirm-row > span {
  grid-area: text;
  font-size: var(--fv-fs-sm);
  color: var(--fv-danger);
  font-weight: 500;
}
.confirm-cancel .confirm-row > form { grid-area: form; }

/* --- Pill-shaped status badges (FV rule: rounded-full) -------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: var(--fv-fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.badge svg { width: 12px; height: 12px; }
.badge-project {
  background: var(--muted);
  color: var(--muted-foreground);
  border-color: var(--border);
}
.status-pending {
  background: var(--muted);
  color: var(--muted-foreground);
}
.status-scheduled {
  background: color-mix(in srgb, var(--fv-info) 12%, transparent);
  color: color-mix(in srgb, var(--fv-info) 80%, var(--foreground));
  border-color: color-mix(in srgb, var(--fv-info) 30%, transparent);
}
.status-approved {
  background: color-mix(in srgb, var(--fv-green) 12%, transparent);
  color: var(--fv-green-dark);
  border-color: color-mix(in srgb, var(--fv-green) 30%, transparent);
}
.status-edited {
  background: color-mix(in srgb, var(--fv-warning) 12%, transparent);
  color: color-mix(in srgb, var(--fv-warning) 70%, var(--foreground));
  border-color: color-mix(in srgb, var(--fv-warning) 30%, transparent);
}
.dot { color: var(--muted-foreground); }