/* BMS — one stylesheet for every page.
 *
 * The old system had the shell CSS pasted into all 48 pages. Changing the
 * sidebar meant editing 48 files, so in practice it never got changed and the
 * pages drifted apart. Everything shared lives here now; a page only adds CSS
 * for something only that page has.
 */

:root{
  /* 0215: the approved look -- cool greys, navy menu, blue accent. A company's
     own colours (Settings) still replace --brand, --dark and --paper. */
  --paper:#f3f5f9;
  --ink:#0f172a;
  --ink-2:#475569;
  --ink-3:#8a94a6;
  --line:#e3e8f0;
  --line-2:#eef1f6;
  --card:#ffffff;
  --brand:#2563eb;
  --brand-dark:#1d4ed8;
  --brand-soft:#eaf1ff;
  --dark:#0b1f44;
  --dark-2:rgba(255,255,255,.08);
  --side-ink:#c5d0e6;
  --good:#16a34a;
  --warn:#b45309;
  --bad:#dc2626;
  --sidebar-w:236px;
  --radius:12px;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.05);
}

*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
     background:var(--paper);color:var(--ink);font-size:14px}

/* ---------------------------------------------------------------- shell -- */
.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh;
       background:linear-gradient(to right,var(--dark) var(--sidebar-w),transparent var(--sidebar-w))}
.sidebar{background:var(--dark);padding:16px 0 14px;display:flex;flex-direction:column;
         overflow-y:auto;position:sticky;top:0;height:100vh;scrollbar-width:thin;
         scrollbar-color:rgba(255,255,255,.18) transparent}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:2px 16px 16px}
/* Two kinds of brand mark. A client with a logo gets the image; one without
   gets their initials on the accent colour, which is why `brand_initials`
   exists. Same box either way, so the sidebar does not shift. */
.brand-mark{width:36px;height:36px;border-radius:9px;background:var(--brand);color:#fff;
            display:grid;place-items:center;font-weight:800;font-size:14px;
            flex:0 0 auto;overflow:hidden}
img.brand-mark{background:#fff;object-fit:contain;padding:3px}
.brand-text{min-width:0}
.brand-name{color:#fff;font-weight:700;font-size:14.5px;line-height:1.2}
.brand-sub{color:var(--side-ink);opacity:.75;font-size:10.5px;margin-top:2px}
.sidebar [hidden]{display:none !important}
[data-nav]{padding:0 10px}

/* The twelve groups (0215). A group is a button; its pages open under it. */
.nav-set{margin:1px 0}
.nav-head,.nav-top{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;
  border:0;border-radius:9px;background:none;color:var(--side-ink);font:inherit;
  font-size:13.5px;font-weight:500;text-align:left;cursor:pointer;text-decoration:none}
.nav-head span,.nav-top span{flex:1;min-width:0}
.nav-head:hover,.nav-top:hover{background:var(--dark-2);color:#fff}
.sidebar .ico{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-head .chev{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:transform .15s}
.nav-set.open .chev{transform:rotate(90deg)}
.nav-set.here > .nav-head{color:#fff}
.nav-top.on{background:var(--brand);color:#fff;font-weight:600;
  box-shadow:0 4px 12px rgba(37,99,235,.35)}
.nav-pages{display:none;padding:2px 0 6px}
.nav-set.open .nav-pages{display:block}
.nav-pages a{display:block;position:relative;padding:7px 10px 7px 40px;margin:1px 0;
  font-size:13px;color:var(--side-ink);text-decoration:none;border-radius:8px;opacity:.92}
.nav-pages a::before{content:"";position:absolute;left:20px;top:50%;width:5px;height:5px;
  margin-top:-2.5px;border-radius:50%;background:currentColor;opacity:.45}
.nav-pages a:hover{background:var(--dark-2);color:#fff;opacity:1}
.nav-pages a.on{background:var(--brand);color:#fff;font-weight:600;opacity:1}
.nav-pages a.on::before{opacity:1}

/* Quick links (the dashboard puts them in the sidebar). */
.side-quick{margin:14px 12px 4px;padding:12px 10px 8px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.side-quick h4{margin:0 4px 6px;color:#fff;font-size:13px;font-weight:650}
.side-quick a{display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:8px;
  color:var(--side-ink);text-decoration:none;font-size:12.8px}
.side-quick a:hover{background:var(--dark-2);color:#fff}
.side-quick a span{flex:1}
.side-quick .n{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#ef4444;
  color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.side-quick .n.zero{background:rgba(255,255,255,.12);color:var(--side-ink)}

.sidebar-foot{margin-top:auto;padding:12px 16px 0;border-top:1px solid var(--dark-2);
              color:var(--side-ink);font-size:12px;line-height:1.8}
.sidebar-foot a{padding:0;color:var(--side-ink);text-decoration:underline}
/* The top bar has these now (0215): name, sign out, password, how to use. */
.sidebar-foot [data-whoami],.sidebar-foot #signOut,.sidebar-foot .my-pw,
.sidebar-foot #howBtn{display:none!important}
/* 0192: a pale menu colour gets dark words (shell.js sets .side-light). */
.side-light{--side-ink:#3f4a5c}
.side-light .sidebar{border-right:1px solid var(--line)}
.side-light .brand-name{color:var(--ink)}
.side-light .nav-head:hover,.side-light .nav-top:hover,
.side-light .nav-pages a:hover,.side-light .side-quick a:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.side-light .nav-set.here > .nav-head{color:var(--ink)}
.side-light .side-quick{background:rgba(0,0,0,.03);border-color:var(--line)}
.side-light .side-quick h4{color:var(--ink)}
.side-light .sidebar-foot{border-top-color:var(--line)}
/* The maker's credit. Deliberately quiet -- it is a signature, not an advert:
   a client who feels advertised at on their own staff's screen asks for it to
   go, and then it is a negotiation instead of a fact. */
.powered{margin-top:4px;font-size:11px;line-height:1.5;color:var(--side-ink);opacity:.7}
.powered a{color:var(--side-ink);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.powered a:hover{color:#fff;background:none}
.login-card .powered{margin-top:14px;text-align:center;color:var(--ink-3);opacity:1}
.login-card .powered a{color:var(--ink-2);border-bottom-color:var(--line)}

/* ------------------------------------------------------------- top bar --- */
.topbar{display:flex;align-items:center;gap:10px;margin:-22px -24px 20px;padding:10px 24px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:35}
.topbar .ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.topbar .ico.sm{width:15px;height:15px}
.topbar .tb-menu,.tb-brand{display:none}
.tb-search{position:relative;flex:1 1 260px;max-width:420px;display:flex;align-items:center;
  gap:8px;padding:0 12px;height:38px;border:1px solid var(--line);border-radius:10px;
  background:#f6f8fb;color:var(--ink-3)}
.tb-search:focus-within{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px var(--brand-soft)}
.topbar .tb-search input{border:0;background:none;padding:0;height:36px;outline:none;font-size:13px}
.topbar .tb-search input:focus{outline:none}
.tb-drop{position:absolute;top:42px;left:0;right:0;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 12px 32px rgba(15,23,42,.14);padding:6px;z-index:60}
.tb-drop a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;
  color:var(--ink);text-decoration:none;font-size:13px}
.tb-drop a.on,.tb-drop a:hover{background:var(--brand-soft)}
.tb-drop .k{font-size:10.5px;color:var(--ink-3);border:1px solid var(--line);border-radius:5px;padding:0 5px}
.tb-drop a.all{color:var(--brand);font-weight:600;border-top:1px solid var(--line-2);margin-top:4px}
.tb-drop .none,.tb-menu-box .none{padding:10px;color:var(--ink-3);font-size:13px}
.tb-quick{display:flex;gap:8px;flex-wrap:nowrap;overflow:hidden;min-width:0}
/* Narrower screens: the quick buttons keep their icon and lose the words. */
@media (max-width:1380px){.tb-btn:not(.primary) span{display:none}.tb-btn:not(.primary){padding:0 10px}}
.tb-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 11px;border-radius:9px;
  border:1px solid var(--line);background:#fff;color:var(--ink);font-size:12.8px;font-weight:600;
  text-decoration:none;white-space:nowrap}
.tb-btn .ico{color:var(--brand)}
.tb-btn:hover{border-color:#c7d2e3;background:#fafbfd}
.tb-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.tb-btn.primary .ico{color:#fff}
.tb-btn.primary:hover{background:var(--brand-dark)}
.tb-right{display:flex;align-items:center;gap:6px;margin-left:auto}
.tb-pop{position:relative}
.tb-icon{position:relative;width:38px;height:38px;display:grid;place-items:center;border-radius:10px;
  border:0;background:none;color:var(--ink-2);cursor:pointer}
.tb-icon:hover{background:var(--line-2);color:var(--ink)}
.tb-badge{position:absolute;top:3px;right:3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:#ef4444;color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center}
.tb-me{display:flex;align-items:center;gap:9px;padding:4px 8px 4px 4px;border:0;background:none;
  border-radius:10px;cursor:pointer;color:var(--ink);font:inherit}
.tb-me:hover{background:var(--line-2)}
.tb-av{width:34px;height:34px;border-radius:50%;background:var(--dark);color:#fff;display:grid;
  place-items:center;font-size:12.5px;font-weight:700}
.tb-who{display:flex;flex-direction:column;text-align:left;line-height:1.2}
.tb-who b{font-size:13px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-who small{font-size:11.5px;color:var(--ink-3)}
.tb-menu-box{position:absolute;right:0;top:44px;width:290px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 16px 40px rgba(15,23,42,.16);padding:6px;z-index:60}
.tb-menu-box a{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:8px;
  color:var(--ink);text-decoration:none;font-size:13px}
.tb-menu-box a:hover{background:var(--line-2)}
.tb-menu-box a small{display:block;color:var(--ink-3);font-size:11.5px;margin-top:1px}
.tb-menu-head{padding:8px 10px 9px;border-bottom:1px solid var(--line-2);margin-bottom:4px}
.tb-menu-head b{display:block;font-size:13.5px}
.tb-menu-head small{color:var(--ink-3);font-size:12px}
.nt{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:0 0 auto;background:var(--brand)}
.nt.payment{background:var(--good)} .nt.job{background:#f59e0b}
.tb-mobile-slot{display:none}
.main{padding:22px 24px 40px;min-width:0}
.mobile-topbar{display:none!important}

h1{font-size:22px;margin:0 0 3px;text-wrap:balance;letter-spacing:-.01em}
.page-sub{color:var(--ink-2);font-size:13.5px;margin:0 0 18px}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
           flex-wrap:wrap}
/* The title block shrinks so the action button stays on the title's line at
   desktop width, and wraps under it on a phone rather than being squeezed. */
.page-head > :first-child{flex:1 1 320px;min-width:0}

/* ---------------------------------------------------------------- panel -- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel-pad{padding:16px 18px}
.panel h3{margin:0 0 10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
          color:var(--ink-2)}
.row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
     border-bottom:1px solid var(--line-2);font-size:13.5px}
.row:last-child{border-bottom:0}
.ok{color:var(--good);font-weight:600}

/* ----------------------------------------------------------- toolbar ----- */
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;
      padding:5px 12px;font-size:12.5px;color:var(--ink-2);cursor:pointer;
      font-family:inherit;white-space:nowrap}
.chip:hover{border-color:#c7d2e3}
.chip.on{background:var(--dark);border-color:var(--dark);color:#fff;font-weight:600}
.chip .n{opacity:.65;margin-left:5px;font-variant-numeric:tabular-nums}
/* WHICH FORM it came from is the bigger question, so those chips read as the
   heading and the state chips sit under them. Given its own rule rather than
   bolder text on the same one, because the two rows otherwise look like one
   wrapped row of nine buttons. */
.chips-section{margin-bottom:10px;padding-bottom:10px;
               border-bottom:1px solid var(--line-2)}
.chips-section .chip{font-weight:550}
.chips-section .chip.on{background:var(--brand);border-color:var(--brand)}
.chip.on .n{opacity:.8}

.search{flex:1 1 200px;min-width:160px;max-width:320px}

/* ----------------------------------------------------------- controls ---- */
input[type=text],input[type=search],input[type=date],input[type=tel],
input[type=email],input[type=password],input[type=number],select,textarea{
  font:inherit;font-size:13.5px;padding:7px 10px;border:1px solid var(--line);
  border-radius:7px;background:var(--card);color:var(--ink);width:100%}
/* The focus ring is the brand colour too, so a client's pages are theirs all
   the way down rather than orange in the one place nobody thought to change. */
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;
                                        border-color:var(--brand)}
textarea{min-height:70px;resize:vertical}
label{display:block;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;
      color:var(--ink-2);font-weight:650;margin:0 0 4px}
.field{margin:0 0 12px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.btn{font:inherit;font-size:13px;font-weight:600;padding:7px 14px;border-radius:7px;
     border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;
     white-space:nowrap}
.btn:hover{background:#f8fafc}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn-quiet{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn-quiet:hover{background:var(--line-2)}
.btn-sm{padding:4px 9px;font-size:12px}
.btn:disabled{opacity:.5;cursor:default}

/* ------------------------------------------------------------- table ----- */
.table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);
            border-radius:var(--radius);box-shadow:var(--shadow)}
/* 24 Oct 2026 -- ONE table look for every page, the one Fahad picked on the
   Calls page: grid lines on every cell, zebra rows, a shaded heading, and a
   day/section separator row. "make every page same where is thing like this".
   Pages do not carry their own table CSS; they use table.grid and get this. */
table.grid{border-collapse:collapse;width:100%;font-size:13px;
           font-variant-numeric:tabular-nums}
table.grid th{text-align:left;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
              color:#334155;font-weight:700;padding:8px 10px;
              border:1px solid var(--line);white-space:nowrap;background:#eef2f7}
table.grid td{padding:7px 10px;border:1px solid var(--line);vertical-align:middle}
table.grid tbody tr:nth-child(even) td{background:#fafbfd}
table.grid tbody tr:hover td{background:#eef4ff}
table.grid tbody tr.clickable{cursor:pointer}
/* A separator row inside the table: a day, a group, a section. */
table.grid tr.dayrow td{background:#f1f5f9!important;font-size:11px;letter-spacing:.4px;
                        text-transform:uppercase;color:var(--ink-2);font-weight:600;padding:5px 10px}
table.grid tr.dim td{opacity:.6}
/* The numbers above a list: 152 incoming, 12 missed, ... */
.strip{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.strip .s{background:var(--card);border:1px solid var(--line);border-radius:8px;
          padding:8px 14px;display:flex;gap:10px;align-items:baseline}
.strip .s b{font-size:18px;font-variant-numeric:tabular-nums}
.strip .s span{color:var(--ink-2);font-size:12px}
.strip .s.alarm{border-color:#c0564a}.strip .s.alarm b{color:#c0564a}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.nowrap{white-space:nowrap}
td.ref{font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}
td.clip{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.muted{color:var(--ink-3)}
.dim{color:var(--ink-2)}

/* -------------------------------------------------------------- badge ---- */
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;
       font-weight:650;white-space:nowrap;border:1px solid transparent}
.b-grey{background:#eeece6;color:#565f5c}
.b-blue{background:#e4ecf3;color:#2b5578}
.b-amber{background:#f6ecd8;color:#8a5d13}
.b-green{background:#e2f0e7;color:#256a43}
.b-red{background:#f6e3e3;color:#8f2b2b}
.b-plum{background:#efe6f2;color:#68407c}

/* ------------------------------------------------------------- drawer ---- */
.drawer-back{position:fixed;inset:0;background:rgba(28,35,33,.45);z-index:50;
             display:none}
.drawer-back.show{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--card);
        border-left:1px solid var(--line);z-index:60;transform:translateX(100%);
        transition:transform .18s ease;display:flex;flex-direction:column;
        padding-top:env(safe-area-inset-top,0px);
        padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
             padding:14px 18px;border-bottom:1px solid var(--line)}
.drawer-head h2{margin:0;font-size:16px}
.drawer-body{padding:16px 18px;overflow-y:auto;flex:1}
.drawer-foot{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;
             justify-content:flex-end;background:#f8fafc}
.x{background:none;border:0;font-size:22px;line-height:1;color:var(--ink-2);cursor:pointer;
   padding:0 4px}

/* ------------------------------------------------------------ messages --- */
.empty{padding:40px 18px;text-align:center;color:var(--ink-2);font-size:13.5px}
.error-msg{color:var(--bad);font-size:13px;padding:10px 0}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;
       background:var(--dark);color:#fff;padding:10px 18px;border-radius:8px;
       font-size:13px;box-shadow:0 6px 24px rgba(0,0,0,.22);max-width:90vw}
.toast.bad{background:var(--bad)}
.saving{font-size:12px;color:var(--ink-3)}

.transcript{background:#fbfaf7;border:1px solid var(--line-2);border-radius:8px;
            padding:12px;font-size:12.5px;line-height:1.65;white-space:pre-wrap;
            max-height:320px;overflow-y:auto}
.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;font-size:13px;
    margin:0 0 16px}
.kv dt{color:var(--ink-2);font-size:12px}
.kv dd{margin:0}

/* ------------------------------------------------------------- mobile ---- */
.mobile-topbar{display:none}
.sidebar-backdrop{display:none}
@media (max-width:820px){
  .shell{grid-template-columns:1fr;background:none}
  .sidebar{position:fixed;inset:0 auto 0 0;width:min(290px,86vw);height:100%;
           transform:translateX(-100%);transition:transform .2s;z-index:1100;
           padding-top:calc(16px + env(safe-area-inset-top,0px))}
  .sidebar.open{transform:none;box-shadow:8px 0 30px rgba(0,0,0,.25)}
  .sidebar-backdrop.show{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);
                         z-index:1090}
  .main{padding:22px 16px 40px}
  .topbar{margin:-22px -16px 16px;padding:8px 12px;gap:6px;flex-wrap:wrap;
          padding-top:calc(8px + env(safe-area-inset-top,0px))}
  .topbar .tb-menu{display:grid}
  .tb-brand{display:block;flex:1;min-width:0;font-weight:700;font-size:15px;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .tb-search{order:5;flex:1 1 100%;max-width:none;height:38px}
  .tb-quick,.tb-who,.tb-me > .ico{display:none}
  .tb-me{padding:2px}
  .tb-mobile-slot{display:flex}
  .tb-right{margin-left:0}
  .tb-menu-box{position:fixed;left:12px;right:12px;top:58px;width:auto}
  .field-row{grid-template-columns:1fr}
  table.grid{font-size:12.5px}
  td.clip{max-width:180px}
}

/* ---------------------------------------------------------------- confirm
   The delete confirmation. Deliberately plain: a dialog that looks alarming
   gets dismissed on reflex, and one that looks like nothing gets clicked
   without reading. */
.confirm-back{position:fixed;inset:0;background:rgba(28,35,33,.42);z-index:60;
              display:flex;align-items:center;justify-content:center;padding:20px}
.confirm{background:var(--card);border:1px solid var(--line);border-radius:12px;
         padding:22px 22px 18px;max-width:420px;width:100%;
         box-shadow:0 18px 48px rgba(28,35,33,.22)}
.confirm h3{margin:0 0 10px;font-size:16px}
.confirm .what{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--ink)}
.confirm .why{margin:0 0 14px;font-size:12.5px;color:var(--ink-2);line-height:1.6}
.confirm label{margin:0 0 5px}
.confirm input{margin:0 0 16px}
.confirm .acts{display:flex;gap:9px}
.btn-danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn-danger:hover{filter:brightness(.94)}
/* A delete control sits apart from the actions that keep the row. */
.btn-quiet-danger{background:none;border:0;color:var(--bad);font-weight:600;
                  font-size:12.5px;cursor:pointer;padding:6px 2px}
.btn-quiet-danger:hover{text-decoration:underline}

/* A quotation is a table, and a table needs room. The wide drawer is for
   pages where the content has columns — anything narrower turns the rate
   column into a two-character box. */
.drawer.wide{width:min(860px,100%)}

/* ONLY SEE (BT-NOTE-61). A page switched on as "only see" opens without the
   buttons that add, save or delete. The API refuses those anyway; hiding
   them stops a button inviting a save that will be refused. */
.view-only-note{background:#dbeafe;color:#1e3a8a;border-radius:8px;padding:9px 14px;
  margin:0 0 14px;font-weight:600;font-size:14px}
body.view-only .btn-primary,body.view-only .btn-quiet-danger,
body.view-only [data-write]{display:none!important}

/* 0196: Bluebell's own tools (the CCTV / IT / networking builders) are not
   shown to a client, and a button that needs a page they do not have is not
   shown either (data-needs, set by api.js buildNav). */
body.is-client [data-bluebell-only]{display:none!important}
[data-needs].needs-off{display:none!important}

/* 0215: the top bar and the navy strip never print. */
@media print{
  .topbar,.side-quick{display:none!important}
  .shell{background:none!important}
}