/* ============================================================================
   mb-chrome.css — MagicBus shared navigational chrome (the framework).

   ONE source of truth for the app's top toolbars across every surface (the tour
   planner, DCRM/cadence, and anything added later). Consume it by linking this
   file and using the .mb-* classes below; theme it by overriding the tokens.

   Structure:
     .mb-bar            full-bleed toolbar shell (flush, sticky)
       .mb-bar-inner    content column inside the shell (align to page content)
         .mb-bar-row    a horizontal row of controls (wraps)
     .mb-ctl            a control: button / chip / dropdown / toggle segment
       .mb-ctl.active / .mb-ctl--on    selected → white
       .mb-ctl--accent                 primary CTA (green)
       .mb-ctl--input                  white text input sized like a control
     .mb-seg            a segmented group of connected .mb-ctl toggles
       .mb-ctl-badge    a count pill inside a control
     .mb-bar-label      a muted label in the bar
   ============================================================================ */

:root{
  --mb-bar-bg:        #1B4F9A;   /* toolbar shell */
  --mb-ctl-bg:        #163F7A;   /* control at rest (navy) */
  --mb-ctl-bg-hover:  #234f8f;
  --mb-ctl-fg:        #ffffff;
  --mb-ctl-on-bg:     #ffffff;   /* selected control */
  --mb-ctl-on-fg:     #163F7A;
  --mb-ctl-h:         28px;
  --mb-ctl-radius:    7px;
  --mb-ctl-fs:        12px;
  --mb-ctl-px:        12px;
  --mb-bar-pad-x:     18px;
  --mb-border:        rgba(255,255,255,.16);
  --mb-border-hover:  rgba(255,255,255,.30);
  --mb-accent:        #1AA872;   /* primary CTA (e.g. Save) */
  --mb-accent-hover:  #158a5d;
  --mb-input-fg:      #153F7C;
  --mb-label-fg:      rgba(255,255,255,.72);
}

/* ── Shell ─────────────────────────────────────────────────────────────────── */
.mb-bar{ background:var(--mb-bar-bg); color:#fff; padding:9px var(--mb-bar-pad-x) 11px;
  position:sticky; top:0; z-index:200; }
.mb-bar-inner{ display:flex; flex-direction:column; gap:8px; }
.mb-bar-row{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.mb-bar-label{ font-size:var(--mb-ctl-fs); color:var(--mb-label-fg); white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px; }

/* ── Control (button / chip / dropdown / toggle) ───────────────────────────── */
.mb-ctl{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:var(--mb-ctl-h); padding:0 var(--mb-ctl-px); box-sizing:border-box;
  font:inherit; font-size:var(--mb-ctl-fs); font-weight:600; line-height:1; white-space:nowrap;
  border-radius:var(--mb-ctl-radius); border:1px solid var(--mb-border);
  background:var(--mb-ctl-bg); color:var(--mb-ctl-fg); cursor:pointer; box-shadow:none;
  transition:background .12s, color .12s, border-color .12s; }
.mb-ctl:hover:not(:disabled){ background:var(--mb-ctl-bg-hover); border-color:var(--mb-border-hover); color:#fff; }
.mb-ctl:disabled{ opacity:.4; cursor:default; }
.mb-ctl.active, .mb-ctl--on{ background:var(--mb-ctl-on-bg); border-color:var(--mb-ctl-on-bg); color:var(--mb-ctl-on-fg); }

/* Primary CTA */
.mb-ctl--accent{ background:var(--mb-accent); border-color:var(--mb-accent); color:#fff; font-weight:700; }
.mb-ctl--accent:hover:not(:disabled){ background:var(--mb-accent-hover); border-color:var(--mb-accent-hover); color:#fff; }

/* Text input shaped like a control */
.mb-ctl--input{ background:#fff; color:var(--mb-input-fg); border-color:rgba(255,255,255,.5);
  font-weight:600; cursor:text; justify-content:flex-start; }
.mb-ctl--input::placeholder{ color:#8CA0BE; }
.mb-ctl--input:focus{ border-color:#fff; outline:none; box-shadow:0 0 0 2px rgba(255,255,255,.30); }

/* Native <select> as a control */
select.mb-ctl{ -webkit-appearance:none; appearance:none; padding-right:26px;
  background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:calc(100% - 14px) center,calc(100% - 9px) center; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }

/* ── Segmented group (connected toggles: County | Metro | On My Way) ───────── */
.mb-seg{ display:inline-flex; align-items:stretch; height:var(--mb-ctl-h);
  border-radius:var(--mb-ctl-radius); overflow:hidden; border:1px solid var(--mb-border); }
.mb-seg > .mb-ctl{ height:100%; border:none; border-radius:0; }
.mb-seg > .mb-ctl + .mb-ctl{ border-left:1px solid rgba(255,255,255,.22); }

/* ── Count/badge pill inside a control ─────────────────────────────────────── */
.mb-ctl-badge{ display:inline-block; min-width:16px; text-align:center; line-height:15px;
  font-size:11px; font-weight:800; padding:0 5px; border-radius:5px;
  background:rgba(255,255,255,.20); color:#fff; }
.mb-ctl.active .mb-ctl-badge, .mb-ctl--on .mb-ctl-badge{ background:rgba(22,63,122,.14); color:var(--mb-ctl-on-fg); }

/* ============================================================================
   STANDARD TABLE — the app's one table look.

   Established from the data-warehouse tables and adopted everywhere: the visit
   log, the funnel/target lists, Global > Users. If you are adding a table, use
   .mb-table and do not invent a second look.

     row 1 IS the header — the tinted band carries the section name, so there is
     never a separate title bar stacked above it (that reads as a double toolbar)
     .mb-t-n     leading row-number column (01, 02 …)
     .mb-t-r     right-aligned / numeric cell, tabular figures
     .mb-t-act   trailing action cell, shrinks to its button
     .nm         the row's name cell — the one bold thing in the row
   ========================================================================== */
.mb-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.mb-table thead th{background:#CBD8EA;color:#2E6BD6;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;text-align:left;padding:6px 8px;border-bottom:1px solid #A6BAD6;white-space:nowrap;}
/* mb-rehead — a second header band inside the body, for a table with two sections */
.mb-table tr.mb-rehead th{background:#CBD8EA;color:#1B2B41;font-size:13px;font-weight:800;
  text-align:left;padding:8px;border-top:1px solid #A6BAD6;border-bottom:1px solid #A6BAD6;white-space:nowrap;}
.mb-table tr.mb-rehead th.mb-t-r{text-align:right;}   /* numeric headings sit over their values */
.mb-table td{padding:5px 8px;border-bottom:1px solid #EFF3F9;white-space:nowrap;color:#3A4759;}
.mb-table tbody tr:nth-child(even) td{background:#F8FAFD;}
.mb-table tbody tr:hover td{background:#EDF4FF;}
.mb-table .nm{font-weight:700;color:#16202E;}
/* mb-sect — a hairline rule where a new group starts, for a table that is grouped
   but does not need a labelled band (the rows already carry the group's name). */
.mb-table tr.mb-sect > td{border-top:2px solid #A6BAD6;}
.mb-table .mb-t-n{width:34px;color:#5B6B85;font-weight:700;font-variant-numeric:tabular-nums;}
.mb-table .mb-t-r{text-align:right;font-variant-numeric:tabular-nums;}
.mb-table .mb-t-act{text-align:right;width:1%;}
.mb-table thead .mb-t-act{padding:5px 8px;}

/* A full-height screen between the app's header and its bottom bar. Pages that
   swap between two views (a list and a card) give each view this class so both
   occupy exactly the same box and neither can shift the other. */
.t2-screen{position:fixed;left:0;right:0;background:#EEF2F8;}
.t2-screen[hidden]{display:none;}

/* ============================================================================
   THE STOP CARD — .mb-stop

   One stop on a tour, and the drive strip between two of them. The layout is
   fixed: a green rail and the clock on the left (arrive over the stop's number
   over depart), the property in the middle, the people underneath a hairline.
   Colour carries meaning — navy is time, green is a person, blue is something
   you can act on.
   ========================================================================== */
.mb-stop{font-size:13px;display:grid;grid-template-columns:60px 1fr;background:#fff;border:1px solid #e4eaf2;
  border-left:4px solid #1d9e75;border-radius:12px;overflow:hidden;margin:0 8px 5px;}
.mb-stop-when{background:#f6f9fc;border-right:1px solid #e4eaf2;padding:9px 4px;text-align:center;}
.mb-stop-t{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-weight:700;font-size:15px;
  color:#1b4f9a;font-variant-numeric:tabular-nums;}
.mb-stop-t.out{font-size:13px;color:#61708c;}
.mb-stop-lab{font-size:8.5px;letter-spacing:.06em;color:#8A97AC;font-weight:700;line-height:1.2;}
.mb-stop-n{width:24px;height:24px;line-height:24px;border-radius:50%;background:#1b4f9a;color:#fff;
  font-family:ui-monospace,Menlo,monospace;font-weight:800;font-size:12px;margin:5px auto;}
.mb-stop-body{margin:6px 12px 8px 10px;min-width:0;}
.mb-stop-meta{display:flex;align-items:flex-start;gap:10px;font-size:12px;line-height:1.2;font-weight:600;color:#5b6b85;}
.mb-stop-addr{font-size:14px;font-weight:700;color:#1a1a18;line-height:1.5;}
.mb-stop-who .rc-act{min-height:32px;min-width:30px;}
/* the two ⋮ menus a stop carries: the property (left) and the agent (right) */
.mb-stop-menu{flex:none;width:30px;height:30px;border:1px solid #C9D6EA;border-radius:8px;background:#fff;
  color:#5B6B85;font:800 15px/1 'Segoe UI',system-ui;cursor:pointer;}
.mb-stop-menu.agent{border-color:#BFE3CD;color:#1F9E56;}
.mb-imenu{position:absolute;z-index:60;min-width:180px;width:max-content;max-width:230px;background:#fff;border:1px solid #D7E2F2;
  border-radius:10px;box-shadow:0 10px 28px rgba(10,25,60,.25);padding:4px;}
.mb-imenu[hidden]{display:none;}
.mb-imenu a,.mb-imenu button{display:block;width:100%;text-align:left;border:0;background:none;
  font:inherit;font-size:13.5px;font-weight:700;color:#1B3E78;text-decoration:none;padding:9px 10px;
  border-radius:7px;cursor:pointer;}
.mb-imenu a:active,.mb-imenu button:active{background:#EDF4FF;}
.mb-stop-who{display:flex;align-items:center;gap:8px;margin-top:5px;padding-top:5px;min-height:35px;
  border-top:1px solid #eef1f6;}
.mb-stop-agent{flex:1 1 auto;min-width:0;text-align:right;font-size:13px;font-weight:700;color:#159c6e;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mb-stop.iscall{background:#fffdf7;border-left-color:#a5670a;}
.mb-stop.iscall .mb-stop-when{background:#fdf8ee;}
/* a call has no stop number — a dashed ring with a handset stands in its place */
.mb-stop-call-ring{width:24px;height:24px;line-height:21px;border-radius:50%;border:1.5px dashed #a5670a;
  color:#a5670a;font-size:12px;margin:5px auto;}
.mb-stop-toofar{display:inline-block;margin-top:6px;background:#F6E7C1;color:#8a5a00;border-radius:999px;
  padding:3px 10px;font-size:12px;font-weight:800;}
/* the call-instead flag sits at the top right of the card, as on the planner */
.mb-stop-call-lab{flex:0 0 auto;order:2;display:inline-flex;align-items:center;gap:4px;font-size:11.5px;
  font-weight:600;color:#1b4f9a;white-space:nowrap;}
.mb-stop-call-lab.on{color:#a5670a;}
.mb-stop-call-lab input{width:16px;height:16px;accent-color:#2E6BD6;opacity:1;}
.mb-stop-call-lab input:disabled{opacity:1;}
.mb-stop-rule{display:none;}
.mb-drive{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 22px;font-size:11px;color:#7C8AA3;font-variant-numeric:tabular-nums;}
.mb-drive span{white-space:nowrap;}

/* ============================================================================
   THE DOORSTEP HEROES — .mb-hero

   At the curb there are exactly two things: the property being visited and the
   agent being met. Each gets its own block with its name at full size, its own
   ⋮ and its own action — nothing else competes with them.
   ========================================================================== */
.mb-hero{background:#fff;border:1px solid #E4EAF2;border-radius:12px;margin:0 0 10px;padding:12px 14px;}
.mb-hero-kind{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#8A97AC;font-weight:800;}
.mb-hero-name{font-size:22px;font-weight:800;color:#141E33;line-height:1.15;margin-top:2px;}
.mb-hero-name.agent{color:#1F9E56;}
.mb-hero-sub{font-size:13.5px;color:#5B6B85;font-weight:600;margin-top:3px;}
.mb-hero-acts{display:flex;align-items:center;gap:8px;margin-top:10px;}
.mb-hero-acts .rc-act{min-height:38px;}

/* ============================================================================
   PHONE CARD + THUMB ACTION — .wl-card / .rc-act

   The phone's one card look (a .mb-table lives inside it) and the one action
   button on a row. Shared here so every phone surface — the worklists, the
   contacts search, the tour viewer — is the same object, not a copy.
   ========================================================================== */
.wl-card{margin:10px;background:#fff;border:1px solid #E4EAF2;border-radius:12px;overflow:hidden;}
.wl-card .mb-table td{white-space:normal;padding:6px 8px;}
.wl-card .mb-table td.mb-t-act{white-space:nowrap;}
.wl-sub{font-size:11.5px;color:#61708C;}
/* a name that opens a record reads as a link — the .mb-table .nm colour would
   otherwise win on specificity and leave every list black-on-white */
.mb-table a.rc-name, a.rc-name{color:#2E6BD6;text-decoration:none;}
.empty{padding:60px 30px;text-align:center;color:#61708C;}
.empty .big{font-size:36px;margin-bottom:10px;}
.empty h3{color:#141E33;font-size:16px;margin-bottom:6px;}
.empty p{font-size:13.5px;line-height:1.5;}
.rc-act{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:70px;min-height:38px;
  border:0;border-radius:9px;font:inherit;font-size:13px;font-weight:800;color:#fff;text-decoration:none;
  padding:0 12px;background:#2E6BD6;cursor:pointer;}
.act-plain{background:#fff;border:1px solid #C9D9F0;color:#1B3E78;}
/* Icon-only buttons stay tall enough for a thumb but give their width back to the
   name and company, which is what the row is actually for. */
.mini{min-width:32px;min-height:38px;font-size:15px;padding:0 2px;background:#fff;border:1px solid #C9D9F0;color:#1B3E78;}
.mb-table td.mb-t-act{padding-left:4px;padding-right:6px;}
.mb-table td.mb-t-act .rc-act + .rc-act{margin-left:3px;}
.mb-table tbody td:first-child:has(.mini){padding-right:4px;}

/* ============================================================================
   STANDARD TWO-COLUMN FIELD BLOCK — .mb-2col

   A table, deliberately: a cell border always spans the full row height, which
   is the one thing flex columns will not promise. The rule between two field
   columns kept ending wherever the shorter column ran out of fields.
   ========================================================================== */
.mb-2col{border-collapse:collapse;}
.mb-2col>tbody>tr>td{vertical-align:top;padding:0;}
.mb-2col>tbody>tr>td.mb-2col-l{padding-right:30px;border-right:1px solid #DCE6F4;}
.mb-2col>tbody>tr>td.mb-2col-r{padding-left:30px;}

/* ============================================================================
   CONTENT WIDTH — the default for every table and control row in this app.

   A table is as wide as its contents: as narrow as possible WITHOUT WRAPPING,
   left justified. If the contents are wide, the table is wide and the pane
   scrolls. Never clamp a table to fit its container.

     container   width:max-content   → as wide as its widest row, no wider
     rows        no width            → they stretch to the container, so the
                                       rows of one table share one width
     controls    natural size        → selects via sizeSelectToWidest (a native
                                       select sizes to its CURRENT value, not
                                       its widest option), inputs at their own
                                       intrinsic width, never width:100%
     prose       width:0;min-width:100%  → takes the resolved width without
                                       voting on it, so a paragraph wraps
                                       instead of stretching the table

   A pixel width here is a bug unless the comment beside it says why. Every
   clamp costs a re-clamp the next time anything moves.
   ========================================================================== */