/* ============================================================
   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); }

.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; }

/* 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 */
.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); }

/* 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; }

/* ============================================================
   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 {
  position:fixed; display:none; inset:0; z-index:2;
  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; }

/* 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; }
.m-thread-row--out { flex-direction:row-reverse; }
.m-thread-body { max-width:55%; min-width:0; display:flex; flex-direction:column; }

/* 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; }

/* the bubbles — mockup theirBubble (grey) / mineBubble (green) */
.m-bubble {
  display:inline-block; padding:13px 17px; font-size:14px; line-height:1.55;
  color:var(--m-ink); word-break:break-word;
}
.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; }

/* 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;
}

/* ---- 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 anchored to the metrics card (Sales Processor) */
.m-ov-edit {
  position:absolute; right:12px; top:-14px; z-index:2;
}

/* 4 fact cards grid (kitOverview): label above a 23px/800 value */
.m-ov-facts {
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  position:relative; margin:0 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; }
.meridian .buyer-update-icon2 { position:absolute; right:-1px; top:-32px; }
.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); }
.meridian .search-main {
  border:solid 1px var(--m-green); padding:8px 10px; border-radius:8px; margin-left:10px;
  display:inline-flex; align-items:center;
}
.meridian .search-main input { border:none; width:150px; box-shadow:none; padding:0; }
.meridian .search-main input:focus { box-shadow:none; }
.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 */
.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 7px;
  position:relative; top:-1px; margin-left:6px; line-height:1.4;
  width:auto; height:auto; left:auto; text-align:center;
}
/* hide the badge when the count is zero (JS sets 0 then hides .notification-num2) */
.m-td-file .notifications2 { cursor:default; }

/* 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 */
.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));
  gap:18px 20px;
}
/* let a group span the whole row (e.g. notes/textarea) */
.m-form-group--wide { grid-column:1 / -1; }

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

/* 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; }

/* 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;
}

/* 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:center; gap:14px; flex-wrap:wrap;
  margin-top:6px; padding:18px 0 4px;
}
.m-form-actions .m-form-check { flex:1 1 auto; }

/* ------------------------------------------------------------
   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%; }

/* "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) */
.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); }