/*
  Hi5 Creative — Base Styles
  Palette source: Build Documentation, Section 14 (Design System) —
  same brand as every other Hi5 build, no separate visual identity here.
*/

:root {
  --color-navy: #022c42;
  --color-orange: #f8931f;
  --color-orange-2: #f15a25;
  --color-white: #ffffff;
  --color-text-secondary: #4a5568;
  --color-text-muted: #8a9bb0;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;

  --radius-md: 8px;
  --shadow-card: 0 1px 3px rgba(2, 44, 66, 0.12), 0 1px 2px rgba(2, 44, 66, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: #f5f7f9;
  color: var(--color-navy);
}

a { color: var(--color-orange-2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Login ---------- */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy);
}

.login-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 2.5rem;
  width: 100%;
  max-width: 380px;
}

.login-card h1 {
  font-size: 1.5rem;
  margin: 0 0 0.25rem;
  color: var(--color-navy);
}

.login-card .subtitle {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
}

.field {
  margin-bottom: 1rem;
}

.field label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.35rem;
}

/* Universal input/select/textarea styling (2026-08-28 — widened from
   .field-scoped to app-wide) — originally only applied inside a .field
   wrapper, so any bare input/select outside one (e.g. an existing-row edit
   form like Brand Profile's Channels list, built as a flex row of raw
   controls rather than labeled .field blocks) silently fell back to
   unstyled browser defaults. The :not() list excludes control types with
   their own real native appearance that this text-box treatment would
   distort (checkbox/radio get .toggle-switch or plain native styling;
   file/color/range/submit/button/image/hidden all render nothing like a
   text box natively). .field itself still only provides label/spacing. */
input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="hidden"]),
textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid #d5dde3;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-family: inherit;
}

input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="hidden"]):focus,
textarea:focus {
  outline: 2px solid var(--color-orange);
  outline-offset: 1px;
  border-color: var(--color-orange);
}

/* Native <select> had no styling anywhere in the app (2026-08-18 UI/UX
   pass) — bare browser default. appearance:none plus a hand-drawn chevron
   since browsers won't let you restyle the native arrow directly. */
select {
  width: 100%;
  padding: 0.65rem 2.25rem 0.65rem 0.75rem;
  border: 1px solid #d5dde3;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-family: inherit;
  background-color: var(--color-white);
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234a5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
}

select:focus {
  outline: 2px solid var(--color-orange);
  outline-offset: 1px;
  border-color: var(--color-orange);
}

/* ---------- Toggle switches (2026-08-26) — every checkbox in the app,
   restyled. The underlying <input type="checkbox"> is unchanged (still
   submits name/value/checked exactly the same) — visually hidden and
   replaced by .toggle-track, driven by the sibling-selector :checked
   trick, so no JS and no form-handling changes anywhere this is used. */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.toggle-switch .toggle-track {
  width: 2.25rem;
  height: 1.25rem;
  background: #d5dde3;
  border-radius: 999px;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.toggle-switch .toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.05rem;
  height: 1.05rem;
  background: var(--color-white);
  border-radius: 50%;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.toggle-switch input[type="checkbox"]:checked + .toggle-track {
  background: var(--color-orange);
}
.toggle-switch input[type="checkbox"]:checked + .toggle-track::after {
  transform: translateX(1rem);
}
.toggle-switch input[type="checkbox"]:focus-visible + .toggle-track {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

.btn-primary {
  width: 100%;
  padding: 0.75rem;
  background: var(--color-orange);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-primary:hover { background: var(--color-orange-2); }

.error-banner {
  background: #fde8e0;
  color: var(--color-orange-2);
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

/* ---------- App shell (admin + portal) ---------- */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 220px;
  background: var(--color-navy);
  color: var(--color-white);
  padding: 1.5rem 1rem;
  flex-shrink: 0;
}

.sidebar .brand {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.sidebar .brand .accent { color: var(--color-orange); }

.sidebar nav a {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.sidebar nav a:hover {
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.main-content {
  flex: 1;
  padding: 2rem;
}

.main-content h1 {
  margin-top: 0;
}

.card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
}

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

/* ---------- Page header / buttons ---------- */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

.btn-inline {
  width: auto;
  display: inline-block;
  padding: 0.6rem 1.1rem;
}

.back-link {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

/* ---------- Badges ---------- */

.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
  background: #eef1f4;
  color: var(--color-text-secondary);
}

.badge-in_progress, .badge-in_review, .badge-open, .badge-client_reviewing { background: #fde8e0; color: var(--color-orange-2); }
.badge-delivered, .badge-resolved, .badge-completed, .badge-published { background: #e3f3e8; color: #1f8a4c; }

a.badge { text-decoration: none; }
a.badge:hover { text-decoration: none; opacity: 0.8; }

/* ---------- Admin queue ---------- */

.queue-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.queue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.queue-table th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 2px solid #eef1f4;
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.queue-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #eef1f4;
}

.queue-table tr:last-child td { border-bottom: none; }

.task-section-heading {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin: 2rem 0 0.75rem;
}
.task-section-heading:first-of-type { margin-top: 0; }

/* Phase 5 category sub-sections (2026-08-14) — one level above
   task-section-heading in the Tasks tab's checklist groups (Website/Phone
   System/Automations/Forms), so it needs to read as a bigger grouping, not
   another task title. */
.task-category-heading {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  border-bottom: 1px solid #eef1f4;
  padding-bottom: 0.4rem;
  margin: 2rem 0 1rem;
}
.task-category-heading:first-of-type { margin-top: 0; }

.task-status-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* ---------- Project list ---------- */

.project-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Denser rows (2026-08-26) — was inheriting .card's full 1.5rem padding,
   reads as a stack of big spaced-out cards rather than a scannable list. */
.project-card {
  display: block;
  color: inherit;
  padding: 0.75rem 1rem;
}

.project-card:hover {
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(2, 44, 66, 0.15);
}

.project-card-title {
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.project-card-meta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* ---------- Client dashboard: needs-your-review ---------- */

.review-alert {
  border: 1px solid var(--color-orange);
  background: #fff8f0;
  margin-bottom: 1.5rem;
}

.review-alert-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-md);
  color: inherit;
}

.review-alert-item:hover {
  background: rgba(248, 147, 31, 0.1);
  text-decoration: none;
}

.date-change-request { justify-content: space-between; }

.attention-subheading {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  margin: 1rem 0 0.5rem;
}
.attention-subheading:first-of-type { margin-top: 0; }

/* ---------- Deliverable Review Engine ---------- */

.upload-card { margin-bottom: 1.5rem; }
.upload-card form { display: flex; gap: 0.75rem; align-items: center; margin-top: 0.75rem; }

.version-block {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  margin-bottom: 1rem;
}

.version-block summary {
  cursor: pointer;
  padding: 1rem 1.5rem;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.version-block summary::-webkit-details-marker { display: none; }

.video-review-block { padding: 0 1.5rem 1.5rem; }

.review-video {
  width: 100%;
  max-height: 480px;
  background: #000;
  border-radius: var(--radius-md);
  display: block;
}

.review-timeline {
  position: relative;
  height: 28px;
  margin: 0.75rem 0 0.35rem;
  background: #eef1f4;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.review-timeline-track {
  --progress: 0%;
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: var(--progress);
  background: rgba(248, 147, 31, 0.35);
  border-radius: var(--radius-md);
  pointer-events: none;
}

.review-pin {
  position: absolute;
  top: 2px;
  width: 4px;
  height: 24px;
  background: var(--color-orange-2);
  border-radius: 2px;
  transform: translateX(-50%);
  cursor: pointer;
}

.review-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.review-time-display {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.review-comments {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
  max-height: 260px;
  overflow-y: auto;
}

.review-comment {
  display: flex;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: #f5f7f9;
  border-radius: var(--radius-md);
}

.review-comment-time {
  flex-shrink: 0;
  background: var(--color-navy);
  color: var(--color-white);
  border: none;
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  height: fit-content;
}

.review-comment-body p { margin: 0.15rem 0 0; font-size: 0.9rem; }

.review-comment-form textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid #d5dde3;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  resize: vertical;
}

/* ---------- Deliverable Review Engine — image variant ---------- */

.image-review-block { padding: 0 1.5rem 1.5rem; }

.review-pin-hint {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
}

.review-image-wrap {
  position: relative;
  cursor: crosshair;
  line-height: 0;
  margin-bottom: 0.75rem;
}

.review-image {
  width: 100%;
  max-height: 480px;
  object-fit: contain;
  background: #000;
  border-radius: var(--radius-md);
  display: block;
}

.image-review-block .review-pin {
  top: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-orange-2);
  color: var(--color-white);
  font-size: 0.7rem;
  font-weight: 700;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-white);
  box-shadow: 0 1px 3px rgba(2, 44, 66, 0.35);
}

.image-review-block .review-pin-pending {
  background: var(--color-navy);
  opacity: 0.85;
}

.review-comment-highlight {
  outline: 2px solid var(--color-orange);
  outline-offset: 1px;
}

/* ---------- Project detail redesign (info panel / pipeline / tabs, 2026-08-07) ---------- */

/* Full-width now that the info panel isn't sharing a row with it
   (2026-08-07 UI fixes) — the tracker previously lived in a 1/3-width side
   column, so its list stacked vertically; back to a wrapping row now that
   it has the room. */
.info-panel { margin-bottom: 1.5rem; }
.pipeline-tracker { margin-bottom: 1.5rem; }

.info-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 1rem;
}

/* Title/Category/Edit Type row (2026-08-28) — fixed 50/25/25 split via
   flex-grow ratios (2:1:1) rather than percentages, so the 1rem gaps
   between boxes come out of the shared space correctly instead of
   pushing the row wider than its container. */
.info-panel-row-top {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.info-panel-row-top .field-boxed { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
.info-panel-row-top .field-boxed:first-child { flex: 2 1 0; }

.info-readonly {
  padding: 0.65rem 0.75rem 0.65rem 0;
  color: var(--color-text-secondary);
  white-space: pre-wrap;
}

.date-suggest summary {
  font-size: 0.8rem;
  color: var(--color-orange-2);
  cursor: pointer;
  list-style: none;
}
.date-suggest summary::-webkit-details-marker { display: none; }

.date-suggest form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
  max-width: 260px;
}
.date-suggest input,
.date-suggest textarea {
  padding: 0.5rem 0.6rem;
  border: 1px solid #d5dde3;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.85rem;
}

.pipeline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.pipeline-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #f5f7f9;
  border-radius: var(--radius-md);
  padding: 0.5rem 0.85rem;
  font-size: 0.9rem;
}

.pipeline-item-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Click-to-edit status/assignee (2026-08-07) — plain badges/text become
   clickable targets that swap in a <select> in place, no page reload. */
.inline-edit {
  cursor: pointer;
  border-radius: var(--radius-md);
  padding: 0.1rem 0.3rem;
}

.inline-edit:hover { background: rgba(2, 44, 66, 0.06); }

.inline-edit-disabled { cursor: default; }
.inline-edit-disabled:hover { background: none; }

.inline-edit select {
  font-size: 0.85rem;
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-md);
  border: 1px solid #d5dde3;
  font-family: inherit;
}

.inline-edit-error {
  display: block;
  color: var(--color-orange-2);
  font-size: 0.75rem;
  margin-top: 0.2rem;
}

/* Click-to-edit Project Info fields (2026-08-08) — same pattern as
   .inline-edit above, generalized to plain text/date values instead of
   status/assignee badges. */
.inline-edit-detail {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: var(--radius-md);
  padding: 0.1rem 0.3rem;
}
.inline-edit-detail .inline-edit-display { white-space: pre-wrap; cursor: text; }
.inline-edit-pencil {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  opacity: 0.5;
  padding: 0.15rem 0.35rem;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.inline-edit-pencil:hover { opacity: 1; background: rgba(2, 44, 66, 0.08); }

/* Boxed header layout (2026-08-28) — Description and Client Notes / Script
   get a titled header bar instead of a bare label above the text: their
   content can run to multiple lines/paragraphs, and a pencil sitting
   inline right after a block of text read as adrift rather than attached
   to anything. The pencil now floats at the right edge of the header bar;
   the whole click-to-edit trigger lives on the pencil only (see
   inline-edit-details.js), not the content area, so the text underneath is
   plain selectable content a client can copy without accidentally opening
   the editor. */
.field-boxed {
  border: 1px solid #d5dde3;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.field-boxed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: #f4f6f8;
  color: var(--color-navy);
  padding: 0.5rem 0.5rem 0.5rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-bottom: 1px solid #d5dde3;
}
.field-boxed-body {
  padding: 0.85rem;
}
/* .inline-edit-detail is a row flex container everywhere else (label text
   + pencil side by side on one line) — inside a boxed field it instead
   wraps the header bar AND the body stacked on top of each other, so it
   needs to give up that row layout here or the header shrinks to its
   content instead of spanning full width at the top. */
.field-boxed .inline-edit-detail { display: block; padding: 0; }
.field-boxed-body .ql-editor { padding: 0; font-size: 1rem; }
.field-boxed-body .ql-container { border: none; font-family: inherit; }
.field-boxed-body .ql-toolbar { border: none; border-bottom: 1px solid #d5dde3; padding: 0 0 0.5rem; margin-bottom: 0.5rem; }
.inline-edit-input {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid #d5dde3;
  border-radius: var(--radius-md);
  width: 100%;
}

/* Client Notes / Script rich-text editor (2026-08-27) */
.inline-edit-richtext { width: 100%; }
.inline-edit-richtext-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

.queue-action-compact {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.queue-action-compact form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.error-inline {
  color: var(--color-orange-2);
  font-size: 0.8rem;
}

.tab-bar {
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid #eef1f4;
  margin-bottom: 1.5rem;
}

.tab-link {
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.tab-link:hover { text-decoration: none; color: var(--color-navy); }

.tab-link-active {
  color: var(--color-orange-2);
  border-bottom-color: var(--color-orange-2);
}

.deliverables-final-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.deliverable-final-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f5f7f9;
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
}

/* Client-side Assets list (2026-08-26) — spreadsheet-style alternating
   rows instead of the gapped, individually-rounded cards other
   .deliverable-final-item lists (credits ledger, admin's Finished
   Deliverables) still use — scoped to this modifier only. */
.assets-list {
  gap: 0;
}
.assets-list .deliverable-final-item {
  background: transparent;
  border-radius: 0;
  padding: 0.6rem 1rem;
}
.assets-list .deliverable-final-item:nth-child(even) {
  background: #f5f7f9;
}

/* ---------- Thumbnail candidate selection (Section 4/5, 2026-08-04) ---------- */

.thumbnail-candidate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.thumbnail-candidate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: #f5f7f9;
}

.thumbnail-candidate img {
  width: 100%;
  max-height: 160px;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: #000;
  cursor: zoom-in;
}

/* Thumbnail lightbox (2026-08-28) — native <dialog>, no library. */
.lightbox-dialog {
  border: none;
  border-radius: var(--radius-md);
  padding: 0;
  background: transparent;
  max-width: 90vw;
  max-height: 90vh;
}
.lightbox-dialog::backdrop { background: rgba(0, 0, 0, 0.75); }
.lightbox-dialog img { display: block; max-width: 90vw; max-height: 90vh; border-radius: var(--radius-md); }
.lightbox-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: var(--color-white);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(0, 0, 0, 0.8); }

.thumbnail-candidate-selected {
  border-color: #1f8a4c;
  background: #e3f3e8;
}

/* ---------- Secondary/small buttons (2026-08-18 UI/UX pass) ---------- */

/* Replaces the ad hoc `style="background:var(--color-text-muted)"` that
   had been copy-pasted onto every secondary ("Remove"/"Reject"/"Clear")
   button across the app — one class instead of a repeated inline style, so
   a future palette tweak only touches this rule. */
.btn-secondary {
  background: var(--color-text-muted);
}
.btn-secondary:hover { background: #6b7d94; }

/* Compact variant for actions living inside a repeatable row (Remove/Copy/
   Save) rather than a full-width page-level action — fixed min-width keeps
   a row of these visually even instead of each button sizing to its own
   label's length. */
.btn-sm {
  width: auto;
  display: inline-block;
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  min-width: 5rem;
  text-align: center;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ---------- Repeatable row sections (Brand Profile Branding/Content
   Links/Channels, and anywhere else a "add one, list many, remove any"
   pattern shows up) ---------- */

/* One .card holds BOTH the add-form and the resulting list — previously
   the add-form was its own floating .card with the list rendered as a
   second, visually disconnected block below it (project_assets' Assets tab
   had the identical split). .row-section-list sits inside that same card,
   divided from the add-form by a plain border rather than its own
   background, so it reads as one section instead of two stacked boxes. */
.row-section-form {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

/* align-items:flex-end above aligns flex items' MARGIN-box edges, and
   .field carries a margin-bottom:1rem meant for stacked, non-flex forms
   (the login form, plain vertical forms) — inside a row like this, that
   margin pushes each field's actual content a rem above the alignment
   line while the button (no bottom margin) sits right on it, so the
   button visibly sits lower than the input beside it (2026-08-18 fix).
   Zeroed here rather than on .field itself since plain vertical forms
   still want the spacing between stacked fields. */
.row-section-form .field {
  margin-bottom: 0;
}

.row-section-list {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #eef1f4;
}

/* Same row styling as .row-section-list without the top divider/spacing —
   for a list rendered in its own card with no add-form above it in that
   same card (2026-08-18, Branding tab's two-box Logos & Headshots split:
   the upload form and the uploaded-items list are now separate cards side
   by side, not stacked in one). */
.row-list {
  display: flex;
  flex-direction: column;
}

/* Two side-by-side widget boxes (2026-08-18, Branding tab redesign) —
   generic enough to reuse anywhere a pair (or more) of cards should sit as
   equal-width columns instead of full-width stacked sections. Wraps to a
   single column below ~280px per box rather than a fixed breakpoint. */
.widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.widget-box-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0 0 0.75rem;
}

.row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid #eef1f4;
  flex-wrap: wrap;
}
.row-item:last-child { border-bottom: none; }

.row-item-main {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

/* Reusable color swatch box — was an inline style repeated per row; the
   actual color still has to come from a template/JS since it's data, not
   part of the class, but the box shape/border is now shared. */
.swatch {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.swatch-lg {
  width: 2.25rem;
  height: 2.25rem;
}

/* ---------- Drag-and-drop upload (2026-08-18) ---------- */

.dropzone {
  border: 2px dashed #d5dde3;
  border-radius: var(--radius-md);
  padding: 1.25rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.dropzone:hover,
.dropzone-active {
  border-color: var(--color-orange);
  background: #fff8f0;
  color: var(--color-text-secondary);
}

.dropzone-filename {
  color: var(--color-navy);
  font-weight: 600;
}

/* Taller variant (2026-08-18) — the Branding tab's logo/headshot dropzone
   now has more surrounding room (its own card, not sharing a row with
   other fields), so a bigger drop target reads better than matching a
   plain text input's height. */
.dropzone-lg {
  padding: 2.5rem 1.25rem;
}

/* Thumbnail upload redesign (2026-08-28) — full-width, taller dropzone
   with pre-upload previews (each individually removable) instead of the
   cramped dropzone-hugs-its-own-content-next-to-the-button layout every
   other .upload-card form in this app still uses. Scoped to this one form
   since only this upload box was asked for. */
.thumbnail-upload-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}
.thumbnail-upload-form .dropzone {
  width: 100%;
  padding: 2.5rem 1.25rem;
}
.thumbnail-upload-form button[type="submit"] {
  align-self: flex-start;
}
.thumbnail-upload-previews {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.75rem;
  width: 100%;
}
.thumbnail-preview-item {
  position: relative;
  width: 100px;
  height: 100px;
}
.thumbnail-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid #d5dde3;
  background: #000;
}
.thumbnail-preview-remove {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: none;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.thumbnail-preview-remove:hover { background: var(--color-orange-2); }

/* Calendar (2026-08-26) — a plain month grid, no external library. Native
   HTML5 drag-and-drop (draggable + ondragover/ondrop) rather than a
   dependency, since "drag an event to a new day" doesn't need more than
   that. */
.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--color-text-muted);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.calendar-weekday {
  background: var(--color-navy);
  color: var(--color-white);
  padding: 0.5rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
}
.calendar-day {
  background: var(--color-white);
  min-height: 110px;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.calendar-day.calendar-day-outside { background: #f4f6f8; }
.calendar-day.calendar-day-dragover { background: #fff3e0; }
.calendar-day-number { font-size: 0.8rem; color: var(--color-text-muted); }
.calendar-event {
  background: var(--color-orange);
  color: var(--color-white);
  border-radius: 4px;
  padding: 0.25rem 0.4rem;
  font-size: 0.75rem;
  line-height: 1.3;
  cursor: grab;
}
.calendar-event:active { cursor: grabbing; }
.calendar-event-title { font-weight: 600; }
.calendar-event-meta { opacity: 0.9; font-size: 0.7rem; }

/* Day/Week views + platform color (2026-08-27) */
.calendar-view-toggle { display: flex; gap: 0.5rem; }
.calendar-grid-week .calendar-day { min-height: 320px; }
.calendar-day-agenda { display: flex; flex-direction: column; gap: 0.5rem; }
.calendar-event-agenda { cursor: default; padding: 0.6rem 0.8rem; font-size: 0.85rem; }
.calendar-event-agenda .calendar-event-title { font-size: 0.95rem; }
.ts-color-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  margin-right: 0.35rem;
  vertical-align: middle;
}
/* Match Tom Select's control to the same radius as the plain .field selects
   (Date Type, Brand) beside it — its own stylesheet ships a smaller default. */
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
.ts-dropdown {
  border-radius: var(--radius-md);
}
/* Collapsed to one line (same height as the plain .field selects beside it)
   until focused/open, same as Notion's own multi-select tag field — expands
   to show every selected tag only while actively being used. Selectors
   mirror Tom Select's own has-items/focus/dropdown-active state classes so
   these win on specificity regardless of source order. */
.ts-wrapper.multi .ts-control,
.ts-wrapper.multi.has-items .ts-control {
  flex-wrap: nowrap;
  align-items: center;
  overflow: hidden;
  padding: 0.65rem 0.75rem;
}
.ts-wrapper.multi.focus .ts-control,
.ts-wrapper.multi.has-items.focus .ts-control,
.ts-wrapper.multi.dropdown-active .ts-control,
.ts-wrapper.multi.has-items.dropdown-active .ts-control {
  flex-wrap: wrap;
  align-items: flex-start;
  overflow: visible;
  padding: 6px 8px 3px;
}
/* Tom Select's own tag pills are `overflow:auto` — invisible until a pill
   gets squeezed by the nowrap collapse above, at which point the browser
   draws real scrollbars inside it. Tags never need to scroll internally. */
.ts-wrapper.multi .ts-control > div {
  overflow: visible;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Mode toggle (2026-08-26) — Settings > Clients' "Add Client" Manual/GHL
   switch, and reusable anywhere else a similar radio-driven panel switch
   is needed. */
.toggle-tabs {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e2e8f0;
}
.toggle-tabs label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  cursor: pointer;
}