/* merchantnew — merchant_pages.css
 * ---------------------------------------------------------------------------
 * Phase 1 of the "no inline CSS / JS" cleanup for the merchant portal.
 *
 * Two kinds of rule live here and nothing else:
 *   1. PAGE BLOCKS  — CSS lifted VERBATIM out of a page's inline <style> block.
 *                     Kept under its original class names so the page markup is
 *                     unchanged; only the delivery moved from the document to
 *                     this stylesheet.
 *   2. UTILITIES    — one class per inline style= declaration set that repeated
 *                     across pages. Values are copied byte-for-byte from the
 *                     attributes they replace, so rendering is identical.
 *
 * Loaded globally from includes/head.php, immediately AFTER css/merchant.css,
 * which is the same cascade position the inline <style> blocks used to occupy
 * relative to the vendor sheets. Local file, no CDN.
 *
 * Adding to this file: prefer an existing utility. Only add a new one when the
 * exact declaration set appears on 2+ elements, otherwise it is a page block.
 * ---------------------------------------------------------------------------
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. PAGE BLOCKS (lifted from inline <style>, unchanged)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── marketing_acquisition.php ────────────────────────────────────────────── */
.aq-card{border:1px solid #ecebf3;border-radius:16px;padding:16px;height:100%;background:#fff;box-shadow:0 2px 14px rgba(30,35,80,.05);}
.aq-card .ic{font-size:26px;line-height:1;}
.aq-stat{font-size:12px;color:#6a6a76;}
.aq-stat b{color:#20232e;}
.aq-tier{border-radius:12px;padding:12px;text-align:center;height:100%;}
.aq-tier .n{font-size:24px;font-weight:800;line-height:1.1;}
.aq-tier .l{font-size:12px;font-weight:600;color:#444;}
.aq-link{background:#f4f5fa;border:1px solid #e6e6ef;border-radius:6px;padding:3px 8px;font-size:11px;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle;}

/* Acquisition tier chips: the five audience buckets were carrying their swatch
   as two inline attributes each (wrapper background + .n colour). Same values. */
.aq-tier.aq-t-verified{background:#e6f7f0;}
.aq-tier.aq-t-verified .n{color:#0b5f45;}
.aq-tier.aq-t-confirmed{background:#eaf1ff;}
.aq-tier.aq-t-confirmed .n{color:#123a86;}
.aq-tier.aq-t-activation{background:#fff5e0;}
.aq-tier.aq-t-activation .n{color:#8a5a00;}
.aq-tier.aq-t-neutral{background:#eef0f3;}
.aq-tier.aq-t-neutral .n{color:#5a5a66;}

/* Consent declaration panel */
.aq-consent{background:#f6fbf7;border:1px solid #d7efe1;border-radius:12px;font-size:13px;color:#245c43;}

/* ── module_wallets.php ───────────────────────────────────────────────────── */
.mw-card{border:0;border-radius:16px;box-shadow:0 2px 14px rgba(30,35,80,.06);}
.mw-chip{border-radius:12px;padding:12px;text-align:center;}
.mw-chip .n{font-size:22px;font-weight:800;line-height:1.1;}
.mw-chip .l{font-size:12.5px;color:#5b5f77;font-weight:600;}
.mw-h{font-size:17px;font-weight:700;}
.mw-mod{font-size:16px;font-weight:700;}

/* Wallet chip swatches (wrapper background + .n colour, previously inline). */
.mw-chip.mw-c-violet{background:#f3eefe;}
.mw-chip.mw-c-violet .n{color:#7a54c9;}
.mw-chip.mw-c-blue{background:#eaf1ff;}
.mw-chip.mw-c-blue .n{color:#2f6fed;}
.mw-chip.mw-c-amber{background:#fff5e0;}
.mw-chip.mw-c-amber .n{color:#c98a00;}
.mw-chip.mw-c-green{background:#e9f8f0;}
.mw-chip.mw-c-green .n{color:#1a9f68;}

/* ── unsubscribes.php ─────────────────────────────────────────────────────── */
.us-card{border:0;border-radius:16px;box-shadow:0 2px 14px rgba(30,35,80,.06);}
.us-stat{border-radius:16px;padding:16px;text-align:center;min-height:100px;}
.us-stat .n{font-size:30px;font-weight:800;line-height:1.1;}
.us-stat .l{font-size:14px;font-weight:600;color:#5b5f77;}
.us-h{font-size:17px;font-weight:700;}

/* Opt-out stat swatches (wrapper background + .n colour, previously inline). */
.us-stat.us-c-rose{background:#fdecef;}
.us-stat.us-c-rose .n{color:#d83a5e;}
.us-stat.us-c-green{background:#e9f8f0;}
.us-stat.us-c-green .n{color:#1a9f68;}

/* ── automations.php ──────────────────────────────────────────────────────── */
.au-card{border:0;border-radius:16px;box-shadow:0 2px 14px rgba(30,35,80,.06)}
.au-h{font-size:17px;font-weight:700}
.au-step{background:#f7f9fc;border-radius:10px;padding:8px;margin-bottom:8px}
/* Saved journey steps render on white with a hairline border instead of the
   grey draft fill; this was an inline override of .au-step's own background. */
.au-step.au-step-saved{background:#fff;border:1px solid #eef1f6}
.au-step-divider{border-top:1px dashed #eef1f6}

/* ── setupmodule_details.php (setup wizard) ───────────────────────────────── */
.mn-wiz-head{border:1px solid var(--bs-border-color,#e6e8ec);border-radius:14px}
.mn-stepper{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.mn-stepper li{flex:1 1 120px;min-width:110px}
.mn-stepper .mn-step{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border:1px solid var(--bs-border-color,#e6e8ec);border-radius:12px;background:#fff;height:100%}
.mn-stepper .mn-step .mn-dot{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;background:#f1f3f7;color:#8a93a5;flex:0 0 auto}
.mn-stepper .mn-step small{display:block;line-height:1.1}
.mn-stepper .is-done .mn-dot{background:var(--bs-success,#22a06b);color:#fff}
.mn-stepper .is-active{border-color:var(--bs-primary,#3d5afe);box-shadow:0 0 0 2px rgba(61,90,254,.12)}
.mn-stepper .is-active .mn-dot{background:var(--bs-primary,#3d5afe);color:#fff}
.mn-stage-card{border:1px solid var(--bs-border-color,#e6e8ec);border-radius:12px;padding:1rem;height:100%}

/* ── WhatsApp onboarding (whatsapp_setup_guide.php + whatsapp_diagnose.php) ─ */
.mn-wa-hero{background:linear-gradient(135deg,#075E54,#128C7E 55%,#25D366)}
.mn-wa-lead{max-width:640px;opacity:.95;font-size:1.05rem}
.mn-wa-ico{font-size:1.8rem;color:#128C7E}
.mn-wa-num{width:34px;height:34px;background:#128C7E}
.mn-wa-body{font-size:.98rem;line-height:1.55}
.mn-wa-cta{background:linear-gradient(135deg,#ede9fe,#f0fdf4)}
.mn-wa-svg{width:100%;max-width:230px}
/* Bramha AI panel on the diagnostics screen */
.mn-badge-violet{background:#ede9fe;color:#6d28d9}
.mn-btn-violet{background:#6d28d9}
.mn-ai-out{background:#faf5ff;border:1px solid #e9d5ff;white-space:pre-wrap;line-height:1.55}

/* ── pipeline.php (kanban board) ──────────────────────────────────────────── */
.mn-pipe-body{min-height:120px;max-height:70vh;overflow-y:auto}


/* ═══════════════════════════════════════════════════════════════════════════
   2. UTILITIES — each value copied verbatim from the attribute it replaces
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Square icon tiles ────────────────────────────────────────────────────────
   `style="width:52px;height:52px"` alone appeared 60 times across the merchant
   root. Phase 2 converted all 60 of them (55 files); the 36/40/46 sizes were
   added in the same pass for the smaller tiles that share the shape. */
.mn-ic-36{width:36px;height:36px}
.mn-ic-40{width:40px;height:40px}
.mn-ic-44{width:44px;height:44px}
.mn-ic-46{width:46px;height:46px}
.mn-ic-48{width:48px;height:48px}
.mn-ic-52{width:52px;height:52px}
.mn-ic-54{width:54px;height:54px}
.mn-ic-56{width:56px;height:56px}

/* ── Fixed widths ─────────────────────────────────────────────────────────── */
.mn-w-0{width:0%}
.mn-w-64{width:64px}
.mn-w-90{width:90px}
.mn-w-110{width:110px}
.mn-w-140{width:140px}
.mn-w-280{width:280px}
.mn-w-320{width:320px}

/* ── Max widths (form controls, truncated cells, centred columns) ─────────── */
.mn-mw-70{max-width:70px}
.mn-mw-90{max-width:90px}
.mn-mw-110{max-width:110px}
.mn-mw-120{max-width:120px}
.mn-mw-130{max-width:130px}
.mn-mw-140{max-width:140px}
.mn-mw-150{max-width:150px}
.mn-mw-160{max-width:160px}
.mn-mw-170{max-width:170px}
.mn-mw-200{max-width:200px}
.mn-mw-220{max-width:220px}
.mn-mw-240{max-width:240px}
.mn-mw-280{max-width:280px}
.mn-mw-320{max-width:320px}
.mn-mw-360{max-width:360px}
.mn-narrow-900{max-width:900px}
.mn-narrow-980{max-width:980px;margin:0 auto}

/* ── Min widths / heights ─────────────────────────────────────────────────── */
.mn-minw-35{min-width:35px}
.mn-minw-70{min-width:70px}
.mn-minw-90{min-width:90px}
.mn-minw-100{min-width:100px}
.mn-minw-120{min-width:120px}
.mn-minw-130{min-width:130px}
.mn-minw-160{min-width:160px}
.mn-minw-180{min-width:180px}
.mn-minw-220{min-width:220px}
.mn-minw-260{min-width:260px}
.mn-minw-340{min-width:340px}
.mn-minw-360{min-width:360px}
.mn-minw-100p{min-width:100%}
.mn-mh34{min-height:34px}
.mn-mh52{min-height:52px}

/* ── Scroll panes (table-responsive / product grids) ──────────────────────── */
.mn-scroll-200{max-height:200px;overflow:auto}
.mn-scroll-260{max-height:260px;overflow:auto}
.mn-scroll-320{max-height:320px;overflow:auto}
.mn-scroll-420{max-height:420px;overflow:auto}
.mn-scroll-460{max-height:460px;overflow:auto}
.mn-scroll-480{max-height:480px;overflow:auto}
.mn-scroll-560{max-height:560px;overflow:auto}
.mn-ovx-auto{overflow-x:auto}

/* ── Progress bar tracks ──────────────────────────────────────────────────── */
.mn-progress-6{height:6px}
.mn-progress-7{height:7px}
.mn-progress-8{height:8px;border-radius:4px;background:#e9ecef}

/* ── Type scale used by inline attributes ─────────────────────────────────── */
.mn-fs-11{font-size:11px}
.mn-fs-60{font-size:.6rem}
.mn-fs-65{font-size:.65rem}
.mn-fs-70{font-size:.7rem}
.mn-fs-72{font-size:.72rem}
.mn-fs-75{font-size:.75rem}
.mn-fs-80{font-size:.8rem}
.mn-fs-92{font-size:.92rem}
.mn-fs-95{font-size:.95rem}
.mn-fs-102{font-size:1.02rem}
.mn-fs-11r{font-size:1.1rem}
.mn-fs-12r{font-size:1.2rem}
.mn-fs-16r{font-size:1.6rem}
.mn-fs-2r{font-size:2rem}
.mn-h16{font-size:16px;font-weight:800}
.mn-h17{font-size:17px;font-weight:800}
.mn-lh-17{line-height:1.7}
/* NOT interchangeable with Bootstrap's .fw-semibold: the Metrica build in assets/css/app.min.css
   redefines that utility to 500, so an inline font-weight:600 must map here, not to .fw-semibold. */
.mn-fw-600{font-weight:600}
.mn-ls-03{letter-spacing:.3px}
.mn-ls-2{letter-spacing:2px}

/* ── Table column widths (percentage, header cells) ───────────────────────── */
.mn-col-5{width:5%}
.mn-col-12{width:12%}
.mn-col-15{width:15%}
.mn-col-20{width:20%}
.mn-col-28{width:28%}
.mn-col-35{width:35%}

/* ── Misc ─────────────────────────────────────────────────────────────────── */
.mn-cursor-pointer{cursor:pointer}
.mn-break-all{word-break:break-all}
.mn-obj-cover{object-fit:cover}
.mn-thumb-100{height:100px;object-fit:cover}
.mn-btn-xs{padding:2px 6px;font-size:.7rem}
.mn-mt-n8{margin-top:-8px}
.mn-bg-alt{background:#f6f8ff}
.mn-bg-green50{background:#f0fdf4}
.mn-tabs-thin{border-bottom:2px solid #eee}
.mn-badge-tr{position:absolute;top:10px;right:10px}
/* Soft elevated card — the most repeated inline card treatment in the portal. */
.mn-soft-card{border:0;border-radius:16px;box-shadow:0 2px 14px rgba(30,35,80,.06)}

/* ── Phase 2 additions ─────────────────────────────────────────────────────────
   Font sizes lifted off repeated inline attributes. These sit on badges and on
   .text-muted captions, both of which Bootstrap already sizes, so each one was
   checked in the browser against the inline original before being used: this
   file loads after bootstrap/app.min/merchant.css, so a single class here wins
   the cascade at equal specificity. Numeric suffix = the value, 70 = .7rem. */
.mn-fs-11{font-size:11px}
.mn-fs-12{font-size:12px}
.mn-fs-65{font-size:.65rem}
.mn-fs-70{font-size:.7rem}
.mn-fs-72{font-size:.72rem}
.mn-fs-3r{font-size:3rem}
/* Small-caps section label ("PRODUCT SCOPE", "KYC STATUS") — one repeated pair. */
.mn-label-cap{font-size:.72rem;letter-spacing:.4px}
/* Thin progress track: overrides Bootstrap's default .progress height. */
.mn-h-6{height:6px}

/* ── Phase 3 additions ─────────────────────────────────────────────────────────
   Same rule as the rest of this section: every declaration set below appeared on
   2+ elements as an inline style attribute, and each value is copied byte-for-byte
   from the attributes it replaces. The ones that land on an element Bootstrap
   already sizes (.progress, .badge, .small, .ti icons) were compared against the
   inline original with getComputedStyle in the real cascade before being used. */
.mn-w-32{width:32px}
.mn-w-52{width:52px}
.mn-w-220{width:220px}
.mn-ic-38{width:38px;height:38px}
.mn-ic-72{width:72px;height:72px}
.mn-h-8{height:8px}
.mn-h-120{height:120px}
.mn-lh-12{line-height:1.2}
.mn-ov-auto{overflow:auto}
.mn-cursor-grab{cursor:grab}
.mn-scroll-70vh{max-height:70vh;overflow:auto}
/* Progress tracks: both override Bootstrap's .progress height/radius by loading later. */
.mn-track-8{height:8px;border-radius:6px}
.mn-track-8-soft{height:8px;background:#eef2f7;border-radius:4px;overflow:hidden}
/* Faded glyph in an empty state ("no apps yet"). */
.mn-icon-ghost{font-size:2rem;opacity:.5}

/* ═══════════════════════════════════════════════════════════════════════════
   3. PAGE BLOCKS lifted in phase 3 (from inline <style>, unchanged)
   ───────────────────────────────────────────────────────────────────────────
   Appended AFTER the utilities so each block keeps the "last one wins" position
   its in-document <style> held. Every selector below was checked to be absent
   from the rest of this file first, so nothing above is re-ordered by them, and
   each class name was checked to be used ONLY by the page(s) named — a rule that
   also matched some other page's markup would have been a visual change and was
   left inline instead.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Email template library — card grid, category pills and the scaled preview frame.
   Lifted verbatim from the in-document <style> block in email_template_library.php. */
.etl .etl-tabs{display:flex;gap:8px;flex-wrap:wrap}
.etl .etl-tab{padding:7px 14px;border-radius:20px;background:#eef1f8;color:#3a4056;font-size:13px;font-weight:600;text-decoration:none}
.etl .etl-tab.on{background:#4f46e5;color:#fff}
.etl .etl-card{background:#fff;border:1px solid #e9ecf4;border-radius:16px;overflow:hidden;box-shadow:0 2px 14px rgba(30,35,80,.05);height:100%;display:flex;flex-direction:column;position:relative}
.etl .etl-badges{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;z-index:2;pointer-events:none}
.etl .etl-b{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.92);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.etl .etl-b.mkt{color:#4f46e5}.etl .etl-b.txn{color:#1a9f68}.etl .etl-b.yours{color:#c026d3}.etl .etl-b.sys{color:#64748b}
.etl .etl-preview{height:230px;overflow:hidden;background:#f4f6fb;border-bottom:1px solid #eef1f8;position:relative}
.etl .etl-scale{transform:scale(.62);transform-origin:top center;width:161%;margin-left:-30.5%;pointer-events:none}
.etl .etl-body{padding:12px 14px;display:flex;flex-direction:column;gap:10px;margin-top:auto}
.etl .etl-title{font-weight:700;font-size:15px;color:#1e2340}
.etl .etl-meta{font-size:12px;color:#8890a6;margin-top:-4px}
.etl .etl-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* Shared Inbox — conversation list and the WhatsApp-style thread pane.
   Lifted verbatim from the in-document <style> block in inbox.php. */
  .ib-card{border:0;border-radius:16px;box-shadow:0 2px 14px rgba(30,35,80,.06)}
  .ib-item{padding:10px 12px;border-bottom:1px solid #f0f2f7;cursor:pointer;display:block;text-decoration:none;color:inherit}
  .ib-item:hover,.ib-item.on{background:#f2fbf6}
  .ib-thread{background:#e5ddd5;border-radius:12px;padding:14px;min-height:320px;max-height:440px;overflow:auto}
  .ib-in{background:#fff;border-radius:9px;border-top-left-radius:0;padding:8px 11px;font-size:13.5px;max-width:80%;margin-bottom:8px;box-shadow:0 1px 1px rgba(0,0,0,.1)}
  .ib-time{font-size:10px;color:#7d8a91}

/* Kanban board + dragula drag classes (dragula.min.css is not loaded in the shell head). One copy for both boards, which carried byte-identical blocks.
   Lifted verbatim from the in-document <style> block in jobs_kanban.php, realestate_kanban.php. */
    /* Local kanban styling + dragula transit classes (dragula.min.css not loaded in the shell head). */
    .kb-scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .5rem; }
    .kb-board { display: flex; gap: .75rem; min-width: max-content; }
    .kb-col { flex: 0 0 240px; max-width: 240px; background: var(--bs-tertiary-bg, #f4f6fb); border-radius: .6rem; padding: .5rem; }
    .kb-col-head { display: flex; align-items: center; justify-content: space-between; padding: .25rem .35rem .5rem; font-weight: 600; font-size: .8rem; }
    .kb-list { min-height: 60px; display: flex; flex-direction: column; gap: .5rem; }
    .kb-card { background: var(--bs-body-bg, #fff); border: 1px solid rgba(0,0,0,.06); border-radius: .5rem; padding: .55rem .6rem; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
    .kb-card:active { cursor: grabbing; }
    .kb-card .kb-title { font-weight: 600; font-size: .85rem; }
    .kb-card .kb-meta { font-size: .72rem; }
    .gu-mirror { position: fixed !important; margin: 0 !important; z-index: 9999 !important; opacity: .9; list-style: none; }
    .gu-transit { opacity: .35; }
    .kb-empty { font-size: .72rem; color: var(--bs-secondary-color, #7081b9); text-align: center; padding: .75rem 0; }

/* Hiring pipeline board — stage columns, draggable candidate cards.
   Lifted verbatim from the in-document <style> block in jobs_pipeline.php. */
    .hr-col { min-height: 280px; }
    .hr-stage { background: #eceff5; border: 1px solid #e8ebf3; border-radius: 12px; }
    .hr-card { cursor: grab; border: 1px solid #e8ebf3; border-radius: 12px; background: #fff; }
    .hr-card.dragging { opacity: .6; }
    .hr-dropzone { min-height: 180px; }

/* Marketing shell — horizontal scrolling tab strip shared by the marketing pages.
   Lifted verbatim from the in-document <style> block in pages/_marketing_shell.php. */
  .mc-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
  .mc-tab{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:10px;font-weight:600;font-size:14px;color:#4a4a55;background:#f2f2f7;text-decoration:none;border:1px solid transparent;}
  .mc-tab:hover{background:#e9e9f3;color:#20232e;}
  .mc-tab.active{background:#5b4de0;color:#fff;}

/* Investor / VC dashboard — extra-small button size and the opportunities pane row gap.
   Lifted verbatim from the in-document <style> block in pages/investor_vc_dashboard.php. */
  .btn-xs { padding: .15rem .4rem; font-size: .72rem; line-height: 1.1; }
  #pane-opportunities .row.flex-nowrap { gap: 0; }

/* Module setup — phone layout for the four status tiles (#mnSetupTiles only).
   Lifted verbatim from the in-document <style> block in setupmodule.php. */
  /* Phone: the four status tiles sit 2-up, so tighten the padding/icon and label a notch so a
     long single-word label ("Available") can never spill out of the narrower card. */
  @media (max-width: 575.98px) {
    #mnSetupTiles .card-body { padding: .85rem; }
    #mnSetupTiles .mn-kpi { min-height: 96px; }
    #mnSetupTiles .card-body > span { width: 42px !important; height: 42px !important; margin-right: .5rem !important; }
    #mnSetupTiles .mn-kpi-value { font-size: 1.3rem; }
    #mnSetupTiles .mn-kpi-label { font-size: .72rem; line-height: 1.15; }
  }

/* WhatsApp template gallery — template cards and message bubble preview.
   Lifted verbatim from the in-document <style> block in template_gallery.php. */
  .tg-card{border:1px solid #e6e9f0;border-radius:14px;background:#fff;overflow:hidden;height:100%;transition:.15s}
  .tg-card:hover{box-shadow:0 4px 18px rgba(26,159,104,.12);border-color:#bfe6d2}
  .tg-head{padding:10px 12px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f0f2f7}
  .tg-name{font-weight:700;font-size:13px}
  .tg-body{padding:12px;background:#e5ddd5}
  .tg-bubble{background:#fff;border-radius:9px;border-top-left-radius:0;padding:9px 11px;font-size:12.8px;line-height:1.5;color:#111b21;box-shadow:0 1px 1px rgba(0,0,0,.1);white-space:pre-wrap}
  .tg-h{font-size:17px;font-weight:700}