/* Deliberately mirrors the live app's look: same palette, same dark-blue stage
   bars, same green chips, same dense table. A port should feel like the thing
   it replaced, not a redesign. */
:root {
  --sep: #1a3a52;          /* dark blue stage bars */
  --done: #ffff00;         /* yellow rows */
  --gone: #b9af7c;
  --late: #ff9999;
  --on: #2e7d32;           /* green "on" chip */
  --off: #e7e7e7;
  --line: #c7cdd4;
  --bar: #2d6cb0;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px; color: #1a1a1a; background: #f4f6f8;
}

#toolbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--sep); color: #fff;
}
#toolbar h1 { font-size: 16px; margin: 0; font-weight: 700; }
#toolbar .ver { font-size: 11px; font-weight: 400; opacity: .65; }
#toolbar .status { margin-left: auto; font-size: 11px; opacity: .8; }
#toolbar .dot { width: 8px; height: 8px; border-radius: 50%; background: #7fdc5a; display: inline-block; }
#toolbar .dot.off { background: #ff7070; }



/* The table scrolls sideways inside its own box, so the page never does. */
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: #fff; }
td, th { white-space: nowrap; }
td.wrap { white-space: normal; min-width: 120px; }
/* Not sticky: the header offset depends on the toolbar + tabs + search bar
   heights, and getting it slightly wrong leaves the row floating over the
   first group. The stage bars already say what you're looking at. */
thead th { background: #e9edf1; text-align: left;
  padding: 6px; border-bottom: 2px solid var(--line); font-size: 11px;
  text-transform: uppercase; letter-spacing: .03em; color: #555; }
td { padding: 5px 6px; border-bottom: 1px solid #e6e9ec; vertical-align: middle; }
/* Tint on hover, never repaint: setting a background here wipes out the yellow
   Done rows and the tan Gone rows. Same technique the live app uses. */
tr.job:hover td { box-shadow: inset 0 0 0 9999px rgba(45, 108, 176, .18); }
tr.sep:hover td { box-shadow: none; filter: brightness(1.15); }
tr.sep td { background: var(--sep); color: #fff; font-weight: 700; padding: 6px 12px;
  letter-spacing: .04em; border-top: 2px solid #0d2638; }
/* The label sticks to the left edge: centring it puts it off-screen the moment
   the table is wider than the viewport, which reads as an empty blue bar. */
tr.sep td > span.lbl { position: sticky; left: 12px; display: inline-block; }
tr.sep .count { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 6px;
  background: rgba(255,255,255,.22); border-radius: 10px; font-size: 11px; }
/* Row + stage-bar colours copied straight from the live app: a pale-to-blue
   ramp as a job moves down the pipeline, with status colours winning over it. */
tr.job[data-stage="Quote"] td { background: #e1e7ee; }
tr.job[data-stage="On Site"] td { background: #cbdaea; }
tr.job[data-stage="Coming"] td { background: #b4cee5; }
tr.job[data-stage="Here"] td { background: #9ec1e1; }
tr.job[data-stage="Blast Only"] td { background: #87b4dd; }
tr.job[data-stage="Blast For Paint"] td { background: #87b4dd; }
tr.job[data-stage="Prime"] td { background: #71a8d8; }
tr.job[data-stage="Paint"] td { background: #5a9bd4; }
tr.sep[data-stage="Quote"] td { background: #96a3b2; }
tr.sep[data-stage="On Site"] td { background: #8192a2; }
tr.sep[data-stage="Coming"] td { background: #6d8092; }
tr.sep[data-stage="Here"] td { background: #586f82; }
tr.sep[data-stage="Blast Only"] td { background: #435e72; }
tr.sep[data-stage="Blast For Paint"] td { background: #435e72; }
tr.sep[data-stage="Prime"] td { background: #2f4c62; }
tr.sep[data-stage="Paint"] td { background: #1a3a52; }
tr.job.done td { background: var(--done); }
tr.job.gone td { background: var(--gone); }
tr.job.late td { background: var(--late); }

td.chips { white-space: nowrap; width: 1%; }
.chip { display: inline-block; padding: 4px 7px; margin: 1px; font-size: 11px; font-weight: 700;
  border-radius: 4px; border: 1px solid #b9b9b9; background: var(--off); color: #666;
  cursor: pointer; min-width: 40px; text-align: center; }
.chip.on { background: var(--on); border-color: var(--on); color: #fff; }
.chip.saving { opacity: .45; }
.num { text-align: right; white-space: nowrap; }
.dim { color: #777; }
.empty { padding: 24px; text-align: center; color: #888; }

/* login */
#login { max-width: 300px; margin: 16vh auto; text-align: center; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; padding: 24px; }
#login h1 { font-size: 17px; margin: 0 0 4px; }
#login p { color: #777; font-size: 12px; margin: 0 0 14px; }
#login input { width: 100%; font-size: 22px; text-align: center; letter-spacing: 7px;
  padding: 9px; border: 1px solid var(--line); border-radius: 5px; }
#login button { width: 100%; margin-top: 10px; padding: 9px; border: none; border-radius: 5px;
  background: var(--bar); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.err { color: #b00020; min-height: 18px; font-size: 12px; margin-top: 6px; }

.tiles { display: flex; gap: 8px; padding: 10px 12px; flex-wrap: wrap; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 10px 16px; min-width: 130px; }
.tile .tl { font-size: 11px; text-transform: uppercase; color: #666; letter-spacing: .03em; }
.tile .tv { font-size: 20px; font-weight: 700; color: #1a3a52; margin-top: 2px; }
.barfill { height: 12px; background: var(--bar); border-radius: 2px; min-width: 2px; }

/* inline editing, same feel as the live app's cells */
input.cell, textarea.cell, select.cell {
  width: 100%; border: 1px solid transparent; background: transparent;
  padding: 3px 4px; font-size: 13px; border-radius: 4px; font-family: inherit; resize: none;
}
input.cell:focus, textarea.cell:focus, select.cell:focus {
  border-color: #2d6cb0; background: #fff; outline: none;
}
.rowbtn { background: none; border: none; cursor: pointer; font-size: 14px; opacity: .5; padding: 0 4px; }
.rowbtn:hover { opacity: 1; }
.addbar { padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--line); display: flex; gap: 6px; flex-wrap: wrap; }
.addbar input, .addbar select { padding: 5px 7px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; }
.addbar button { padding: 5px 12px; border: none; border-radius: 4px; background: var(--on); color: #fff; font-weight: 700; cursor: pointer; }

/* ---- toolbar (copied from the live app) ---- */
#toolbar h1 { font-size: 16px; margin: 0; margin-right: auto; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 8px; }
#toolbar .ver { font-size: 11px; font-weight: 400; opacity: .65; }
#toolbar button { padding: 7px 12px; border: none; border-radius: 5px; cursor: pointer;
  font-size: 13px; font-weight: 600; background: #2d6cb0; color: #fff; }
#toolbar button.ghost { background: rgba(255,255,255,.15); }
#toolbar button.ghost.on { background: rgba(255,255,255,.34); }
#toolbar .search { padding: 7px 10px; border: none; border-radius: 5px; font-size: 13px;
  width: 240px; font-family: inherit; }
#status { font-size: 12px; opacity: .85; min-width: 90px; text-align: right; }

/* Notification badge that pops out of a nav button's corner (doesn't grow it).
   Two badges over the Customers button: texts (blue) and emails (purple),
   side by side — markup and styling copied from the live app. */
.nav-has-badge { position: relative; overflow: visible; }
.nav-badge-stack {
  position: absolute; top: -8px; right: -8px; display: flex; gap: 3px; z-index: 2;
  pointer-events: none;
}
.nav-badge {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: #e0453a; color: #fff; font-size: 11px; font-weight: 800;
  line-height: 16px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.3);
  border: 2px solid var(--card, #fff); box-sizing: content-box;
  animation: badgeBounce 1.6s ease-in-out infinite;
}
.nav-badge-text  { background: #2d6cb0; }   /* texts  = blue  */
.nav-badge-email { background: #6a4ca8; }   /* emails = purple */
@keyframes badgeBounce {
  0%, 60%, 100% { transform: translateY(0); }
  72% { transform: translateY(-4px); }
  84% { transform: translateY(0); }
}

/* ---- modals ---- */
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 50; align-items: flex-start; justify-content: center; }
.overlay.show { display: flex; }
.modal { background: #fff; border-radius: 8px; margin-top: 60px; width: 520px; max-width: 94vw;
  max-height: 86vh; overflow: auto; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.modal.wide { width: 760px; }
.modal h2 { margin: 0; padding: 14px 18px; background: var(--sep); color: #fff; font-size: 15px;
  border-radius: 8px 8px 0 0; display: flex; align-items: center; justify-content: space-between; }
.modal-close { background: transparent; border: none; color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; padding: 0 2px; opacity: .85; }
.modal .body { padding: 16px 18px; }
.field { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { min-width: 0; }
.field label { font-size: 12px; font-weight: 600; color: #444; }
.field input, .field select { padding: 8px; border: 1px solid var(--line); border-radius: 5px;
  font-size: 14px; font-family: inherit; }
.modal .actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px;
  border-top: 1px solid var(--line); }
.modal .actions button { padding: 8px 16px; border: none; border-radius: 5px; cursor: pointer;
  font-weight: 600; font-size: 13px; }
.btn-primary { background: var(--on); color: #fff; }
.btn-cancel { background: #e3e3e3; color: #333; }
.ghost.add-line-btn { background: #eef2f7; border: 1px solid var(--line); color: #333;
  padding: 5px 10px; border-radius: 5px; cursor: pointer; font-size: 12.5px; }
.items-total { font-weight: 700; text-align: right; margin-top: 6px; }
.field-warn { background: #fff3cd; border: 1px solid #f0c766; color: #7a5b00; padding: 7px 10px;
  border-radius: 5px; font-size: 12.5px; margin-top: 6px; }
.job-item { display: flex; gap: 6px; margin-bottom: 5px; }
.job-item input { padding: 6px; border: 1px solid var(--line); border-radius: 5px; font-size: 13px; }
.job-item .desc { flex: 1; }
.job-item .qty { width: 56px; } .job-item .unit { width: 84px; }
.job-item .rm { background: none; border: none; color: #b00020; cursor: pointer; font-size: 16px; }

/* Multi-person "Employees" tag input on the Add/Edit Job form (live V3.13.x). */
.person-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.person-chips:empty { display: none; }
.person-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px 3px 9px;
  font-size: 12.5px; font-weight: 600; border-radius: 12px;
  background: #e8f0fe; border: 1px solid #b6d0f5; color: #1a4c8a;
}
.person-chip button {
  border: none; background: none; color: #1a4c8a; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0; opacity: .65;
}
.person-chip button:hover { opacity: 1; }

/* toggle */
.toggle-row { display: flex; align-items: center; gap: 10px; }
.toggle-row .toggle-label { font-size: 13px; font-weight: 600; color: #999; }
.toggle-row .toggle-label.active { color: #1a1a1a; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider-track { position: absolute; cursor: pointer; inset: 0; background: #ccc;
  transition: .2s; border-radius: 24px; }
.switch .slider-track:before { position: absolute; content: ""; height: 18px; width: 18px;
  left: 3px; bottom: 3px; background: #fff; transition: .2s; border-radius: 50%; }
.switch input:checked + .slider-track { background: var(--on); }
.switch input:checked + .slider-track:before { transform: translateX(20px); }

/* ---- Customers & Texts (three panes, as in the live app) ---- */
.navrow { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fff;
  border-bottom: 1px solid var(--line); }
.navrow button { padding: 6px 11px; border: 1px solid var(--line); background: #eef2f7;
  border-radius: 5px; cursor: pointer; font-size: 12.5px; }
.navrow .label { font-weight: 700; }
.navrow .spacer { flex: 1; }
.msg-wrap { display: flex; height: calc(100vh - 84px); min-height: 0;
  border-top: 1px solid var(--line); background: #fff; }
.msg-list-pane { width: 320px; flex: none; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0; }
.msg-search { margin: 10px; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 6px; font-size: 13px; }
#msg_list { flex: 1; overflow-y: auto; }
.conv-item { padding: 12px 14px; border-bottom: 1px solid #f0f0f0; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; }
.conv-item:hover { background: #f7f9fb; }
.conv-item.active { background: #eef4fb; }
.conv-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.conv-name { font-weight: 700; font-size: 13.5px; color: #222; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.conv-time { font-size: 10.5px; color: #999; white-space: nowrap; }
.conv-last { font-size: 12.5px; color: #777; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-thread-pane { flex: 1.4; display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--line); }
.msg-empty { margin: auto; color: #999; font-size: 14px; padding: 20px; text-align: center; }
.msg-thread-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex;
  justify-content: space-between; align-items: center; gap: 10px; }
.msg-thread-head .mh-phone { color: #888; font-size: 12px; margin-left: 8px; }
.msg-thread { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex;
  flex-direction: column; gap: 8px; background: #f4f6f8; }
.bubble { max-width: 70%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px;
  line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.out { align-self: flex-end; background: #2d6cb0; color: #fff; border-bottom-right-radius: 4px; }
.bubble.in { align-self: flex-start; background: #fff; color: #222; border: 1px solid #e2e2e2;
  border-bottom-left-radius: 4px; }
.bubble .b-time { display: block; font-size: 12.5px; font-weight: 600; opacity: .8; text-align: right;
  margin-top: 7px; padding-top: 5px; border-top: 1px solid rgba(0,0,0,.10); }
.bubble.out .b-time { border-top-color: rgba(255,255,255,.28); }
.msg-info-pane { width: 260px; flex: none; padding: 14px; overflow-y: auto; }

/* ---- shared view chrome, copied from the live app ----
   Every page except Jobs is built from .card panels inside a centred main. */
main.view { max-width: 1240px; margin: 0 auto; padding: 20px 18px 60px; }
.card { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.12);
  margin-bottom: 24px; overflow: hidden; scroll-margin-top: 60px; }
.card h2 { margin: 0; padding: 14px 18px; background: #eef1f4; font-size: 15px;
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.card h2 .range { font-weight: 400; color: #666; font-size: 12px; margin-left: auto; }
.card .body { padding: 16px 18px; }
.navrow { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.navrow button { border: 1px solid var(--line); background: #fff; border-radius: 5px;
  padding: 5px 10px; cursor: pointer; font-size: 12px; font-weight: 600; color: #333; }
.navrow button:hover { background: #f0f3f6; }
.tl-filter { display: inline-flex; gap: 2px; background: #eceef1; border-radius: 7px; padding: 2px; }
.tl-filter button { border: none; background: transparent; font-size: 12px; padding: 4px 10px;
  border-radius: 5px; cursor: pointer; color: #555; font-family: inherit; }
.tl-filter button.active { background: #fff; color: #111; box-shadow: 0 1px 2px rgba(0,0,0,.12); font-weight: 600; }
.addbar { margin-bottom: 12px; }
.addbar > button { background: var(--on); color: #fff; border: none; border-radius: 5px;
  padding: 7px 12px; font-weight: 600; cursor: pointer; font-size: 12.5px; }

/* ---- Coming / summary tables (copied from the live app) ---- */
table.sum { width: 100%; border-collapse: collapse; margin-top: 10px; }
table.sum th { text-align: left; font-size: 10.5px; text-transform: uppercase; color: #666;
  padding: 4px 6px; border-bottom: 2px solid var(--line); }
table.sum td { padding: 5px 6px; border-bottom: 1px solid #eee; }
table.sum td.num, table.sum th.num { text-align: right; }
input.sum-edit, select.sum-edit, textarea.sum-edit { width: 100%; border: 1px solid transparent;
  background: transparent; font: inherit; padding: 3px 4px; border-radius: 4px; box-sizing: border-box; }
input.sum-edit:hover, select.sum-edit:hover, textarea.sum-edit:hover { border-color: #ddd; }
input.sum-edit:focus, select.sum-edit:focus, textarea.sum-edit:focus {
  border-color: #1a73e8; background: #fff; outline: none; }
.coming-badge { display: inline-block; padding: 2px 7px; font-size: 11px; font-weight: 700;
  color: #8a3b00; background: #ffe0b3; border: 1px solid #e0a339; border-radius: 4px; }
.coming-soon { color: #2d6cb0; font-weight: 600; }
.empty { color: #888; padding: 10px 0; }
main.narrow { max-width: 980px; }

/* "Coming today" toast on the Jobs board -- styles copied from the live app. */
#comingTodayToast {
  position: fixed; top: 62px; left: 24px; z-index: 500;
  background: #fff; border: 1px solid #7cc47c; border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  padding: 12px 16px; padding-right: 34px; max-width: 270px;
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  animation: quoteToastIn .25s ease-out;
}
#comingTodayToast .qr-arrow { display: inline-block; animation: quoteToastBob 1.1s ease-in-out infinite; font-size: 18px; }
#comingTodayToast .qr-text { font-size: 13.5px; font-weight: 600; color: #333; line-height: 1.3; }
#comingTodayToast .qr-close { position: absolute; top: 4px; right: 8px; cursor: pointer; color: #999; font-size: 14px; line-height: 1; padding: 4px; }
#comingTodayToast .qr-close:hover { color: #333; }
@keyframes quoteToastBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
@keyframes quoteToastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- To Do board ---- */
.todo-item { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid #f1f1f1; }
.todo-item:last-child { border-bottom: none; }
.todo-check { width: 23px; height: 23px; border: 2px solid #c2c2c2; border-radius: 50%;
  flex: 0 0 auto; cursor: pointer; transition: all .12s ease; position: relative; }
.todo-check:hover { border-color: #1a7a3c; background: #eaf6ee; }
.todo-text { flex: 1; font-size: 16px; line-height: 1.4; cursor: text; }
.todo-text:hover { background: #f4f6f8; border-radius: 3px; }
.todo-edit-input { flex: 1; font-size: 16px; line-height: 1.4; font-family: inherit;
  border: 1px solid #2d6cb0; border-radius: 4px; padding: 2px 6px; }
.todo-item.done .todo-text { text-decoration: line-through; color: #9a9a9a; }
.todo-prio { width: 26px; height: 26px; border: 1px solid #c62828; border-radius: 5px;
  background: transparent; color: #c62828; font-weight: 900; font-size: 15px; cursor: pointer; line-height: 1; }
.todo-prio.on { background: #c62828; color: #fff; }
.todo-del { border: none; background: transparent; color: #c0392b; font-size: 17px; cursor: pointer;
  line-height: 1; padding: 2px 6px; opacity: .55; }
.todo-del:hover { opacity: 1; }
.todo-clear { background: #eef5f0; border: 1px solid #cfe6d8; color: #1a7a3c; font-weight: 700;
  border-radius: 6px; padding: 8px 12px; font-size: 12.5px; cursor: pointer; }
.person-allclear { padding: 4px 2px 2px; color: #8aa; font-size: 12.5px; font-weight: 600; }
#todoPeople .card h2 .range { color: #b25000; font-weight: 700; }
#todoPeople .card h2.todo-head { display: flex; align-items: center; gap: 10px; }
.todo-head-name { white-space: nowrap; }
.todo-add-inline { display: flex; gap: 6px; flex: 1; margin-left: auto; }
.todo-add-inline input { flex: 1; min-width: 0; padding: 6px 9px; border: 1px solid var(--line);
  border-radius: 5px; font-size: 13px; font-weight: 400; }
.todo-add-inline button { border: 1px solid var(--line); background: #f4f7fa; border-radius: 5px;
  padding: 0 12px; font-size: 13px; font-weight: 600; cursor: pointer; color: #2d6cb0; }
.todo-age { font-size: 10px; color: #888; }

/* ------------------------------------------------------- reports & crew -- */
.sm { font-size: 11.5px; }
.tl-filter button.on { background: #fff; color: #111; box-shadow: 0 1px 2px rgba(0,0,0,.12); font-weight: 600; }

.qc-btn { border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 7px 12px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; }
.qc-btn.qc-in { border-color: #bcdcc7; background: #f2fbf4; color: #1a7a3c; }
.qc-btn.qc-out { border-color: #f0c9c9; background: #fdf4f4; color: #b3352f; }
.qc-btn:hover { box-shadow: inset 0 0 0 9999px rgba(45,108,176,.10); }
.pay-locked { letter-spacing: 2px; color: #aaa; }
table.act td { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- billing KPIs -- */
.bstats { display: flex; gap: 12px; flex-wrap: wrap; }
.bstat { flex: 1; min-width: 140px; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; background: #fafbfc; }
.bstat .bl { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #777; }
.bstat .bv { font-size: 21px; font-weight: 700; margin-top: 4px; }
.bstat.warn { border-color: #f0c9c9; background: #fdf4f4; }
.bstat.warn .bv, .bstat.warn .bl { color: #c0392b; }
.bstatus { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px;
  font-weight: 700; text-transform: capitalize; }
.bstatus.paid { background: #e6f6ec; color: #1a7a3c; }
.bstatus.open { background: #eef2f7; color: #3a5a7a; }
.bstatus.overdue { background: #fdecea; color: #c0392b; }
#bill_filter { padding: 6px 9px; border: 1px solid var(--line); border-radius: 5px; font-size: 13px; }

/* ------------------------------------------------------ message composer -- */
/* Straight from the live app so the pane reads the same: purple = email,
   blue = text, cream = voicemail, green = call. */
#msgView { height: calc(100vh - 46px); display: flex; flex-direction: column; }
#msgView .navrow { padding: 10px 16px; flex: none; margin: 0; }
.msg-wrap { display: flex; flex: 1; min-height: 0; border-top: 1px solid var(--line); background: #fff;
  height: auto; }
.msg-list-pane { width: 320px; }
#msg_thread_wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.msg-thread { background: #f4f6f8; gap: 3px !important; padding: 12px 16px !important; }
.conv-item:hover { background: #f7f9fb; }
.conv-item.active { background: #eef4fb; }
.conv-unread { background: #c62828; color: #fff; border-radius: 10px; font-size: 10px;
  font-weight: 700; padding: 1px 7px; }
.msg-thread-head .mh-email { color: #6a4ca8; font-size: 12px; margin-left: 8px; }

.bubble.msg-email { max-width: 82%; }
.bubble.out.msg-email { background: #6a4ca8; color: #fff; }
.bubble.out.msg-text { background: #2d6cb0; color: #fff; }
.bubble.in.msg-email { background: #ece4fa; color: #2c2340; border-color: #d9ccf2; }
.bubble.in.msg-text { background: #dcebfb; color: #17334d; border-color: #c4ddf5; }
.bubble.msg-voicemail { background: #fff4dc; color: #4a3608; border-color: #f0dcae; max-width: 82%; }
.bubble.msg-call { background: #eaf6ee; color: #14361f; border-color: #c9e6d3; max-width: 82%; }
.bubble .msg-tag { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
  opacity: .85; margin-bottom: 3px; text-transform: uppercase; }
.bubble.in.msg-email .msg-tag { color: #6a4ca8; }
.bubble.in.msg-text .msg-tag { color: #2d6cb0; }
.vm-play { display: inline-block; margin: 4px 0 2px; padding: 5px 12px; border: none;
  border-radius: 14px; background: #b8860b; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.vm-play:hover { background: #966d09; }
.tr-toggle { display: block; margin-top: 6px; padding: 0; border: none; background: none;
  color: #1a7a3c; font-size: 11.5px; font-weight: 700; cursor: pointer; text-decoration: underline; }
.tr-full { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #b9d9c5; font-size: 12px;
  white-space: pre-wrap; max-height: 260px; overflow-y: auto; color: #33553f; }

.tl-mode { display: inline-flex; gap: 2px; background: #eceef1; border-radius: 7px; padding: 2px; }
.tl-mode button { border: none; background: transparent; font-size: 12px; padding: 4px 10px;
  border-radius: 5px; cursor: pointer; color: #555; font-family: inherit; }
.tl-mode button.active, .tl-filter button.active { background: #fff; color: #111;
  box-shadow: 0 1px 2px rgba(0,0,0,.12); font-weight: 600; }
.msg-mode-bar { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px 2px; }
#msg_mode_label { font-size: 11px; font-weight: 800; letter-spacing: .05em; }
#msg_mode_label.mode-email { color: #6a4ca8; }
#msg_mode_label.mode-text { color: #2d6cb0; }
.msg-composer { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line);
  align-items: center; }
.msg-composer textarea { flex: 1; resize: none; font-family: inherit; font-size: 14px;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; }
.hmw-btn { flex: none; background: #f3edff; color: #6a4ca8; border: 1px solid #d9ccf2;
  border-radius: 8px; font-size: 17px; padding: 8px 12px; cursor: pointer; font-weight: 700; }
.hmw-btn:hover { background: #e7dcff; }
.msg-composer .btn-primary { border: none; border-radius: 8px; padding: 10px 18px;
  font-weight: 700; cursor: pointer; }
.msg-send-status { font-size: 12px; padding: 0 16px 10px; min-height: 15px; color: #777; }

.msg-info-pane { width: 340px; flex: none; display: flex; flex-direction: column;
  min-height: 0; overflow-y: auto; background: #fafbfc; padding: 0; }
.msg-info-head { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.msg-info-head .mi-name { font-size: 16px; font-weight: 700; color: #222; }
.msg-info-head .mi-phone { font-size: 12.5px; color: #777; margin-top: 3px; }
.msg-info-section { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.msg-info-section h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .03em; color: #888; }
.msg-info-section .field input { width: 100%; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 5px; font-size: 13px; }
.msg-job-card { background: #fff; border: 1px solid var(--line); border-radius: 7px;
  padding: 9px 11px; margin-bottom: 8px; font-size: 12.5px; }
.msg-job-card .mj-top { display: flex; justify-content: space-between; font-weight: 700; color: #222; }
.msg-job-card .mj-sub { color: #777; margin-top: 2px; }
.msg-job-card .mj-stage { display: inline-block; margin-top: 5px; padding: 2px 7px;
  border-radius: 4px; font-size: 10.5px; font-weight: 700; background: #eef1f4; color: #444; }
.mi-divider { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #999; }
.mi-divider::before, .mi-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ------------------------------------------------------------ settings bits -- */
.ac-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 2px 10px; }
.ac-item { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 400; }
.checkbox-row { flex-direction: row !important; align-items: center; gap: 7px; }
.checkbox-row label { font-weight: 400 !important; font-size: 13px !important; }
.btn-danger { background: #c62828; color: #fff; }
#modalHost .modal .body { max-height: 68vh; overflow-y: auto; }

/* ---------------------------------------------------------- reports rails -- */
.pie-panel { position: fixed; top: 120px; width: 168px; background: #fff; border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12); padding: 14px; z-index: 10;
  max-height: calc(100vh - 140px); overflow-y: auto; }
.pie-left { left: max(12px, calc(50% - 490px - 190px)); }
.pie-right { right: max(12px, calc(50% - 490px - 190px)); }
@media (max-width: 1420px) { .pie-panel { display: none; } }
.pie-title { font-size: 11.5px; font-weight: 700; color: #555; text-align: center;
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: .03em; }
.pie-legend { margin-top: 8px; }
.pie-legend-row { display: flex; align-items: center; gap: 6px; font-size: 11.5px;
  margin-top: 4px; color: #333; }
.pie-swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.pie-empty { text-align: center; color: #999; font-size: 12px; padding: 24px 0; }
.pie-divider { border-top: 1px solid #eee; margin: 14px 0; }
.stat-row { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; margin-top: 7px; gap: 8px; }
.stat-row .stat-label { color: #777; }
.stat-row .stat-value { font-weight: 700; color: #1a1a1a; text-align: right; }
.tw-item { border-top: 1px solid #eee; padding: 8px 0; cursor: pointer; }
.tw-item:first-child { border-top: 0; }
.tw-item:hover { background: #f7f9fb; }
.tw-rank { display: inline-block; min-width: 16px; font-weight: 800; color: #b8892b; }
.tw-amt { font-weight: 700; color: #1a1a1a; font-size: 13px; }
.tw-dates { color: #777; font-size: 10.5px; margin: 2px 0 0 20px; }

.navrow a.jump { font-size: 12.5px; color: var(--sep); text-decoration: none; opacity: .85;
  padding: 0 4px; }
.navrow a.jump:hover { text-decoration: underline; opacity: 1; }
.navrow button.on { background: #2d6cb0; color: #fff; border-color: #2d6cb0; }

table.act { width: 100%; border-collapse: collapse; }
table.act th { text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: .03em; color: #888; padding: 6px; border-bottom: 1px solid var(--line); }
table.act td { padding: 3px 6px; vertical-align: middle; border-bottom: 1px solid #eee; }
table.act input, table.act select { width: 100%; box-sizing: border-box; padding: 5px 6px;
  border: 1px solid transparent; border-radius: 4px; font: inherit; font-size: 12.5px;
  background: #fbfbfb; }
table.act input:focus, table.act select:focus { border-color: var(--bar); background: #fff; outline: none; }
table.act input.narrow { width: 128px; min-height: 24px; }
table.act input.amt { width: 92px; }
.totalrow { font-weight: 700; text-align: right; padding: 10px 6px 0; font-size: 13px; }
.caveat { font-size: 11.5px; color: #888; margin-top: 6px; }
/* A heavier top border marks where a new calendar day starts in the weekly
   ledger (rows are already grouped by day) -- live's day-start rule. */
table.act tr.day-start td { border-top: 2px solid var(--line); }
.manual-badge { display: inline-block; font-size: 9.5px; font-weight: 700; color: #7a5b00;
  background: #fff3cd; border: 1px solid #e6c200; border-radius: 3px; padding: 1px 5px; margin-left: 4px; }
.edited-badge { display: inline-block; font-size: 9.5px; font-weight: 700; color: #1a5c3a;
  background: #dff5e6; border: 1px solid #a9dfbf; border-radius: 3px; padding: 1px 5px; margin-left: 4px; }
/* Payroll cost & profit aren't trustworthy yet (no real rates or expense
   tracking) -- struck through in the weekly report, exactly like live. */
tr.wr-crossed td { text-decoration: line-through; color: #999; }
tr.wr-crossed .wr-note { text-decoration: none; font-weight: 400; font-size: 11px; color: #999; display: block; }
/* Cached weekly narrative under each Top Weeks entry, clamped to 3 lines. */
.tw-summary { color: #555; font-size: 10.5px; line-height: 1.35; margin: 3px 0 0 20px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.addbar { margin-bottom: 12px; }
.addbar > button { background: var(--on); color: #fff; border: none; border-radius: 5px;
  padding: 7px 12px; font-weight: 600; cursor: pointer; font-size: 12.5px; }
.addform { display: none; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  background: #f7f9fb; border: 1px solid var(--line); border-radius: 6px; padding: 12px; margin-bottom: 12px; }
.addform.show { display: flex; }
.addform .f { display: flex; flex-direction: column; gap: 2px; }
.addform .f label { font-size: 10.5px; font-weight: 700; color: #555; text-transform: uppercase; }
.addform .f input, .addform .f select { padding: 6px; border: 1px solid var(--line);
  border-radius: 4px; font-size: 12.5px; }
.addform .save { background: var(--on); color: #fff; border: none; border-radius: 5px;
  padding: 7px 14px; font-weight: 600; cursor: pointer; }
.addform .cancel { background: #e3e3e3; border: none; border-radius: 5px; padding: 7px 14px; cursor: pointer; }
.topcust-table thead th { position: sticky; top: 0; background: #fff; z-index: 1;
  box-shadow: inset 0 -1px 0 var(--line); }

/* -------------------------------------------------------- job row actions -- */
td.actions { white-space: nowrap; }
td.actions .chip { cursor: pointer; }
button.del { border: none; background: transparent; color: #b00; font-size: 18px;
  cursor: pointer; line-height: 1; padding: 0 6px; }
tr.job.row-selected td { background-image: linear-gradient(rgba(45,108,176,.22), rgba(45,108,176,.22)); }
tr.job.row-selected td:first-child { border-left: 3px solid #2d6cb0; }
.price-blur-fx { filter: blur(4px); transition: filter .12s; }
.price-blur-fx:focus, .colprice:hover .price-blur-fx { filter: none; }

/* ------------------------------------------------------------ invoice bits -- */
.bstat .bsub { font-size: 11px; color: #888; margin-top: 3px; }
.inv-status { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px;
  font-weight: 700; }
.inv-status.paid { background: #e6f6ec; color: #1a7a3c; }
.inv-status.open { background: #eef2f7; color: #3a5a7a; }
.inv-status.partial { background: #fff6e0; color: #8a5b00; }
.inv-status.overdue { background: #fdecea; color: #c0392b; }
.inv-status.void { background: #eee; color: #888; text-decoration: line-through; }
.btn-new-invoice { font-size: 15px; font-weight: 700; padding: 10px 22px; border-radius: 8px;
  border: none; box-shadow: 0 2px 6px rgba(46,125,50,.25); }
.item-row { display: flex; gap: 6px; align-items: center; margin-bottom: 5px; }
.item-row .it-desc { flex: 1; }
.item-row .it-qty { width: 70px; }
.item-row .it-price { width: 96px; }
.item-row .it-amt { width: 90px; text-align: right; font-weight: 600; font-size: 12.5px; }
.item-row input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; font-size: 13px; }
.item-row .it-del { background: none; border: none; color: #b00020; font-size: 17px; cursor: pointer; }

/* --------------------------------------------------------------- to do bits -- */
.hg-chip { font-family: 'Courier New', monospace; font-weight: 900; font-size: 11px;
  background: #101423; color: #ffd23f; border: 2px solid #2b3860; border-radius: 4px;
  padding: 2px 7px; margin-left: 8px; letter-spacing: .5px; white-space: nowrap; }
.who-menu { position: fixed; z-index: 80; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 8px 26px rgba(0,0,0,.22); padding: 6px; min-width: 170px; }
.who-menu .who-head { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #888; padding: 4px 8px 6px; }
.who-menu button { display: block; width: 100%; text-align: left; border: none;
  background: transparent; padding: 7px 9px; border-radius: 5px; cursor: pointer;
  font: inherit; font-size: 13px; }
.who-menu button:hover { background: #eef4fb; }
.who-menu .who-cancel { color: #888; border-top: 1px solid #eee; margin-top: 4px; }
.recur-row { display: flex; align-items: center; gap: 8px; padding: 7px 0;
  border-bottom: 1px solid #f0f0f0; font-size: 12.5px; }
.recur-row > span:first-child { flex: 1; min-width: 0; }
.shop-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.shop-row input.sh-label { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 5px; font-size: 13px; }
.shop-row input.sh-cost { width: 96px; text-align: right; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 5px; font-size: 13px; }
.shop-row .sh-del { background: none; border: none; color: #b00020; font-size: 18px;
  cursor: pointer; padding: 0 4px; }
.gs-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: start; }
@media (max-width: 900px) { .gs-body { grid-template-columns: 1fr; } }
.ec-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 5px; }
.ec-row label { font-size: 11.5px; color: #666; white-space: nowrap; }

/* ------------------------------------------------------------ autofill bits -- */
#a_paste { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid var(--line);
  border-radius: 5px; font: inherit; font-size: 13px; resize: vertical; }
#a_autofill_wrap { background: #faf7ff; border: 1px solid #e5daf7; border-radius: 8px;
  padding: 10px 12px; }
#a_autofill { background: #6a4ca8; color: #fff; border: none; border-radius: 6px;
  padding: 7px 13px; font-weight: 600; cursor: pointer; font-size: 12.5px; }
#a_autofill:disabled { opacity: .5; cursor: default; }
.ai-badge { background: #6a4ca8; color: #fff; border-radius: 4px; font-size: 10px;
  font-weight: 800; padding: 1px 5px; letter-spacing: .05em; margin-left: 6px; }

/* ------------------------------------------------------------ selection bar -- */
#jobSelBar { position: sticky; top: 46px; z-index: 15; display: flex; align-items: center;
  gap: 10px; padding: 8px 14px; background: #2d6cb0; color: #fff; font-size: 13px;
  font-weight: 600; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
#jobSelBar button { border: none; border-radius: 6px; background: rgba(255,255,255,.16);
  color: #fff; padding: 6px 12px; font-weight: 600; cursor: pointer; font-size: 12.5px; }
#jobSelBar button:hover { background: rgba(255,255,255,.28); }
#jobSelCount { flex: 1; }
.us-go { cursor: pointer; }

/* ------------------------------------------------------------ clock-in box -- */
/* Only when there's room beside the content, same as the live app. */
#clockBoxPanel { position: fixed; right: 16px; top: 96px; width: 280px; z-index: 15; }
@media (max-width: 1400px) { #clockBoxPanel { display: none; } }

/* Stacked modals: a confirm raised from inside a modal sits above it. */
#modalHost .modal-layer { position: fixed; inset: 0; }

/* ------------------------------------------------------------ update notice -- */
#updateBar { position: sticky; top: 46px; z-index: 16; display: flex; align-items: center;
  gap: 12px; padding: 8px 14px; background: #ffd23f; color: #15334a;
  font-size: 13px; font-weight: 700; }
#updateBar[hidden] { display: none; }
#updateBar button { border: none; border-radius: 6px; background: #15334a; color: #fff;
  padding: 6px 12px; font-weight: 700; cursor: pointer; font-size: 12.5px; }

/* -------------------------------------------------------------- board columns -- */
/* Names and phone numbers were being clipped to "Mik" on a 1440px screen. A
   plain `width` is only a hint -- the stages column is wide enough that the
   browser squeezes everything else -- so these get a floor they cannot go
   under. The table scrolls sideways instead, which is what .tablewrap is for. */
/* A clipped price is worse than a narrow table: "5500" showing as "550" is a
   number somebody could act on. */
.col-date  { min-width: 88px; }
.col-price { min-width: 92px; }
.col-name  { min-width: 165px; }
.col-phone { min-width: 145px; }
.col-job   { min-width: 155px; }
.col-desc  { min-width: 175px; }
td.col-name input.cell, td.col-phone input.cell { text-overflow: ellipsis; }
@media (max-width: 1200px) { .col-name { min-width: 125px; } .col-phone { min-width: 125px; } }

/* --------------------------------------------------------- tighter bubbles -- */
/* The thread read airy: 8px gaps, tall timestamp blocks. Consolidated: small
   gap, slimmer padding, and the timestamp as a quiet inline line instead of a
   ruled-off block. */
.bubble { padding: 6px 11px !important; font-size: 13px !important; border-radius: 12px !important; }
.bubble .b-time { font-size: 10px !important; font-weight: 600 !important; opacity: .55 !important;
  margin-top: 2px !important; padding-top: 0 !important; border-top: none !important;
  letter-spacing: .2px; }
.bubble .msg-tag { margin-bottom: 1px !important; }
.msg-thread .bubble + .bubble { margin-top: 0; }

/* The bubble ITSELF collapses whitespace; only the message text keeps its own
   line breaks. Template newlines were rendering as blank space inside every
   bubble. */
.bubble { white-space: normal !important; }
.bubble .b-body { white-space: pre-wrap; overflow-wrap: anywhere; display: block; }
.bubble .b-time { display: block; text-align: right; }

/* ============================================================ board polish == */
/* 1. Cell dividers, same as the live board: a light rule down every column so
      the eye can follow a row across. Against the tinted stage rows these
      read as white lines. */
tr.job td { border-right: 1px solid var(--line); padding: 2px 6px; vertical-align: middle; }
tr.job td:last-child { border-right: none; }
thead th { border-right: 1px solid var(--line); }
thead th:last-child { border-right: none; }

/* 2. Everything in Jobs wraps: the cells are auto-growing textareas now, so a
      long job name or description makes the row taller instead of clipping.
      The chips and the action buttons stay on one line -- letting those wrap
      stacked nine chips vertically and made every row 250px tall. */
tr.job td { white-space: normal; }
tr.job td.chips, tr.job td.actions { white-space: nowrap; }
textarea.cell {
  width: 100%; box-sizing: border-box; display: block;
  border: 1px solid transparent; background: transparent;
  padding: 3px 4px; font: inherit; font-size: 13px; border-radius: 4px;
  resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere;
  line-height: 1.35; min-height: 1.6em;
}
textarea.cell:focus { border-color: #2d6cb0; background: #fff; outline: none; }
/* Numbers and dates stay on one line -- wrapping a price helps nobody. */
td.col-date textarea.cell, td.col-price textarea.cell { white-space: nowrap; }

/* 3. Coming: nothing on this page is drag-resizable. */
.sum-edit, textarea.sum-edit, .sum-edit-ta { resize: none !important; }

/* 4. A finished to-do sits quieter, and only the TASK is struck through --
      who did it and when stay readable. */
.todo-item.done { padding: 5px 2px; opacity: .92; }
.todo-item.done .todo-text { text-decoration: none; font-size: 13px; }
.todo-item.done .td-task { text-decoration: line-through; color: #9a9a9a; }
.todo-item.done .td-meta { text-decoration: none; color: #8a8a8a; font-size: 11.5px;
  white-space: nowrap; }
.todo-item.done .todo-check { width: 18px; height: 18px; }

/* ------------------------------------------------------------- text consent -- */
.chip.no-texts { background: #f3f4f6; color: #8a8f96; border-color: #e0e3e7;
  cursor: default; font-weight: 600; }
.no-texts-banner { margin: 0 14px; padding: 7px 11px; border-radius: 7px;
  background: #fdf3f3; border: 1px solid #f0d0d0; color: #8a3b3b; font-size: 12.5px; }
.tl-mode button[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------------------------------------------- Jobs view layout EDIT MODE -- */
/* Floating panel with a width dial per Jobs-view column, styles copied from
   the live app's #layoutPanel block. */
#layoutPanel { position: fixed; left: 14px; bottom: 14px; z-index: 700; background: #1a3a52; color: #fff;
  border-radius: 12px; box-shadow: 0 8px 26px rgba(0,0,0,.4); padding: 12px 14px; width: 240px; }
#layoutPanel h4 { margin: 0 0 8px; font-size: 13px; }
#layoutPanel .lp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#layoutPanel .lp-row label { flex: 1; font-size: 12px; }
#layoutPanel .lp-row input { width: 74px; padding: 5px 6px; border: none; border-radius: 5px; font-size: 13px; text-align: right; }
#layoutPanel .lp-btns { display: flex; gap: 6px; margin-top: 10px; }
#layoutPanel .lp-btns button { flex: 1; border: none; border-radius: 6px; padding: 9px 6px; font-weight: 800; cursor: pointer; font-size: 12px; }

/* Inline saving spinner (Twilio save), same as live's. */
@keyframes kcspin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block; width: 15px; height: 15px; vertical-align: -2px;
  border: 2px solid #cbd5e1; border-top-color: #2d6cb0; border-radius: 50%;
  animation: kcspin .7s linear infinite; margin-right: 7px;
}

/* Employee badge under the company name in the Jobs grid, copied from live. */
.emp-badge { display: block; font-size: 11.5px; color: #222; padding: 0 6px 2px; margin-top: -2px; }
tr.gone .emp-badge, tr.done .emp-badge { color: #666; }