/* ═══════════════════════════════════════════
   proposals.css — Apex Systematic
   Page-specific styles for the proposals demo.
   Requires: style.css, demo.css
═══════════════════════════════════════════ */

/* ── HEADER ── */

/* ── PIPELINE BAR ── */

/* ── MAIN LAYOUT ── */


    .main-layout {
      display: grid;
      grid-template-columns: 420px 1fr;
      gap: 24px; align-items: start;
    }

/* ── FORM CARD ── */


    .form-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius); overflow: hidden; position: relative;
    }



    .form-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }

/* ── OUTPUT PANEL ── */


    .output-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius); overflow: hidden; position: relative;
      min-height: 500px;
    }



    .output-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }

/* Empty state */

/* Proposal output */


    #proposalOutput { display: none; }



    .proposal-meta {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 20px; border-bottom: 1px solid var(--border);
      background: rgba(255,255,255,0.02); flex-wrap: wrap; gap: 10px;
    }



    .proposal-meta-left { display: flex; align-items: center; gap: 10px; }



    .proposal-actions { display: flex; gap: 8px; }



    .action-btn {
      padding: 6px 12px; border-radius: var(--radius);
      border: 1px solid var(--border);
      background: transparent; color: var(--text-muted);
      font-family: var(--font-body); font-size: 11px;
      font-weight: 500; cursor: pointer; transition: all 0.2s;
      letter-spacing: 0.04em;
    }



    .action-btn:hover { border-color: var(--border-gold); color: var(--gold); }

/* Tabs */


    .output-tabs {
      display: flex; border-bottom: 1px solid var(--border);
      padding: 0 20px; background: rgba(255,255,255,0.01);
    }



    .tab-btn {
      padding: 12px 16px; font-size: 12px; font-weight: 500;
      color: var(--text-dim); cursor: pointer; border: none;
      background: transparent; font-family: var(--font-body);
      border-bottom: 2px solid transparent; margin-bottom: -1px;
      transition: all 0.2s; letter-spacing: 0.04em;
    }



    .tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }


    .tab-btn:hover:not(.active) { color: var(--text-muted); }



    .tab-content { display: none; }


    .tab-content.active { display: block; }

/* Proposal document */


    .proposal-doc {
      padding: 28px; overflow-y: auto;
    }



    .proposal-doc::-webkit-scrollbar { width: 4px; }


    .proposal-doc::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius); }



    .doc-header {
      border-bottom: 1px solid var(--border); padding-bottom: 20px; margin-bottom: 24px;
    }



    .doc-label {
      font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
    }



    .doc-title {
      font-family: var(--font-display);
      font-size: 22px; font-weight: 700; margin-bottom: 6px;
    }



    .doc-meta { font-size: 12px; color: var(--text-muted); }



    .doc-section { margin-bottom: 24px; animation: fadeUp 0.4s ease forwards; opacity: 0; }



    .doc-section:nth-child(1) { animation-delay: 0.05s; }


    .doc-section:nth-child(2) { animation-delay: 0.10s; }


    .doc-section:nth-child(3) { animation-delay: 0.15s; }


    .doc-section:nth-child(4) { animation-delay: 0.20s; }


    .doc-section:nth-child(5) { animation-delay: 0.25s; }


    .doc-section:nth-child(6) { animation-delay: 0.30s; }


    .doc-section:nth-child(7) { animation-delay: 0.35s; }



    .section-heading {
      font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--gold);
      margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
    }



    .section-heading::after {
      content: ''; flex: 1; height: 1px; background: var(--border);
    }



    .section-body { font-size: 14px; color: var(--text-muted); line-height: 1.75; }

/* Deliverables list */


    .deliverable-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }



    .deliverable-list li {
      display: flex; align-items: flex-start; gap: 10px;
      font-size: 14px; color: var(--text-muted); line-height: 1.55;
    }



    .deliverable-list li::before {
      content: '◆'; color: var(--gold); font-size: 8px;
      flex-shrink: 0; margin-top: 5px;
    }

/* Timeline */


    .timeline { display: flex; flex-direction: column; gap: 10px; }



    .timeline-row {
      display: flex; align-items: center; gap: 14px;
      padding: 10px 14px; background: var(--bg-input);
      border: 1px solid var(--border); border-radius: var(--radius);
      font-size: 13px;
    }



    .timeline-week {
      font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--gold);
      width: 52px; flex-shrink: 0;
    }



    .timeline-task { color: var(--text-muted); flex: 1; }

/* Investment */


    .investment-table { width: 100%; border-collapse: collapse; }



    .investment-table tr { border-bottom: 1px solid var(--border); }


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



    .investment-table td {
      padding: 10px 0; font-size: 13px; color: var(--text-muted);
    }



    .investment-table td:last-child { text-align: right; color: var(--text); font-weight: 500; }



    .investment-total {
      display: flex; justify-content: space-between; align-items: center;
      padding: 14px 16px; margin-top: 12px;
      background: var(--gold-dim); border: 1px solid var(--border-gold);
      border-radius: var(--radius);
    }



    .investment-total span:first-child {
      font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--gold);
    }



    .investment-total span:last-child {
      font-family: var(--font-display);
      font-size: 22px; font-weight: 700; color: var(--gold);
    }



    .investment-note {
      font-size: 12px; color: var(--text-dim); margin-top: 10px;
      display: flex; align-items: center; gap: 6px;
    }

/* Next steps */


    .next-steps { display: flex; flex-direction: column; gap: 10px; }



    .next-step {
      display: flex; gap: 12px; align-items: flex-start;
    }



    .step-num {
      width: 24px; height: 24px; border-radius: 50%;
      background: var(--gold-dim); border: 1px solid var(--border-gold);
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 600; color: var(--gold);
      flex-shrink: 0;
    }



    .step-text { font-size: 14px; color: var(--text-muted); padding-top: 2px; }

/* Email preview tab */


    .email-wrap { padding: 20px; }



    .email-preview {
      background: var(--bg-input); border: 1px solid var(--border);
      border-radius: var(--radius); overflow: hidden;
    }



    .email-fields {
      padding: 14px 16px; border-bottom: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 6px;
    }



    .email-row { display: flex; gap: 10px; font-size: 12px; }


    .email-row-label { color: var(--text-dim); width: 40px; flex-shrink: 0; }


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



    .email-body-text {
      padding: 18px; font-size: 13px; color: var(--text-muted);
      line-height: 1.8; white-space: pre-wrap;
    }



    .email-type-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px; border-radius: 100px; font-size: 11px;
      font-weight: 600; letter-spacing: 0.06em; margin-bottom: 12px;
    }

/* Airtable tab */


    .airtable-wrap { padding: 20px; }



    .airtable-table {
      width: 100%; border-collapse: collapse; font-size: 13px;
    }



    .airtable-table tr { border-bottom: 1px solid var(--border); }


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



    .airtable-table td { padding: 10px 0; vertical-align: top; }



    .airtable-table td:first-child {
      color: var(--text-dim); font-size: 11px;
      letter-spacing: 0.07em; text-transform: uppercase;
      font-weight: 500; width: 36%; padding-right: 12px;
      padding-top: 12px;
    }



    .airtable-table td:last-child { color: var(--text); }



    .crm-tag {
      display: inline-flex; align-items: center; padding: 3px 9px;
      border-radius: var(--radius); font-size: 11px; font-weight: 600;
      letter-spacing: 0.06em;
    }



    .crm-tag.new {
      background: var(--gold-dim); color: var(--gold);
      border: 1px solid var(--border-gold);
    }

/* ── CTA ── */



    @media (max-width: 900px) {
      .main-layout { grid-template-columns: 1fr; }
      .pipeline-bar { justify-content: flex-start; }
      .cta-section { padding: 28px 20px; }
    }