/* backend/site_static/mm.css — served at /static/mm.css */

/* =========================
   Move Mountains Brand
   ========================= */
   :root{
    --mm-ink: #103038;      /* deep teal */
    --mm-orange: #E87048;   /* orange */
    --mm-olive: #A8B048;    /* olive */
    --mm-gold: #F0C068;     /* gold */
    --mm-bg: #f7f8fa;
    --mm-border: rgba(16,48,56,.14);
  }
  
  body { background: var(--mm-bg); }
  
  .mm-navbar{
    background: #fff;
    border-bottom: 1px solid var(--mm-border);
  }
  
  .mm-brandmark{
    height: 34px;
    width: auto;
    display:block;
  }
  
  .mm-title{ color: var(--mm-ink); letter-spacing: -.01em; }
  .mm-kicker{ color: rgba(16,48,56,.75); }
  
  .mm-card{
    border: 1px solid var(--mm-border);
    box-shadow: 0 .25rem .75rem rgba(16,48,56,.06);
  }
  
  .mm-badge{
    background: rgba(232,112,72,.12);
    color: #b8482c;
    border: 1px solid rgba(232,112,72,.22);
    font-weight: 700;
  }
  
  /* Containers / widths */
  .mm-container{ max-width: 980px; }
  
  /* Buttons: make Bootstrap primary match brand (orange) */
  .btn-primary{
    --bs-btn-bg: var(--mm-orange);
    --bs-btn-border-color: var(--mm-orange);
    --bs-btn-hover-bg: #d85e3d;
    --bs-btn-hover-border-color: #d85e3d;
    --bs-btn-active-bg: #c95537;
    --bs-btn-active-border-color: #c95537;
    --bs-btn-focus-shadow-rgb: 232,112,72;
    font-weight: 700;
  }
  .btn-outline-primary{
    --bs-btn-color: var(--mm-orange);
    --bs-btn-border-color: var(--mm-orange);
    --bs-btn-hover-bg: var(--mm-orange);
    --bs-btn-hover-border-color: var(--mm-orange);
    --bs-btn-focus-shadow-rgb: 232,112,72;
    font-weight: 700;
  }
  .progress-bar{ background-color: var(--mm-orange) !important; }
  
  /* Stepper helpers */
  .survey-step{ display:none; }
  .survey-step.active{ display:block; }
  
  .statement-row.excluded { opacity: 0.65; }
  .hint { min-height: 1.25rem; }
  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
  
  /* Replace inline styles */
  .mm-alert-border{
    border-color: var(--mm-border) !important;
  }
  .mm-progress{
    height: 10px;
  }
  .mm-ink{
    color: var(--mm-ink);
  }
  
  /* Optional: help the "w-md-auto" intent you had */
  @media (min-width: 768px){
    .w-md-auto{ width: auto !important; }
  }

  /* Legacy: Flask rich-text-editor wrapper (React admin uses TipTap in-app styles) */
  .rich-text-editor .ql-container {
    border-color: var(--mm-border);
    font-size: 0.9375rem;
  }
  .rich-text-editor .ql-toolbar {
    border-color: var(--mm-border);
    background: #fff;
  }

  /* Rich text HTML (TipTap / legacy Quill output) — participant take flow */
  .mm-richtext.overview-content,
  .mm-richtext.instructions-content,
  .mm-richtext.response-guidance,
  .overview-content.ql-editor,
  .instructions-content .ql-editor,
  .response-guidance .ql-editor {
    padding: 0;
    border: none;
    background: transparent;
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  .mm-richtext p,
  .mm-richtext h2,
  .mm-richtext h3 {
    margin: 0 0 0.65rem;
  }
  .mm-richtext ul,
  .mm-richtext ol {
    margin: 0 0 0.65rem;
    padding-left: 1.35rem;
  }
  .mm-richtext a {
    color: var(--mm-teal, #14363c);
    text-decoration: underline;
  }
  .mm-richtext blockquote {
    margin: 0 0 0.65rem;
    padding-left: 0.85rem;
    border-left: 3px solid rgba(20, 54, 60, 0.35);
  }

  /* =========================
     Assessment Engine
     ========================= */

  /* X toggle - state toggle, not destructive */
  .mm-exclude-toggle {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--mm-border);
    border-radius: 0.375rem;
    background: #fff;
    color: var(--mm-ink);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }
  .mm-exclude-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
  }
  .mm-exclude-toggle[aria-pressed="true"] {
    background: rgba(220, 68, 68, 0.14);
    border-color: rgba(220, 68, 68, 0.45);
    color: #b91c1c;
  }
  .mm-exclude-toggle[aria-pressed="true"]:hover {
    background: rgba(220, 68, 68, 0.2);
    border-color: rgba(220, 68, 68, 0.55);
  }

  /* Statement row: meta (exclude + rank badge) | text | rank dropdown */
  .mm-statement-row {
    transition: opacity 0.2s;
  }
  .mm-statement-row--rankGrid .mm-statement-rowMeta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .mm-statement-row .mm-statement-text {
    min-width: 0;
    font-weight: 500;
  }
  .mm-statement-row.excluded {
    opacity: 0.6;
  }
  .mm-statement-row.excluded .mm-statement-text {
    text-decoration: line-through;
    color: #6B7280 !important;
  }
  .mm-statement-row .mm-rank-dropdown-wrap {
    flex-shrink: 0;
  }
  .mm-statement-row .mm-rank-select {
    width: auto;
    min-width: 4rem;
  }

  /* Set progress summary */
  .mm-set-progress {
    line-height: 1.4;
  }

  /* Set validation message */
  .mm-set-validation.text-danger {
    color: #dc3545 !important;
  }

/* Shared rich text reset */
.mm-richtext {
  color: #24343a;
  line-height: 1.6;
}

.mm-richtext > :first-child {
  margin-top: 0 !important;
}

.mm-richtext > :last-child {
  margin-bottom: 0 !important;
}

.mm-richtext p {
  margin: 0 0 1rem 0;
}

.mm-richtext p:empty {
  display: none;
}

.mm-richtext ul,
.mm-richtext ol {
  margin: 0 0 1rem 0;
  padding-left: 1.25rem;
}

.mm-richtext li {
  margin-bottom: 0.35rem;
}

.mm-richtext h1,
.mm-richtext h2,
.mm-richtext h3,
.mm-richtext h4,
.mm-richtext h5,
.mm-richtext h6 {
  margin: 1.25rem 0 0.75rem 0;
  font-weight: 700;
  line-height: 1.25;
  color: #14363C;
}

.mm-richtext h1 { font-size: 1.75rem; }
.mm-richtext h2 { font-size: 1.4rem; }
.mm-richtext h3 { font-size: 1.15rem; }
.mm-richtext h4,
.mm-richtext h5,
.mm-richtext h6 { font-size: 1rem; }

.mm-richtext strong {
  font-weight: 700;
}

.mm-richtext em {
  font-style: italic;
}

.mm-richtext blockquote {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 3px solid #D1D5DB;
  color: #4b5563;
}

.mm-richtext hr {
  margin: 1rem 0;
  border: 0;
  border-top: 1px solid #E5E7EB;
}

.mm-richtext table {
  width: 100%;
  margin: 1rem 0;
  border-collapse: collapse;
}

.mm-richtext table th,
.mm-richtext table td {
  border: 1px solid #E5E7EB;
  padding: 0.5rem;
  vertical-align: top;
}

/* Smaller variant for instruction box */
.mm-richtext-sm {
  font-size: 0.975rem;
  line-height: 1.55;
}

.mm-richtext-sm h1 { font-size: 1.35rem; }
.mm-richtext-sm h2 { font-size: 1.2rem; }
.mm-richtext-sm h3 { font-size: 1.05rem; }
.mm-richtext-sm h4,
.mm-richtext-sm h5,
.mm-richtext-sm h6 { font-size: 1rem; }

/* Prevent giant gaps caused by editor-inserted blank paragraphs */
.mm-richtext p + p {
  margin-top: 0;
}

/* Optional: if your editor outputs lots of non-breaking-space empty paragraphs */
.mm-richtext p:has(br:only-child) {
  display: none;
}