/* ============================================================
   Meridian theme — CLA Title portal reskin
   Values transcribed from design/index.html (THEMES.meridian,
   meridianCard(), NAVS.trust, PILLS.trust, kitShell meridian branch).
   Single self-contained stylesheet — no external imports.
   Load fonts.css alongside this file for the Public Sans face.
   ============================================================ */

:root {
  --m-bg:#F7F8FA; --m-card:#fff; --m-line:#E7EAEE; --m-line-soft:#F0F2F4;
  --m-ink:#0E1116; --m-sub:#6B7280; --m-body:#374151;
  --m-green:#97C93F; --m-green-ink:#16210a; --m-accent:#5c8a12;
  --m-chip-bg:#EEF6DC; --m-chip-ink:#33520a;
}

body.meridian {
  background:var(--m-bg);
  font-family:'Public Sans',sans-serif;
  color:var(--m-body);
  font-size:14px;
  line-height:1.55;
  letter-spacing:-0.006em;
  /* No -webkit-font-smoothing override: the /design mockup renders with the
     browser default (subpixel) smoothing, so matching it keeps the live theme
     from looking a shade lighter/thinner than the reference on macOS. */
  text-rendering:optimizeLegibility;
}
.meridian, .meridian input, .meridian select, .meridian textarea, .meridian button { font-family:'Public Sans',sans-serif; }

/* ---- global layout: white sidebar + light-grey canvas (no grey gutter),
       no topbar, roomier content, sticky footer. One fixed 248px white sidebar;
       content sits directly on the --m-bg canvas so white cards pop (mockup),
       with no % width mismatch band between them. ---- */
:root { --m-side-w:248px; }
.meridian .wrapper-main { background:var(--m-bg); }
.meridian .left-bar {
  width:var(--m-side-w) !important; background:#fff !important; border-right:1px solid var(--m-line);
  top:0 !important; height:100vh !important; float:none !important; padding:0 14px !important;
}
.meridian .right-bar {
  width:auto !important; float:none !important;
  margin:0 0 0 var(--m-side-w) !important;
  background:transparent !important;
  padding:32px 44px 40px !important;
  min-height:calc(100vh - 60px); /* fill the viewport so the footer sits at the bottom on short pages */
  box-sizing:border-box;
}
.meridian .footer-bar { display:none; } /* legacy classic footer, if it ever renders */
.m-footer {
  margin-left:var(--m-side-w);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:16px 44px; background:transparent; border:0; border-top:1px solid var(--m-line);
  font-family:'Public Sans',sans-serif; font-size:12.5px; color:var(--m-sub);
}
.m-footer-copy { font-weight:500; }
.m-footer-link { color:var(--m-sub); font-weight:600; text-decoration:none; }
.m-footer-link:hover { color:var(--m-accent); }
@media (max-width:900px){
  .meridian .left-bar { width:200px !important; }
  .meridian .right-bar { margin-left:200px !important; padding:22px !important; }
  .m-footer { margin-left:200px; }
}

/* ---- surfaces ---- */
.m-card {
  background:var(--m-card);
  border:1px solid var(--m-line);
  border-radius:14px;
  padding:20px 22px;
}

/* ---- headings ---- */
.m-h1 { font-size:26px; font-weight:800; color:var(--m-ink); letter-spacing:-0.02em; line-height:1.2; }
.m-h2 { font-size:16px; font-weight:800; color:var(--m-ink); }
.m-eyebrow {
  font-size:12px; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--m-sub);
}

/* ---- buttons ---- */
.m-btn {
  display:inline-block; background:var(--m-green); border:0; border-radius:10px;
  padding:11px 20px; font-size:14px; font-weight:800; color:var(--m-green-ink);
  cursor:pointer; text-decoration:none;
}
.m-btn:hover { filter:brightness(0.96); color:var(--m-green-ink); }
/* A disabled action must LOOK disabled: the send buttons lock themselves while a
   request is in flight, and without this they stayed visually identical, so a
   locked button read as "nothing happened" (a disabled input fires no click). */
.m-btn:disabled, .m-btn[disabled] {
  background:#C9CDD2; color:#6B7280; cursor:not-allowed; filter:none;
}

.m-ghost {
  display:inline-block; background:#fff; border:1px solid #D7DBE0; border-radius:8px;
  padding:7px 15px; font-size:13px; font-weight:700; color:var(--m-body);
  cursor:pointer; white-space:nowrap; text-decoration:none;
}
.m-ghost:hover { background:var(--m-line-soft); color:var(--m-body); }

/* ---- chips ---- */
.m-chip {
  display:inline-block; border-radius:8px; padding:6px 14px; font-size:13px;
  font-weight:700; cursor:pointer; background:#fff; border:1px solid var(--m-line);
  color:#4b5563;
}
.m-chip.active { background:var(--m-chip-bg); color:var(--m-chip-ink); border-color:transparent; }

/* ---- status pills (PILLS.trust in the mockup) ---- */
.m-pill {
  display:inline-block; border-radius:100px; padding:4px 12px; font-size:11.5px;
  font-weight:800; white-space:nowrap;
}
.m-pill-todo,
.m-pill-ok      { background:#EEF6DC; color:#4c6b14; }
.m-pill-done    { background:#E9EDF2; color:#4b5563; }
.m-pill-locked  { background:#F3F4F6; color:#9ca3af; }
.m-pill-blocked { background:#FDEBE3; color:#c2410c; }
.m-pill-closing { background:#E3EBFB; color:#1d4ed8; }

/* ---- sidebar ---- */
.m-sidebar {
  width:232px; background:#fff; border-right:1px solid var(--m-line);
  display:flex; flex-direction:column; padding:24px 16px;
  box-sizing:border-box; flex-shrink:0;
}
.m-sidebar-brand {
  display:flex; align-items:center; gap:10px; padding:24px 12px 24px;
  font-weight:800; font-size:15px; color:var(--m-ink); letter-spacing:-0.01em;
}
.m-sidebar-brand img { width:30px; }
/* full brand logo (replaces the icon + typed "CLA Title") — sized by height */
.m-sidebar-brand img.m-brand-logo { width:auto; height:30px; max-width:184px; display:block; }
.m-nav { display:flex; flex-direction:column; gap:3px; }

/* nav items — trust nav: padding 9-10px, radius 9-10px, weight 600 idle / 800 active */
.m-nav-item {
  display:block; padding:10px 12px; border-radius:10px; font-size:14px;
  font-weight:600; color:var(--m-body); text-decoration:none; cursor:pointer;
}
.m-nav-item:hover { background:var(--m-line-soft); color:var(--m-body); }
.m-nav-item.active,
.m-nav-item.active:hover {
  background:var(--m-chip-bg); color:var(--m-chip-ink); font-weight:800;
}

/* account chip pinned to the bottom of the sidebar */
.m-userbox {
  margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px;
  background:#F4F6F8; border-radius:12px;
}
.m-userbox .m-avatar {
  width:32px; height:32px; border-radius:50%; background:#183A81; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12.5px; flex-shrink:0;
}
.m-userbox .m-user-name { font-size:12.5px; color:var(--m-ink); font-weight:700; }
.m-userbox .m-user-role { font-size:12.5px; color:var(--m-sub); }

/* ---- layout ---- */
.m-shell { display:flex; min-height:100vh; background:var(--m-bg); }
.m-main { flex:1; padding:30px 36px; box-sizing:border-box; min-width:0; }

/* ---- topbar ---- */
.m-topbar {
  display:flex; align-items:center; gap:16px;
  padding:0 0 22px; margin-bottom:22px;
  border-bottom:1px solid var(--m-line);
}
.m-topbar .m-topbar-title { font-size:26px; font-weight:800; color:var(--m-ink); letter-spacing:-0.02em; }
.m-topbar-actions { margin-left:auto; display:flex; align-items:center; gap:12px; }

/* ---- KPI card ---- */
.m-kpi {
  background:#fff; border:1px solid var(--m-line); border-radius:14px; padding:16px 20px;
}
.m-kpi-label {
  font-size:12px; color:var(--m-sub); font-weight:700;
  text-transform:uppercase; letter-spacing:0.05em;
}
.m-kpi-value { font-size:30px; font-weight:800; letter-spacing:-0.02em; color:var(--m-ink); }
.m-kpi-value.accent { color:var(--m-accent); }
.m-kpi-note { font-size:12.5px; color:var(--m-sub); }

/* ---- list rows (dashboard item list) ---- */
.m-row {
  display:flex; align-items:center; gap:14px; padding:13px 0;
  border-top:1px solid var(--m-line-soft);
}
.m-row:first-child { border-top:0; }
.m-row-title { font-weight:700; font-size:14.5px; color:var(--m-ink); }
.m-row-sub { font-size:12.5px; color:var(--m-sub); }

/* ---- tables (reskins plain + DataTables markup) ---- */
.m-table {
  width:100%; border-collapse:collapse; background:#fff;
  font-size:13.5px; color:var(--m-body);
}
.m-table th {
  text-align:left; padding:12px 16px; font-size:12px; font-weight:700;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--m-sub);
  background:var(--m-line-soft); border-bottom:1px solid var(--m-line);
  white-space:nowrap;
}
.m-table td {
  padding:13px 16px; border-top:1px solid var(--m-line-soft);
  color:var(--m-body); vertical-align:middle;
}
.m-table tbody tr:first-child td { border-top:0; }
.m-table tbody tr:hover td { background:#FAFBFC; }
.m-table td .m-row-title,
.m-table td strong { color:var(--m-ink); font-weight:700; }

/* Bootstrap / DataTables .table markup, when it lives under .meridian */
.meridian table.table { border-collapse:collapse; background:#fff; color:var(--m-body); }
.meridian table.table > thead > tr > th {
  border-bottom:1px solid var(--m-line); color:var(--m-sub);
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  background:var(--m-line-soft); padding:12px 16px;
}
.meridian table.table > tbody > tr > td {
  border-top:1px solid var(--m-line-soft); padding:13px 16px; vertical-align:middle;
}
.meridian table.table.table-striped > tbody > tr:nth-of-type(odd) > td { background:#FAFBFC; }

/* ---- DataTables chrome (Show entries / Search / filter row / pagination / info) ---- */
.meridian .dataTables_wrapper { font-size:13px; color:var(--m-sub); }
.meridian .dataTables_length,
.meridian .dataTables_filter { margin-bottom:12px; }
.meridian .dataTables_length label,
.meridian .dataTables_filter label { font-weight:600; color:var(--m-sub); display:flex; align-items:center; gap:8px; }
.meridian .dataTables_length select,
.meridian .dataTables_filter input,
.meridian .datatable-filter input,
.meridian .datatable-filter select {
  background:#fff; border:1px solid #D7DBE0; border-radius:10px;
  padding:8px 12px; font-size:13px; color:var(--m-body); outline:none;
}
.meridian .dataTables_filter input:focus,
.meridian .datatable-filter input:focus,
.meridian .dataTables_length select:focus { border-color:var(--m-green); }
.meridian .datatable-filter input { width:100%; padding:6px 9px; font-size:12.5px; }
.meridian .dataTables_info { padding-top:12px; color:var(--m-sub); }
.meridian .dataTables_paginate { padding-top:12px; }
.meridian .dataTables_paginate .paginate_button {
  padding:6px 12px; margin-left:4px; border-radius:8px; border:1px solid var(--m-line);
  background:#fff; color:var(--m-body) !important; cursor:pointer;
}
.meridian .dataTables_paginate .paginate_button.current {
  background:var(--m-chip-bg); border-color:transparent; color:var(--m-chip-ink) !important; font-weight:700;
}
.meridian .dataTables_paginate .paginate_button.disabled { opacity:0.45; cursor:default; }
.meridian .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) { background:var(--m-line-soft); }

/* ---- welcome header (replaces classic green all-caps banner) ---- */
.m-welcome { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; padding:6px 0 16px; margin-bottom:6px; border-bottom:1px solid var(--m-line); }
.m-welcome-hi { font-size:20px; font-weight:800; color:var(--m-ink); letter-spacing:-0.02em; }
.m-welcome-name { font-size:20px; font-weight:800; color:var(--m-accent); letter-spacing:-0.02em; }
.m-welcome-sub { font-size:14px; font-weight:600; color:var(--m-sub); }

/* ---- wire-verification callout ---- */
.m-note {
  background:#F4F9EA; border:1px solid #dcefc0; border-radius:12px;
  padding:14px 16px; font-size:12.5px; color:#3f5a12; line-height:1.5;
}

/* ---- form controls: white field, 1px #D7DBE0 line, radius 10px ----
   Matches the mockup input token exactly (KITS.meridian.input: border #D7DBE0,
   radius 10px, padding 12px 16px). This supersedes the earlier Task-5 compact
   8px/9px deviation — /design is the source of truth for field chrome. */
.meridian .form-control,
.meridian input[type="text"],
.meridian input[type="email"],
.meridian input[type="password"],
.meridian input[type="search"],
.meridian input[type="tel"],
.meridian input[type="number"],
.meridian input[type="date"],
.meridian textarea,
.meridian select {
  background:#fff; border:1px solid #D7DBE0; border-radius:10px;
  padding:12px 16px; font-size:14px; font-family:'Public Sans',sans-serif;
  color:var(--m-ink); box-shadow:none; box-sizing:border-box; line-height:1.4;
}
.meridian .form-control::placeholder,
.meridian input::placeholder,
.meridian textarea::placeholder { color:#9ca3af; }

.meridian .form-control:focus,
.meridian input:focus,
.meridian textarea:focus,
.meridian select:focus {
  outline:none; border-color:var(--m-green);
  box-shadow:0 0 0 3px rgba(151,201,63,0.18);
}

.meridian label { color:var(--m-body); font-weight:600; font-size:13px; }

/* ---- page header (title + count subtitle), mockup pageHeader() ---- */
.m-page-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:20px;
}
.m-page-head-sub { font-size:13.5px; color:var(--m-sub); margin-top:4px; }

/* ---- breadcrumb (restyled to the meridian palette) ---- */
.meridian .breadcrumb { font-size:13px; color:var(--m-sub); }
.meridian .breadcrumb a { color:var(--m-sub); text-decoration:none; }
.meridian .breadcrumb a:hover { color:var(--m-ink); }
.meridian .breadcrumb-item.active { color:var(--m-ink); font-weight:700; }

/* ============================================================
   Task cards — mockup kitTasks(): a round status indicator, a
   title/meta/description body, a status pill and a CTA button.
   ============================================================ */
.m-task-list { display:flex; flex-direction:column; gap:14px; max-width:1000px; }

.m-task-card { display:flex; align-items:center; gap:18px; }

/*
 * Participant-task rows on the processor task page (2026-08-04 feedback:
 * "Processor Task page requires further improvement; there are several
 * alignment issues").
 *
 * A row is [title] [Action Required / Task Completed] [toggle caption + switch]
 * as three bare flex children, all sized by content. With two of these cards
 * side by side in a narrow column, the title and the toggle caption each
 * shrink-wrapped to two or three ragged lines, the status buttons landed at a
 * different x on every row, and .m-task-toggle's own margin-top:12px pushed
 * the switch out of vertical alignment with them. Fixed tracks put the buttons
 * in a column and stop the captions concertina-ing.
 */
.meridian .task-status-new .m-task-card {
  display:grid;
  grid-template-columns:minmax(120px, 1.2fr) minmax(128px, auto) minmax(150px, 1fr);
  align-items:center; gap:14px; padding:4px 0;
}
.meridian .task-status-new .m-task-title {
  margin:0; font-size:14px; line-height:1.35; min-width:0;
}
.meridian .task-status-new .pending-task-button,
.meridian .task-status-new .complete-task-button {
  justify-self:start; text-align:left; white-space:nowrap;
  padding:6px 12px 6px 34px; background-position:9px center; border-width:1px;
  border-radius:8px; font-weight:700;
}
/* inside a row the toggle is a grid cell, so its stacking margin is wrong */
.meridian .task-status-new .m-task-card .m-task-toggle {
  margin-top:0; justify-content:flex-end; gap:8px; min-width:0;
}
.meridian .task-status-new .m-task-card .m-task-toggle span {
  font-size:12px; line-height:1.35; text-align:right;
}
/* separator between rows, so the two party columns read as aligned lists */
.meridian .task-status-new .task-sep {
  height:1px; background:var(--m-line); margin:10px 0;
}
@media (max-width:1200px) {
  .meridian .task-status-new .m-task-card { grid-template-columns:1fr; gap:8px; }
  .meridian .task-status-new .m-task-card .m-task-toggle { justify-content:flex-start; }
  .meridian .task-status-new .m-task-card .m-task-toggle span { text-align:left; }
}

/* round status indicator on the left */
.m-task-status {
  width:30px; height:30px; border-radius:50%; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; line-height:1; flex-shrink:0;
  border:2px solid var(--m-line); color:transparent;
}
.m-task-status--todo   { border-color:#D7DBE0; }       /* grey ring (legacy state) */
.m-task-status--action { border-color:var(--m-green); } /* green ring, needs action */
.m-task-status--done   { background:var(--m-green); border-color:var(--m-green); color:var(--m-green-ink); }

/*
 * Unfinished tasks carry a warm left edge (2026-08-12 feedback). The Tasks page
 * now groups cards under "Action required" / "Completed", and the stripe is what
 * makes an outstanding task readable from the left of a long list without
 * reading the pill. The 4px border replaces 4px of .m-card's own left padding,
 * so the text still starts at the same x as on a completed card.
 *
 * #E8804D is the pill's hue (#C2410C on #FDEBE3) lightened, so it reads as the
 * same signal without competing with the green CTA beside it.
 */
.m-task-card--action { border-left:4px solid #E8804D; padding-left:18px; }

/*
 * Group headers on the Tasks list. .m-task-list already supplies the 14px gap,
 * so these need no vertical margin of their own — only the Completed header
 * gets extra air to separate it from the last outstanding card.
 */
.m-group-head { display:flex; align-items:center; gap:10px; padding-top:6px; }
.m-group-head--done { margin-top:10px; }
.m-group-title {
  font-size:12px; font-weight:800; letter-spacing:0.08em;
  text-transform:uppercase; color:#c2410c;
}
.m-group-title--muted { color:var(--m-sub); }
.m-group-count {
  font-size:11px; font-weight:800; color:#c2410c; background:#FDEBE3;
  border-radius:100px; padding:1px 8px;
}
.m-group-count--muted { color:#4b5563; background:#E9EDF2; }
.m-group-rule { flex:1; height:1px; background:var(--m-line); }

/* title / meta / description */
.m-task-body { flex:1; min-width:0; }
.m-task-title { font-weight:800; font-size:15.5px; color:var(--m-ink); }
.m-task-card--done .m-task-title { text-decoration:line-through; opacity:0.55; }
.m-task-meta { font-size:13px; color:var(--m-sub); margin-top:2px; }
.m-task-desc { font-size:13.5px; color:var(--m-sub); margin-top:8px; max-width:640px; }

/* right-hand controls: pill + cta button */
.m-task-actions { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.m-task-cta { text-decoration:none; }
/* classic complete/pending status PNG is carried in markup for spec parity, but
   the mockup's actions row is pill + CTA only — hide the raster status image. */
.m-task-status-img { display:none; }

/* completion toggle (mockup has no toggle; carried for the live REA
   commission switch from the classic view) — clean rebuild of the classic
   .switch/.slider CSS in the meridian palette. */
.m-task-toggle { display:flex; align-items:center; gap:10px; margin-top:12px; font-size:13px; color:var(--m-sub); }
.m-task-toggle .switch {
  position:relative; display:inline-block; width:44px; height:22px; flex-shrink:0;
}
.m-task-toggle .switch input { opacity:0; width:0; height:0; }
.m-task-toggle .slider {
  position:absolute; cursor:pointer; inset:0; background:#D7DBE0;
  transition:.3s; border-radius:24px;
}
.m-task-toggle .slider:before {
  position:absolute; content:""; height:16px; width:16px; left:3px; bottom:3px;
  background:#fff; transition:.3s; border-radius:50%;
}
.m-task-toggle input:checked + .slider { background:var(--m-green); }
.m-task-toggle input:focus + .slider { box-shadow:0 0 0 3px rgba(151,201,63,0.25); }
.m-task-toggle input:checked + .slider:before { transform:translateX(22px); }

/* ---- empty state ("no tasks assigned") ---- */
.m-empty { text-align:center; padding:48px 24px; }
.m-empty img { margin-bottom:20px; max-width:120px; }
.m-empty h4 { font-size:18px; font-weight:800; color:var(--m-ink); margin:0 0 6px; }
.m-empty p { font-size:14px; color:var(--m-sub); margin:0; }
/* The inbox empty state (meridian/notes.php) sits inside the classic .box-main
   thread wrapper, whose customize.css rule `.box-main h4 { text-align:left;
   font-size:24px; color:#000 }` out-specifies the centred .m-empty above — so the
   heading rendered left-aligned and oversized while the icon, sub-text and
   button were centred (Nabeel, 2026-09-11). Re-assert the meridian look. */
.meridian .box-main .m-empty h4 { text-align:center; font-size:18px; color:var(--m-ink); }

/* ============================================================
   Inbox / messages — mockup kitInbox(): a card holding a column of
   chat bubbles (avatar + bubble + sender/meta line) and a compose row.
   The classic Inbox lists conversations, so each real conversation row is
   rendered as one left-aligned "message" bubble that links to the thread.
   ============================================================ */
.m-chat-card { max-width:1080px; }

.m-msg-list { display:flex; flex-direction:column; gap:16px; }

/* one conversation rendered as a chat row: avatar + bubble + open icon */
.m-msg {
  display:flex; align-items:flex-start; gap:12px;
  text-decoration:none; color:inherit;
}
.m-msg:hover .m-msg-bubble { border-color:var(--m-green); background:#fff; }

/* avatar reuses the shared circle; sized/coloured like the mockup (INITS.trust) */
.m-msg-avatar {
  width:36px; height:36px; border-radius:50%;
  background:#183A81; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:11px; flex-shrink:0;
}

/* the grey bubble (mockup theirBubble): asymmetric radius, 1px line */
.m-msg-bubble {
  flex:1; min-width:0; display:block;
  background:#F4F6F8; border:1px solid var(--m-line-soft);
  border-radius:4px 18px 18px 18px;
  padding:13px 17px; line-height:1.55;
}
.m-msg-subject { display:block; font-weight:800; font-size:14.5px; color:var(--m-ink); }
.m-msg-users   { display:block; font-size:13.5px; color:var(--m-body); margin-top:3px; word-break:break-word; }
.m-msg-meta    { display:block; font-size:11.5px; color:var(--m-sub); margin-top:6px; }
.m-msg-num     { font-weight:700; }
.m-msg-date::before { content:"\00b7"; margin:0 6px; }

/* unread highlight — mirrors the classic green/bold read_status_id styling */
.m-msg--unread .m-msg-subject { color:var(--m-accent); }
.m-msg--unread .m-msg-bubble  { border-color:rgba(151,201,63,0.45); background:var(--m-chip-bg); }

/* open-conversation affordance on the right */
.m-msg-open { flex-shrink:0; align-self:center; }
.m-msg-open img { width:22px; height:22px; opacity:0.7; }
.m-msg:hover .m-msg-open img { opacity:1; }

.m-chat-empty img { max-width:80px; }

/* ---- user picker (Start Conversation modal) ---- */
.m-picker-list { list-style:none; margin:0 0 20px; padding:0 6px 0 0; max-height:290px; overflow-y:auto; }
.m-picker-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 4px; border-top:1px solid var(--m-line-soft);
}
.m-picker-item:first-child { border-top:0; }
.m-picker-thumb { width:44px; height:44px; flex-shrink:0; }
.m-picker-thumb img { width:44px; height:44px; object-fit:cover; border-radius:50%; border:1px solid var(--m-line); }
.m-picker-info { flex:1; min-width:0; }
.m-picker-info h6 { font-size:14.5px; font-weight:700; color:var(--m-ink); margin:0 0 2px; }
.m-picker-info p  { font-size:13px; color:var(--m-sub); margin:0; }

/* the round checkbox toggle, rebuilt in the meridian palette */
.m-picker-check { flex-shrink:0; margin:0; }
.m-picker-check input { display:none; }
.m-picker-check label {
  position:relative; display:block; width:26px; height:26px; cursor:pointer;
  border:1px solid var(--m-line); border-radius:50%; background:#F4F6F8;
}
.m-picker-check input:checked + label { background:var(--m-green); border-color:var(--m-green); }
.m-picker-check input:checked + label:after {
  content:''; position:absolute; top:5px; left:9px; width:6px; height:12px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}

/* ---- compose form ---- */
.m-compose-form { display:flex; flex-direction:column; gap:6px; }
.m-compose-form > label { font-weight:600; font-size:13px; color:var(--m-body); margin-top:6px; }
.m-compose-form > label span { color:#d40000; }
.m-compose-editor { min-height:110px; }
.m-compose-form .m-btn { align-self:flex-end; margin-top:12px; }
.m-compose-attach { align-self:flex-end; display:inline-flex; align-items:center; gap:6px; }
.m-compose-attach img { width:16px; height:16px; }
.selected-image { display:block; overflow:hidden; }

/* Quill editor toolbar/area, themed to the meridian field look */
.meridian .ql-toolbar.ql-snow,
.meridian .ql-container.ql-snow { border-color:#D7DBE0; }
.meridian .ql-toolbar.ql-snow { border-radius:8px 8px 0 0; background:var(--m-line-soft); }
.meridian .ql-container.ql-snow { border-radius:0 0 8px 8px; font-family:'Public Sans',sans-serif; }

/* ---- loading overlay (classic #spinner-div) ---- */
.m-spinner-overlay {
  /* Above the Bootstrap modal (1055) and its backdrop (1050): the compose and
     add-member flows run from inside a modal, and at the old z-index of 2 the
     overlay was painted behind it, so the spinner was never visible. */
  position:fixed; display:none; inset:0; z-index:1060;
  text-align:center; background:rgba(255,255,255,0.8);
}
.m-spinner-overlay .spinner-border { position:fixed; top:45%; }

/* ============================================================
   Inbox conversation THREAD — mockup kitInbox() chat bubbles
   (design/index.html ~line 1449). Used by views/meridian/notes.php:
   own messages align right + green (m.mine), others align left + grey,
   each with an avatar and a sender/meta line. These classes wrap the
   verbatim message text / attachment anchors; nothing inside a form,
   modal, or <script> is styled here.
   ============================================================ */
.m-thread-card { max-width:1080px; }

/* the scroll region that holds the day groups + bubble rows (classic .box-main) */
.m-thread-scroll { max-height:60vh; overflow-y:auto; padding-right:4px; }
.m-thread-scroll::-webkit-scrollbar { width:6px; }
.m-thread-scroll::-webkit-scrollbar-track { background:var(--m-line-soft); border-radius:8px; }
.m-thread-scroll::-webkit-scrollbar-thumb { background:#cfd4da; border-radius:8px; }

/* Empty inbox (no conversations): the "Start Conversation" button used to sit
   inside the 60vh thread scroll box, wrapped in #empty_msg which inherits the
   classic .start-conversation dims (height:200px; padding-top:80px). On shorter
   screens that pushed the button below the fold, so a processor had to scroll
   inside the box to reach it (Matt/Caroline feedback, 2026-09-11). Neutralise
   the inherited dims everywhere, and when the thread box only holds the empty
   state, drop its scroll cap so the button is always visible up top. */
.meridian #empty_msg.start-conversation { height:auto; padding-top:24px; }
.meridian .m-thread-scroll:has(#empty_msg) { max-height:none; overflow:visible; }
/* Reply box lives inside the scroll area: with an attachment preview it was clipped by
   the 60vh cap. Let the page scroll instead whenever the composer is present. */
.meridian .m-thread-scroll:has(#message_new) { max-height:none; overflow:visible; }
.m-compose-actions { flex-wrap:wrap; }
.m-compose-editor-wrap { min-height:140px; }

/* Communicators sub-line under the page title */
.m-thread-communicators { font-size:12.5px; color:var(--m-sub); margin-top:3px; }

/* day separator ("Today" / "Yesterday" / date) — a centered pill on a rule */
.m-thread-date { text-align:center; position:relative; margin:22px 0 14px; }
.m-thread-date::before {
  content:""; position:absolute; left:0; right:0; top:50%; height:1px;
  background:var(--m-line);
}
.m-thread-date .chat-date-inner { position:relative; display:inline-block; background:transparent; }
.m-thread-date .chat-date-inner span {
  display:inline-block; background:var(--m-line-soft); color:var(--m-sub);
  font-size:12px; font-weight:700; padding:5px 16px; border-radius:20px;
}

/* one chat row: avatar + body column; --out mirrors it to the right */
.m-thread-row { display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; overflow:visible; min-width:0; }
.m-thread-row--out { flex-direction:row-reverse; }
/*
 * flex:1 1 auto gives the body a DEFINITE width (it grows to the 60% cap)
 * instead of the shrink-to-fit width it had before. That matters because the
 * bubble inside still carries the classic .receive-message/.message-send
 * classes from customize.css, whose max-width:40% is a PERCENTAGE: resolved
 * against a shrink-to-fit parent it collapsed to a fraction of the text's own
 * width, and .m-bubble's word-break then chopped the message down to roughly
 * one character per line ("Inbox message length issue", 2026-08-04 feedback).
 */
.m-thread-body { flex:1 1 auto; max-width:60%; min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.m-thread-row--out .m-thread-body { align-items:flex-end; }

/* avatar circle: their (trust navy) vs mine (green) */
.m-thread-avatar {
  width:36px; height:36px; font-size:11px; flex-shrink:0;
  border-radius:50%; background:#183A81; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800;
}
.m-thread-avatar--out { background:var(--m-green); color:var(--m-green-ink); }

/* sender/meta line (classic .message-name-left / -right kept in markup) */
.m-thread-row .message-name-left  { float:none; width:auto; text-align:left; font-size:11.5px; color:var(--m-sub); margin-bottom:5px; }
.m-thread-row .message-name-right { float:none; width:auto; text-align:right; font-size:11.5px; color:var(--m-sub); margin-bottom:5px; }
.m-thread-row .message-name-left strong,
.m-thread-row .message-name-right strong { color:var(--m-ink) !important; font-weight:700; }

/*
 * Messages appended live by the reply/poll JS (notes.php) are built from the
 * CLASSIC markup only — .receive-message-main/.message-send-main wrappers with
 * no .m-thread-row/.m-bubble classes — so they never pick up the rules below.
 * Give the classic classes a meridian-sane width here so a just-sent message
 * looks like the ones the server rendered. Declared BEFORE .meridian .m-bubble
 * on purpose: the two selectors have equal specificity on the server-rendered
 * bubbles (which carry both class sets), so source order is what lets
 * .m-bubble win there.
 */
.meridian .receive-message,
.meridian .message-send {
  max-width:min(60%, 560px); float:none; overflow-wrap:anywhere; word-break:normal;
}
/* Only the JS-appended wrappers (no .m-thread-row) get the alignment — the
   server-rendered rows carry both class sets and are already laid out by
   .m-thread-row/--out above, which a justify-content here would fight. The
   bubbles are inline-block, so text-align is enough and keeps the bubble and
   its name line stacked rather than side by side. */
.meridian .message-send-main:not(.m-thread-row) { text-align:right; }
.meridian .receive-message-main:not(.m-thread-row) { text-align:left; }

/* the bubbles — mockup theirBubble (grey) / mineBubble (green).
   width/max-width/float override the classic .receive-message / .message-send
   rules in customize.css (max-width:40%, float:right), which are still on the
   same elements; .meridian .m-bubble outranks them on specificity alone.
   overflow-wrap:anywhere breaks only strings that genuinely cannot fit (long
   URLs), unlike word-break:break-word which broke ordinary prose. */
.meridian .m-bubble {
  display:inline-block; padding:13px 17px; font-size:14px; line-height:1.55;
  color:var(--m-ink);
  width:fit-content; max-width:100%; min-width:0; float:none;
  overflow-wrap:anywhere; word-break:normal;
}
.m-bubble--in  { background:#F4F6F8; border:1px solid var(--m-line-soft); border-radius:4px 18px 18px 18px; }
.m-bubble--out { background:rgba(151,201,63,0.28); border-radius:18px 4px 18px 18px; align-self:flex-end; }

/* empty-state line in the Choose User picker */
.m-picker-empty { font-size:13.5px; color:var(--m-sub); margin:6px 0 18px; }

/* attachment chips inside a bubble body — align with the bubble side */
.m-thread-row--out .message-attachment { text-align:right; }
.m-thread-row--in  .message-attachment-received { text-align:left; }

/* thin rule above the compose box (classic .chat-sep) */
.m-thread-sep { border-top:1px solid var(--m-line); margin:22px 0 0; }

/* compose row: editor + attach + send, mirroring the mockup input row */
.m-compose-editor-wrap { margin-top:16px; }
.m-compose-actions {
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  margin-top:14px; overflow:hidden;
}
.m-compose-actions .m-compose-attach { align-self:auto; margin:0; }
.m-compose-actions .m-btn { float:none; }

/* ============================================================
   Deal overview — mockup kitOverview() (design/index.html, the
   s === 'overview' branch). The page is form-dense: these classes
   restyle only the LAYOUT/CHROME (back row, address header, stage
   stepper, metrics bar, summary section, party cards). Every form,
   modal, input name and element id inside is reproduced verbatim
   from the classic view; the classic per-field inline styles inside
   those preserved forms are intentionally left untouched.
   ============================================================ */

/* back row + address header */
.m-ov-back { display:flex; justify-content:flex-end; margin-bottom:12px; }
.m-ov-header {
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  font-size:20px; color:var(--m-ink); font-weight:700; letter-spacing:-0.01em;
  padding:4px 0 6px;
}
.m-ov-header img.m-ov-flag { height:26px; }
.m-ov-header .email { cursor:pointer; }
.m-ov-order {
  font-size:14px; font-weight:700; color:#183A81; margin-left:2px;
}

/* deal page header (kitOverview): address title + city/order/type sub-line */
.m-ov-title-wrap { min-width:0; }
.m-page-title .m-ov-copy {
  width:16px; height:auto; margin-left:8px; cursor:pointer;
  vertical-align:middle; position:relative; top:-2px;
}
.m-ov-sub .m-ov-type { color:var(--m-accent); font-weight:700; }

/* Closing-progress card that wraps the stage stepper */
.m-progress-card { margin-bottom:18px; }
.m-progress-head {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:4px;
}
.m-progress-status { font-size:13.5px; font-weight:700; color:var(--m-accent); }
.m-progress-card .m-stepper-wrap { margin:14px 0 4px; }

/* section title row (Overview / Summary), title left + actions right */
.m-ov-section-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin:26px 0 16px;
}
.m-ov-section-head h2 {
  margin:0; font-size:20px; font-weight:800; color:var(--m-ink);
  text-transform:uppercase; letter-spacing:-0.01em;
  display:flex; align-items:center; gap:10px;
}
.m-ov-section-head h2 img { height:24px; }
.m-ov-section-head .m-ov-head-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.m-ov-newmsg {
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-size:12px; color:var(--m-sub);
}
.m-ov-newmsg .m-ov-newmsg-count {
  background:#fe9039; color:#fff; width:22px; height:22px; line-height:22px;
  text-align:center; border-radius:50%; font-size:12px; flex-shrink:0;
}
/*
 * 2026-08-04 feedback: "The Overview page for Processors shows new messages in
 * a broken format."
 *
 * The link also carries .pending-task-processor — a class belonging to the
 * ORDERS page's pending-task pill, whose rules are
 *   .meridian .pending-task-processor { width:300px }
 *   .meridian .pending-task-processor span { width:18px; height:18px;
 *                                            border-radius:50%; background:#fe9039 }
 * Because that span rule is untargeted it hit BOTH children, so the "new
 * messages" TEXT was crushed into a second 18px orange dot beside the count,
 * and the 300px width shoved the Request Update button off its row.
 *
 * The class stays on the element — tests/overview-badge.spec.ts locates the
 * badge through `.pending-task-processor span` — so the fix is to win on
 * specificity here and hand the circle treatment back to the count alone.
 */
.meridian .m-ov-newmsg.pending-task-processor {
  width:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color:var(--m-sub); text-decoration:none;
}
.meridian .m-ov-newmsg.pending-task-processor span {
  width:auto; height:auto; background:none; color:inherit;
  border-radius:0; line-height:normal; display:inline; text-align:left;
}
.meridian .m-ov-newmsg.pending-task-processor .m-ov-newmsg-count {
  width:22px; height:22px; line-height:22px; flex-shrink:0;
  background:#fe9039; color:#fff; border-radius:50%;
  display:inline-block; text-align:center; font-size:12px;
}

/* ---- stage stepper ---- */
.m-stepper-wrap { margin:22px 0 32px; overflow-x:auto; }
.m-stepper {
  list-style:none; margin:0; padding:20px 0 0; display:flex; min-width:760px;
}
.m-stepper-step {
  flex:1; text-align:center; position:relative; padding-top:24px;
  min-width:84px; font-size:12px; color:var(--m-sub); line-height:1.3;
}
/* connector bar behind the bubbles */
.m-stepper-step .m-stepper-bar {
  position:absolute; top:9px; left:0; right:0; height:4px;
  background:#D7DBE0; display:block;
}
.m-stepper-step:first-child .m-stepper-bar { left:50%; }
.m-stepper-step:last-child  .m-stepper-bar { right:50%; }
/* status bubble */
.m-stepper-step .m-stepper-bubble {
  position:absolute; top:0; left:50%; margin-left:-10px;
  width:20px; height:20px; border-radius:50%;
  background:#D7DBE0; display:block; z-index:1; box-sizing:border-box;
}
.m-stepper-step--done .m-stepper-bar,
.m-stepper-step--done .m-stepper-bubble { background:var(--m-green); }
.m-stepper-step--done { color:var(--m-body); font-weight:600; }
/* current ("now") step — filled green bubble with a soft halo (kitOverview) */
.m-stepper-step--now .m-stepper-bar { background:var(--m-green); }
.m-stepper-step--now .m-stepper-bubble {
  background:var(--m-green); box-shadow:0 0 0 5px rgba(151,201,63,0.25);
}
.m-stepper-step--now { color:var(--m-ink); font-weight:700; }

/* ---- 4-metric info bar ---- */
.m-ov-metrics {
  display:grid; grid-template-columns:repeat(4,1fr); position:relative;
}
.m-ov-metric {
  display:flex; align-items:center; gap:12px; padding:6px 18px;
  border-right:1px solid var(--m-line); box-sizing:border-box;
}
.m-ov-metric:last-child { border-right:0; }
.m-ov-metric img { height:30px; flex-shrink:0; }
.m-ov-metric .m-ov-metric-label { font-size:15px; color:var(--m-ink); }
.m-ov-metric .m-ov-metric-value {
  display:block; font-size:14px; color:var(--m-sub); font-weight:400;
}
/* Edit-pen affordance for the fact row (Sales Processor).
   2026-08-04 feedback: "the person icon with the pen overlaps with the upper
   sections". top:-14px hung roughly half the ~28px glyph outside its own
   container, so it sat on the closing-progress stepper above it. It now lives
   in a reserved gutter of its own: .m-ov-facts gets the top margin, the pen
   sits inside that margin, and nothing else is under it. */
.m-ov-edit {
  position:absolute; right:2px; top:-30px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
}
.m-ov-edit img { display:block; }

/* 4 fact cards grid (kitOverview): label above a 23px/800 value.
   The 34px top margin is the gutter .m-ov-edit is positioned into — see the
   note on that rule. */
.m-ov-facts {
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  position:relative; margin:34px 0 18px;
}
.m-ov-fact { padding:16px 20px; }
.m-ov-fact-label {
  font-size:11.5px; color:var(--m-sub); font-weight:700;
  text-transform:uppercase; letter-spacing:0.06em;
}
.m-ov-fact-value {
  font-size:23px; font-weight:800; color:var(--m-ink);
  letter-spacing:-0.02em; margin-top:3px;
}

/* ---- summary party cards ---- */
.m-party-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.m-party-card { position:relative; }
/* party-card header: role avatar (kitOverview INITS.trust) + role title */
.m-party-head { display:flex; align-items:center; gap:12px; margin:0 0 14px; }
.m-party-head h4 {
  font-size:18px; color:var(--m-ink); font-weight:800; margin:0;
  letter-spacing:-0.01em;
}
.m-party-avatar {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:#183A81; color:#fff; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:12px; letter-spacing:0.02em;
}
/* keep any legacy direct-child h4 styled if a card isn't wrapped yet */
.m-party-card > h4 {
  font-size:18px; color:var(--m-ink); font-weight:800; margin:0 0 14px;
  letter-spacing:-0.01em;
}
/* the edit-pen the classic view attaches to each party card */
.m-party-card .buyer-update-icon2,
.m-party-card .m-party-edit {
  position:absolute; right:14px; top:16px; z-index:2;
}
.m-party-body { font-size:14px; color:var(--m-body); }
.m-party-body p { margin-bottom:10px; }
.m-party-body label { font-weight:700; color:var(--m-ink); }
.m-party-divider {
  width:300px; height:1px; background:var(--m-line); margin:0 auto 10px;
}
.m-party-subhead { font-size:16px; font-weight:800; color:var(--m-ink); margin:10px 0; }

/* single-column CLA-info card table */
.m-ov-info-table { width:100%; }
.m-ov-info-table td { padding:6px 10px; vertical-align:top; font-size:14px; }
.m-ov-info-table td strong { color:var(--m-ink); }

@media (max-width:900px) {
  .m-ov-metrics { grid-template-columns:1fr 1fr; }
  .m-ov-facts { grid-template-columns:1fr 1fr; }
  .m-party-grid { grid-template-columns:1fr; }
}

/* ------------------------------------------------------------
   Overview FORM-INTERNALS — behaviour-critical CSS the classic
   overview.php kept in its per-page <style> block. This is NOT
   page layout (which lives in the .m-ov-* classes above); it is
   the styling/visibility the preserved forms + their JS depend on
   (the JS toggles .remove_buyer_entity / .individual-field etc.,
   and the autocomplete needs the .agent-list* dropdown positioned).
   Scoped under .meridian and transcribed verbatim from the classic
   rules so the verbatim forms behave identically.
   ------------------------------------------------------------ */
.meridian #snackbar {
  visibility:hidden; min-width:250px; margin-left:-125px; background:#333;
  color:#fff; text-align:center; border-radius:2px; padding:16px;
  position:fixed; z-index:1; left:50%; bottom:30px; font-size:17px;
}
.meridian #snackbar.show {
  visibility:visible;
  -webkit-animation:m-snackfade 0.5s, m-snackout 0.5s 2.5s;
  animation:m-snackfade 0.5s, m-snackout 0.5s 2.5s;
}
@keyframes m-snackfade { from { bottom:0; opacity:0; } to { bottom:30px; opacity:1; } }
@keyframes m-snackout { from { bottom:30px; opacity:1; } to { bottom:0; opacity:0; } }

/* buyer/seller/lender edit-modal fields (classic .buyer-update look) */
.meridian .buyer-update input[type="text"],
.meridian .buyer-update input[type="email"],
.meridian .buyer-update input[type="tel"],
.meridian .buyer-update input[type="date"],
.meridian .buyer-update select {
  width:100%; border:solid 1px var(--m-green); border-radius:6px;
  font-size:14px; padding:5px 10px;
}
.meridian .modal-body .form-control {
  -webkit-appearance:listbox !important; -moz-appearance:listbox !important; appearance:listbox !important;
}

/* the small green "+" add-field pill + remove-field buttons */
.meridian .add-icon {
  background:var(--m-green); padding:3px 10px; font-size:16px; color:#fff; border-radius:6px;
}
.meridian .add-icon:hover { opacity:0.7; color:#fff; }
/* Party-card edit pen. Was top:-32px, which put it entirely OUTSIDE its own
   card and on top of whatever section ended above it — the same overlap the
   feedback flagged on the fact row. Anchored inside the card instead, clear of
   the rounded corner and of the role title on its left. */
.meridian .buyer-update-icon2 { position:absolute; right:14px; top:14px; z-index:2; }
.meridian .buyer-update-icon2 img { display:block; }
.meridian .remove { position:relative; }
.meridian .remove-field.btn-remove-customer,
.meridian .remove-field.btn-remove-seller,
.meridian .remove-field.btn-remove-buyerAgent,
.meridian .remove-field.btn-remove-listingAgent,
.meridian .remove-field.btn-remove-lender {
  background:#dc3545; color:#fff; padding:6px 12px; border-radius:6px; right:26%; top:24px;
}

/* JS-toggled visibility inside the add-new-fields rows (classic behaviour) */
.meridian .customer_records div,
.meridian .seller_records div,
.meridian .buyerAgent_records div,
.meridian .listingAgent_records div,
.meridian .lender_records div { display:none; }
.meridian .remove_buyer_entity,
.meridian .remove_seller_entity { display:none; }

/* agent/lender autocomplete dropdowns (JS injects .agent-item* rows) */
.meridian .agent-list-email,
.meridian .agent-list,
.meridian .buyer-list-name,
.meridian .buyer-list-email {
  position:absolute; background:#fff; border:1px solid #ccc;
  max-height:200px; overflow-y:auto; z-index:1000;
}
.meridian .agent-item,
.meridian .agent-item2,
.meridian .agent-item3,
.meridian .agent-item4,
.meridian .agent-item5 { padding:5px; cursor:pointer; }
.meridian .agent-item:hover,
.meridian .agent-item2:hover,
.meridian .agent-item3:hover,
.meridian .agent-item4:hover,
.meridian .agent-item5:hover { background:#f0f0f0; }

/* ============================================================
   Documents — mockup kitDocs() (design/index.html ~line 1421): a
   page header (title + "Order · N folders · N files" subtitle) with a
   search field + Share Files (ghost) + Upload (green), a tab bar, a
   folder grid of icon/name/meta cards and file rows.

   These classes restyle only the LAYOUT/CHROME (page head, toolbar,
   tab bar, folder grid, file table wrapper, section headers). Every
   modal, form, input name, element id, data-bs-target, context menu
   and <script> from the classic view (application/views/documents.php)
   is reproduced VERBATIM — the largest Playwright suite depends on
   them. The behaviour-critical CSS the classic view kept in its two
   per-page <style> blocks (context menu, share/search pills, the
   #up-* upload progress bar, the jQuery-multiselect widget, the
   spinner overlay) is transcribed below, scoped under .meridian, so
   the preserved markup + JS behave identically without a per-page
   <style> block.
   ============================================================ */

/* page header: title + count subtitle, then the toolbar */
.m-doc-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:20px;
}
.m-doc-head-sub { font-size:13.5px; color:var(--m-sub); margin-top:4px; }
.m-doc-toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* tab bar (Received / Documents / E-Signed) — reskins .nav-tabs */
.m-doc-tabs {
  display:flex; gap:6px; border-bottom:1px solid var(--m-line);
  margin:4px 0 22px; padding:0;
}
.m-doc-tab.nav-link,
.m-doc-tab {
  background:transparent; border:0; border-bottom:2px solid transparent;
  border-radius:0; padding:10px 4px; margin:0 14px 0 0; cursor:pointer;
  font-size:14px; font-weight:700; color:var(--m-sub);
}
.m-doc-tab.nav-link:hover { color:var(--m-ink); }
.m-doc-tab.nav-link.active {
  color:var(--m-ink); background:transparent;
  border-bottom-color:var(--m-green);
}

/* section header inside a tab pane (icon + label) */
.m-doc-section-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin:6px 0 16px;
}
.m-doc-section-head h2 {
  margin:0; font-size:18px; font-weight:800; color:var(--m-ink);
  display:flex; align-items:center; gap:10px;
}
.m-doc-section-head h2 img { height:22px; }
.m-doc-section-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* folder/file grid of cards (mockup 4-col) */
.m-folder-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px;
}
.m-folder-card {
  display:flex; flex-direction:column; gap:12px; min-height:100px;
  cursor:pointer;
}
.m-folder-card .m-folder-icon { font-size:26px; line-height:1; }
.m-folder-card .m-folder-icon img { width:34px; height:auto; }
.m-folder-card .m-folder-name {
  font-weight:700; font-size:14px; color:var(--m-ink); word-break:break-word;
  text-decoration:none;
}
.m-folder-card .m-folder-meta { font-size:12px; color:var(--m-sub); margin-top:2px; }

/* file-row table wrapper (reskins the classic activity-table) */
.m-file-table { width:100%; }
.m-file-table .m-file-row td { vertical-align:middle; }
.m-file-table td a { color:var(--m-accent); text-decoration:none; font-weight:700; }
.m-file-table td a:hover { text-decoration:underline; }

@media (max-width:900px) {
  .m-folder-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .m-folder-grid { grid-template-columns:1fr; }
}

/* ------------------------------------------------------------
   Documents FORM/WIDGET-INTERNALS — behaviour-critical CSS the
   classic documents.php kept in its per-page <style> blocks. NOT
   page layout; the preserved markup/JS depend on these, so they are
   transcribed verbatim (values unchanged) and scoped under .meridian.
   ------------------------------------------------------------ */

/* right-click context menu (#div-context-menu*, .cls-context-menu) */
.meridian .cls-context-menu { position:absolute; display:none; border:solid 1px #CCC; }
.meridian .cls-context-menu ul,
.meridian #context-menu li {
  list-style:none; margin:0; padding:0; background:white; width:140px;
}
.meridian .cls-context-menu li { border-bottom:solid 1px #CCC; }
.meridian .cls-context-menu li:last-child { border:none; }
.meridian .cls-context-menu li a {
  display:block; padding:6px 10px; text-decoration:none; color:#333;
  font-size:14px; font-weight:normal;
}
.meridian .cls-context-menu li a:hover { background:var(--m-green); color:#FFF; }

/* share/search pill affordances kept for the preserved modals + search box */
.meridian .share-icon-btn {
  border:solid 1px var(--m-green); padding:8px 15px; display:inline-block;
  border-radius:8px; margin-left:10px; color:#103E9F; cursor:pointer;
}
.meridian .share-icon-btn img { margin-left:5px; }
.meridian .share-icon-btn:hover { border:solid 1px var(--m-green); color:#fff; background-color:var(--m-green); }
/* Documents search box (2026-08-04 feedback: "Document section search bar
   issue"). The box is a filter-as-you-type field — its trailing
   <input type="submit" value="Submit"> submits nothing and rendered as a bare
   unstyled control jammed against the text field. Hide the submit, give the
   field room, and add a focus ring so it reads as an input rather than an
   empty outlined rectangle. */
.meridian .search-main {
  border:solid 1px var(--m-line); padding:0 12px; border-radius:8px; margin-left:10px;
  display:inline-flex; align-items:center; height:38px; background:#fff;
  min-width:230px;
}
.meridian .search-main:focus-within { border-color:var(--m-green); }
.meridian .search-main input[type="text"] {
  border:none; flex:1 1 auto; width:auto; min-width:0; box-shadow:none;
  padding:0; font-size:13.5px; color:var(--m-body); background:transparent;
}
.meridian .search-main input[type="text"]::placeholder { color:var(--m-sub); }
.meridian .search-main input[type="text"]:focus { box-shadow:none; outline:none; }
.meridian .search-main input[type="submit"] { display:none; }

/* ---- share / upload modals (#myModal, #upload_here_document) --------------
   Both bodies are a flat run of <label>/<select>/<textarea> siblings with no
   wrapper elements. <label> is inline by default, so each caption sat on the
   same line as the control that followed it — the "Additional Instruction"
   label with the textarea floating beside it in the screenshot ("Document
   upload modal text box issue"). The two action labels also carry inline
   float:left, which drops them out of flow and collides them with the footer,
   hence the !important. */
.meridian #myModal .modal-body > label,
.meridian #upload_here_document .modal-body > label,
.meridian #myModal .modal-body label:not(.share-icon-btn),
.meridian #upload_here_document .modal-body label:not(.share-icon-btn) {
  display:block; margin:14px 0 6px; font-size:13px; font-weight:600; color:var(--m-body);
}
.meridian #myModal .modal-body h4,
.meridian #upload_here_document .modal-body h4 {
  margin:0 0 4px; font-size:20px; font-weight:800; color:var(--m-ink); letter-spacing:-0.01em;
}
.meridian #myModal .modal-body textarea,
.meridian #upload_here_document .modal-body textarea {
  display:block; width:100%; box-sizing:border-box; min-height:84px; resize:vertical;
  border:1px solid var(--m-line); border-radius:8px; padding:9px 11px;
  font-size:14px; font-family:inherit; color:var(--m-body);
}
.meridian #myModal .modal-body textarea:focus,
.meridian #upload_here_document .modal-body textarea:focus {
  outline:none; border-color:var(--m-accent);
}
.meridian #myModal .modal-body select,
.meridian #upload_here_document .modal-body select {
  display:block; width:100% !important; box-sizing:border-box; margin:0;
}
/* the two action pills: back into normal flow, side by side, with breathing room */
.meridian #myModal .modal-body .share-icon-btn,
.meridian #upload_here_document .modal-body .share-icon-btn {
  float:none !important; margin:18px 10px 0 0 !important; display:inline-block;
}
.meridian #myModal .modal-footer,
.meridian #upload_here_document .modal-footer { clear:both; }
.meridian #myModal .modal-body select {
  width:100%; padding:5px 15px; border:solid 1px var(--m-green);
  border-radius:8px; margin-top:10px;
}

/* jQuery MultiSelect widget (the .receiver_id share pickers) */
.meridian .ms-options-wrap > button:focus,
.meridian .ms-options-wrap > button { border-radius:6px; }
.meridian .ms-options-wrap.ms-active > .ms-options { padding:10px; }
.meridian .ms-options-wrap > .ms-options > .ms-selectall.global {
  margin:12px 5px 4px; color:var(--m-green); text-transform:capitalize;
}
.meridian .ms-options-wrap > .ms-options > ul label:hover { background-color:transparent; border:none; }
.meridian .ms-options-wrap > .ms-options > ul input[type="checkbox"] { top:10px; }
.meridian .ms-options-wrap > .ms-options > ul label { padding:4px 4px 4px 25px; border:none; }

/* upload-progress bar (#up-progress / #up-bar / #up-percent / #up-label) */
.meridian #up-progress,
.meridian #up-bar,
.meridian #up-percent { height:15px; }
.meridian #up-progress {
  position:relative; background:#fff; float:left; width:100%; height:15px;
  border-radius:24px; margin-top:14px;
}
.meridian #up-bar {
  background:var(--m-green); width:0; transition:width 0.5s; height:15px; border-radius:24px;
}
.meridian #up-percent {
  position:absolute; top:-2px; left:0; width:100%;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.meridian #up-file { display:none; }
.meridian #up-label { float:right; display:inline-block; cursor:pointer; }
.meridian #up-file:disabled ~ #up-label { background:#b1b1b1; }
.meridian .success { background-color:var(--m-green); color:#fff; width:auto; }

/* loading overlay (#spinner-div) — meridian palette, classic behaviour */
.meridian #spinner-div {
  position:fixed; display:none; width:100%; height:100%; top:0; left:0;
  text-align:center; background-color:rgba(255,255,255,0.8); z-index:2;
}
.meridian #spinner-div .spinner-border { position:fixed; top:45%; }

/* ============================================================
   Orders — mockup kitOrders() (design/index.html, the s === 'orders'
   branch ~line 867): an "Open Orders" page header, an Open/Close/On
   Hold/Cancelled tab row, and a clean deals table.

   These .m-ord-* classes restyle only the LAYOUT/CHROME (page head,
   tab row, sub-table toolbar). The classic tab nav is rendered as a
   .m-chip row: every tab keeps its id + data-bs-target + toggle
   behaviour, it just wears the reusable chip look. Every DataTable
   (table id + column order), the two CanvasJS charts, the three
   modals, #change_deal_stage / #processor_id controls, the AJAX
   endpoints and every role branch from the classic view
   (application/views/orders.php) are reproduced VERBATIM.

   The behaviour-critical CSS the classic view kept in its per-page
   <style> block (clickable rows, the DataTables filter inputs, the
   pending-task processor pills, the task-pending popup, the
   view-order button, notification badges, the #exampleModal close
   glyph) is transcribed below, scoped under .meridian, so the
   preserved markup + JS behave identically without a per-page
   <style> block. #spinner-div reuses the .meridian overlay above.
   ============================================================ */

/* page header: icon + "Open Orders" title (mockup) */
.m-ord-head {
  display:flex; align-items:center; gap:10px; margin:4px 0 16px;
}
.m-ord-head h2 {
  margin:0; font-size:22px; font-weight:800; color:var(--m-ink);
  letter-spacing:-0.02em; display:flex; align-items:center; gap:10px;
}
.m-ord-head h2 img { height:26px; }

/* tab row: the classic .nav-tabs rendered as a meridian chip row.
   ids/data-bs-target/toggle behaviour are preserved on the buttons;
   these rules only supply the chip look (idle + .active). */
.meridian .m-ord-tabs.nav-tabs,
.meridian .m-ord-tabs {
  display:flex; gap:8px; flex-wrap:wrap; border:0;
  margin:2px 0 18px; padding:0;
}
.meridian .m-ord-tabs .nav-link {
  display:inline-block; border-radius:8px; padding:6px 14px; font-size:13px;
  font-weight:700; cursor:pointer; background:#fff;
  border:1px solid var(--m-line); color:#4b5563; margin:0;
}
.meridian .m-ord-tabs .nav-link:hover { background:var(--m-line-soft); color:var(--m-body); }
.meridian .m-ord-tabs .nav-link.active {
  background:var(--m-chip-bg); color:var(--m-chip-ink); border-color:transparent;
}

/* nested Graph / Orders List tab row (inside the All Orders pane) */
.meridian .m-ord-subtabs.nav-tabs,
.meridian .m-ord-subtabs {
  display:flex; gap:8px; flex-wrap:wrap; border:0;
  margin:14px 0 8px; padding:0;
}
.meridian .m-ord-subtabs .nav-link {
  display:inline-block; border-radius:8px; padding:6px 14px; font-size:13px;
  font-weight:700; cursor:pointer; background:#fff;
  border:1px solid var(--m-line); color:#4b5563; margin:0;
}
.meridian .m-ord-subtabs .nav-link:hover { background:var(--m-line-soft); color:var(--m-body); }
.meridian .m-ord-subtabs .nav-link.active {
  background:var(--m-chip-bg); color:var(--m-chip-ink); border-color:transparent;
}

/* sub-table processor picker toolbar (All Orders > Orders List) */
.m-ord-toolbar {
  display:flex; align-items:center; justify-content:flex-end;
  gap:10px; flex-wrap:wrap; margin:16px 0;
}
.m-ord-toolbar label { font-weight:700; color:var(--m-accent); margin:0; }

/* ------------------------------------------------------------
   Orders FORM/TABLE-INTERNALS — behaviour-critical CSS the classic
   orders.php kept in its per-page <style> block. NOT page layout; the
   preserved markup/DataTables JS depend on these, so they are
   transcribed here (values unchanged) and scoped under .meridian.
   ------------------------------------------------------------ */
.meridian .clickable-row { cursor:pointer; }

.meridian .active > .page-link,
.meridian .page-link.active {
  background-color:var(--m-green); border:1px solid var(--m-green);
}

/* DataTables per-column filter inputs (injected by initComplete) */
.meridian .datatable-filter {
  border:solid 1px #ced4da; padding:3px 8px; margin:5px 0;
  border-radius:4px; font-size:14px;
}

/* pending-task processor pill (role name + type + count badge) */
.meridian .pending-task-processor { font-size:12px; display:flex; width:300px; }
.meridian .pending-task-processor a { color:#000; }
.meridian .pending-task-processor span {
  display:inline-block; width:18px; height:18px; background-color:#fe9039;
  color:#fff; text-align:center; line-height:18px; border-radius:50%; font-size:12px;
}
.meridian .pending-task-processor font {
  display:block; font-size:11px; color:#818181; margin:0 5px;
}

/* task-pending popup (inside #exampleModal) */
.meridian .task-pending-popup { padding-left:65px; margin-bottom:25px; }
.meridian .task-pending-left { width:100px; color:#848484; }

/* #exampleModal close glyph (classic override) */
.meridian #exampleModal .modal-header .btn-close { border:solid 1px; }
.meridian #exampleModal .btn-close {
  background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/0.8em auto no-repeat;
}

/* view-order / action-required button (meridian palette, classic behaviour) */
.meridian .view-order-btn {
  font-size:14px; padding:3px 7px; background-color:var(--m-green);
  color:#fff; margin:3px 0 0 0; display:block; text-align:center;
  border:solid 1px var(--m-green); border-radius:6px;
}
.meridian .view-order-btn.pending {
  background-color:#ffa55e; color:#000; display:inline-block; border-color:#ffa55e;
}
.meridian .view-order-btn:hover {
  background-color:#fff; color:var(--m-accent); border-color:var(--m-green);
}
.meridian .view-order-btn.pending:hover {
  background-color:var(--m-green); color:#fff; display:inline-block; border-color:var(--m-green);
}

/* clickable task rows inside the #exampleModal popup */
.meridian .clickable-task { cursor:pointer; color:var(--m-accent); }
.meridian .clickable-task:hover { color:#000; }

/* notification badge on the Open-tab bell column */
.meridian .notification-num2 {
  width:20px; height:20px; background-color:var(--m-green); position:relative;
  left:20px; font-size:12px; text-align:center; line-height:20px;
  border-radius:4px; top:-2px; color:#fff; cursor:pointer;
}

/* ============================================================
   Orders REDESIGN — pixel-matched to the mockup kitOrders()
   (design/index.html ~line 1321) + THEMES.meridian. These classes
   replace the classic DataTable chrome with a bespoke page header,
   chip tabs (via .m-ord-tabs above), a clean table, green status
   pills, a red "action required" pill, a ghost "Open →" button, the
   file+badge cell and the property+parties cell. The DataTable ids /
   AJAX / controls / modals in application/views/meridian/orders.php
   are unchanged; this is presentation only.
   ============================================================ */

/* page header: big title + counts subtitle + green "+ Place Order" */
.m-page-header {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin:2px 0 20px;
}
/* role dashboards (meridianCard) center the action button with the title block,
   unlike the kit pages (Orders/Overview) which bottom-align it. */
.m-page-header--dash { align-items:center; margin-bottom:22px; }
.m-page-title {
  margin:0; font-size:26px; font-weight:800; color:var(--m-ink);
  letter-spacing:-0.02em; line-height:1.15;
}
.m-page-sub { font-size:13.5px; color:var(--m-sub); margin-top:4px; }
.m-place-order { white-space:nowrap; text-decoration:none; }
.m-place-order:hover { text-decoration:none; }

/* clean orders table — kill the loud DataTable striping/chrome */
.meridian .m-ord-table.table { background:#fff; border-collapse:collapse; width:100%; margin:0; }
.meridian table.table.m-ord-table > thead > tr > th {
  text-align:left; padding:8px 12px; font-size:11.5px; font-weight:700;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--m-sub);
  background:transparent; border-bottom:0; white-space:nowrap;
}
.meridian table.table.m-ord-table > tbody > tr > td {
  padding:15px 12px; border-top:1px solid var(--m-line-soft);
  border-bottom:0; vertical-align:middle; color:var(--m-body); background:#fff;
}
/* override the generic .table-striped shading — the redesign is un-striped */
.meridian table.table.m-ord-table.table-striped > tbody > tr:nth-of-type(odd) > td { background:#fff; }
.meridian table.table.m-ord-table > tbody > tr:hover > td { background:#FAFBFC; }
/* the injected per-column filter row sits under the header, subtle */
.meridian table.table.m-ord-table > thead > tr.filters > th { padding:4px 12px 12px; background:transparent; border-bottom:1px solid var(--m-line); }
.meridian table.table.m-ord-table > thead > tr.filters .datatable-filter {
  border:1px solid var(--m-line); border-radius:8px; padding:6px 9px;
  font-size:12.5px; margin:0; width:100%; color:var(--m-body); background:#fff;
}

/* FILE cell — bold file number + optional green count badge.
   Laid out as a flex row so the badge stays ON the file number's line: the
   number is white-space:nowrap and the FILE column is narrow, so as inline
   content the badge wrapped onto a line of its own and read as a stray green
   block under the number (2026-08-04 feedback). min-width keeps a 1-digit
   count round rather than a squat rectangle. */
.meridian td.m-td-file {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.m-order-file { font-weight:700; color:var(--m-ink); white-space:nowrap; }
.m-order-badge {
  display:inline-block; background:var(--m-green); color:#131a06;
  font-size:10.5px; font-weight:800; border-radius:100px; padding:1px 6px;
  position:relative; top:0; margin-left:0; line-height:16px;
  min-width:18px; height:18px; box-sizing:border-box;
  width:auto; left:auto; text-align:center;
}
.m-td-file .notifications2 { cursor:default; display:inline-flex; align-items:center; }

/* PROPERTY cell — bold address + muted parties sub-line */
.m-order-prop { color:var(--m-ink); font-weight:600; display:block; }
.m-order-parties { display:block; font-size:12px; color:var(--m-sub); margin-top:2px; }
.m-td-date { color:var(--m-sub); white-space:nowrap; }
.meridian td.m-td-date + td.m-td-date { font-weight:600; color:var(--m-ink); }
.m-td-type { color:var(--m-sub); }

/* STAGE — green-tint status pill (all stages green per mockup) */
.m-status-pill {
  display:inline-block; border-radius:100px; padding:4px 12px; font-size:11.5px;
  font-weight:800; white-space:nowrap; background:#EEF6DC; color:#4c6b14;
}
.m-status-pill.m-status-neutral { background:#F3F4F6; color:#9ca3af; }
/* the processor's inline stage <select>, restyled to the meridian field look */
.meridian .m-stage-select.form-select {
  min-width:130px; width:auto; display:inline-block; font-size:12.5px;
  padding:6px 28px 6px 12px; border:1px solid var(--m-line); border-radius:8px;
  color:var(--m-ink); background-color:#fff; box-shadow:none;
}
.meridian .m-stage-select.form-select:focus { border-color:var(--m-green); box-shadow:none; }

/* NEEDS YOU — red "action required" pill, or an em-dash when clear.
   A sales file can need action from several parties at once, and the cell
   simply emitted one inline-block <a> per party: they ran together as wrapped
   inline content with no gutter, and the 150px column squeezed each pill's
   text (2026-08-04 feedback: "the Action Required section ... has layout
   issues"). Stack them with real spacing and let the column breathe. */
.meridian td.m-td-needs {
  display:flex; flex-direction:column; align-items:flex-start; gap:5px;
}
.meridian table.table.m-ord-table > thead > tr > th.m-th-needs,
.meridian td.m-td-needs { min-width:150px; }
.m-needs-pill {
  display:inline-block; border-radius:100px; padding:4px 12px; font-size:11.5px;
  font-weight:800; white-space:nowrap; background:#FDEBE3; color:#c2410c;
  text-decoration:none; cursor:pointer;
}
.m-needs-pill:hover { background:#fbdccd; color:#c2410c; }
.m-needs-pill.m-needs-done { background:#EEF6DC; color:#4c6b14; pointer-events:none; }
.m-needs-none { color:var(--m-sub); font-size:13px; }

/* last cell — ghost "Open →" button */
.m-td-open { text-align:right; }
.m-open-btn {
  display:inline-block; border:1px solid #D7DBE0; border-radius:8px;
  padding:7px 15px; font-size:13px; font-weight:700; color:var(--m-body);
  text-decoration:none; white-space:nowrap; background:#fff;
}
.m-open-btn:hover { background:var(--m-line-soft); color:var(--m-body); text-decoration:none; }

/* hide the loud default DataTable chrome per the mockup: the "Show N entries"
   length control is gone; a subtle search + info + pagination remain (restyled
   by the .dataTables_* rules above). Scoped to the orders card so it does not
   touch other meridian pages (sales-team orders, user list) that keep it. */
.meridian .content-main .m-card .dataTables_length { display:none; }

/* ---- sidebar user chip (mockup: avatar initials + name + role) ----
   NOTE: the visible chip box is .m-user-chip-btn (defined further below); this
   outer element is only the positioning/dropdown container, so it must NOT carry
   its own flex/padding/background/radius — that nested a second box inside the
   button. */
.m-user-chip {
  margin-top:auto;
}
.m-user-chip .m-avatar {
  width:32px; height:32px; border-radius:50%; background:#183A81; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12.5px; flex-shrink:0;
}
.m-user-chip .m-user-meta { min-width:0; }
.m-user-chip .m-user-name {
  font-size:12.5px; color:var(--m-ink); font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.m-user-chip .m-user-role { font-size:12.5px; color:var(--m-sub); }

/* ============================================================
   M2 — shared INFO-FORM component set. The portal has 8 field-dense
   "info" forms (personal information, lender, HOA, title-vesting,
   outstanding-mortgage, warranty, commission, upload-id). They all
   share the same chrome: a page header, a stack of card sections
   grouping related fields, a responsive 2-col field grid, label+input
   groups, radio/checkbox rows and a submit row. These .m-form-* classes
   are the generic foundation every one of those forms reuses — keep
   them form-agnostic (no personal-info-specific rules here).

   They extend (do not duplicate) the .meridian input/select/textarea
   rules above and the palette vars: .m-form-control simply reuses that
   field look; these classes add the layout + grouping around it.
   ============================================================ */

/* max-width wrapper that centres the form column */
.m-form { max-width:1040px; }

/* page title row (title left, optional actions/back button right) */
.m-form-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:22px;
}
.m-form-head h1,
.m-form-head .m-form-title {
  margin:0; font-size:24px; font-weight:800; color:var(--m-ink);
  letter-spacing:-0.02em; display:flex; align-items:center; gap:10px;
}
.m-form-head .m-form-title img { height:26px; }
.m-form-head-sub { font-size:13.5px; color:var(--m-sub); margin-top:4px; }
.m-form-head-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* a card grouping = the .m-card surface with the form spacing */
.m-form-section {
  background:var(--m-card); border:1px solid var(--m-line); border-radius:14px;
  padding:22px 24px; margin-bottom:20px;
}
.m-form-section-title {
  margin:0 0 4px; font-size:17px; font-weight:800; color:var(--m-ink);
  letter-spacing:-0.01em;
}
.m-form-section-desc { font-size:13px; color:var(--m-sub); margin:0 0 16px; line-height:1.5; }
.m-form-section-title + .m-form-grid,
.m-form-section-title + .m-form-desc + .m-form-grid { margin-top:16px; }

/* responsive field grid (auto-fits to a 2-col layout, collapses to 1) */
.m-form-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  /* roomy rows (client feedback 2026-10-13: labels and fields sat cramped) */
  gap:28px 24px;
}
/* let a group span the whole row (e.g. notes/textarea) */
.m-form-group--wide { grid-column:1 / -1; }

/* a short form (change-password, and any other 2-4 field form) capped at a
   readable measure instead of stretching across the whole canvas */
.m-form--narrow { max-width:720px; }
.m-form--narrow .m-form-grid { grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }

/* one label+control stack */
.m-form-group { display:flex; flex-direction:column; gap:9px; min-width:0; }
.m-form-group > .m-form-hint,
.m-form-group > .m-form-error { margin-top:2px; }

/* Row alignment across every task form (client feedback 2026-10-13):
   inside the grid, every control takes its column's full width - the ad-hoc
   small-field/medium-field widths and inline width styles made columns ragged
   (!important so they also beat inline style="width:…"). Controls bottom-align,
   so a neighbour whose label wraps to two lines no longer pushes its box out
   of the row. Grid rows stretch equal-height by default, which this relies on. */
.m-form-grid .m-form-group > input.m-form-control,
.m-form-grid .m-form-group > select,
.m-form-grid .m-form-group > textarea,
.m-form-grid .m-form-group > .small-field,
.m-form-grid .m-form-group > .medium-field { width:100% !important; max-width:none !important; }
/* Calculated, read-only fields (commission totals): visibly not typeable.
   readonly, not disabled, so the computed value still posts with the form. */
.cla-calc-field,
.m-form-control[readonly] { background:#f3f5f3; color:var(--m-ink, #0e1116); cursor:not-allowed; }
.cla-calc-field:focus { outline:none; box-shadow:none; }

/* The LABEL carries the bottom-alignment, so a label always hugs its own
   control. It also reserves two label-lines of height, so a neighbour whose
   caption wraps to two lines starts at the SAME top edge as a one-line one -
   without this the wrapped caption poked up into the row above. */
.m-form-grid .m-form-group > .m-form-label {
  margin-top:auto;
  min-height:2.8em;
  display:flex; flex-wrap:wrap; align-items:flex-end; align-content:flex-end; column-gap:4px;
}

/* the label — reuses .meridian label weight, adds required-star colour + tooltip icon spacing */
.m-form-label { color:var(--m-body); font-weight:600; font-size:13px; line-height:1.4; }
.m-form-label span { color:#d40000; }
.m-form-label .text-danger { color:#d40000; }
.m-form-label img { width:15px; height:auto; vertical-align:middle; margin-left:2px; }
.m-form-label a { text-decoration:none; }

/* the control — text/select/textarea. Extends the base .meridian field
   look (white, 1px --m-line, radius 8px, padding); just normalises width. */
.meridian .m-form-control,
.meridian input.m-form-control,
.meridian select.m-form-control,
.meridian textarea.m-form-control {
  width:100%; margin:0; box-sizing:border-box;
}
.meridian textarea.m-form-control { min-height:80px; resize:vertical; }
.meridian .m-form-control:disabled,
.meridian .m-form-control[readonly] { background:#F4F6F8; color:var(--m-sub); cursor:not-allowed; }

/* ---- select2, dressed as an .m-form-control -------------------------------
   select2 replaces a <select> with its own <span class="select2-container">
   sibling and sizes that span from the ORIGINAL element's computed width. The
   originals here carry .m-form-control (width:100%), but select2 reads the
   width BEFORE the swap and then writes a fixed px width inline — so without
   these rules the dropdowns render at an arbitrary width that does not match
   the text inputs beside them in the same .m-form-grid cell, and a long option
   label pushes the grid past the card (the "Place order Fields issue" and its
   horizontal scrollbar). The classic view carried equivalent rules in its own
   per-page <style> block; meridian had none at all.
   width is !important because it overrides select2's inline style attribute. */
.meridian .m-form-group .select2-container,
.meridian .m-form-section .select2-container,
.meridian .modal .select2-container { width:100% !important; max-width:100%; }

.meridian .select2-container--default .select2-selection--single {
  height:auto; background:#fff; border:1px solid var(--m-line);
  border-radius:8px; padding:8px 10px; box-sizing:border-box;
}
.meridian .select2-container--default .select2-selection--single:focus,
.meridian .select2-container--default.select2-container--focus .select2-selection--single {
  outline:none; border-color:var(--m-accent);
}
.meridian .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height:1.45; padding:0; color:var(--m-body); font-size:14px;
}
.meridian .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color:var(--m-sub);
}
.meridian .select2-container--default .select2-selection--single .select2-selection__arrow {
  height:100%; top:0; right:8px;
}
/* the dropdown panel: match the control's border/radius and clear the modals */
.meridian .select2-dropdown {
  border:1px solid var(--m-line); border-radius:8px; z-index:9999;
  box-shadow:0 12px 34px rgba(0,0,0,0.12);
}
.meridian .select2-container--open .select2-dropdown--below { margin-top:4px; }
.meridian .select2-container--open .select2-dropdown--above { margin-top:-4px; }
.meridian .select2-search--dropdown .select2-search__field {
  border:1px solid var(--m-line); border-radius:6px; padding:6px 8px;
}
.meridian .select2-results__option--highlighted[aria-selected] {
  background:var(--m-chip-bg); color:var(--m-chip-ink);
}

/* a file input styled to sit inline with the other controls */
.meridian .m-form-file { font-size:13px; color:var(--m-body); }
.m-form-file-preview { display:inline-block; margin-top:8px; }
.m-form-file-preview img { height:44px; width:44px; object-fit:cover; border-radius:6px; border:1px solid var(--m-line); }
/* Circular profile photo on the profile form */
.m-form-avatar { width:96px; height:96px; border-radius:50%; object-fit:cover; border:1px solid var(--m-line); background:var(--m-line-soft); }

/* ---- Sidebar user chip = profile menu (topbar removed; everything lives here) ---- */
.m-user-chip { margin-top:auto; position:relative; }
.m-user-chip-btn { display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px 12px 0 0;
  background:var(--m-line-soft); text-decoration:none; cursor:pointer; }
.m-user-chip-btn:hover { background:#EDEFF2; }
.m-user-chip .m-avatar { width:34px; height:34px; border-radius:50%; background:#1f2a44; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; }
.m-user-chip .m-user-meta { min-width:0; line-height:1.25; }
.m-user-chip .m-user-name { font-size:13px; font-weight:700; color:var(--m-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-user-chip .m-user-role { font-size:12px; color:var(--m-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-user-chip .m-user-caret { margin-left:auto; color:var(--m-sub); font-size:12px; }
.m-user-chip .m-chip-bell { position:relative; float:none; color:var(--m-sub); font-size:14px; padding-left:2px; line-height:1; }
/* small clean count badge, always visible — overrides the classic .notification-num
   (a 20x20 floated square positioned right:3px) so it sits tight on the bell
   INSIDE the chip instead of a clipped green blob off the sidebar edge. */
.m-user-chip .m-chip-bell .notification-num {
  position:absolute; top:-6px; right:-3px; float:none;
  width:auto; min-width:15px; height:15px; padding:0 4px; box-sizing:border-box;
  background:var(--m-green); color:var(--m-green-ink);
  font-size:9px; font-weight:800; line-height:15px; text-align:center;
  border-radius:100px;
}
.m-user-menu { min-width:210px; border:1px solid var(--m-line); border-radius:12px; padding:6px;
  box-shadow:0 12px 34px rgba(0,0,0,0.14); }
.m-user-menu .dropdown-item { border-radius:8px; padding:9px 12px; font-size:13.5px; font-weight:600; color:var(--m-body); display:flex; align-items:center; gap:10px; }
.m-user-menu .dropdown-item:hover { background:var(--m-line-soft); color:var(--m-ink); }
.m-user-menu .dropdown-item i { width:16px; color:var(--m-sub); }

/* Meridian removes the fixed topbar entirely — reclaim the reserved vertical
   offset, but KEEP the content's own top padding (from the .right-bar rule above)
   so the page header isn't jammed against the top edge. */
.meridian .right-bar { margin-top:0 !important; }
.meridian .topbar-main, .meridian .m-topbar-main { display:none !important; }

/* ---- Clean the DataTables chrome to the mockup (no filter row / info clutter) ---- */
.meridian .datatable-filter { display:none; }
.meridian .dataTables_info { display:none; }
.meridian .dataTables_filter { float:right; }
.meridian .dataTables_filter label { font-size:0; }
.meridian .dataTables_filter input { margin:0; min-width:220px; }

/* Admin dashboard health cards (JS sets border-left color per status) */
.m-health-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.m-health-card { background:var(--m-card); border:1px solid var(--m-line); border-left:6px solid var(--m-line); border-radius:14px; padding:14px 16px; }
.m-health-card strong { color:var(--m-ink); font-weight:800; }
.m-health-status { margin-top:6px; font-weight:700; color:var(--m-sub); }
.m-health-detail { font-size:13px; color:var(--m-sub); margin-top:2px; }

/* radio / checkbox rows */
.m-form-radio,
.m-form-check {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px; color:var(--m-body);
}
.m-form-radio label,
.m-form-check label { font-weight:600; color:var(--m-body); margin:0; text-transform:none; }
.meridian .m-form-radio input[type="radio"],
.meridian .m-form-check input[type="checkbox"] {
  width:auto; margin:0; accent-color:var(--m-green); flex-shrink:0;
}

/* consent block: stacked acknowledgement rows above the submit row. The box
   stays on the first line of its text and the wrapped lines hang indented past
   it, instead of running back under the checkbox. */
.m-consent { display:flex; flex-direction:column; gap:12px; margin:6px 0 4px; max-width:900px; }
.m-consent-row.m-form-check {
  flex-wrap:nowrap; align-items:flex-start; gap:10px;
}
.m-consent-row.m-form-check input[type="checkbox"] { margin-top:3px; }
.m-consent-row.m-form-check label {
  flex:1 1 auto; font-weight:500; font-size:13.5px; line-height:1.55; cursor:pointer;
}
.m-consent-row.m-form-check label a { color:var(--m-accent); font-weight:700; }

/* hint + error helper text under a control */
.m-form-hint { font-size:12px; color:var(--m-sub); line-height:1.45; }
.m-form-error { font-size:12px; color:#c2410c; font-weight:600; }

/* submit / action row */
.m-form-actions {
  display:flex; align-items:stretch; gap:14px; flex-wrap:wrap;
  margin-top:6px; padding:18px 0 4px;
}
.m-form-actions .m-form-check { flex:1 1 auto; align-self:center; }

/*
 * Profile / change-password action buttons (2026-08-04 feedback: "Profile page
 * button alignment issue"). These forms keep the classic .profile-form class,
 * so customize.css's `.profile-form input.submit-btn` (0,2,1) and `.form-cancel`
 * still won over the plain .m-btn / .m-ghost (0,1,0) the meridian views ask
 * for: Save came out 160px wide, pale #E4F2CB, UPPERCASE and carrying its own
 * margin-left:20px on top of the row's gap, while Cancel was a different height
 * again — so the pair read as misaligned. Match them to the meridian buttons at
 * a specificity that actually lands, and let them share one height.
 */
.meridian .m-form-actions .m-btn,
.meridian .m-form-actions .m-ghost,
.meridian .profile-form input.submit-btn,
.meridian .m-form-actions .form-cancel {
  width:auto; min-width:132px; margin:0; text-transform:none;
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:0 22px; font-size:14px; font-weight:800;
  border-radius:10px; box-sizing:border-box; line-height:1;
}
.meridian .profile-form input.submit-btn,
.meridian .m-form-actions .m-btn {
  background:var(--m-green); border:1px solid var(--m-green); color:var(--m-green-ink);
}
.meridian .profile-form input.submit-btn:hover,
.meridian .m-form-actions .m-btn:hover {
  background:var(--m-green); border-color:var(--m-green); color:var(--m-green-ink); filter:brightness(0.96);
}
.meridian .m-form-actions .form-cancel,
.meridian .m-form-actions .m-ghost {
  background:#fff; border:1px solid #D7DBE0; color:var(--m-body); font-weight:700;
}
.meridian .m-form-actions .form-cancel:hover,
.meridian .m-form-actions .m-ghost:hover {
  background:var(--m-line-soft); border-color:#D7DBE0; color:var(--m-body);
}
/* Keep the global .m-btn:disabled treatment working inside an actions row —
   the rules above out-specify it, so a locked button would otherwise look
   identical to an active one. */
.meridian .m-form-actions .m-btn:disabled,
.meridian .m-form-actions .m-btn[disabled],
.meridian .profile-form input.submit-btn:disabled,
.meridian .profile-form input.submit-btn[disabled] {
  background:#C9CDD2; border-color:#C9CDD2; color:#6B7280;
  cursor:not-allowed; filter:none;
}

/* ------------------------------------------------------------
   Personal-information FORM-INTERNALS — behaviour-critical CSS the
   classic personal_information.php kept in its per-page <style> block.
   NOT page layout (that lives in the .m-form-* classes above); the
   preserved markup + toggle JS depend on these, so they are transcribed
   verbatim (values unchanged) and scoped under .meridian, so the
   verbatim form behaves identically WITHOUT a per-page <style> block.
   Reused by the sibling info forms that share the same widgets.
   ------------------------------------------------------------ */

/* the sticky submit bar the classic view pins to the bottom of the form */
.meridian .sticky {
  position:sticky; bottom:0; right:0; background:#fff; opacity:1;
  transition:all 0.8s ease; width:100%; padding:20px 0; z-index:99; text-align:left;
}
.meridian .floating-btn {
  background-color:var(--m-green); color:var(--m-green-ink); padding:11px 20px;
  border-radius:10px; margin-top:0; border:0; font-weight:800; font-size:15px;
  margin-left:0; cursor:pointer;
}
.meridian .floating-btn:hover { filter:brightness(0.96); color:var(--m-green-ink); }

/* the green "+" / "-" add/remove-field pills (partner rows) */
.meridian .add-icon {
  background-color:var(--m-green); padding:3px 10px; font-size:16px; color:#fff; border-radius:6px;
}
.meridian .add-icon:hover { opacity:0.7; color:#fff; }
.meridian .pointer { cursor:pointer; }

/* toggle switch (classic .switch/.slider — kept for the not_applicable checkboxes) */
.meridian .switch {
  position:relative; display:inline-block !important; width:52px; height:24px;
}
.meridian .switch input { opacity:0; width:0; height:0; }
.meridian .slider {
  position:absolute; cursor:pointer; inset:0; background-color:#ccc;
  transition:.4s; border-radius:24px;
}
.meridian .slider:before {
  position:absolute; content:""; height:18px; width:18px; left:4px; bottom:3px;
  background-color:#fff; transition:.4s;
}
.meridian input:checked + .slider { background-color:var(--m-green); }
.meridian input:focus + .slider { box-shadow:0 0 1px var(--m-green); }
.meridian input:checked + .slider:before { transform:translateX(26px); }
.meridian .slider.round { border-radius:24px; }
.meridian .slider.round:before { border-radius:50%; }

/* ============================================================
   REPEATABLE FORM BLOCKS — "Add Lender" / "Add HOA" / "Add Another
   Mortgage" (2026-08-04 theme feedback).

   These blocks are built in JAVASCRIPT, as HTML string literals inside
   lender_information.php / hoa_information.php / om_information.php, and
   those literals were carried over from the classic views verbatim: a
   bootstrap `.row` wrapper, `.col-sm-3` cells, an <h3 class="lender_heading">
   and bare <input>/<select> with no .m-form-* classes at all. Meridian styles
   nothing in that vocabulary, so an added block rendered as a browser-default
   serif <h3> over unstyled shrink-to-fit inputs, and — because a bootstrap
   `.row` is a negative-margin flex row dropped next to a `display:grid`
   .m-form-grid — it overlapped the static fields above it. That overlap is
   also what made "Remove" open a date picker: the static rows' date inputs
   carry a full-bleed transparent ::-webkit-calendar-picker-indicator (see
   below), so an overlapping click lands on the picker, not the link.

   Styling them here rather than in each view's JS keeps every field name, id,
   `row_N` class and remove/cache selector those scripts depend on untouched.
   ============================================================ */

/* sub-section heading, static and injected. The action link inside it carries
   an inline style="float:right" from the classic markup, hence !important. */
.meridian .lender_heading {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 16px; font-size:17px; font-weight:800; color:var(--m-ink);
  letter-spacing:-0.01em; font-family:'Public Sans',sans-serif;
}
.meridian .lender_heading > a {
  float:none !important; margin-left:auto; flex-shrink:0;
}
.meridian .lender_heading img { height:16px; width:auto; vertical-align:middle; }

/* the injected block: a card that lays its cells out on the .m-form-grid */
.meridian #new_lender > .row,
.meridian #new_hoa > .row,
.meridian #new_omi > .row,
.meridian .dynamic-section {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:18px 20px; margin:0 0 20px; padding:22px 24px;
  background:var(--m-card); border:1px solid var(--m-line); border-radius:14px;
}
/* heading + the trailing <hr> span the full width of that grid */
.meridian #new_lender > .row > .lender_heading,
.meridian #new_hoa > .row > .lender_heading,
.meridian #new_omi > .row > .lender_heading,
.meridian #new_lender > .row > hr,
.meridian #new_hoa > .row > hr,
.meridian #new_omi > .row > hr { grid-column:1 / -1; }
/* the trailing <hr> is redundant once the block is a card */
.meridian #new_lender > .row > hr,
.meridian #new_hoa > .row > hr,
.meridian #new_omi > .row > hr { display:none; }

/* each .col-sm-N cell becomes an .m-form-group label+control stack. The width
   classes must be neutralised or bootstrap's percentage widths fight the grid. */
.meridian #new_lender > .row > [class*="col-sm-"],
.meridian #new_hoa > .row > [class*="col-sm-"],
.meridian #new_omi > .row > [class*="col-sm-"],
.meridian .dynamic-section > .row > [class*="col-sm-"] {
  display:flex; flex-direction:column; gap:6px; min-width:0;
  width:auto; max-width:none; flex:none; padding:0;
}
.meridian #new_lender > .row [class*="col-sm-"] > label,
.meridian #new_hoa > .row [class*="col-sm-"] > label,
.meridian #new_omi > .row [class*="col-sm-"] > label,
.meridian .dynamic-section [class*="col-sm-"] > label {
  color:var(--m-body); font-weight:600; font-size:13px; line-height:1.4; margin:0;
}
.meridian #new_lender > .row [class*="col-sm-"] > label span,
.meridian #new_hoa > .row [class*="col-sm-"] > label span,
.meridian #new_omi > .row [class*="col-sm-"] > label span,
.meridian .dynamic-section [class*="col-sm-"] > label span { color:#d40000; }

/* the bare inputs/selects get the .m-form-control look */
.meridian #new_lender > .row input,
.meridian #new_lender > .row select,
.meridian #new_hoa > .row input,
.meridian #new_hoa > .row select,
.meridian #new_omi > .row input,
.meridian #new_omi > .row select,
.meridian .dynamic-section input,
.meridian .dynamic-section select {
  width:100%; margin:0; box-sizing:border-box;
  background:#fff; border:1px solid var(--m-line); border-radius:8px;
  padding:9px 11px; font-size:14px; color:var(--m-body); font-family:inherit;
}
.meridian #new_lender > .row input:focus,
.meridian #new_lender > .row select:focus,
.meridian #new_hoa > .row input:focus,
.meridian #new_hoa > .row select:focus,
.meridian #new_omi > .row input:focus,
.meridian #new_omi > .row select:focus,
.meridian .dynamic-section input:focus,
.meridian .dynamic-section select:focus { outline:none; border-color:var(--m-accent); }

/* "Not Applicable / No ..." switch + its caption. The caption span carries an
   inline style="position:relative; top:17px; left:8px" in every info form —
   a nudge that dropped the text a line and a half down, onto the fields
   below it ("label collapse" in the feedback). Neutralised here so one rule
   covers lender / HOA / mortgage / warranty / personal-information alike. */
.meridian .m-form-group > .switch + span,
.meridian .m-form-group > label.switch + span {
  position:static !important; top:auto !important; left:auto !important;
  font-size:13px; font-weight:600; color:var(--m-body);
}
.meridian .m-form-group:has(> label.switch) {
  flex-direction:row; align-items:center; gap:10px; margin-bottom:4px;
}

/* "please click submit" cache toast (classic .toast/.btn-close override) */
.meridian .toast { background-color:#f8d7da; color:#842029; }
.meridian .toast .btn-close {
  background:none; float:right; width:24px; height:24px; opacity:1; font-size:16px;
  color:#856404 !important; filter:none; font-weight:bold; border:solid 1px #856404;
  border-radius:50%; line-height:19px; padding:0; text-align:center;
}

/* the JS-toggled accordion section headings the classic view hides by default
   (#collapseTwo/#collapseThree/#collapsesix appear on select-change) */
.meridian #collapseTwo, .meridian #headingTwo,
.meridian #collapseThree, .meridian #headingThree,
.meridian #headingsix, .meridian #collapsesix { display:none; }

/* hide the native date picker glyph overlay (classic rule).

   The indicator below is position:absolute with all four offsets at 0, so it
   only stays inside the field if the field is itself a positioning context.
   Nothing set that, so the transparent overlay resolved against whatever
   ancestor happened to be positioned and spilled across the surrounding
   fields — every click in that area opened the date input's picker instead of
   hitting the control under the cursor (reported on the attorney End Date).
   position:relative on the input pins the overlay to the field it belongs to. */
.meridian input[type="date"] { position:relative; }

.meridian input[type="date"]::-webkit-calendar-picker-indicator {
  background:transparent; bottom:0; color:transparent; cursor:pointer;
  height:auto; left:0; position:absolute; right:0; top:0; width:auto;
}

@media (max-width:640px) {
  .m-form-grid { grid-template-columns:1fr; }
}

/* ============================================================
   Coordination board (Transaction Coordinator HOME)
   Transcribed from design/index.html TC kit (meridianCard(), ~line 115):
   3-up KPI stat cards + a 2-col body (queue | follow-ups).
   Reuses .m-card / .m-status-pill / .m-btn / .m-ghost / .m-avatar.
   ============================================================ */

/* page-header eyebrow (uppercase role label above the big title) */
.m-page-eyebrow {
  font-size:12px; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--m-sub); margin-bottom:2px;
}

/* .m-status-pill tone variants for the queue (base .m-status-pill is green;
   these two-class selectors override it per PILLS.trust: To do / Review / Done) */
.m-status-pill.m-status-todo   { background:#EEF6DC; color:#4c6b14; }
.m-status-pill.m-status-review { background:#FDEBE3; color:#c2410c; }
.m-status-pill.m-status-done   { background:#E9EDF2; color:#4b5563; }
/* extra tones used by the role landing dashboards (Client / REA / Sales
   Processor): warn = blocked/overdue (orange), accent = closing/today (blue).
   Same palette as PILLS.trust.blocked / PILLS.trust.closing in design/index.html. */
.m-status-pill.m-status-warn   { background:#FDEBE3; color:#c2410c; }
.m-status-pill.m-status-accent { background:#E3EBFB; color:#1d4ed8; }

/* KPI stat cards */
.m-kpi-grid {
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:14px; margin-bottom:20px;
}
.m-kpi-card {
  background:var(--m-card); border:1px solid var(--m-line);
  border-radius:14px; padding:16px 20px;
}
.m-kpi-label {
  font-size:12px; color:var(--m-sub); font-weight:700;
  text-transform:uppercase; letter-spacing:0.05em;
}
.m-kpi-value {
  font-size:30px; font-weight:800; letter-spacing:-0.02em; color:var(--m-ink);
  line-height:1.15;
}
.m-kpi-value.m-kpi-ink    { color:var(--m-ink); }
.m-kpi-value.m-kpi-accent { color:var(--m-accent); }
.m-kpi-value.m-kpi-warn   { color:#c2410c; }
.m-kpi-note { font-size:12.5px; color:var(--m-sub); }

/* 2-column board body: queue (1.5fr) | follow-ups (1fr) */
.m-board-grid {
  display:grid; grid-template-columns:1.5fr 1fr; gap:14px; align-items:start;
}
.m-board-card-head {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-bottom:14px;
}
.m-board-count { font-size:12px; color:var(--m-sub); font-weight:600; }

/* coordination queue rows */
.m-queue-item {
  display:flex; align-items:center; gap:14px;
  padding:13px 0; border-top:1px solid var(--m-line-soft);
}
.m-queue-item:first-of-type { border-top:0; }
/* the queue row CTA follows the meridianCard ghost (6px/14px/12.5px), which is
   a touch tighter than the shared .m-ghost helper (7px/15px/13px). */
.m-queue-item .m-ghost { padding:6px 14px; font-size:12.5px; }
.m-queue-body { flex:1; min-width:0; }
.m-queue-title {
  font-weight:700; font-size:14.5px; color:var(--m-ink);
  overflow:hidden; text-overflow:ellipsis;
}
.m-queue-sub { font-size:12.5px; color:var(--m-sub); }
.m-queue-empty { font-size:13.5px; color:var(--m-sub); padding:6px 0; }
.m-queue-note { font-size:12px; color:#9ca3af; margin-top:12px; }

/* follow-ups rail — avatar-initial rows */
.m-followup-list { display:flex; flex-direction:column; gap:14px; }
.m-followup { display:flex; align-items:center; gap:12px; }
.m-followup-av {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:11px; background:#183A81; color:#fff;
}
.m-followup-body { flex:1; min-width:0; }
.m-followup-name { font-weight:700; font-size:13.5px; color:var(--m-ink); }
.m-followup-why  { font-size:12px; color:var(--m-sub); }
.m-followup-note {
  margin-top:18px; background:#F4F9EA; border:1px solid #dcefc0;
  border-radius:12px; padding:14px 16px; font-size:12.5px;
  color:#3f5a12; line-height:1.5;
}

@media (max-width:900px) {
  .m-kpi-grid  { grid-template-columns:1fr; }
  .m-board-grid { grid-template-columns:1fr; }
}

/* ============================================================
   TC aggregate tabs (Tasks / Documents / Messages)
   Full-list rollups of the TC's files. Reuses .m-card /
   .m-page-header / .m-status-pill / .m-open-btn; adds a shared
   list-table (.m-tc-table) and a message-list (.m-msg-*).
   ============================================================ */

/* shared list-table for the Tasks + Documents tabs */
.m-tc-table { width:100%; border-collapse:collapse; }
.m-tc-table thead th {
  text-align:left; font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--m-sub); padding:0 12px 10px;
  border-bottom:1px solid var(--m-line);
}
.m-tc-table tbody td {
  padding:13px 12px; border-bottom:1px solid var(--m-line-soft);
  vertical-align:middle; font-size:13.5px; color:var(--m-body);
}
.m-tc-table tbody tr:last-child td { border-bottom:0; }
.m-tc-file { font-weight:800; color:var(--m-ink); white-space:nowrap; }
.m-tc-primary { font-weight:700; color:var(--m-ink); }
.m-tc-secondary { font-size:12.5px; color:var(--m-sub); }
.m-tc-table .m-td-open { text-align:right; white-space:nowrap; }
.m-tc-inline-form { display:inline; margin:0; }
.m-tc-inline-form .m-open-btn { cursor:pointer; font-family:inherit; }

/* message list (Messages tab) — clickable conversation rows */
.m-msg-list { display:flex; flex-direction:column; }
.m-msg-row {
  display:flex; align-items:flex-start; gap:14px; padding:14px 4px;
  border-top:1px solid var(--m-line-soft); text-decoration:none; color:inherit;
}
.m-msg-row:first-child { border-top:0; }
.m-msg-row:hover { background:var(--m-line-soft); }
.m-msg-body { flex:1; min-width:0; }
.m-msg-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.m-msg-file { font-weight:800; color:var(--m-ink); font-size:13.5px; }
.m-msg-prop { font-size:12.5px; color:var(--m-sub); }
.m-msg-snippet {
  font-size:13.5px; color:var(--m-body); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.m-msg-meta {
  display:flex; align-items:center; gap:8px; flex-shrink:0; white-space:nowrap;
}
.m-msg-date { font-size:12px; color:var(--m-sub); }
.m-msg-dot {
  width:9px; height:9px; border-radius:50%; background:var(--m-accent);
  display:inline-block; flex-shrink:0;
}
.m-msg-unread .m-msg-snippet,
.m-msg-unread .m-msg-file { font-weight:800; color:var(--m-ink); }

/* Unread-count chip on the sidebar "Inbox" item (2026-08-19 client review:
   "new message icon should appear next to Inbox at the file level"). Same
   orange as the Overview "new messages" banner so the two signals read as one. */
.m-nav-badge {
  display:inline-block; min-width:18px; text-align:center; margin-left:8px;
  background:#fe9039; color:#fff; border-radius:100px;
  padding:1px 6px; font-size:11px; font-weight:800; line-height:16px;
  vertical-align:1px;
}
/* The brand logo is now an anchor (logo -> home); keep it rendering exactly as
   the bare <img> did. */
.m-brand-link { display:inline-block; line-height:0; }

/* Sort control above the conversation list (client review: "sorting for
   messages and documents"). The rows are cards, not a table, so the control is
   explicit rather than a clickable column header. */
.m-msg-sortbar {
  display:flex; align-items:center; gap:10px;
  padding:0 0 14px 0; margin:0 0 4px 0;
  border-bottom:1px solid var(--m-line, #e6e6e6);
}
.m-msg-sortbar label {
  margin:0; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--m-muted, #777);
}
.m-msg-sortbar select { width:auto; min-width:170px; }

/* Sortable column headers (assets/js/table-sort.js). Affordance + direction
   indicator; the arrow is a pseudo-element so it never disturbs the header text. */
th.is-sortable { cursor:pointer; user-select:none; white-space:nowrap; }
th.is-sortable:hover { color:var(--m-accent, #97C93F); }
th.is-sortable::after { content:"\2195"; opacity:.35; margin-left:6px; font-size:11px; }
th.is-sorted-asc::after { content:"\2191"; opacity:1; }
th.is-sorted-desc::after { content:"\2193"; opacity:1; }

/* ---- Notification bell + popover (sidebar user chip) --------------------
   The bell is now a sibling of .m-user-chip-btn rather than nested inside it,
   so it is absolutely placed over the chip's right edge where it used to sit. */
.m-user-chip { position: relative; }
.m-user-chip .m-chip-bell-wrap {
  position: absolute; right: 34px; top: 14px; z-index: 2;
}
.m-user-chip .m-chip-bell {
  color: var(--m-sub); font-size: 14px; line-height: 1; cursor: pointer;
  z-index: 2;
}
.m-user-chip .m-chip-bell:hover { color: var(--m-ink); }

/* The popover itself. position:fixed lifts it out of the sidebar's
   overflow:hidden (which clipped it) and off the bottom edge the chip is pinned
   to. Anchored above the chip, against the sidebar's left gutter. */
/* Specificity note: Bootstrap ships `.dropup .dropdown-menu[data-bs-popper]`
   { bottom:100% } at (0,3,0). Bootstrap flips this menu to dropup (no room
   below a chip pinned to the sidebar's bottom), and on a position:fixed element
   `bottom:100%` resolves against the VIEWPORT — measured 720px, putting the
   popover 356px above the top of the screen. This selector is (0,4,0) so it
   wins, and it sets all four offsets so no half of Bootstrap's rule survives. */
.m-user-chip .m-chip-bell-wrap .m-bell-menu.dropdown-menu {
  position: fixed;
  left: 16px;
  bottom: 84px;
  top: auto;
  right: auto;
  transform: none;
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--m-line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18);
  z-index: 1080;
}
/* Rows carry a description plus a small date/subject line; at the old 160px
   they were unreadable. Let them wrap instead of overflowing. */
.m-user-chip .m-chip-bell-wrap .m-bell-menu .dropdown-item {
  white-space: normal;
  word-break: break-word;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.35;
}
.m-user-chip .m-chip-bell-wrap .m-bell-menu .dropdown-item + .dropdown-item {
  border-top: 1px solid var(--m-line-soft);
}
/* Server marks already-read rows with .read. */
.m-user-chip .m-chip-bell-wrap .m-bell-menu .dropdown-item.read { opacity: .62; }
.m-user-chip .m-chip-bell-wrap .m-bell-menu .dropdown-item img { display: none; }

@media (max-width: 900px) {
  .m-user-chip .m-chip-bell-wrap .m-bell-menu.dropdown-menu { left: 12px; bottom: 12px; width: calc(100vw - 24px); }
}

/* ---- Bell next to the brand logo (2026-08-21 request) ----
   The bell block moved from the bottom user chip into .m-sidebar-brand, so the
   .m-user-chip-scoped rules above no longer match it; these are its new home.
   Slightly larger than the chip version (19px vs 14px), pushed to the row's
   right edge by the brand's flex layout. */
.m-sidebar-brand .m-chip-bell-wrap { margin-left:auto; }
.m-sidebar-brand .m-chip-bell {
  position:relative; display:inline-block; color:var(--m-sub);
  font-size:19px; line-height:1; cursor:pointer;
}
.m-sidebar-brand .m-chip-bell:hover { color:var(--m-ink); }
/* Overrides the classic .notification-num (20x20 floated square) exactly like
   the chip version did, sized up to match the bigger bell. */
.m-sidebar-brand .m-chip-bell .notification-num {
  position:absolute; top:-7px; right:-9px; float:none;
  width:auto; min-width:17px; height:17px; padding:0 5px; box-sizing:border-box;
  background:var(--m-green); color:var(--m-green-ink);
  font-size:10px; font-weight:800; line-height:17px; text-align:center;
  border-radius:100px;
}
/* The popover: same fixed-position escape from the sidebar's overflow as the
   chip version, but anchored to the TOP now that the bell lives up there —
   dropping down under the brand row instead of rising from the bottom. */
.m-sidebar-brand .m-chip-bell-wrap .m-bell-menu.dropdown-menu {
  position:fixed;
  left:16px;
  top:72px;
  bottom:auto;
  right:auto;
  transform:none;
  width:340px;
  max-width:calc(100vw - 32px);
  max-height:70vh;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:6px;
  border:1px solid var(--m-line);
  border-radius:12px;
  box-shadow:0 12px 32px rgba(16, 24, 40, 0.18);
  z-index:1080;
}
.m-sidebar-brand .m-chip-bell-wrap .m-bell-menu .dropdown-item {
  white-space:normal; word-break:break-word; padding:8px 10px;
  border-radius:8px; font-size:13px; line-height:1.35;
}
.m-sidebar-brand .m-chip-bell-wrap .m-bell-menu .dropdown-item + .dropdown-item {
  border-top:1px solid var(--m-line-soft);
}
.m-sidebar-brand .m-chip-bell-wrap .m-bell-menu .dropdown-item.read { opacity:.62; }
.m-sidebar-brand .m-chip-bell-wrap .m-bell-menu .dropdown-item img { display:none; }

/* "View all notifications" footer row in the bell dropdown (2026-08-21). */
.m-sidebar-brand .m-chip-bell-wrap .m-bell-menu .m-bell-viewall,
.m-sidebar-brand .m-chip-bell-wrap .m-bell-menu .cla-noti-action {
  text-align:center; font-weight:800; font-size:12.5px; color:var(--m-accent);
  cursor:pointer; border-top:1px solid var(--m-line);
}
.m-sidebar-brand .m-chip-bell-wrap .m-bell-menu .m-bell-viewall:hover,
.m-sidebar-brand .m-chip-bell-wrap .m-bell-menu .cla-noti-action:hover { background:var(--m-line-soft); }

/* Rows on the All Notifications page. */
.m-noti-row { padding:12px 14px; border-radius:10px; cursor:pointer; }
.m-noti-row + .m-noti-row { border-top:1px solid var(--m-line-soft); }
.m-noti-row:hover { background:var(--m-line-soft); }
.m-noti-row.m-noti-unread { background:#F4FBE9; }
.m-noti-row.m-noti-unread:hover { background:#EDF6DE; }
.m-noti-desc { font-size:14px; color:var(--m-ink); }
.m-noti-meta { font-size:12.5px; color:var(--m-sub); font-style:italic; margin-top:3px; }
.m-noti-meta strong { color:var(--m-body); font-style:normal; }
.m-noti-type {
  display:inline-block; margin-left:8px; padding:1px 8px; border-radius:100px;
  background:#E9EDF2; color:#4b5563; font-size:10.5px; font-weight:800; font-style:normal;
}

/* ==========================================================================
   STANDALONE / PRE-AUTH PAGE SHELL  (.m-auth-*)
   --------------------------------------------------------------------------
   Shared chrome for the standalone views that render OUTSIDE the app frame
   (they never load template/index, so they link meridian.css themselves):
   verify, register, password-reset, generate-password, confirm_mail,
   get_support, welcome_message, place_order_out, terms, priacy_policy, 404.

   Deliberately SEPARATE from the .m-login-* rules that live inline in
   meridian/login.php: login is the single highest-traffic page and its
   Playwright specs pin that markup, so it is left untouched. Converging the
   two is safe follow-up work, not something to risk here.
   ========================================================================== */
.meridian .m-auth-shell {
  min-height:100vh; display:flex; flex-direction:column; background:var(--m-bg);
}
.meridian .m-auth-body {
  flex:1; display:flex; align-items:center; justify-content:center; padding:48px 24px;
}
/* Bounded white card, centred. --w lets a page widen it (get_support, forms). */
.meridian .m-auth-card {
  width:100%; max-width:var(--m-auth-w, 460px);
  background:var(--m-card); border:1px solid var(--m-line); border-radius:14px;
  box-shadow:0 18px 50px rgba(14,17,22,.10);
  padding:40px 40px 36px; box-sizing:border-box;
}
.meridian .m-auth-card--wide { --m-auth-w:760px; }
.meridian .m-auth-card--doc  { --m-auth-w:900px; text-align:left; }

.meridian .m-auth-logo-wrap { text-align:center; margin-bottom:22px; }
.meridian .m-auth-logo-wrap img { height:42px; width:auto; }

.meridian .m-auth-card h1,
.meridian .m-auth-card h2 {
  font-size:22px; font-weight:800; letter-spacing:-.02em; text-align:center;
  color:var(--m-ink); margin:0 0 6px;
}
.meridian .m-auth-card--doc h1,
.meridian .m-auth-card--doc h2 { text-align:left; }
.meridian .m-auth-sub {
  font-size:13.5px; color:var(--m-sub); text-align:center; margin:0 0 24px; line-height:1.6;
}
.meridian .m-auth-card--doc .m-auth-sub { text-align:left; }

/* Inputs — same visual contract as the login card. */
.meridian .m-auth-card input[type="text"],
.meridian .m-auth-card input[type="email"],
.meridian .m-auth-card input[type="tel"],
.meridian .m-auth-card input[type="number"],
.meridian .m-auth-card input[type="date"],
.meridian .m-auth-card input[type="password"],
.meridian .m-auth-card select,
.meridian .m-auth-card textarea {
  display:block; width:100%; box-sizing:border-box; background:#fff;
  border:1px solid #D7DBE0; border-radius:10px; padding:12px 16px;
  font-size:14px; font-family:'Public Sans',sans-serif; color:var(--m-ink);
  margin-bottom:14px; line-height:1.4;
}
.meridian .m-auth-card textarea { min-height:120px; resize:vertical; }
.meridian .m-auth-card input::placeholder,
.meridian .m-auth-card textarea::placeholder { color:#9ca3af; }
.meridian .m-auth-card input:focus,
.meridian .m-auth-card select:focus,
.meridian .m-auth-card textarea:focus {
  outline:none; border-color:var(--m-green); box-shadow:0 0 0 3px rgba(151,201,63,.18);
}
.meridian .m-auth-label {
  display:block; font-size:12.5px; font-weight:700; color:var(--m-body); margin-bottom:6px;
}

/* Primary submit — full-width green, matches .m-btn. */
.meridian .m-auth-card .submit-btn,
.meridian .m-auth-btn {
  display:block; width:100%; background:var(--m-green); border:0; border-radius:10px;
  padding:13px 26px; font-size:14px; font-weight:800; color:var(--m-green-ink);
  cursor:pointer; margin-top:14px; text-align:center; text-decoration:none;
}
.meridian .m-auth-card .submit-btn:hover,
.meridian .m-auth-btn:hover { filter:brightness(.96); color:var(--m-green-ink); }
.meridian .m-auth-card .submit-btn[disabled],
.meridian .m-auth-btn[disabled] { opacity:.5; pointer-events:none; background:#9aa0a6; }

.meridian .m-auth-links {
  margin-top:16px; font-size:13px; display:flex; justify-content:space-between; gap:14px;
}
.meridian .m-auth-links a { color:var(--m-accent); text-decoration:none; font-weight:700; }
.meridian .m-auth-links a:hover { text-decoration:underline; }

/* 6-box security code row (verify). The classic view shipped SCSS-style
   nesting inside a plain <style>, which browsers never applied — these rules
   are the first time the code boxes are actually styled. */
.meridian .m-code-row { display:flex; gap:10px; justify-content:center; margin:6px 0 18px; }
/* box-sizing is set explicitly: these inputs carry NO type attribute (the
   classic markup is <input name='code' class='code-input'>), so the
   .m-auth-card input[type="..."] rules above — which is where border-box comes
   from — do not match them. Without it the 12px/4px padding lands OUTSIDE the
   width and six boxes overflow the card. They also flex to share the available
   width rather than being pinned, so the row can never outgrow its container. */
.meridian .m-code-row input.code-input {
  box-sizing:border-box; flex:1 1 0; min-width:0; max-width:56px;
  text-align:center; font-size:22px; font-weight:800;
  letter-spacing:.02em; text-transform:uppercase; padding:12px 4px; margin-bottom:0;
  background-image:none;
}
.meridian .m-code-legend {
  font-size:12.5px; font-weight:700; color:var(--m-body);
  text-align:center; margin-bottom:8px; float:none; width:auto;
}
.meridian .m-code-fieldset { border:0; padding:0; margin:0; }

/* Alerts inside the auth card. */
.meridian .m-auth-card .alert {
  border-radius:10px; font-size:13.5px; padding:11px 14px; margin-bottom:16px; border:1px solid transparent;
}
.meridian .m-auth-card .alert-success { background:#EEF6DC; color:#33520a; border-color:#D6E9AE; }
.meridian .m-auth-card .alert-danger  { background:#FDECEC; color:#8a1c1c; border-color:#F5C6C6; }

/* Footer bar. */
.meridian .m-auth-footer {
  border-top:1px solid var(--m-line); padding:14px 24px; font-size:13px; color:var(--m-sub);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
}
.meridian .m-auth-footer p { margin:0; display:flex; align-items:center; gap:8px; }
.meridian .m-auth-footer img { height:20px; }
.meridian .m-auth-footer ul.privacy { list-style:none; margin:0; padding:0; }
.meridian .m-auth-footer ul.privacy a { color:var(--m-body); text-decoration:none; font-weight:600; }
.meridian .m-auth-footer ul.privacy a:hover { text-decoration:underline; }

/* Long-form legal/help documents (terms, privacy policy, get support). */
.meridian .m-doc-prose { font-size:14.5px; line-height:1.7; color:var(--m-body); }
.meridian .m-doc-prose h2 { font-size:18px; text-align:left; margin:26px 0 8px; }
.meridian .m-doc-prose h3 { font-size:15px; font-weight:800; color:var(--m-ink); margin:20px 0 6px; }
.meridian .m-doc-prose p  { margin:0 0 12px; }
.meridian .m-doc-prose ul, .meridian .m-doc-prose ol { margin:0 0 12px; padding-left:22px; }
.meridian .m-doc-prose li { margin-bottom:6px; }
.meridian .m-doc-prose a { color:var(--m-accent); font-weight:600; }

@media (max-width:560px) {
  .meridian .m-auth-card { padding:28px 22px 24px; }
  .meridian .m-code-row { gap:6px; }
  .meridian .m-code-row input.code-input { max-width:46px; font-size:19px; padding:11px 2px; }
}

/* When auth-card fields are laid out with the shared .m-form-grid, the grid's
   own gap handles spacing — drop the stacked-input bottom margin so the two
   don't compound. */
.meridian .m-auth-card .m-form-group input,
.meridian .m-auth-card .m-form-group select,
.meridian .m-auth-card .m-form-group textarea { margin-bottom:0; }
.meridian .m-auth-card .m-form-grid { margin-bottom:18px; }

/* Bold lead-in spans in legal prose (classic styled these via .privacy-content p span). */
.meridian .m-doc-prose p > span:first-child { font-weight:800; color:var(--m-ink); }

/* Card grid for the marketing-style privacy/security page. */
.meridian .m-doc-cards {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:20px; margin:22px 0 8px;
}
.meridian .m-doc-card {
  background:var(--m-card); border:1px solid var(--m-line); border-radius:12px; padding:22px 20px;
}
.meridian .m-doc-card img { height:46px; width:auto; margin-bottom:12px; }
.meridian .m-doc-card h3 { font-size:15px; font-weight:800; color:var(--m-ink); margin:0 0 8px; }
.meridian .m-doc-card p  { font-size:13.5px; line-height:1.65; color:var(--m-body); margin:0; }
.meridian .m-doc-band {
  background:var(--m-line-soft); border:1px solid var(--m-line); border-radius:14px;
  padding:26px 24px; margin:28px 0;
}
.meridian .m-doc-band > h2 { margin-top:0; }

/* Standalone external order form (place_order_out): the classic bootstrap grid
   is kept as-is — .meridian already restyles every input/select/label — and
   only the surrounding panel becomes a meridian card. */
.meridian .m-order-card {
  background:var(--m-card); border:1px solid var(--m-line); border-radius:14px;
  box-shadow:0 18px 50px rgba(14,17,22,.08); padding:36px 34px; margin:40px 0;
}
.meridian .m-order-card h2 { font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--m-ink); }
.meridian .m-order-card label { display:block; margin-bottom:6px; }
.meridian .m-order-card label span { color:#b42318; }
.meridian .m-order-card .row > [class*="col-"] { margin-bottom:14px; }

/* Library video modals (2026-08-26): the <video> had no sizing rule anywhere,
   so it rendered at its intrinsic resolution and blew out of the dialog —
   covering most of the screen. Scoped to modal bodies so every video modal
   (Library, the orders welcome videos) fits its dialog. */
.modal .modal-body video {
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:8px;
  background:#000;
}

/* ------------------------------------------------------------
   MOBILE (2026-08-26 client review, item 5: "get mobile to work").
   Baseline responsive shell for phones: the fixed 248px sidebar becomes an
   off-canvas drawer behind a hamburger, content takes the full width, wide
   tables scroll inside their card instead of pushing the page sideways, and
   form grids collapse to one column. Tablets (<= 900px) keep the earlier
   narrow-sidebar rule; this block only kicks in at phone widths.
   ------------------------------------------------------------ */
.m-nav-toggle { display:none; }
.m-nav-overlay { display:none; }
@media (max-width:768px) {
  /* 2026-08-28 fix (client: "drawer opens but nothing in it works"). Two
     causes, both measured in headless Chrome at 414px:
     1. left_panel.php carries an inline <style> with .left-bar.m-sidebar
        { z-index:1 } — same specificity as the rule here but later in the
        cascade, so the drawer rendered at z-index 1 UNDER the 1040 overlay:
        every tap on a link hit the overlay (elementFromPoint = .m-nav-overlay).
        Hence !important on the stacking/offset properties.
     2. The slide used transform, which makes the drawer the containing block
        for its position:fixed descendants (bell menu) and lets overflow:hidden
        clip them. The drawer now slides on `left` instead — no transform at
        all — so those menus stay viewport-anchored as on desktop. */
  .meridian .left-bar, .meridian .left-bar.m-sidebar {
    position:fixed !important; top:0 !important; left:-290px !important; z-index:1045 !important;
    width:264px !important; height:100vh !important; height:100dvh !important;
    display:flex !important; transform:none !important;
    transition:left .22s ease, box-shadow .22s ease;
    box-shadow:0 0 0 rgba(0,0,0,0);
  }
  body.m-nav-open .meridian .left-bar,
  .meridian.m-nav-open .left-bar,
  .meridian.m-nav-open .left-bar.m-sidebar { left:0 !important; box-shadow:0 12px 40px rgba(16,24,40,.28); }
  /* No background scroll while the drawer is open. */
  body.m-nav-open { overflow:hidden; }
  /* Open state: the toggle steps out to the drawer edge (over the overlay) so
     it no longer sits on top of the logo, and reads as a close button. */
  body.m-nav-open .m-nav-toggle { left:276px; }
  .meridian .right-bar { margin:0 !important; padding:64px 14px 28px !important; min-height:100vh; }
  .m-footer { margin-left:0; padding:14px; }
  .m-nav-toggle {
    display:flex; align-items:center; justify-content:center;
    position:fixed; top:12px; left:12px; z-index:1050;
    width:42px; height:42px; border-radius:10px; border:1px solid var(--m-line);
    background:#fff; color:var(--m-ink); font-size:20px; line-height:1; cursor:pointer;
    box-shadow:0 2px 8px rgba(16,24,40,.08);
  }
  .m-nav-overlay {
    position:fixed; inset:0; z-index:1040; background:rgba(16,24,40,.35);
  }
  body.m-nav-open .m-nav-overlay { display:block; }
  /* Tables: scroll inside the card, never the whole page. */
  .meridian .m-card { overflow-x:auto; }
  .meridian .m-card table { min-width:640px; }
  .meridian .table-responsive { overflow-x:auto; }
  /* Grids and stacked layouts collapse. */
  .m-form-grid, .m-ov-metrics, .m-ov-facts, .m-party-grid, .m-folder-grid { grid-template-columns:1fr !important; }
  .m-page-header, .m-page-head { flex-direction:column; align-items:flex-start; gap:12px; }
  .m-task-card { flex-wrap:wrap; }
  .m-task-actions { width:100%; justify-content:flex-start; }
  /* Fixed-position popovers anchored to the sidebar must fit the viewport. */
  .m-sidebar-brand .m-chip-bell-wrap .m-bell-menu.dropdown-menu { left:8px; right:8px; width:auto; max-width:none; top:64px; }
  .m-bread-back { margin-top:0 !important; text-align:left; }
}

/* 2026-08-28: participants line now sits above the subject in the message cards */
.m-msg-bubble .m-msg-users:first-child,
.m-msg-bubble > .m-msg-users { margin-top:0; margin-bottom:3px; font-size:12.5px; color:var(--m-sub); }

/* 2026-09-01 client review (messages list): no initials circle beside a
   conversation, and the date in its own column next to the message. */
.m-msg-avatar { display:none; }
.m-msg-when {
  flex:0 0 150px; align-self:center; text-align:right;
  font-size:12.5px; color:var(--m-sub); line-height:1.45; white-space:nowrap;
}
.m-msg-when-date { display:block; font-weight:700; color:var(--m-body); }
.m-msg-when-time { display:block; }
@media (max-width:768px) {
  .m-msg-when { flex:0 0 96px; white-space:normal; }
}

/* 2026-09-04 client request: both icons at 30px — the brand-row bell and the
   open-conversation chat icon in the messages list. Badge/menu keep their
   offsets (they anchor to the bell span, which just grew). */
.m-sidebar-brand .m-chip-bell { font-size:30px; }
.m-msg-open img { width:30px; height:30px; }

/* Bell dropdown (2026-10): the row meta line carries an inline 54px left pad meant for the
   classic hand icon, which meridian hides — that left the date/file number oddly indented.
   Also gives the empty-state row a centred, muted look instead of a clickable-looking item. */
.m-sidebar-brand .m-chip-bell-wrap .m-bell-menu .dropdown-item > span,
.m-user-chip .m-chip-bell-wrap .m-bell-menu .dropdown-item > span {
  padding-left:0 !important; margin-top:2px; color:var(--m-muted, #667085) !important;
}
.m-chip-bell-wrap .m-bell-menu .dropdown-item.cla-noti-empty {
  text-align:center; color:var(--m-muted, #667085); font-style:normal; pointer-events:none; padding:14px 10px;
}

/* ============================================================
   UI polish — 2026-10 design review (qa/ui-polish)
   Scoped under .meridian; presentation only. Group 1: mobile,
   overview, stepper, orders list.
   ============================================================ */

/* ---- mobile header bar: logo + name beside the hamburger ---- */
.m-mobile-bar { display:none; }

/* ---- overview: no "Name:" colons, muted empties, back link, aligned actions ---- */
.meridian .m-muted-empty { color:#8a929e; font-style:italic; font-weight:400; }
.m-ov-back { justify-content:flex-start; margin-bottom:6px; }
.m-ov-back .m-ghost {
  border:0; background:transparent; padding:4px 0; color:var(--m-accent); font-weight:700;
}
.m-ov-back .m-ghost::before { content:"\2190\00a0"; }
.m-ov-back .m-ghost:hover { background:transparent; text-decoration:underline; }
/* Request Update / View Property / Schedule*: one height, one radius, vertically centred. */
.m-ov-head-actions .m-btn,
.m-ov-head-actions .m-ghost {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:38px; box-sizing:border-box; padding:0 18px; border-radius:10px;
  font-size:13.5px; line-height:1.2;
}
/* The "Purchase" label beside the order number is a tag, not a button. */
.m-ov-header .m-ghost[href="#"] { pointer-events:none; cursor:default; padding:4px 12px; border-radius:100px; font-size:12.5px; }
/* Metrics bar: tolerate 3 cards (seller side hides Loan Amount). */
.m-ov-metrics { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.m-ov-metric .m-ov-metric-value { color:#5b6472; }

/* ---- stage tracker: readable labels ---- */
.m-stepper-step { font-size:12.5px; color:#566070; }
.m-stepper-step--done { color:var(--m-ink); }

/* ---- orders list: search box ---- */
.meridian .dataTables_filter input { min-width:260px; padding:9px 14px; }
.meridian .dataTables_filter input::placeholder { color:#6b7280; opacity:1; }

@media (max-width:768px) {
  /* header bar */
  .m-mobile-bar {
    display:flex; align-items:center; gap:10px;
    position:fixed; top:0; left:0; right:0; height:64px; z-index:1030;
    padding:0 14px 0 66px; background:#fff; border-bottom:1px solid var(--m-line);
    box-sizing:border-box;
  }
  .m-mobile-bar-logo { height:30px; width:auto; display:block; }
  .m-mobile-bar-title { font-size:14px; font-weight:800; color:var(--m-ink); letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .meridian .right-bar { padding-top:80px !important; }

  /* KPI card: no stray divider when the metrics stack */
  .m-ov-metric { border-right:0 !important; padding:10px 14px; }
  .m-ov-metrics { grid-template-columns:1fr !important; }

  /* stage tracker: wraps into rows of five, each its own clean track — no side scroll, no clipped labels */
  .m-stepper-wrap { overflow:visible; }
  .m-stepper { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); min-width:0; row-gap:18px; padding-top:6px; }
  .m-stepper-step { min-width:0; overflow-wrap:anywhere; hyphens:auto; }
  .m-stepper-step:first-child .m-stepper-bar,
  .m-stepper-step:nth-child(5n+1) .m-stepper-bar { left:50%; right:0; }
  .m-stepper-step:last-child .m-stepper-bar,
  .m-stepper-step:nth-child(5n) .m-stepper-bar { right:50%; left:0; }
  .m-stepper-step:first-child:last-child .m-stepper-bar { display:none; }

  /* Summary table: label above value, one column */
  .meridian .m-card .m-ov-info-table { min-width:0 !important; }
  .m-ov-info-table, .m-ov-info-table tbody, .m-ov-info-table tr, .m-ov-info-table td { display:block; width:100%; }
  .m-ov-info-table tr { padding:2px 0; }
  .m-ov-info-table td { padding:2px 4px !important; border:0 !important; }
  .m-ov-info-table td:nth-child(odd) { font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--m-sub); padding-top:10px !important; }
  .m-ov-info-table td:nth-child(odd) strong { color:var(--m-sub); font-weight:700; }
  .m-ov-info-table td:nth-child(even) { color:var(--m-ink); word-break:break-word; }
  .m-ov-section-head { flex-wrap:wrap; gap:10px; }

  /* orders list -> stacked cards (Open button, Stage, Needs you all reachable, no horizontal scroll) */
  .meridian .m-card table.m-ord-table { min-width:0 !important; }
  .meridian .m-ord-table thead { display:none; }
  .meridian .m-ord-table, .meridian .m-ord-table tbody { display:block; width:100%; }
  .meridian table.table.m-ord-table > tbody > tr {
    display:block; border:1px solid var(--m-line); border-radius:12px;
    margin:0 0 12px; padding:6px 14px; background:#fff;
  }
  .meridian table.table.m-ord-table > tbody > tr > td {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    border-top:0; border-bottom:1px solid var(--m-line-soft); padding:9px 0 !important;
    text-align:right; min-width:0 !important; width:auto;
  }
  .meridian table.table.m-ord-table > tbody > tr > td:last-child { border-bottom:0; }
  .meridian table.table.m-ord-table > tbody > tr > td::before {
    flex:0 0 auto; margin-right:auto; text-align:left; padding-right:8px;
    font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--m-sub);
  }
  .meridian td.m-td-file::before { content:"File"; }
  .meridian td.m-td-prop::before { content:"Property"; }
  .meridian td.m-td-prop + td.m-td-date::before { content:"Opened"; }
  .meridian td.m-td-date + td.m-td-date::before { content:"Closing"; }
  .meridian td.m-td-type::before { content:"Type"; }
  .meridian td.m-td-stage::before { content:"Stage"; }
  .meridian td.m-td-needs::before { content:"Needs you"; }
  .meridian td.m-td-open::before { content:none; }
  .meridian td:not([class*="m-td-"])::before { content:"Your role"; }
  .meridian td.m-td-file { justify-content:flex-start; }
  .meridian td.m-td-file::before { min-width:70px; }
  .meridian td.m-td-needs { flex-direction:row; flex-wrap:wrap; justify-content:flex-end; }
  .meridian td.m-td-prop .m-order-prop, .meridian td.m-td-prop .m-order-parties { text-align:right; }
  .meridian td.m-td-open { padding-top:12px !important; }
  .meridian td.m-td-open .m-open-btn { display:block; width:100%; text-align:center; padding:10px 15px; font-size:14px; }
  .meridian .m-ord-table td.dataTables_empty { display:block; text-align:center; }
  .meridian .m-ord-table td.dataTables_empty::before { content:none; }
  /* DataTables chrome */
  .meridian .dataTables_filter { float:none; width:100%; }
  .meridian .dataTables_filter label { display:block; width:100%; }
  .meridian .dataTables_filter input { width:100%; min-width:0; box-sizing:border-box; }
  .meridian .dataTables_paginate { text-align:center; }
  .m-ord-tabs { flex-wrap:wrap; gap:6px; }
}

/* ---- Library: real video cards (thumbnail was squeezed to 34px by the folder-icon rule) ---- */
.m-video-card { padding:0 !important; overflow:hidden; display:flex; flex-direction:column; align-items:stretch; }
.m-video-card .m-folder-icon {
  position:relative; aspect-ratio:16/9; width:100%; font-size:0; line-height:0;
  background:linear-gradient(135deg,#243417 0%,#4a6f16 100%);
}
.m-video-card .m-folder-icon a { display:block; width:100%; height:100%; }
.m-video-card .m-folder-icon img { width:100% !important; height:100%; object-fit:cover; display:block; }
/* Play badge — sits over the image, and over the gradient when the image is missing. */
.m-video-card .m-folder-icon::after {
  content:"\25B6"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--m-accent);
  font-size:18px; line-height:48px; text-align:center; padding-left:3px; box-sizing:border-box;
  box-shadow:0 4px 14px rgba(0,0,0,.25); pointer-events:none;
}
.m-video-card .m-folder-name { display:block; padding:12px 14px 2px; font-size:14px; font-weight:800; color:var(--m-ink); }
.m-video-card .m-folder-meta { padding:0 14px 14px; font-size:12.5px; color:#5b6472; line-height:1.4; }
.m-video-card:hover { border-color:var(--m-green); }

/* ---- Tasks page polish ---- */
/* Panel uses the full content width and the neutral card border (was a 1000px column with a loud green frame). */
.meridian .m-task-list.box-main { max-width:none; width:100%; border:1px solid var(--m-line); background:transparent; padding:16px; box-sizing:border-box; }
.m-task-list { max-width:none; }
/* Action buttons: brand green when there is something to do, outlined green when finished (still clickable), grey only when truly disabled. */
.meridian .m-task-card .m-task-cta,
.meridian .m-task-card .m-task-cta.gray-btn,
.meridian .m-task-card .m-task-cta.gray-btn.dark {
  font-family:'Public Sans',sans-serif; font-size:13.5px; font-weight:800; line-height:1.2;
  padding:10px 18px; border-radius:10px; border:1px solid var(--m-green);
  background:var(--m-green); color:var(--m-green-ink); text-decoration:none; white-space:nowrap;
}
.meridian .m-task-card .m-task-cta:hover,
.meridian .m-task-card .m-task-cta.gray-btn:hover { filter:brightness(.95); background:var(--m-green); color:var(--m-green-ink); }
.meridian .m-task-card--done .m-task-cta,
.meridian .m-task-card--done .m-task-cta.gray-btn,
.meridian .m-task-card--done .m-task-cta.gray-btn.dark { background:#fff; color:var(--m-accent); border-color:var(--m-green); }
.meridian .m-task-card--done .m-task-cta:hover,
.meridian .m-task-card--done .m-task-cta.gray-btn:hover { background:var(--m-chip-bg); color:var(--m-chip-ink); }
.meridian .m-task-card .m-task-cta[disabled],
.meridian .m-task-card .m-task-cta[aria-disabled="true"],
.meridian .m-task-card .m-task-cta.disabled {
  background:#E5E7EB; border-color:#E5E7EB; color:#6B7280; cursor:not-allowed; pointer-events:none; filter:none;
}
/* Completed titles: struck through but still readable. */
.m-task-card--done .m-task-title { opacity:1; color:#4b5563; text-decoration:line-through; text-decoration-color:#9ca3af; }
.m-task-card--done .m-task-meta, .m-task-card--done .m-task-desc { color:#5b6472; }
.m-task-meta { color:#5b6472; }
.m-task-desc { color:#4b5563; }
/* All-caught-up empty state (shown above Completed when nothing is outstanding) */
.m-caught-up { display:flex; align-items:center; gap:16px; padding:18px 20px; background:var(--m-chip-bg); border-color:#d9ebb0; }
.m-caught-up-icon {
  flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:var(--m-green); color:var(--m-green-ink);
  font-size:20px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.m-caught-up h4 { margin:0 0 2px; font-size:16px; font-weight:800; color:var(--m-ink); text-align:left; }
.m-caught-up p { margin:0; font-size:13.5px; color:#4b5563; }
/* Page titles: one case style across pages (was uppercase on Tasks/Library/Messages, title case elsewhere). */
.meridian .m-page-head .box-title h2, .meridian .box-title h2.m-h1, .meridian .m-page-head h2.m-h1 { text-transform:none; }
.meridian .m-page-head h2.m-h1 img { height:26px; vertical-align:-4px; margin-right:6px; }
@media (max-width:768px) {
  .meridian .m-task-card .m-task-cta { width:100%; text-align:center; }
}

/* ---- Group 4: type sizes and contrast (design review: text too small / pale) ---- */
.meridian table.table > tbody > tr > td,
.meridian .m-table td,
.meridian .m-file-table td { font-size:13.5px; }
.meridian table.table > thead > tr > th,
.meridian .m-table th,
.meridian .m-file-table th,
.meridian table.table.m-ord-table > thead > tr > th { font-size:12px; color:#4b5563; }
.meridian table.table.m-ord-table > tbody > tr > td { font-size:13.5px; }
.meridian .m-order-parties { font-size:12.5px; color:#5b6472; }
.meridian .m-td-date,
.meridian .m-td-type { color:#4b5563; }
/* status / stage / needs pills: larger and easier to hit */
.meridian .m-pill,
.meridian .m-status-pill,
.meridian .m-needs-pill { padding:5px 14px; font-size:12.5px; line-height:1.3; }
.meridian .m-order-badge { font-size:11.5px; }
.meridian .m-open-btn { padding:8px 16px; font-size:13.5px; }
/* orders search: wide enough for its placeholder, visible border */
.meridian .dataTables_filter input { width:280px; max-width:100%; border-color:#C5CBD3; }
.meridian .dataTables_filter { margin-bottom:14px; }

/* ---- Group 7: Documents ---- */
/* thicker brand underline on the active tab (was 2px, easy to miss) */
.meridian .m-doc-tab.nav-link,
.meridian .m-doc-tab { border-bottom:3px solid transparent; margin-bottom:-1px; font-size:14.5px; padding:10px 6px; }
.meridian .m-doc-tab.nav-link.active { border-bottom:3px solid var(--m-green); color:var(--m-ink); }
.meridian .m-doc-tabs { border-bottom:1px solid var(--m-line); }
/* the "?" hint now lives beside the section title instead of floating above the table */
.meridian .m-doc-hint { display:inline-flex; align-items:center; line-height:0; }
.meridian .m-doc-hint img { height:18px; width:18px; opacity:.8; }
.meridian .m-doc-hint:hover img { opacity:1; }
/* one look for every green action button (Upload Here / Share With / New Folder) */
.meridian .share-icon-btn {
  display:inline-flex; align-items:center; gap:6px; margin-left:0;
  min-height:38px; box-sizing:border-box; padding:0 16px; border:1px solid var(--m-green);
  border-radius:10px; background:#fff; color:var(--m-green-ink); font-size:13.5px; font-weight:700; cursor:pointer;
}
.meridian .share-icon-btn img { margin-left:0; height:16px; width:auto; }
.meridian .share-icon-btn:hover { background:var(--m-green); color:var(--m-green-ink); border-color:var(--m-green); }
/* long names / instructions wrap inside their column instead of overflowing or running past the card */
.meridian .m-file-table { table-layout:auto; }
.meridian .m-file-table td { overflow-wrap:anywhere; word-break:break-word; vertical-align:middle; }
.meridian .m-file-table td:last-child { white-space:normal; min-width:150px; line-height:1.4; }

/* ---- Group 8: Inbox ---- */
.meridian .m-chat-card { max-width:none; width:100%; box-sizing:border-box; }
.meridian .m-msg-sortbar select { min-width:0; width:auto; max-width:200px; padding:6px 10px; font-size:13px; }
.meridian .m-msg-sortbar label { font-size:12px; color:#4b5563; }
.meridian .m-msg-bubble .m-msg-users,
.meridian .m-msg-bubble > .m-msg-users { font-size:13.5px; color:#4b5563; }
.meridian .m-msg-subject { font-size:15px; }
.meridian .m-msg-when { font-size:13px; }
.meridian .m-msg-when-date { color:var(--m-ink); }
.meridian .m-msg-when-time { color:#5b6472; }
/* speech-bubble icon recoloured to the brand palette (the PNG is a yellow outline) */
.meridian .m-msg-open { width:30px; height:30px; display:inline-block; position:relative; }
.meridian .m-msg-open img { opacity:0; width:30px; height:30px; position:absolute; inset:0; }
.meridian .m-msg-open::before {
  content:""; position:absolute; inset:0; background-color:var(--m-accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4v-4H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4v-4H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
.meridian .m-msg--unread .m-msg-open::before { background-color:var(--m-green); }
.meridian .m-msg:hover .m-msg-open::before { background-color:var(--m-green-ink); }

/* ---- Group 9: Profile ---- */
.meridian .content-main > .m-form { width:100%; max-width:1040px; }
.meridian .profile-form .m-form-grid { grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
/* classic .profile-form input{width:100%;margin-bottom:25px;green border} bleeds onto the file input: reset it */
.meridian .profile-form input.m-form-file,
.meridian .m-form-file {
  width:100%; margin:0; padding:8px 10px; box-sizing:border-box; background:#fff;
  border:1px dashed #C5CBD3; border-radius:10px; font-size:13px; color:#4b5563;
}
.meridian .m-form-file::file-selector-button {
  margin-right:12px; padding:8px 14px; border:1px solid var(--m-green); border-radius:8px;
  background:#fff; color:var(--m-green-ink); font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
}
.meridian .m-form-file::file-selector-button:hover { background:var(--m-green); }

/* low-contrast "locked / neutral" pills (grey on grey, ~2.4:1) -> readable */
.meridian .m-pill-locked,
.meridian .m-status-pill.m-status-neutral { color:#6b7280; }