/* ============================================================================
   Proplist — CLEAN & OFFICIAL polish: CONNECTIONS + CO-BROKE
   Loaded AFTER styles.css + pro-theme.css. Additive, tokens only, ONE calm
   professional BLUE accent (--accent/--brass #1E63D6). Status colours are
   reserved strictly for connection state (green/amber/red).
   Goal: bright, white, spacious, reassuring — a trusted "account linking"
   page, like PropertyGuru / a bank app. NOT dark, NOT sketchy.
   Every selector is scoped to #page-connections or #page-cobroke so nothing
   leaks. Class names matched from app.js / index.html.
   ========================================================================== */

/* ===========================================================================
   1.  PAGE HEADS — calm, confident, plenty of air
   ========================================================================= */
#page-connections .page-head,
#page-cobroke .page-head {
  margin-bottom: 22px;
}
#page-connections .page-head h2,
#page-cobroke .page-head h2 {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 6px;
}
#page-connections .page-head p,
#page-cobroke .page-head p {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}

/* Section stacking rhythm on the connections page */
#page-connections #conn-portals,
#page-connections #conn-social,
#page-connections #fb-groups-panel,
#page-connections #conn-soon {
  display: block;
}
#page-connections #conn-portals > .card,
#page-connections #conn-social > .card,
#page-connections #fb-groups-panel > .card,
#page-connections #conn-soon > .card {
  margin-bottom: 16px;
}

/* ===========================================================================
   2.  CONNECTION CARD — bright white, spacious, obvious
   ========================================================================= */
#page-connections .conn-card-wrap,
#page-connections .conn-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 20px 22px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
#page-connections .conn-card-wrap:hover,
#page-connections .conn-card:hover {
  border-color: #C9D6E8;
  box-shadow: var(--shadow-2);
  transform: none;
}

/* The main row: icon · info · action, comfortably spaced */
#page-connections .conn-card-main {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Platform glyph in a soft rounded tile */
#page-connections .conn-icon {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  background: var(--brass-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--accent);
}

/* Text block grows to fill */
#page-connections .conn-info {
  flex: 1 1 auto;
  min-width: 0;
}
#page-connections .conn-info h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 6px;
}
#page-connections .conn-sub {
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
#page-connections .conn-sub.muted {
  color: var(--ink-faint);
}

/* Method tag ("Auto" / "Paste-assist") — quiet neutral chip */
#page-connections .method-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

/* ===========================================================================
   3.  STATUS PILL — friendly plain words, reassuring colour
   ========================================================================= */
#page-connections .conn-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1.2;
}
/* Connected — calm confident green */
#page-connections .conn-status.on {
  background: var(--green-bg);
  color: var(--green);
  border-color: rgba(21,128,61,0.22);
}
/* Not connected — soft red, plain, not alarming */
#page-connections .conn-status.off {
  background: var(--red-bg);
  color: var(--red);
  border-color: rgba(212,45,31,0.20);
}
/* Needs attention / couldn't connect — amber */
#page-connections .conn-status.warn {
  background: var(--amber-bg);
  color: var(--amber);
  border-color: rgba(181,71,8,0.22);
}
/* Sign-in failed — red */
#page-connections .conn-status.bad {
  background: var(--red-bg);
  color: var(--red);
  border-color: rgba(212,45,31,0.20);
}
/* Connecting — neutral blue */
#page-connections .conn-status.busy {
  background: var(--brass-soft);
  color: var(--accent);
  border-color: rgba(30,99,214,0.20);
}

/* Explanatory detail line under the status */
#page-connections .conn-detail {
  margin-top: 8px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: var(--card-2);
  border: 1px solid var(--line);
}
#page-connections .conn-detail.bad {
  background: var(--red-bg);
  color: var(--red);
  border-color: rgba(212,45,31,0.20);
}
#page-connections .conn-detail.warn {
  background: var(--amber-bg);
  color: var(--amber);
  border-color: rgba(181,71,8,0.22);
}

/* ===========================================================================
   4.  ACTIONS — BIG, clear buttons (blue primary / clean ghost)
   ========================================================================= */
#page-connections .conn-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
#page-connections .conn-actions .btn {
  border-radius: var(--r-md);
  font-weight: 700;
  padding: 11px 20px;
  white-space: nowrap;
}
/* Blue Connect / Try again */
#page-connections .conn-actions .btn-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  box-shadow: 0 1px 2px rgba(16,24,40,.10), 0 6px 16px rgba(30,99,214,.22);
}
#page-connections .conn-actions .btn-primary:hover {
  background: var(--brass-dark);
  border-color: var(--brass-dark);
}
/* Ghost / outline Disconnect / Remove / Reconnect */
#page-connections .conn-actions .btn-outline,
#page-connections .conn-actions .btn-ghost {
  background: #fff;
  color: var(--ink-soft);
  border: 1px solid var(--line-2);
}
#page-connections .conn-actions .btn-outline:hover,
#page-connections .conn-actions .btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--brass-soft);
}

/* ===========================================================================
   5.  TOGGLE SWITCH — blue-when-on, obvious, easy to read
   ========================================================================= */
#page-connections .conn-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
#page-connections .conn-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
#page-connections .conn-toggle-track {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 27px;
  border-radius: 999px;
  background: #CBD5E3;
  border: 1px solid var(--line-2);
  transition: background .18s ease, border-color .18s ease;
  flex: 0 0 auto;
}
#page-connections .conn-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16,24,40,.28);
  transition: transform .18s ease;
}
#page-connections .conn-toggle input:checked + .conn-toggle-track {
  background: var(--accent);
  border-color: var(--accent);
}
#page-connections .conn-toggle input:checked + .conn-toggle-track .conn-toggle-thumb {
  transform: translateX(19px);
}
#page-connections .conn-toggle input:focus-visible + .conn-toggle-track {
  box-shadow: 0 0 0 3px rgba(30,99,214,.25);
}
#page-connections .conn-toggle-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
  min-width: 22px;
}

/* ===========================================================================
   6.  FACEBOOK PARENT → CHILD CHANNELS
   ========================================================================= */
#page-connections .conn-card-wrap.fb-parent {
  padding-bottom: 0;
}
#page-connections .fb-children {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding: 4px 0 6px;
}
#page-connections .fb-child-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line);
}
#page-connections .fb-child-row:last-child {
  border-bottom: none;
}
#page-connections .fb-child-info {
  min-width: 0;
}
#page-connections .fb-child-title {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}

/* Page picker inside a child row */
#page-connections .fb-page-picker {
  margin-top: 10px;
}
#page-connections .fb-page-picker select {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 9px 11px;
}
#page-connections .fb-page-picker .hint {
  color: var(--ink-faint);
  font-size: 0.85rem;
}

/* Extension explainer panel — override old tan inline styling to clean blue */
#page-connections #fb-extension-panel {
  background: var(--brass-soft) !important;
  border: 1px solid rgba(30,99,214,0.22) !important;
  border-radius: var(--r-md) !important;
  color: var(--ink-soft);
}
#page-connections #fb-extension-panel strong {
  color: var(--ink);
}
#page-connections #fb-extension-panel a {
  color: var(--accent);
  font-weight: 600;
}
#page-connections #fb-extension-panel code {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 0.85em;
}

/* ===========================================================================
   7.  "SOON" ADAPTER CARD — quiet, non-interactive
   ========================================================================= */
#page-connections .conn-card {
  display: flex;
  align-items: center;
  gap: 18px;
  opacity: 0.92;
}
#page-connections .conn-card .conn-info { flex: 1 1 auto; }
#page-connections .conn-card .conn-info h3 {
  font-size: 1.1rem;
  margin: 0 0 4px;
}
#page-connections .soon-tag {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-faint);
}

/* ===========================================================================
   8.  FB GROUPS LIBRARY PANEL
   ========================================================================= */
#page-connections #fb-groups-panel .section-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
#page-connections .fb-groups-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
#page-connections .fb-group-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
#page-connections .fb-group-row:last-child { border-bottom: none; }
#page-connections .fb-group-row:nth-child(even) { background: var(--card-2); }
#page-connections .fb-group-row .check-text strong {
  display: block;
  font-weight: 700;
  color: var(--ink);
  font-size: 0.96rem;
}
#page-connections .fb-group-row .hint {
  display: block;
  margin-top: 3px;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
#page-connections .fb-group-row .hint a { color: var(--accent); }
#page-connections #fb-groups-panel .divider {
  height: 1px;
  background: var(--line);
  border: none;
  margin: 18px 0;
}
#page-connections #fb-groups-panel textarea,
#page-connections #fb-groups-panel input[type="url"] {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--ink);
  padding: 11px 13px;
}
#page-connections #fb-groups-panel textarea:focus,
#page-connections #fb-groups-panel input[type="url"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(30,99,214,.15);
  outline: none;
}

/* ===========================================================================
   9.  CO-BROKE — filter bar
   ========================================================================= */
#page-cobroke .filter-bar {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 18px 20px;
  margin-bottom: 22px;
}
#page-cobroke .filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}
#page-cobroke .filter-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
#page-cobroke .filter-row label:last-child { flex: 1 1 240px; }
#page-cobroke .filter-row select,
#page-cobroke .filter-row input[type="text"] {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--ink);
  font-weight: 500;
  padding: 11px 13px;
}
#page-cobroke .filter-row select:focus,
#page-cobroke .filter-row input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(30,99,214,.15);
  outline: none;
}

/* ===========================================================================
   10. CO-BROKE — tidy card grid
   ========================================================================= */
#page-cobroke #cobroke-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
#page-cobroke .cobroke-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 0;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
#page-cobroke .cobroke-card:hover {
  transform: translateY(-3px);
  border-color: #C9D6E8;
  box-shadow: var(--shadow-2);
}
#page-cobroke .cobroke-card .listing-thumb {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  background: var(--paper-2);
}
#page-cobroke .cobroke-card .listing-thumb.placeholder {
  display: grid;
  place-items: center;
  font-size: 44px;
  color: var(--ink-faint);
}
#page-cobroke .cobroke-card .listing-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
}

/* Badges — "Your listing" reads as a friendly blue owner tag */
#page-cobroke .cobroke-card .badge {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
#page-cobroke .cobroke-card .badge.mine {
  background: var(--brass-soft);
  border-color: rgba(30,99,214,0.22);
  color: var(--accent);
}

#page-cobroke .cobroke-card h3 {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 2px 0 0;
  line-height: 1.3;
}
#page-cobroke .cobroke-card .listing-meta {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
#page-cobroke .cobroke-card .listing-price {
  font-family: var(--sans);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  font-size: 1.35rem;
  color: var(--ink);
  margin: 2px 0;
}

/* Agent + note block */
#page-cobroke .cobroke-agent {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
#page-cobroke .cobroke-agent-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}
#page-cobroke .cobroke-note {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--card-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}

/* Actions + revealed contact */
#page-cobroke .cobroke-card .card-actions {
  margin-top: 6px;
  display: flex;
}
#page-cobroke .cobroke-card .card-actions .btn {
  flex: 1 1 auto;
  border-radius: var(--r-md);
  font-weight: 700;
  padding: 11px 18px;
}
#page-cobroke .cobroke-card .card-actions .btn-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  box-shadow: 0 1px 2px rgba(16,24,40,.10), 0 6px 16px rgba(30,99,214,.22);
}
#page-cobroke .cobroke-card .card-actions .btn-primary:hover {
  background: var(--brass-dark);
  border-color: var(--brass-dark);
}
#page-cobroke .cobroke-contact {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
#page-cobroke .cobroke-contact-line {
  font-size: 0.9rem;
  color: var(--ink-soft);
}
#page-cobroke .cobroke-contact-line strong { color: var(--ink); }
#page-cobroke .cobroke-contact .btn-peach {
  align-self: flex-start;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  font-weight: 700;
}
#page-cobroke .cobroke-contact .btn-peach:hover {
  background: var(--brass-dark);
  border-color: var(--brass-dark);
}

/* Empty state */
#page-cobroke .empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 44px 24px;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  line-height: 1.6;
}
#page-cobroke .empty strong { color: var(--ink); }

/* ===========================================================================
   11. RESPONSIVE — stack cleanly on narrow screens
   ========================================================================= */
@media (max-width: 640px) {
  #page-connections .conn-card-main {
    flex-wrap: wrap;
  }
  #page-connections .conn-actions {
    width: 100%;
  }
  #page-connections .conn-actions .btn {
    flex: 1 1 auto;
  }
  #page-cobroke #cobroke-list {
    grid-template-columns: 1fr;
  }
  #page-cobroke .filter-row label { flex: 1 1 100%; }
}

/* ============================================================================
   FB GROUPS panel — area grouping + property filter + multi-select bulk remove
   (2026-08-30). Scoped to #fb-groups-panel.
   ======================================================================== */
#fb-groups-panel .fbg-toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
#fb-groups-panel .fbg-search { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line-2); border-radius:10px; padding:0 12px; flex:1; min-width:200px; }
#fb-groups-panel .fbg-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,106,61,.14); }
#fb-groups-panel .fbg-search svg { width:17px; height:17px; color:var(--ink-faint); flex:none; }
#fb-groups-panel .fbg-search input { border:none; background:none; box-shadow:none; padding:9px 0; flex:1; font-size:.9rem; }
#fb-groups-panel .fbg-search input:focus { outline:none; box-shadow:none; }
#fb-groups-panel .fbg-toggle { display:inline-flex; align-items:center; gap:7px; font-size:.86rem; font-weight:600; color:var(--ink-soft); cursor:pointer; white-space:nowrap; }
#fb-groups-panel .fbg-toggle .hint { font-weight:500; }
#fb-groups-panel .fbg-bulkbar { display:flex; align-items:center; gap:10px; background:var(--brass-soft); border:1px solid #F0C9B8; border-radius:10px; padding:8px 12px; margin-bottom:12px; position:sticky; top:8px; z-index:5; }
#fb-groups-panel .fbg-bulkbar #fbg-bulk-count { font-weight:700; color:var(--coral-deep); font-size:.86rem; }
#fb-groups-panel .fbg-areas { display:flex; flex-direction:column; gap:6px; }
#fb-groups-panel .fbg-area { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card-2); }
#fb-groups-panel .fbg-area-head { display:flex; align-items:center; gap:10px; padding:9px 12px; cursor:pointer; list-style:none; font-weight:700; font-size:.9rem; color:var(--ink); }
#fb-groups-panel .fbg-area-head::-webkit-details-marker { display:none; }
#fb-groups-panel .fbg-area-head::after { content:""; width:7px; height:7px; border-right:2px solid var(--ink-faint); border-bottom:2px solid var(--ink-faint); transform:rotate(-45deg); margin-left:auto; transition:transform .18s; }
#fb-groups-panel .fbg-area[open] > .fbg-area-head::after { transform:rotate(45deg); }
#fb-groups-panel .fbg-area-count { margin-left:6px; background:var(--paper-2); border:1px solid var(--line); border-radius:999px; padding:1px 9px; font-size:.76rem; font-weight:700; color:var(--ink-soft); }
#fb-groups-panel .fbg-list { list-style:none; margin:0; padding:0; background:#fff; }
#fb-groups-panel .fbg-row { display:flex; align-items:center; gap:11px; padding:8px 12px; border-top:1px solid var(--line); }
#fb-groups-panel .fbg-row:hover { background:var(--peach-2); }
#fb-groups-panel .fbg-check, #fb-groups-panel .fbg-area-check { width:16px; height:16px; flex:none; accent-color:var(--accent); cursor:pointer; }
#fb-groups-panel .fbg-info { flex:1; min-width:0; }
#fb-groups-panel .fbg-info strong { display:block; font-size:.9rem; font-weight:600; color:var(--ink); line-height:1.3; }
#fb-groups-panel .fbg-info .hint { font-size:.76rem; color:var(--ink-faint); }
#fb-groups-panel .fbg-row .btn-xs { flex:none; padding:4px 10px; font-size:.76rem; }