/* /styles/visionmapping.css */
/* Vision Mapping layout + panel framing
   Matches Brain Dump visual language: gold borders, soft background, rounded corners,
   subtle shadow. Uses existing tokens from pixel-overrides.css and braindump.css.
*/

/* ====== Tokens ====== */
/* We reuse the same semantic ideas as braindump.css so both tools feel related. */
:root {
  --vm-border-color: var(--brand-gold, #b08a48);
  --vm-bg-surface: #fffdf8;
  --vm-bg-surface-alt: #ffffff;
  --vm-text-color: #000;
  --vm-radius-lg: var(--radius-10, 10px);
  --vm-radius-md: var(--radius-8, 8px);
  --vm-gap-lg: var(--gap-4, 16px);
  --vm-gap-md: var(--gap-3, 12px);
  --vm-gap-sm: var(--gap-2, 8px);
  --vm-shadow-block: 0 1px 2px rgba(0,0,0,0.04);
}

/* Dark mode safety: keep same structure without blowing out contrast.
   pixel-overrides.css already sets body bg/text, so we only soften panels. */
:root[data-theme="dark"] {
  --vm-bg-surface: #1f201f;
  --vm-bg-surface-alt: #1f201f;
  --vm-text-color: #fff;
  --vm-shadow-block: none;
}

/* ====== Column wrappers ====== */
/* We wrap each rail with a framed panel look.
   You will apply these classes to the root element you render into each rail
   (left = .visionmapping__panel, right = .visionmapping__sidepanel). */

.visionmapping__panel,
.visionmapping__sidepanel {
  background: var(--vm-bg-surface);
  color: var(--vm-text-color);
  
  border-radius: var(--vm-radius-lg);
  box-shadow: var(--vm-shadow-block);
  padding: var(--vm-gap-lg);
  /* make sure long content doesn't slam edge-to-edge */
  box-sizing: border-box;
}

/* The right rail can be slightly tighter and allowed to scroll internally later if needed */
.visionmapping__sidepanel {
  background: var(--vm-bg-surface-alt);
 
  border-radius: var(--vm-radius-md);
  padding: var(--vm-gap-md);
}

/* Masonry-style grid for pulled cards in the right rail.
   Each vm-card-block will sit like a brick in columns.
   We use CSS columns, and tell each card block not to split. */
.vm-masonry {
  column-count: 2;
  column-gap: var(--vm-gap-md);
}

@media (min-width: 1200px) {
  .vm-masonry {
    column-count: 3;
  }
}

@media (max-width: 991.98px) {
  .vm-masonry {
    column-count: 1;
  }
}

.vm-masonry .vm-card-block {
  break-inside: avoid;
  margin-bottom: var(--vm-gap-md);
}

/* Headings inside panels (lighter weight) */
.visionmapping__heading {
  margin: 0 0 12px 0;
  font-size: 1.1rem;
  font-weight: 500 !important;
  line-height: 1.3;
  color: var(--bs-heading-color, #000);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--brand-gold, #b08a48);
  padding-bottom: 8px;
}

/* Optional subtext / helper line under a heading */
.visionmapping__subtext {
  margin: var(--vm-gap-sm) 0 var(--vm-gap-md) 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--color-muted, #666);
}

/* ====== Card blocks inside either rail ====== */
/* Use for chunks like "Next Steps", "Key Obstacles", etc. */
.vm-block {
  background: var(--vm-bg-surface-alt);
  
  border-radius: var(--vm-radius-md);
  box-shadow: var(--vm-shadow-block);
  padding: var(--vm-gap-md);
  margin-bottom: var(--vm-gap-md);
}

.vm-block__title {
  margin: 0 0 var(--vm-gap-sm) 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--vm-text-color);
  display: flex;
  align-items: center;
  gap: var(--vm-gap-sm);
  border-bottom: 1px solid var(--vm-border-color);
  padding-bottom: var(--vm-gap-sm);
}

.vm-block__body {
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--vm-text-color);
}

/* ====== Textareas / editable zones ====== */
/* Mirrors braindump__textarea style for continuity. */
.vm-textarea {
  width: 100%;
  min-height: 160px;
  padding: 12px 14px;
  border: 0px solid var(--vm-border-color);
  border-radius: var(--vm-radius-lg);
  background: var(--vm-bg-surface-alt);
  line-height: 1.5;
  box-shadow: var(--vm-shadow-block);
  font: inherit;
  color: var(--vm-text-color);
  resize: vertical;
}

.vm-textarea:focus-visible {
  outline: 2px solid var(--vm-border-color);
  outline-offset: 2px;
  background: #fff;
}

/* ====== Inline toolbar row (buttons / actions per panel) ====== */
/* Same pill sizing logic as braindump__btn, using brand gold borders. */
.vm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vm-gap-sm);
  margin-bottom: var(--vm-gap-md);
  border-bottom: 1px solid var(--vm-border-color);
  padding-bottom: var(--vm-gap-sm);
}

.vm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: #222222;
  background: #ffffff;
  border: 1px solid var(--vm-border-color);
  border-radius: var(--vm-radius-md);
  cursor: pointer;
  transition: background-color 140ms ease;
  text-decoration: none;
}

.vm-btn:hover,
.vm-btn:focus-visible {
  background-color: #f6efe4;
  outline: 2px solid var(--vm-border-color);
  outline-offset: 1px;
  text-decoration: none;
  color: #222222;
}

/* Status line / helper text under an editor area */
.vm-status {
  margin: 8px 0 0;
  font-size: 0.95rem;
  color: var(--color-muted, #666);
}

/* ====== Responsive ====== */
/* On mobile (<992px Bootstrap lg breakpoint), the two rails already stack
   because Bootstrap's col-lg-* only applies ≥992px. We just add spacing. */

@media (max-width: 991.98px) {
  /* Add breathing room between stacked rails */
  #privateColumns .col-lg-7,
  #privateColumns .col-lg-5 {
    margin-bottom: 1.5rem;
  }

  .visionmapping__panel,
  .visionmapping__sidepanel {
    border-radius: var(--vm-radius-lg);
    padding: var(--vm-gap-md);
  }

  .vm-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* On desktop, make sure both rails feel balanced */
@media (min-width: 992px) {
  /* Give the right rail a "sidebar" feel with tighter text size if desired */
  .visionmapping__sidepanel {
    font-size: 0.95rem;
    line-height: 1.4;
  }
}

/* ====== Utility hooks ====== */
/* Use .vm-stack to create vertical rhythm inside a panel. */
.vm-stack {
  display: flex;
  flex-direction: column;
  gap: var(--vm-gap-md);
}

/* Use .vm-row to create simple two-col internal layouts if you need it later,
   but it will wrap on mobile. */
.vm-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vm-gap-md);
}

.vm-row > * {
  flex: 1 1 200px;
  min-width: 0;
}

/* ====== Panel content rhythm ====== */
/* Give breathing room between sections (heading block, form block, card block, notes, etc.) */
.visionmapping__panel > * + *,
.visionmapping__sidepanel > * + * {
  margin-top: var(--vm-gap-md);
}

/* ====== Inline form rows & labels ====== */
/* This hits the "Delivery:" / "Section:" row you render at the top of Vision Mapping. */
.visionmapping__panel label {
  display: inline-block;
  font-weight: 500;
  line-height: 1.3;
  color: var(--vm-text-color);
  margin-right: 4px;
  margin-bottom: 4px;
  /* keep labels from smashing into controls when they wrap on smaller screens */
}

.visionmapping__panel .vm-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--vm-gap-sm);
  margin-bottom: var(--vm-gap-md);
}

/* ====== Form controls (scoped) ====== */
/* We restyle ONLY the raw controls inside the panel.
   We intentionally skip .btn so we don't break Bootstrap buttons elsewhere. */
.visionmapping__panel select,
.visionmapping__panel input[type="text"],
.visionmapping__panel button:not(.btn) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background: var(--vm-bg-surface-alt);
  color: var(--vm-text-color);
  border: 0px solid var(--vm-border-color);
  border-radius: var(--vm-radius-md);
  box-shadow: var(--vm-shadow-block);

  padding: 4px 6px;
  font: inherit;
  line-height: 1.3;
  cursor: pointer;

  /* IMPORTANT FIX:
     Stop Bootstrap from forcing full-width.
     We want the select to size to its content so it no longer draws
     a gold bar straight across the entire panel.
  */
  display: inline-block;
  width: auto;

  /* still protect layout on wrap */
  max-width: 100%;
  box-sizing: border-box;
}


.visionmapping__panel button:not(.btn) {
  /* Gold-outline pill style for "Pull Card" and the recent-card chips */
  font-weight: 400;
  background: #ffffff;
  transition: background-color 140ms ease;

  /* NEW: ensure each chip/button sits on its own visual row with breathing room */
  display: inline-block;
  margin-bottom: var(--vm-gap-sm);
}

.visionmapping__panel select:focus-visible,
.visionmapping__panel input[type="text"]:focus-visible,
.visionmapping__panel button:not(.btn):focus-visible {
  outline: 0px solid var(--vm-border-color);
  outline-offset: 1px;
  background: #f6efe4;
}

/* Small hover affordance for the button */
.visionmapping__panel button:not(.btn):hover {
  background: #f6efe4;
}

/* ====== History chips (recent pulls list) ====== */
/* Use these classes in your render() output around the "Pleasure / Aliveness · 10/26" rows.
   Example:
   <div class="vm-history-list">
     <button class="vm-history-item">Pleasure / Aliveness · 10/26</button>
     <button class="vm-history-item">Style / Presentation …</button>
   </div>
*/
.vm-history-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vm-gap-sm);
  margin-bottom: var(--vm-gap-md);
}

.vm-history-item {
  display: inline-block;
  background: #ffffff;
  border: 1px solid var(--vm-border-color);
  border-radius: var(--vm-radius-md);
  box-shadow: var(--vm-shadow-block);
  padding: 4px 8px;
  font-size: 0.95rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--vm-text-color);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}

.vm-history-item:hover,
.vm-history-item:focus-visible {
  background-color: #f6efe4;
  outline: 2px solid var(--vm-border-color);
  outline-offset: 1px;
}

/* ====== Card content block ====== */
/* The pulled card body you’re already rendering (title + paragraph) is close.
   This locks in the cream card look under the heading like "Pleasure / Aliveness". */
.vm-card-block {
  background: var(--vm-bg-surface-alt);
  border: 1px solid var(--vm-border-color);
  border-radius: var(--vm-radius-md);
  box-shadow: var(--vm-shadow-block);
  padding: var(--vm-gap-md);
}

.vm-card-block h2,
.vm-card-block h3 {
  margin-top: 0;
  margin-bottom: var(--vm-gap-sm);
  line-height: 1.3;
  font-weight: 500;
  font-size: 1.1rem;             /* match Daily Gratitude heading size */
  color: var(--vm-text-color);
}

.vm-card-block p {
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--vm-text-color);
}

/* ====== Prompt / answer blocks ====== */
/* Force each textarea to drop under the question, go full width, and match gold styling. */
.visionmapping__panel textarea {
  display: block;
  width: 100%;
  min-height: 100px;

  padding: 12px 14px;
  margin-top: var(--vm-gap-sm);
  margin-bottom: var(--vm-gap-md);

  background: var(--vm-bg-surface-alt);
  color: var(--vm-text-color);
  border: 1px solid var(--vm-border-color);
  border-radius: var(--vm-radius-lg);
  box-shadow: var(--vm-shadow-block);

  font: inherit;
  line-height: 1.4;
  resize: vertical;
}

.visionmapping__panel textarea:focus-visible {
  outline: 1px solid var(--vm-border-color);
  outline-offset: 2px;
  background: #fff;
}

/* ====== Action row spacing ====== */
/* Give breathing room between Bootstrap-styled action buttons like
   "Save to Thread" and "Copy". */
.visionmapping__panel .btn + .btn {
  margin-left: var(--vm-gap-sm);
}

/* ====== Dark theme tweaks ====== */
:root[data-theme="dark"] .visionmapping__panel select,
:root[data-theme="dark"] .visionmapping__panel input[type="text"],
:root[data-theme="dark"] .visionmapping__panel button:not(.btn),
:root[data-theme="dark"] .vm-history-item,
:root[data-theme="dark"] .vm-card-block,
:root[data-theme="dark"] .visionmapping__panel textarea {
  background: var(--vm-bg-surface-alt);
  color: var(--vm-text-color);
  border-color: var(--vm-border-color);
  box-shadow: none;
}
:root[data-theme="dark"] .visionmapping__panel select,
:root[data-theme="dark"] .visionmapping__panel input[type="text"],
:root[data-theme="dark"] .visionmapping__panel button:not(.btn),
:root[data-theme="dark"] .vm-history-item,
:root[data-theme="dark"] .vm-card-block,
:root[data-theme="dark"] .visionmapping__panel textarea {
  background: var(--vm-bg-surface-alt);
  color: var(--vm-text-color);
  border-color: var(--vm-border-color);
  box-shadow: none;
}

/* ====== FORCE SINGLE-COLUMN CARD LAYOUT ======
   Stop the card from behaving like a flex/grid row.
   Every section (Mental Loop, Prompts, Micro-Move, Somatic Anchor, Script)
   takes full width, stacked vertically.
   Save/Copy actions sit at the bottom, full width.
*/
.visionmapping__panel .card {
  display: block;
  width: 100%;
  max-width: 100%;
}

.visionmapping__panel .card > .section {
  display: block;
  width: 100%;
  max-width: 100%;
  float: none;
  clear: both;
  margin-bottom: var(--vm-gap-md);
}

.visionmapping__panel .card > .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vm-gap-sm);

  width: 100%;
  max-width: 100%;
  float: none;
  clear: both;
  margin-top: var(--vm-gap-md);
  margin-bottom: var(--vm-gap-md);
}

/* Action row layout for Save / Close */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vm-gap-sm);
}

/* === Gold theme for page-level nav pills (outside Gratitude) === */
#privateSecondaryNav .nav.nav-pills .nav-link {
  border: 1px solid var(--vm-border-color);
  border-radius: var(--vm-radius-md);
  background: #ffffff;
  color: #000000;
  line-height: 1.2;
}

#privateSecondaryNav .nav.nav-pills .nav-link:hover,
#privateSecondaryNav .nav.nav-pills .nav-link:focus-visible {
  background: #f6efe4;
  color: #000000;
  outline: 2px solid var(--vm-border-color);
  outline-offset: 1px;
  text-decoration: none;
}

#privateSecondaryNav .nav.nav-pills .nav-link.active,
#privateSecondaryNav .nav.nav-pills .show>.nav-link {
  background: var(--vm-border-color);
  border-color: var(--vm-border-color);
  color: #ffffff;
}

/* Mobile containment:
   Force the header form row ("Delivery / Section / Pull Card") to stack
   vertically and stay inside the gold border.
   Each child goes full width so nothing overhangs the panel.
*/
@media (max-width: 575.98px) {
  .visionmapping__panel .vm-form-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vm-gap-sm);
  }

  .visionmapping__panel .vm-form-row > * {
    max-width: 100%;
    box-sizing: border-box;
  }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vm-gap-sm);
}

/* Mobile containment + header control sizing */
@media (max-width: 575.98px) {
  /* The row that holds Delivery / Section / Pull Card.
     This class actually exists in visionmapping.js (vm__controls). :contentReference[oaicite:2]{index=2}
     We stack it as a clean vertical group inside the gold panel.
  */
  .visionmapping__panel .vm__controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vm-gap-sm);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Each label+control pair ("Delivery: [select]", "Section: [select]") */
  .visionmapping__panel .vm__controls .vm__label {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Critical fix:
     Stop the Section <select> from spanning the full inner width
     and drawing a gold bar across the panel.
     We also apply this to the Pull Card button so it doesn’t stretch.
  */
  .visionmapping__panel .vm__controls select,
  .visionmapping__panel .vm__controls button {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* === Vision Mapping: force a single heading weight across the page === */
body[data-page="visionmapping"] h1,
body[data-page="visionmapping"] h2,
body[data-page="visionmapping"] h3,
body[data-page="visionmapping"] h4,
body[data-page="visionmapping"] h5,
body[data-page="visionmapping"] h6,
body[data-page="visionmapping"] .h1,
body[data-page="visionmapping"] .h2,
body[data-page="visionmapping"] .h3,
body[data-page="visionmapping"] .h4,
body[data-page="visionmapping"] .h5,
body[data-page="visionmapping"] .h6 {
  font-weight: 500 !important;
}

/* === Vision Mapping: Mobile tile grid for top pills === */
@media (max-width: 767.98px) {
  /* Mobile: tile GRID sized like Hub (132 × 116) */
  #privateSecondaryNav .nav {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
    grid-auto-rows: minmax(116px, 1fr) !important;
    gap: 10px !important;
    justify-content: stretch !important;
    width: 100% !important;
  }

  /* Each item becomes a grid tile (no Bootstrap flex sizing) */
  #privateSecondaryNav .nav .nav-item {
    width: auto !important;
    flex: none !important;
  }

  /* Tile fills its cell; keep gold-outline styling from earlier rules */
  #privateSecondaryNav .nav .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    border-radius: var(--vm-radius-md) !important;
    box-sizing: border-box !important;
  }
}

#privateSecondaryNav .nav #vmDailyGratitudeNav .vm-label {
  display: inline !important;
  
  line-height: 1.2 !important;
  white-space: normal !important;
}

/* ===== Scoped brand buttons for Vision Mapping (no default Bootstrap blue) ===== */
.visionmapping-page .btn-primary {
  background-color: var(--brand-gold, #b08a48) !important;
  border-color: var(--brand-gold, #b08a48) !important;
  color: #111 !important;
}
.visionmapping-page .btn-primary:hover,
.visionmapping-page .btn-primary:focus,
.visionmapping-page .btn-primary:active {
  background-color: #9b783f !important; /* slightly darker gold */
  border-color: #9b783f !important;
  color: #111 !important;
}
/* Back button — rectangular corners like Brain Dump, scoped to VM page */
.visionmapping-page #vmBack.btn {
  border-radius: 0.5rem !important;
  background-color: var(--brand-gold, #b08a48) !important;
  border-color: var(--brand-gold, #b08a48) !important;
  color: #fff !important;
}
.visionmapping-page #vmBack.btn:hover,
.visionmapping-page #vmBack.btn:focus,
.visionmapping-page #vmBack.btn:focus-visible {
  background-color: #9a773f !important;
  border-color: #9a773f !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.25);
  outline: none;
}