/* ============================================================================
   Proplist — NEW/EDIT listing form + posting COMPOSER (group picker)
   Loaded AFTER styles.css + pro-theme.css. Additive overrides only.

   Goal: CLEAN · OFFICIAL · TRUSTWORTHY — bright white, spacious, calm.
   One blue accent (--accent #1E63D6). Status colours only on status chips.
   Think PropertyGuru / a bank app. Posting flow = big, obvious, effortless.

   Every selector is scoped to one of:
     #page-new / #listing-form        → the create/edit listing form
     #page-composer                   → the publish composer shell
     #composer-fb-groups              → the FB group picker (workflow's heart)
     #composer-channel-content        → per-channel copy
     #composer-platforms              → destination toggles
   ======================================================================== */

/* ===========================================================================
   1. SECTION HEADERS — serif, calm, confident. Same on both screens.
   ======================================================================== */
#page-new .section-label,
#page-composer .section-label,
#composer-fb-groups .section-label {
  font-family: var(--serif);
  text-transform: none;
  letter-spacing: -0.015em;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin: 26px 0 14px;
}
#page-new .section-label .hint,
#page-composer .section-label .hint,
#composer-fb-groups .section-label .hint {
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0;
  font-size: 0.82rem;
  color: var(--ink-faint);
}

/* ===========================================================================
   2. PAGE + CARD — spacious, bright, airy
   ======================================================================== */
#page-new .page-head h2,
#page-composer .page-head h2 {
  font-family: var(--serif);
  font-weight: 800;
  letter-spacing: -0.02em;
}
#page-new .page-head p,
#page-composer .page-head p { color: var(--ink-soft); }

#listing-form.card,
#page-composer .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 28px 30px 22px;
}
@media (max-width: 640px) {
  #listing-form.card,
  #page-composer .card { padding: 20px 18px 18px; }
}

#page-new .divider,
#page-composer .divider {
  height: 1px;
  border: 0;
  background: var(--line);
  margin: 24px 0;
}

/* ===========================================================================
   3. FORM — labels, fields, comfortable rhythm
   ======================================================================== */
#listing-form label:not(.check-row) {
  display: block;
  margin: 0 0 18px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.005em;
}
#listing-form label:not(.check-row) .hint {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-faint);
}
#listing-form label:not(.check-row) > input,
#listing-form label:not(.check-row) > select,
#listing-form label:not(.check-row) > textarea,
#listing-form .condo-input-wrap > input,
#listing-form .desc-block textarea,
#listing-form #desc-notes {
  margin-top: 8px;
  width: 100%;
}
#listing-form input,
#listing-form select,
#listing-form textarea {
  padding: 12px 14px;
  font-size: 0.95rem;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#listing-form input::placeholder,
#listing-form textarea::placeholder { color: var(--ink-faint); }
#listing-form input:hover:not(:focus),
#listing-form select:hover:not(:focus),
#listing-form textarea:hover:not(:focus) { border-color: var(--ink-faint); }
#listing-form input:focus,
#listing-form select:focus,
#listing-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--brass-soft);
}
#listing-form textarea { line-height: 1.55; min-height: 84px; }
#listing-form .row { display: flex; gap: 18px; }
#listing-form .row > label { flex: 1; }
@media (max-width: 560px) { #listing-form .row { flex-direction: column; gap: 0; } }

/* Required-field marker — a clear blue cue, not a shout */
#listing-form label:not(.check-row) {
  position: relative;
}

/* Quick-add — friendly blue helper box, the effortless shortcut */
#page-new .quick-add {
  background: var(--brass-soft);
  border: 1px solid #CFE0FB;
  border-radius: var(--r-lg);
  padding: 18px 18px 16px;
  margin-bottom: 26px;
}
#page-new .quick-add > label {
  display: block;
  margin: 0 0 4px;
  color: var(--brass-dark);
  font-weight: 700;
  font-size: 0.98rem;
}
#page-new .quick-add > label .hint {
  display: block;
  margin-top: 4px;
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.5;
}
#page-new .quick-add-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 10px;
}
#page-new .quick-add-row textarea {
  flex: 1;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: 0.95rem;
  resize: vertical;
}
#page-new .quick-add-row textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(30,99,214,0.16);
}
#page-new .quick-add-row .btn { flex: 0 0 auto; align-self: stretch; }
#page-new .quick-add-status { margin: 8px 0 0; }
@media (max-width: 560px) {
  #page-new .quick-add-row { flex-direction: column; }
}

/* Photos — tidy, inviting drop area */
#page-new .photo-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 130px;
  background: var(--card-2);
  border: 2px dashed var(--line-2);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
#page-new .photo-dropzone:hover,
#page-new .photo-dropzone:focus-visible {
  border-color: var(--accent);
  background: var(--brass-soft);
  outline: none;
}
#page-new .photo-dropzone.dz-over {
  border-color: var(--accent);
  border-style: solid;
  background: var(--brass-soft);
  box-shadow: 0 0 0 3px rgba(30,99,214,0.14);
}
#page-new .photo-dropzone .dz-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
#page-new .photo-dropzone .dz-icon { font-size: 1.9rem; opacity: 0.95; }
#page-new .photo-dropzone strong { color: var(--ink); font-size: 0.98rem; }
#page-new .photo-dropzone .hint { color: var(--ink-faint); font-size: 0.8rem; }
#page-new .photo-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#page-new .photo-preview img {
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-1);
}
#page-new #photo-stored-hint { margin-top: 10px; line-height: 1.5; }

#page-new .features-ai-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 16px 0 6px;
}
#page-new .features-ai-row .hint { flex-basis: 100%; color: var(--ink-faint); }

/* Condo autocomplete popover — clean white card */
#listing-form .condo-input-wrap { position: relative; }
#listing-form .condo-suggestions {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  margin-top: 4px;
}
#listing-form .condo-applied { margin-top: 6px; color: var(--green); }

/* AI title / description option cards */
#listing-form .title-options,
#listing-form .desc-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
#listing-form .title-ai-label,
#listing-form .desc-ai-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
}

/* ===========================================================================
   4. STICKY PRIMARY ACTION — the "next step" is unmistakable
   ======================================================================== */
#listing-form .card-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 16px 0 8px;
  margin: 8px -30px -22px;
  padding-left: 30px;
  padding-right: 30px;
  background: linear-gradient(to top, var(--card) 68%, rgba(255,255,255,0));
  border-top: 1px solid var(--line);
}
#listing-form .card-actions .btn[data-status="active"] {
  padding: 14px 24px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  border-radius: var(--r-md);
  box-shadow: 0 2px 8px rgba(30,99,214,0.28);
}
#listing-form .card-actions .btn[data-status="active"]:hover {
  box-shadow: 0 4px 14px rgba(30,99,214,0.34);
}
#listing-form .card-actions .btn[data-status="draft"] { padding: 13px 20px; }
@media (max-width: 560px) {
  #listing-form .card-actions { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
  #listing-form .card-actions .btn { flex: 1 1 auto; }
}

/* ===========================================================================
   5. SHARED CUSTOM CHECKBOX — real <input>, restyled, blue when checked.
   Stays focusable & clickable (appearance:none, never display:none).
   Used by the group picker and the form's check-rows.
   ======================================================================== */
#composer-fb-groups input[type="checkbox"],
#listing-form .check-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  flex: 0 0 auto;
  border: 1.5px solid var(--line-2);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
#composer-fb-groups input[type="checkbox"]:hover,
#listing-form .check-row input[type="checkbox"]:hover { border-color: var(--accent); }
#composer-fb-groups input[type="checkbox"]:checked,
#listing-form .check-row input[type="checkbox"]:checked {
  border-color: var(--accent);
  background:
    var(--accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")
    center / 13px 13px no-repeat;
}
#composer-fb-groups input[type="checkbox"]:indeterminate {
  border-color: var(--accent);
  background:
    var(--accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E")
    center / 12px 12px no-repeat;
}
#composer-fb-groups input[type="checkbox"]:focus-visible,
#listing-form .check-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Check-rows on the form (auto-run AI, co-broke, public, AI toggles) */
#listing-form .check-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
#listing-form .check-row .check-text strong { color: var(--ink); font-weight: 600; }
#listing-form .check-row .check-text .hint {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-faint);
}

/* ===========================================================================
   6. FB GROUP PICKER — the heart of the workflow. Scannable white cards.
   ======================================================================== */

/* Running tally — clear, blue, tabular */
#composer-fb-groups #fb-groups-summary,
#composer-fb-groups .fb-groups-summary {
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent);
  margin: 4px 0 14px;
}

/* SOP banner — calm blue info card */
#composer-fb-groups .sop-remark {
  background: var(--brass-soft);
  border: 1px solid #CFE0FB;
  border-radius: var(--r-md);
  color: var(--ink-soft);
  padding: 13px 15px;
  font-size: 0.85rem;
  line-height: 1.55;
  margin-bottom: 12px;
}
#composer-fb-groups .sop-remark strong { color: var(--ink); }
#composer-fb-groups .sop-remark a { color: var(--brass-dark); font-weight: 600; }
#composer-fb-groups .sop-remark .sop-count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  background: #fff;
  color: var(--ink);
  border: 1px solid #CFE0FB;
  border-radius: 999px;
  padding: 2px 10px;
  margin-left: 4px;
}

/* Area group — collapsible white card with a tick-all head */
#composer-fb-groups .fb-areas { display: flex; flex-direction: column; gap: 10px; }
#composer-fb-groups .fb-area {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: border-color .16s ease, box-shadow .16s ease;
}
#composer-fb-groups .fb-area[open] { box-shadow: var(--shadow-2); }
#composer-fb-groups .fb-area-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card-2);
  cursor: pointer;
  list-style: none;
  transition: background .14s ease;
}
#composer-fb-groups .fb-area-head::-webkit-details-marker { display: none; }
#composer-fb-groups .fb-area-head:hover { background: var(--brass-soft); }
#composer-fb-groups .fb-area[open] .fb-area-head { border-bottom: 1px solid var(--line); }
#composer-fb-groups .fb-area-all-wrap {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 2px;
}
#composer-fb-groups .fb-area-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
  flex: 1;
}
#composer-fb-groups .fb-area-head .hint {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
/* "Suggested for all" bucket — a gentle blue accent */
#composer-fb-groups .fb-area-general { border-color: #BFD6FA; }
#composer-fb-groups .fb-area-general .fb-area-head {
  background: linear-gradient(180deg, var(--brass-soft), var(--card-2));
}

/* Group rows — big tap targets, satisfying to tick */
#composer-fb-groups .fb-groups-list {
  list-style: none;
  margin: 0;
  padding: 8px 10px 12px;
}
#composer-fb-groups .fb-group-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 6px;
  margin: 2px 0;
  border-radius: var(--r-sm);
  transition: background .14s ease;
}
#composer-fb-groups .fb-group-row:hover { background: var(--card-2); }
#composer-fb-groups .fb-group-row:has(input:checked) { background: var(--brass-soft); }
#composer-fb-groups .fb-group-row .check-row {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1;
  margin: 0;
  padding: 8px 6px;
  cursor: pointer;
}
#composer-fb-groups .fb-group-row .check-text {
  line-height: 1.4;
}
#composer-fb-groups .fb-group-row .check-text strong {
  display: inline;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.92rem;
}
/* Member count — muted, tabular */
#composer-fb-groups .fb-group-row .check-text .hint {
  display: inline;
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--ink-faint);
  margin-left: 6px;
  white-space: nowrap;
}

/* Chips — tidy status pills. 🕐 amber · 🚪 red (inline override) · 🛒 & scope muted */
#composer-fb-groups .approval-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 9px;
  margin-left: 6px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: middle;
}
#composer-fb-groups .scope-chip {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-soft);
  border: 1px solid var(--line-2);
  vertical-align: middle;
}
#composer-fb-groups .scope-room,
#composer-fb-groups .scope-house { background: var(--paper-2); color: var(--ink-soft); }

/* Hide-a-group affordance — quiet until hover, then red */
#composer-fb-groups .fb-exclude-btn {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-size: 0.9rem;
  line-height: 1;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  cursor: pointer;
  opacity: 0.5;
  transition: color .14s ease, background .14s ease, opacity .14s ease;
}
#composer-fb-groups .fb-group-row:hover .fb-exclude-btn { opacity: 1; }
#composer-fb-groups .fb-exclude-btn:hover {
  color: var(--red);
  background: var(--red-bg);
  opacity: 1;
}

#composer-fb-groups .fb-area-actions { padding: 0 14px 12px; }
#composer-fb-groups .fb-groups-actions { margin-top: 14px; }
#composer-fb-groups .fb-ai-note { color: var(--ink-faint); }

/* ===========================================================================
   7. DESTINATIONS + PER-CHANNEL CONTENT (composer)
   ======================================================================== */
#composer-platforms .fb-child-row {
  border-top: 1px solid var(--line);
  padding: 12px 0;
}
#composer-platforms .fb-child-title { color: var(--ink); font-weight: 600; }

#composer-channel-content .cc-col-head {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 8px 0 10px;
}
#composer-channel-content .cc-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}
#composer-channel-content .cc-field textarea {
  margin-top: 6px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: #fff;
  line-height: 1.55;
}
#composer-channel-content .cc-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--brass-soft);
}
#composer-channel-content .cc-portal-preview {
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 4px 12px;
}
#composer-channel-content .cc-portal-preview summary { color: var(--ink); cursor: pointer; }
#composer-channel-content .cc-preview-toggle { color: var(--accent); font-weight: 600; }
#composer-channel-content .cc-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

/* ===========================================================================
   8. "Post now" — the composer's big, obvious terminal action
   ======================================================================== */
#page-composer #post-btn {
  padding: 16px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--r-md);
  box-shadow: 0 2px 10px rgba(30,99,214,0.28);
}
#page-composer #post-btn:hover:not(:disabled) {
  box-shadow: 0 4px 16px rgba(30,99,214,0.36);
}
#page-composer #post-btn:disabled { opacity: 0.6; box-shadow: none; }
#page-composer .card > .muted { color: var(--ink-faint); font-size: 0.82rem; text-align: center; }

/* Saved group packs — one click re-ticks a vetted set of groups. */
#composer-packs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#composer-packs .pack-chip {
  font-family: var(--sans);
  font-size: 0.82rem;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
#composer-packs .pack-chip b { font-weight: 700; color: var(--ink-faint); margin-left: 4px; }
#composer-packs .pack-chip:hover { border-color: var(--accent); color: var(--accent); }
#composer-packs .pack-chip:hover b { color: var(--accent); }

/* One-click category chips — ticking 40 boxes by hand is the thing this replaces. */
#composer-packs { display: block; }
#composer-packs .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
#composer-packs .chip-row + .chip-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
#composer-packs .chip-row-label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--ink);
  margin-right: 2px;
}
#composer-packs .area-chip.suggested { border-color: rgba(21, 128, 61, 0.35); }
#composer-packs .pack-chip.active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
#composer-packs .pack-chip.active b { color: rgba(255, 255, 255, 0.85); }
#composer-packs .clear-chip { color: var(--ink-faint); }
#composer-packs .clear-chip:hover { color: var(--red); border-color: var(--red); }

/* ===========================================================================
   7. NEST IN VERIFIED + upgraded running total (2026-08-26)
   ======================================================================== */

/* Running total — promote to a clear pill bar so she sees scale before posting */
#composer-fb-groups #fb-groups-summary,
#composer-fb-groups .fb-groups-summary {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  background: var(--brass-soft);
  border: 1px solid #BFE7D7;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brass-dark);
}
#composer-fb-groups .fb-groups-summary .sum-n {
  font-size: 1rem; font-weight: 800; color: var(--brass-dark);
}
#composer-fb-groups .fb-groups-summary .sum-dot { color: #9AC7B6; font-weight: 400; }
#composer-fb-groups .fb-groups-summary .sum-verified { color: #15803D; font-weight: 700; }
#composer-fb-groups .fb-groups-summary .sum-zero { color: var(--ink-faint); font-weight: 600; }

/* Green ✓ Nest In badge on a group row */
.nestin-chip {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #15803D;
  background: var(--green-bg);
  border: 1px solid #B9E3C6;
  border-radius: 999px;
  padding: 1px 7px;
  vertical-align: middle;
  white-space: nowrap;
}

/* Small ✓ inside an area chip that contains verified groups */
#composer-packs .area-chip .chip-verified {
  color: #15803D;
  font-weight: 800;
  margin-left: 3px;
}

/* The "✓ Nest In verified" one-click chip — green so it reads as the safe list */
#composer-packs .nestin-pack-chip {
  border-color: #B9E3C6;
  background: var(--green-bg);
  color: #15803D;
  font-weight: 700;
}
#composer-packs .nestin-pack-chip b { color: #15803D; }
#composer-packs .nestin-pack-chip:hover {
  border-color: #15803D; color: #0f6a31;
}
#composer-packs .nestin-pack-chip.active {
  background: #15803D; border-color: #15803D; color: #fff;
}
#composer-packs .nestin-pack-chip.active b { color: rgba(255,255,255,0.9); }