/* msf-theme.css: the hub's look, on every staff page (November 2026).
 *
 * Calm and one way round: a quiet sidebar on the left in place of the three
 * bars that used to stack on top of every page (the menu, the section's
 * switch, and Back with the breadcrumb); a warm white ground; one typeface;
 * colour only where it means something (green: do or done, amber: due soon,
 * red: late).
 *
 * Linked last in every staff page's <head>, so it wins over the page's own
 * :root and header rules without a flash. crm-common.js draws the sidebar's
 * menu (icons, and the pages of the section you are in) into the same
 * header element the pages already have, so nothing a page relies on moves.
 */

@font-face{font-family:'Apercu';src:url('/fonts/apercu-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Apercu';src:url('/fonts/apercu-medium.woff2') format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:'Apercu';src:url('/fonts/apercu-bold.woff2') format('woff2');font-weight:700 800;font-style:normal;font-display:swap}

/* The two older brand faces, still named across the pages, now point at
   Apercu: one family, three self-hosted files, nothing from another server. */
@font-face{font-family:'PPNeueMontreal';src:url('/fonts/apercu-regular.woff2') format('woff2');font-weight:100 450;font-display:swap}
@font-face{font-family:'PPNeueMontreal';src:url('/fonts/apercu-medium.woff2') format('woff2');font-weight:451 650;font-display:swap}
@font-face{font-family:'PPNeueMontreal';src:url('/fonts/apercu-bold.woff2') format('woff2');font-weight:651 900;font-display:swap}
@font-face{font-family:'CalSans';src:url('/fonts/apercu-medium.woff2') format('woff2');font-weight:100 900;font-display:swap}

/* ─── Tokens ─────────────────────────────────────────────────────────────── */
html:root{
  --brand:#0B7A43;--brand-dark:#075C32;--brand-light:#E8F3EC;--brand-tint:#F2F8F4;
  --navy:#18211C;--heading:#18211C;--text:#1F2A24;--muted:#5F6B64;--muted-light:#7C8781;
  --border:#E6E8E2;--border-strong:#D6DAD3;--surface:#F7F7F3;--bg:#FAFAF7;--card:#fff;
  --red:#B42318;--amber:#B45309;--blue:#2F6FB3;--purple:#6E56CF;--teal:#0F766E;
  --radius:12px;
  --shadow-sm:0 1px 2px rgba(24,33,28,.05);
  --shadow:0 1px 2px rgba(24,33,28,.05),0 4px 14px rgba(24,33,28,.04);
  --shadow-md:0 16px 40px rgba(24,33,28,.14);
  --msf-font:'Apercu',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --msf-side:244px;
}
html body{font-family:var(--msf-font);color:var(--text);background:var(--bg);letter-spacing:-.003em}
html body h1,html body h2,html body h3,html body h4{font-family:var(--msf-font);letter-spacing:-.015em;color:var(--heading)}
html body button,html body input,html body select,html body textarea{font-family:inherit}
::selection{background:#D3EADC;color:#0B3D22}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Cards, inputs and buttons the pages share: softer edges, one green. */
html body .card,html body .panel,html body .section-card{border-color:var(--border);box-shadow:none}
html body input[type=text],html body input[type=search],html body input[type=email],html body input[type=tel],html body input[type=number],html body input[type=date],html body select,html body textarea{border-color:var(--border-strong)}
html body .btn-primary,html body .btn.pri,html body .btn.primary{background:var(--brand);border-color:var(--brand)}

/* ─── The sidebar (a computer or a tablet) ───────────────────────────────── */
@media (min-width:769px){
  html body:has(.app-header){padding-left:var(--msf-side)!important}
  html body .app-header{
    position:fixed!important;top:0!important;left:0!important;bottom:0!important;
    width:var(--msf-side)!important;height:auto!important;max-width:none!important;margin:0!important;
    flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:2px!important;
    padding:16px 12px 12px!important;background:#F3F4EF!important;
    border:0!important;border-right:1px solid var(--border)!important;border-radius:0!important;box-shadow:none!important;
    overflow-y:auto;overflow-x:hidden;z-index:120!important;box-sizing:border-box!important;
  }
  /* The logo, then search and Ask, then the menu, then the rest at the foot. */
  html body .app-header .logo{order:1;width:auto!important;margin:0 0 12px!important;padding:2px 8px;gap:10px!important}
  html body .app-header .logo-name{font-size:14.5px!important;font-weight:700!important;color:var(--heading)!important;letter-spacing:-.01em}
  html body .app-header .logo-sub{font-size:11.5px!important;text-transform:none!important;letter-spacing:0!important;font-weight:400!important;color:var(--muted)!important}
  html body .app-header .logo-mark img{width:30px!important;height:30px!important}
  html body .app-header .header-actions{display:contents!important}
  html body .app-header .gs-trigger{
    order:2;display:flex!important;align-items:center;gap:8px;width:100%;margin:0 0 4px!important;
    padding:9px 10px!important;border:1px solid var(--border-strong)!important;border-radius:9px!important;
    background:#fff!important;color:var(--muted)!important;font-size:13.5px!important;text-align:left;box-shadow:none!important;min-height:38px
  }
  html body .app-header .gs-trigger kbd{margin-left:auto;font:inherit;font-size:11px;border:1px solid var(--border);border-radius:5px;padding:0 5px;background:none;color:var(--muted)}
  html body .app-header .msf-ask{order:3}
  html body .app-header .app-nav{order:4;display:flex!important;flex-direction:column!important;gap:1px!important;flex:1 0 auto!important;min-height:0;margin:10px 0 8px!important;overflow:visible!important}
  html body .app-header .btn-enquiry{order:5}
  html body .app-header .crm-rec-btn{order:6}
  html body .app-header .msf-sb-foot{order:7}
  /* Anything else a page put in its header sits at the foot, quietly. */
  html body .app-header > *:not(.logo):not(.app-nav):not(.header-actions):not(.msf-ask):not(.msf-sb-foot){order:8}
  html body .app-header .crm-ham{display:none!important}
  #crmSubnav,.crm-subnav{display:none!important}
  /* A list page needs no breadcrumb: the sidebar says where you are. A record
     keeps one quiet "‹ Clients" back to its list. */
  html body .wf-bar{background:transparent!important;border:0!important;min-height:0!important;padding:18px 40px 0!important;max-width:1180px;box-sizing:border-box}
  html:not(.msf-record) body .wf-bar{display:none!important}
  html body .wf-bar .wf-trail{display:none!important}
  html body .wf-bar .wf-back{border:0!important;background:none!important;padding:0!important;height:auto!important;color:var(--muted)!important;font-weight:500!important;font-size:13px!important}
  html body .wf-bar .wf-back:hover{color:var(--heading)!important}
  /* Rows that stuck under the old 58px header now stick to the top. */
  html body .contact-header,html body .deal-header,html body .page-hd,html body .bar,html body .bulk,html body .proposal-shell .header{top:0!important}
  #msfNoAccess{left:var(--msf-side)!important;top:0!important}
  /* A Hub tool's strip with its own tabs reads as the page's tabs. */
  html body .msf-toolbar{background:transparent!important;border-bottom:1px solid var(--border)!important;padding:0 40px!important}
  /* Ask lives in the sidebar on a computer, not in a bubble over the page. */
  #crmAiFab{display:none!important}
}

/* The menu itself (drawn by crm-common.js). Prefixed to beat the old
   header's .nav-link rules, which some pages still carry. */
html body .app-header .msf-nav{margin:0!important;white-space:normal!important}
html body .app-header .msf-nav,html body .app-header .msf-nav.active{padding:8px 10px!important;font-size:14px!important;color:#3E4943!important;background:none!important;font-weight:500!important;border-radius:8px!important}
html body .app-header .msf-nav:hover{background:#E9EBE5!important;color:var(--heading)!important}
html body .app-header .msf-nav.on{background:#fff!important;color:var(--heading)!important;font-weight:600!important;box-shadow:0 1px 2px rgba(24,33,28,.07)!important}
html body .app-header .btn-enquiry svg,html body .app-header .gs-trigger svg{width:17px;height:17px;flex:none}
.msf-nav{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:8px;color:#3E4943;font-size:14px;font-weight:500;text-decoration:none;line-height:1.25;min-height:36px;box-sizing:border-box}
.msf-nav:hover{background:#E9EBE5;color:var(--heading)}
.msf-nav.on{background:#fff;color:var(--heading);font-weight:600;box-shadow:0 1px 2px rgba(24,33,28,.07)}
.msf-nav svg{width:18px;height:18px;flex:none;color:#5F6B64}
.msf-nav.on svg{color:var(--brand)}
.msf-nav .n{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted)}
.msf-sub{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px 20px;padding-left:9px;border-left:1px solid #DCDFD8}
.msf-sub a{display:block;padding:6px 10px;border-radius:7px;color:var(--muted);font-size:13.5px;text-decoration:none;line-height:1.25}
.msf-sub a:hover{color:var(--heading);background:#E9EBE5}
.msf-sub a.on{color:var(--heading);font-weight:600;background:#fff;box-shadow:0 1px 2px rgba(24,33,28,.06)}
.msf-sub [data-admin-only][hidden]{display:none!important}
.msf-sub a{display:flex!important;align-items:center}
.msf-sub .cs-n{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted);background:none!important}
.msf-sub .cs-n.warn{color:#8A4B06}
.msf-ask{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--brand-dark);font:600 13.5px/1.2 var(--msf-font);cursor:pointer;text-align:left;min-height:36px}
.msf-ask:hover{background:#E4EFE7}
.msf-ask svg{width:17px;height:17px;flex:none}
html body .crm-bell{color:#3E4943}
html body .crm-bell svg{width:18px;height:18px;display:block}

/* The foot: New proposal, Record, and you. */
@media (min-width:769px){
  html body .app-header .btn-enquiry{
    display:flex!important;align-items:center;gap:8px;width:100%;margin:0!important;padding:8px 10px!important;
    border:0!important;border-radius:8px!important;background:none!important;box-shadow:none!important;
    color:#3E4943!important;font-size:13.5px!important;font-weight:500!important;min-height:36px;box-sizing:border-box
  }
  html body .app-header .btn-enquiry:hover{background:#E9EBE5!important;color:var(--heading)!important}
  html body .app-header .crm-rec-btn{
    display:flex!important;width:100%;height:auto!important;min-height:36px;padding:8px 10px!important;
    border:0!important;border-radius:8px!important;background:none!important;color:#3E4943!important;font-weight:500!important;font-size:13.5px!important;box-sizing:border-box
  }
  html body .app-header .crm-rec-btn:hover{background:#E9EBE5!important}
  html body .app-header .crm-rec-btn .lb{display:inline!important}
  .msf-sb-foot{display:flex;align-items:center;gap:10px;padding:10px 6px 0;margin-top:6px;border-top:1px solid #E1E4DD}
  .msf-sb-foot .msf-me{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .msf-sb-foot .user-menu{left:0!important;right:auto!important;top:auto!important;bottom:44px!important}
  .msf-sb-foot .crm-bell{width:34px!important;height:34px!important;border-color:transparent!important;background:none!important}
  .msf-sb-foot .crm-bell:hover{background:#E9EBE5!important}
  /* The bell's list opens beside the sidebar, not off its edge. */
  .msf-sb-foot .crm-npanel{position:fixed!important;left:calc(var(--msf-side) + 8px)!important;right:auto!important;top:auto!important;bottom:12px!important}
}

/* ─── A phone ────────────────────────────────────────────────────────────── */
@media (max-width:768px){
  html body .app-header .gs-trigger::before,html body .app-header .btn-enquiry::before{content:none!important}
  html body .app-header .gs-trigger svg,html body .app-header .btn-enquiry svg{width:18px;height:18px;display:block}
  html body .app-header .btn-enquiry{background:var(--brand)!important;color:#fff!important}
  html body .app-header .btn-enquiry>span,html body .app-header .gs-trigger>span{display:none!important}
  html body .app-header .msf-ask{display:none!important}
  html body .crm-bell svg{width:18px;height:18px;display:block}
  html body .app-header{background:#fff!important;border-bottom:1px solid var(--border)!important;box-shadow:none!important}
  html body .wf-bar{background:transparent!important;border-bottom:0!important}
  html:not(.msf-record) body .wf-bar{display:none!important}
  .msf-sb-foot{display:contents}
  .msf-sb-foot .msf-me{display:none}
  html body .crm-bottombar{background:rgba(255,255,255,.98)!important;box-shadow:none!important;border-top:1px solid var(--border)!important}
  html body .crm-bb-item{color:#6B766F!important;gap:3px!important}
  html body .crm-bb-item.active{color:var(--brand)!important}
  html body .crm-bb-ic svg{width:22px;height:22px;display:block}
  html body .crm-bb-lb{font-size:11px!important;font-weight:600!important}
  html body .crm-subnav{background:transparent!important;border-bottom:1px solid var(--border)!important}
  #crmAiFab{background:#fff!important;color:var(--brand)!important;border:1px solid var(--border)!important;box-shadow:0 6px 18px rgba(24,33,28,.14)!important}
}

/* The quick add: one line until you start, then who, when and which client. */
form.ta:not(:focus-within):has(.ta-t:placeholder-shown) .ta-row,form.ta:not(:focus-within):has(.ta-t:placeholder-shown) .ta-hint{display:none!important}
html body form.ta{border-color:var(--border)!important;box-shadow:none!important;border-radius:12px!important}
html body .ta-top button{background:var(--brand)!important;border-radius:9px!important}

/* ─── Page headers: light, not the old dark banners ──────────────────────── */
html body .hub-hero,html body .hero:not(.login-hero){background:transparent!important;color:var(--heading)!important;border:0!important;box-shadow:none!important;border-radius:0!important}
html body .hub-hero{padding:30px 40px 0!important;border-bottom:0!important}
html body .hub-hero::after,html body .hero::after{display:none!important}
html body .hub-mark{display:none!important}
html body .hub-name,html body .hero h1{color:var(--heading)!important;font-family:var(--msf-font)!important;font-weight:600!important;font-size:clamp(22px,2.4vw,26px)!important;letter-spacing:-.02em}
html body .hub-sub{color:var(--muted)!important;font-size:14px!important}
html body .hub-btn{background:#fff!important;border:1px solid var(--border-strong)!important;color:var(--heading)!important;box-shadow:none!important}
html body .hub-btn:hover{border-color:#B9BFB6!important}
html body .hub-btn.primary{background:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important}
html body .hub-pulse{gap:12px!important;padding:20px 0 18px!important}
html body .pulse{background:#fff!important;border:1px solid var(--border)!important;border-radius:12px!important;box-shadow:none!important;transform:none!important}
html body .pulse:hover{border-color:var(--border-strong)!important}
html body .pulse.on{border-color:var(--brand)!important;box-shadow:0 0 0 1px var(--brand) inset!important}
html body .pulse-v{color:var(--heading)!important;font-family:var(--msf-font)!important;font-weight:600!important}
html body .pulse-v small{color:var(--muted)!important}
html body .pulse-k{color:var(--muted)!important;text-transform:none!important;letter-spacing:0!important;font-size:13px!important}
html body .pulse-n{color:var(--muted)!important}
html body .pulse-n.bad{color:#A3271B!important}
html body .pulse-n.warn{color:#8A4B06!important}
html body .pulse-n.ok,html body .pulse-n.good{color:#0B6B3A!important}
/* The client page's header card */
html body .hero{padding:4px 0 6px!important;margin-bottom:16px!important}
html body .hero .pill{background:#F2F4EF!important;color:#3E4943!important;border-color:transparent!important}
html body .hero .pill.won{background:#E7F4EC!important;color:#0B6B3A!important}
html body .hero .stats{border-top:1px solid var(--border)!important}
html body .hero .stat-k{color:var(--muted)!important}
html body .hero .stat-v{color:var(--heading)!important}
html body .hero .stat-v.bad,html body .hero .stat-sub{color:#A3271B!important}
html body .hero a,html body .hero .meta,html body .hero span{color:inherit}
/* Inbox's search box sat in the dark banner */
html body .ask-bar{background:#fff!important;border:1px solid var(--border-strong)!important;box-shadow:none!important}
html body .ask-bar:focus-within{border-color:var(--brand)!important}
html body .ask-in{color:var(--heading)!important}
html body .ask-in::placeholder{color:var(--muted-light)!important}
html body .ask-modes{background:#F2F4EF!important}
html body .ask-mode{color:var(--muted)!important}
html body .ask-mode.on{background:#fff!important;color:var(--heading)!important;box-shadow:0 1px 2px rgba(24,33,28,.08)}
html body .ask-go{background:var(--brand)!important;color:#fff!important}
html body .ask-hint{color:var(--muted)!important}
html body .ask-hint b{color:var(--heading)!important;border-bottom-color:var(--border-strong)!important}
html body .hero .hero-meta,html body .hero .hero-meta *{color:var(--muted)}
/* A record that draws its own way back needs no second one. */
html.msf-record body:has(.back) .wf-bar,html.msf-record body:has(.back-link) .wf-bar{display:none!important}

/* Wide tables scroll inside their card, never the page. */
html body #ctList{overflow-x:auto}
/* Meetings' ask box sat on a dark panel. */
html body .askall{background:#fff!important;border:1px solid var(--border)!important;color:var(--heading)!important}
html body .askall *{color:inherit}
html body .askall input{background:#fff!important;border:1px solid var(--border-strong)!important;color:var(--heading)!important}
html body .askall a{color:var(--brand)!important}

/* ─── Pop-ups, the bell, Ask ─────────────────────────────────────────────── */
/* The bell's list: quiet rows, a dot instead of an emoji, no shouting labels. */
html body .crm-npanel{border:1px solid var(--border)!important;border-radius:12px!important;box-shadow:var(--shadow-md)!important}
html body .crm-ngrp.unread{background:none!important}
html body .crm-nrow:hover{background:#F7F7F3!important}
html body .crm-nrow .ic{font-size:0!important;width:8px!important;height:8px!important;min-width:8px;border-radius:50%;background:#C9CEC6;margin:7px 2px 0 4px;flex:none}
html body .crm-ngrp.unread .crm-nrow .ic{background:var(--brand)}
html body .crm-nrow .lb{text-transform:none!important;letter-spacing:0!important;font-weight:500!important;font-size:12px!important}
/* Ask MSF: a light header like every other panel. */
html body .mai-ph{background:#fff!important;color:var(--heading)!important;border-bottom:1px solid var(--border)}
html body .mai-ph *{color:inherit}
html body .mai-ph button{color:var(--muted)!important}
/* The task and job panel. */
/* Modals: one font, softer labels. */
html body .modal,html body .modal-box,html body .tp,html body .mai-ov,html body .gs-box,html body [role=dialog]{font-family:var(--msf-font)}
/* Email-list chips (Brevo) were bright indigo on every row. */
html body .brevo-btn{background:#fff!important;color:var(--heading)!important;border:1px solid var(--border-strong)!important}
html body .brevo-bar{background:#F2F4EF!important;color:#3E4943!important;border-color:transparent!important}
html body .brevo-bar button{color:#3E4943!important}

/* ─── Colour that means something ────────────────────────────────────────── */
.msf-late{background:#FDECEA;color:#A3271B}
.msf-soon{background:#FEF3E2;color:#8A4B06}
.msf-ok{background:#EEF1EC;color:#3E4943}
.msf-done{background:#E7F4EC;color:#0B6B3A}

/* A page or action someone has not been given stays hidden, whatever the
   sidebar's own display rules say (crm-common.js marks it). */
html body .app-header [data-msf-blocked],html body [data-msf-blocked]{display:none!important}

/* Emoji-only icon boxes (crm-common.js marks them): gone, the words remain. */
html body [data-msf-emoji]{display:none!important}

/* The floating + (quick add) on Deals, a deal, a contact and Numbers covered
   what was under it; on a computer those pages have their own add buttons. */
@media (min-width:769px){ html body .qfab-wrap{display:none!important} }

/* Numbers: four plain cards, not four colours. */
html body .kpi-card::after{display:none!important}
html body .kpi-card{box-shadow:none!important;border:1px solid var(--border)!important;transform:none!important}
html body .kpi-card .kpi-value{color:var(--heading)!important;font-weight:600!important;font-size:28px!important}
html body .kpi-label{text-transform:none!important;letter-spacing:0!important;font-size:13px!important;font-weight:500!important}
/* Meetings' ask box: its hint was white on white. */
html body .askall input::placeholder{color:var(--muted-light)!important}
html body .askall .linktiny{color:var(--brand)!important}