/* =====================================================================
   The Electrical Site CRM — design system
   Built on Bootstrap 5, overriding with brand tokens.
   Brand red #D30D17 (from the TES logo). App-shell with dark left sidebar.
   ===================================================================== */

:root {
  --tes-red:        #D30D17;
  --tes-red-dark:   #A50A12;
  --tes-red-soft:   rgba(211, 13, 23, 0.08);
  --tes-red-line:   rgba(211, 13, 23, 0.25);

  --ink:            #1B1E24;
  --ink-2:          #232833;
  --ink-3:          #2E3440;

  --app-bg:         #F6F7F9;
  --surface:        #FFFFFF;
  --border:         #E6E9EF;
  --border-strong:  #D7DCE4;

  --text:           #232833;
  --text-muted:     #6A7382;
  --text-dim:       #9AA3B1;

  --sidebar-w:      248px;
  --topbar-h:       60px;
  --radius:         12px;
  --radius-sm:      8px;
  --shadow-sm:      0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-md:      0 4px 12px rgba(16, 24, 40, 0.08);
}

body {
  background: var(--app-bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

a { color: var(--tes-red); text-decoration: none; }
a:hover { color: var(--tes-red-dark); }

h1, h2, h3, h4, h5 { color: var(--ink); font-weight: 650; letter-spacing: -0.02em; }

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  background: var(--ink); color: #C7CDD8;
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 1040; transition: transform .25s ease;
}
.sidebar__brand {
  min-height: var(--topbar-h);
  display: flex; align-items: center; gap: .6rem;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: #fff; font-weight: 750; letter-spacing: -0.02em; font-size: 1.02rem;
}
.sidebar__brand a { display: inline-flex; align-items: center; height: 100%; width: 100%; }
.sidebar__logo { max-height: 48px; max-width: 100%; width: auto; display: block; }
.sidebar__brand-fallback { color: #fff; font-weight: 750; letter-spacing: -0.02em; }
.sidebar__brand .bolt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; background: var(--tes-red);
  border-radius: 8px; color: #fff; font-weight: 800;
  box-shadow: 0 2px 8px rgba(211,13,23,.4);
}
.sidebar__nav { padding: .75rem .6rem 1.5rem; overflow-y: auto; flex: 1; }

.nav-group__label {
  text-transform: uppercase; font-size: .68rem; letter-spacing: .09em;
  color: var(--text-dim); padding: 1rem .75rem .4rem; font-weight: 700;
}
.nav-link-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .58rem .75rem; margin: .1rem 0;
  border-radius: var(--radius-sm); color: #C7CDD8;
  font-size: .925rem; font-weight: 500;
  border-left: 3px solid transparent;
  transition: background .12s ease, color .12s ease; white-space: nowrap;
}
.nav-link-item:hover { background: var(--ink-3); color: #fff; }
.nav-link-item .ico { width: 18px; height: 18px; flex: 0 0 18px; opacity: .85; }
.nav-link-item.active { background: var(--tes-red-soft); color: #fff; border-left-color: var(--tes-red); }
.nav-link-item.active .ico { opacity: 1; color: var(--tes-red); }
.nav-link-item.is-disabled { opacity: .38; cursor: default; pointer-events: none; }
.nav-link-item .soon {
  margin-left: auto; font-size: .6rem; text-transform: uppercase; letter-spacing: .05em;
  background: rgba(255,255,255,.08); color: var(--text-dim);
  padding: .1rem .4rem; border-radius: 4px;
}

.content { flex: 1; min-width: 0; margin-left: var(--sidebar-w); display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-h); background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem;
  position: sticky; top: 0; z-index: 1020;
}
.topbar__title { font-size: 1.02rem; font-weight: 650; color: var(--ink); }
.topbar__crumb { color: var(--text-dim); font-size: .85rem; }
.topbar__spacer { flex: 1; }
.topbar__toggle { display: none; background: none; border: 0; color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; }

.user-chip { display: flex; align-items: center; gap: .6rem; padding: .3rem; border-radius: 40px; cursor: pointer; }
.user-chip:hover { background: var(--app-bg); }
.user-chip__avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--tes-red);
  color: #fff; font-weight: 700; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
}
.user-chip__name { font-size: .875rem; font-weight: 600; color: var(--ink); line-height: 1.1; }
.user-chip__role { font-size: .72rem; color: var(--text-muted); }

.page { padding: 1.75rem 2rem; width: 100%; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; gap: 1rem; }
.page-head h1 { font-size: 1.5rem; margin: 0; }
.page-head .sub { color: var(--text-muted); font-size: .9rem; margin-top: .15rem; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card .card-body { padding: 1.25rem 1.35rem; }

.stat { position: relative; overflow: hidden; }
.stat__label { color: var(--text-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 650; }
.stat__value { font-size: 2rem; font-weight: 720; color: var(--ink); line-height: 1.1; margin-top: .35rem; letter-spacing: -0.03em; }
.stat__foot { color: var(--text-dim); font-size: .8rem; margin-top: .35rem; }
.stat::after { content: ""; position: absolute; right: -20px; top: -20px; width: 90px; height: 90px; border-radius: 50%; background: var(--tes-red-soft); }

.btn { border-radius: var(--radius-sm); font-weight: 600; font-size: .9rem; padding: .5rem .95rem; letter-spacing: -0.01em; }
.btn-primary { background: var(--tes-red); border-color: var(--tes-red); }
.btn-primary:hover, .btn-primary:focus { background: var(--tes-red-dark); border-color: var(--tes-red-dark); }
.btn-outline-secondary { color: var(--text); border-color: var(--border-strong); background: var(--surface); }
.btn-outline-secondary:hover { background: var(--app-bg); color: var(--ink); border-color: var(--border-strong); }
.btn-link { color: var(--tes-red); font-weight: 600; }

.data-card { padding: 0; overflow: hidden; }
.data-toolbar { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.data-toolbar .form-control, .data-toolbar .form-select { max-width: 240px; }
.data-toolbar .gp-min-group { width: auto; flex-wrap: nowrap; }
.data-toolbar .gp-min-group .form-control { width: 100px; }

table.table { margin: 0; color: var(--text); }
table.table thead th {
  background: #FBFCFD; border-bottom: 1px solid var(--border); color: var(--text-muted);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  padding: .8rem 1.1rem; white-space: nowrap;
}
table.table tbody td { padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: .9rem; }
table.table tbody tr:last-child td { border-bottom: 0; }
table.table.table-hover tbody tr:hover { background: var(--tes-red-soft); }
.cell-strong { font-weight: 650; color: var(--ink); }
.cell-mono { font-variant-numeric: tabular-nums; color: var(--text-muted); }

.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .6rem; border-radius: 40px; font-size: .74rem; font-weight: 650; line-height: 1; }
.pill-green  { background: #E7F6EC; color: #1B7B43; }
.pill-grey   { background: #EEF0F4; color: #5B6472; }
.pill-red    { background: var(--tes-red-soft); color: var(--tes-red-dark); }
.pill-amber  { background: #FEF3E2; color: #B4690E; }
.pill-blue   { background: #E8F0FE; color: #1552B8; }
.pill-outline{ background: #fff; border: 1px solid var(--border-strong); color: var(--text-muted); }

.trade-tag {
  display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-muted); background: var(--app-bg); border: 1px solid var(--border);
  border-radius: 5px; padding: .12rem .4rem; margin-left: .4rem;
}

.form-label { font-weight: 600; font-size: .85rem; color: var(--ink); margin-bottom: .35rem; }
.form-control, .form-select { border-color: var(--border-strong); border-radius: var(--radius-sm); padding: .55rem .75rem; font-size: .92rem; }
.form-control:focus, .form-select:focus { border-color: var(--tes-red); box-shadow: 0 0 0 3px var(--tes-red-soft); }
.form-check-input:checked { background-color: var(--tes-red); border-color: var(--tes-red); }
.form-check-input:focus { border-color: var(--tes-red); box-shadow: 0 0 0 3px var(--tes-red-soft); }

.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: radial-gradient(1200px 500px at 100% -10%, var(--tes-red-soft), transparent 60%), var(--app-bg);
}
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-md); overflow: hidden; }
.auth-card__head { padding: 1.6rem 1.75rem .5rem; display: flex; align-items: center; gap: .65rem; }
.auth-card__head .bolt {
  width: 34px; height: 34px; border-radius: 9px; background: var(--tes-red); color: #fff; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(211,13,23,.45);
}
.auth-card__body { padding: 1rem 1.75rem 1.9rem; }
.auth-card__body h1 { font-size: 1.15rem; margin-bottom: .3rem; }

.alert { border-radius: var(--radius-sm); border: 0; font-size: .9rem; }
.alert-danger  { background: #FDECEC; color: #A21B1B; }
.alert-success { background: #E7F6EC; color: #1B7B43; }
.alert-info    { background: #E8F0FE; color: #1552B8; }
.alert-warning { background: #FEF3E2; color: #B4690E; }

.sidebar__backdrop { display: none; position: fixed; inset: 0; background: rgba(16,24,40,.45); z-index: 1035; }

@media (max-width: 992px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .sidebar__backdrop.show { display: block; }
  .content { margin-left: 0; }
  .topbar__toggle { display: inline-flex; }
  .page { padding: 1.15rem; }
}

:focus-visible { outline: 2px solid var(--tes-red); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Topbar logo */
.topbar__logo { display: inline-flex; align-items: center; height: 40px; }
.topbar__logo img { max-height: 38px; max-width: 180px; width: auto; display: block; }
.topbar__logo-fallback { font-weight: 750; color: var(--ink); letter-spacing: -0.02em; }
.topbar__divider { width: 1px; height: 26px; background: var(--border); margin: 0 .35rem; }
@media (max-width: 576px) {
  .topbar__logo img { max-height: 24px; }
  .topbar__divider { display: none; }
}

/* Targets FY grid */
.targets-grid { min-width: 1000px; }
.targets-grid th, .targets-grid td { white-space: nowrap; }
.targets-grid th.sticky-col, .targets-grid td.sticky-col { white-space: normal; }
.targets-grid .sticky-col {
  position: sticky; left: 0; z-index: 2;
  background: var(--surface);
  min-width: 300px; max-width: 340px; width: 320px;
  box-shadow: 1px 0 0 var(--border);
  white-space: normal; word-break: break-word; line-height: 1.3;
}
.targets-grid .sticky-col a {
  display: block; max-width: 100%;
  white-space: normal; word-break: break-word;
}
.targets-grid thead .sticky-col { background: #FBFCFD; z-index: 3; }
.targets-grid thead th.is-current { background: var(--tes-red-soft); color: var(--tes-red-dark); }
.targets-grid td.is-current { background: rgba(211,13,23,.03); }
.targets-grid td.is-behind { background: #FEF3E2; }
.targets-grid tfoot td { border-top: 2px solid var(--border); background: #FBFCFD; }
.target-input-wrap { display: inline-flex; align-items: center; justify-content: flex-end; width: 78px; }
.target-input-currency {
  font-size: .85rem; color: var(--text-muted); flex-shrink: 0;
}
.target-input {
  width: auto; max-width: 66px; text-align: right;
  border: 1px solid transparent; background: transparent;
  border-radius: 6px; padding: .3rem .2rem .3rem .1rem;
  font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--text);
}
.target-input:hover { border-color: var(--border); }
.target-input:focus { border-color: var(--tes-red); background: #fff; outline: none; box-shadow: 0 0 0 2px var(--tes-red-soft); }
.target-input::placeholder { color: var(--text-dim); }

/* Customer tabs */
.crm-tabs { border-bottom: 1px solid var(--border); gap: .25rem; }
.crm-tabs .nav-link {
  border: 0; color: var(--text-muted); font-weight: 600; font-size: .92rem;
  padding: .6rem .95rem; border-bottom: 2px solid transparent; border-radius: 0;
}
.crm-tabs .nav-link:hover { color: var(--ink); border-bottom-color: var(--border-strong); }
.crm-tabs .nav-link.active { color: var(--tes-red); border-bottom-color: var(--tes-red); background: transparent; }
.tab-count {
  display: inline-block; min-width: 18px; padding: 0 .35rem; margin-left: .25rem;
  font-size: .7rem; font-weight: 700; text-align: center;
  background: var(--app-bg); color: var(--text-muted); border-radius: 20px;
}
.crm-tabs .nav-link.active .tab-count { background: var(--tes-red-soft); color: var(--tes-red-dark); }

/* Notes */
.note-body { white-space: pre-wrap; }

/* Dropzone */
.dropzone {
  display: block; cursor: pointer;
  border: 2px dashed var(--border-strong); border-radius: var(--radius);
  padding: 1.75rem 1rem; text-align: center; color: var(--text-muted);
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.is-drag { border-color: var(--tes-red); background: var(--tes-red-soft); }
.dropzone__icon { font-size: 1.6rem; margin-bottom: .4rem; color: var(--tes-red); }

/* Targets cell save feedback */
.target-input.is-saving { background: #FFFDF0; border-color: #E9D8A6; }
.target-input.is-saved  { background: #E9F7EF; border-color: #34C77B; transition: background .3s, border-color .3s; }
.target-input.is-error  { background: #FEECEC; border-color: #E5484D; }

/* Inline tier select + row links on customers list */
.tier-select.tier-saved { background: #E9F7EF; border-color: #34C77B; transition: background .3s, border-color .3s; }
.tier-select { width: 92px; display: inline-block; }
.table-hover .row-link { color: inherit; text-decoration: none; display: block; }
.table-hover .row-link:hover { color: var(--tes-red); }

/* Settings sub-nav */
.settings-subnav { display: flex; gap: .5rem; }
.settings-subnav .btn.active { background: var(--tes-red); border-color: var(--tes-red); color: #fff; }

/* ============================ KANBAN ============================ */
.kanban-board {
  display: flex; gap: 14px; align-items: flex-start;
  overflow-x: auto; padding: 4px 4px 20px; min-height: 60vh;
}
.kanban-col {
  flex: 0 0 288px; width: 288px;
  background: #F1F3F5; border-radius: 14px; padding: 10px;
  display: flex; flex-direction: column; max-height: calc(100vh - 210px);
}
.kanban-col--add { background: transparent; padding-top: 12px; }
.kanban-col__head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 10px; cursor: grab;
}
.kanban-col__title {
  font-weight: 700; font-size: .92rem; color: var(--ink);
  flex: 1; outline: none; border-radius: 6px; padding: 2px 4px;
}
.kanban-col__title[contenteditable]:focus { background: #fff; box-shadow: 0 0 0 2px var(--tes-red-soft); }
.kanban-col__count {
  font-size: .72rem; font-weight: 700; color: var(--text-muted);
  background: #E2E6EA; border-radius: 20px; padding: 1px 9px;
}
.kanban-col__del {
  border: 0; background: transparent; color: var(--text-muted);
  font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0 4px; opacity: 0;
  transition: opacity .12s;
}
.kanban-col:hover .kanban-col__del { opacity: .6; }
.kanban-col__del:hover { opacity: 1; color: var(--tes-red); }

.kanban-cards {
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; padding: 2px; min-height: 8px;
}
.kanban-card {
  background: #fff; border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(9,30,66,.12), 0 0 0 1px rgba(9,30,66,.04);
  cursor: pointer; position: relative;
  transition: box-shadow .12s, transform .06s;
}
.kanban-card:hover { box-shadow: 0 2px 6px rgba(9,30,66,.18), 0 0 0 1px rgba(9,30,66,.06); }
.kanban-card:active { transform: scale(.997); }

/* Whole-card pastel backgrounds — due state first, then label colour */
.kanban-card.kbg-overdue { background: #FDE6E8; }   /* pastel red */
.kanban-card.kbg-soon    { background: #FFF6DE; }   /* pastel yellow */
.kanban-card.kbg-red     { background: #FBE4E6; }
.kanban-card.kbg-orange  { background: #FDEBDD; }
.kanban-card.kbg-green   { background: #E4F6EC; }
.kanban-card.kbg-blue    { background: #E6ECFD; }
.kanban-card.kbg-purple  { background: #F0E7FA; }
.kanban-card.kbg-grey    { background: #EDF0F3; }
.kanban-card__label { display: inline-block; width: 38px; height: 7px; border-radius: 20px; margin-bottom: 8px; }
.kanban-card__title { font-size: .875rem; color: var(--ink); line-height: 1.35; word-break: break-word; }
.kanban-card__desc-flag { position: absolute; top: 10px; right: 12px; color: var(--text-dim); font-size: .8rem; }
.kanban-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.kanban-card__meta:empty { margin-top: 0; }

.kanban-badge {
  font-size: .68rem; font-weight: 600; color: var(--text-muted);
  background: #EEF0F2; border-radius: 6px; padding: 2px 7px;
}
.kanban-badge.is-soon { background: #FFF3E0; color: #B26A00; }
.kanban-badge.is-overdue { background: #FDE7E9; color: #C62531; }
.kanban-badge.is-ontrack { background: #E4F6EC; color: #1E7A47; }
.kanban-badge--cust { background: #E7F0FE; color: #1B5FB3; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-avatar {
  margin-left: auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--tes-red); color: #fff; font-size: .64rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

.kanban-add-card {
  border: 0; background: transparent; color: var(--text-muted);
  text-align: left; padding: 8px 6px; margin-top: 6px; border-radius: 8px;
  font-size: .85rem; font-weight: 600; cursor: pointer; width: 100%;
}
.kanban-add-card:hover { background: #E6E9EC; color: var(--ink); }
.kanban-add-inline { margin-top: 6px; }
.kanban-add-col .form-control { background: rgba(255,255,255,.7); border: 0; font-weight: 600; }
.kanban-add-col .form-control:focus { background: #fff; }

/* Drag states */
.kanban-card--ghost { opacity: .4; }
.kanban-card--drag { transform: rotate(2deg); box-shadow: 0 8px 20px rgba(9,30,66,.28) !important; }
.kanban-col--ghost { opacity: .5; }

/* Label palette */
.label-red { background: #E5484D; }
.label-orange { background: #F76B15; }
.label-green { background: #30A46C; }
.label-blue { background: #3E63DD; }
.label-purple { background: #8E4EC6; }
.label-grey { background: #8B97A7; }

/* Activity feed / timeline */
.activity-feed { list-style: none; margin: 0; padding: 0; }
.activity-item {
  display: flex; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.activity-item:last-child { border-bottom: 0; padding-bottom: 0; }
.activity-item:first-child { padding-top: 0; }
.activity-icon {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .9rem; background: var(--app-bg);
}
.act-call  { background: #E7F0FE; }
.act-email { background: #EDE9FE; }
.act-visit { background: #E6F6EC; }
.act-note  { background: #FFF4E0; }
.activity-body { flex: 1; min-width: 0; }
.activity-kind { font-weight: 600; color: var(--ink); font-size: .9rem; }
.activity-note {
  margin-top: 3px; color: var(--text); font-size: .88rem;
  white-space: pre-wrap; word-break: break-word;
}

/* Targets: target + actual stacked in each cell */
.tcell { vertical-align: top; }
.tcell { vertical-align: middle; padding: 10px 14px !important; }
.tcell-target { line-height: 1.3; font-variant-numeric: tabular-nums; }
.tcell-actual {
  font-size: .8rem; font-weight: 800; line-height: 1.3; margin-top: 3px;
  color: var(--text-muted); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tcell-actual:empty, .tcell-actual .tcell-actual-val:empty { }
.tcell-arrow { font-size: .68rem; margin-right: 3px; }
.tcell-actual.act-met    { color: #12854a; }
.tcell-actual.act-close  { color: #b26a00; }
.tcell-actual.act-behind { color: #d1122a; }

/* Whole-cell tint + accent so status reads at a glance across the grid */
.targets-grid td.cell-act-met    { background: #E8F7EE; box-shadow: inset 3px 0 0 #2F9E63; }
.targets-grid td.cell-act-close  { background: #FEF4E3; box-shadow: inset 3px 0 0 #E8930C; }
.targets-grid td.cell-act-behind { background: #FDE8EB; box-shadow: inset 3px 0 0 #E02440; }
/* Keep a little breathing room so the accent bar never touches the sticky name column */
.targets-grid .sticky-col { padding-right: 18px; }
.targets-grid td.is-current.cell-act-met,
.targets-grid td.is-current.cell-act-close,
.targets-grid td.is-current.cell-act-behind { outline: 2px solid rgba(211,13,23,.25); outline-offset: -2px; }

/* FY variance headline badge */
.variance-badge {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 1.5rem; font-weight: 800; padding: 2px 12px; border-radius: 10px;
}
.variance-badge.is-up   { color: #12854a; background: #E8F7EE; }
.variance-badge.is-down { color: #d1122a; background: #FDE8EB; }
.variance-pct { font-size: .8rem; font-weight: 700; opacity: .75; }

/* Sharp-aX sync status pill */
.sync-pill {
  font-size: .72rem; font-weight: 700; padding: 3px 12px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .04em;
}
.sync-pill.pill-amber { background: #FEF4E3; color: #b26a00; }
.sync-pill.pill-blue  { background: #E7F0FE; color: #1B5FB3; }
.sync-pill.pill-green { background: #E8F7EE; color: #12854a; }
.sync-pill.pill-red   { background: #FDE8EB; color: #d1122a; }
.sync-pill.pill-grey  { background: #EEF0F2; color: #6b7580; }
.sync-pill.pill-blue::before { content: '●'; margin-right: 5px; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Sharp-aX sync status banner */
.sync-banner {
  padding: 12px 16px; border-radius: 10px; font-weight: 600; font-size: .9rem;
  border-left: 4px solid transparent;
}
.sync-banner--idle   { background: #EEF0F2; color: #6b7580; border-left-color: #b8c0c8; }
.sync-banner--prep   { background: #FEF4E3; color: #b26a00; border-left-color: #E8930C; }
.sync-banner--running { background: #E7F0FE; color: #1B5FB3; border-left-color: #3E63DD; }
.sync-banner--running::before { content: '●'; margin-right: 8px; animation: pulse 1s infinite; }
.sync-banner--done   { background: #E8F7EE; color: #12854a; border-left-color: #2F9E63; }
.sync-banner--failed { background: #FDE8EB; color: #d1122a; border-left-color: #E02440; }

/* Communications tab */
.comms-filter {
  border: 0; background: transparent; padding: 8px 10px; border-radius: 8px;
  font-size: .88rem; font-weight: 600; color: var(--text-muted); margin-bottom: 2px;
  display: flex; justify-content: space-between; align-items: center;
}
.comms-filter:hover { background: var(--app-bg); color: var(--ink); }
.comms-filter.active { background: var(--tes-red-soft); color: var(--tes-red-dark); }
.comms-list { display: flex; flex-direction: column; gap: 8px; }
.comms-item { background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.comms-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer;
}
.comms-head:hover { background: #FBFCFD; }
.comms-dir {
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 6px; flex: 0 0 auto;
}
.comms-dir.dir-in  { background: #E7F0FE; color: #1B5FB3; }
.comms-dir.dir-out { background: #E8F7EE; color: #12854a; }
.comms-subject { font-weight: 600; color: var(--ink); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comms-date { font-size: .78rem; color: var(--text-dim); flex: 0 0 auto; }
.comms-meta { padding: 0 14px 8px; font-size: .8rem; color: var(--text-muted); }
.comms-body { padding: 0 14px 14px; }
.comms-frame { width: 100%; min-height: 320px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.comms-plain { white-space: pre-wrap; font-family: inherit; font-size: .85rem; background: #FBFCFD; padding: 10px; border-radius: 8px; }

/* Customer site addresses list */
.addr-list { display: flex; flex-direction: column; gap: 6px; }
.addr-item { font-size: .85rem; color: var(--text); padding: 6px 10px; background: var(--app-bg); border-radius: 8px; }

/* Dashboard action rows + health bar */
.dash-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.dash-row:last-child { border-bottom: 0; }
.stat--alert { box-shadow: inset 0 0 0 1px #E02440, 0 1px 2px rgba(9,30,66,.06); }
.stat--alert .stat__value { color: #d1122a; }
.stat--warn { box-shadow: inset 0 0 0 1px #E8930C, 0 1px 2px rgba(9,30,66,.06); }
.stat--warn .stat__value { color: #b26a00; }
.health-bar { display: flex; height: 14px; border-radius: 8px; overflow: hidden; background: var(--app-bg); }
.health-seg { height: 100%; }
.health-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }

/* Email signature preview */
.sig-preview { border: 1px solid var(--border); border-radius: 8px; padding: 14px; min-height: 120px; background: #fff; font-size: .9rem; }
.sig-preview img { max-width: 100%; }

/* Rich-text email compose */
.rte-toolbar { display: flex; gap: 4px; margin-bottom: 6px; }
.rte-toolbar button {
  border: 1px solid var(--border); background: #fff; border-radius: 6px;
  padding: 4px 10px; font-size: .82rem; cursor: pointer; color: var(--ink);
}
.rte-toolbar button:hover { background: var(--app-bg); }
.rte-editor {
  min-height: 220px; max-height: 420px; overflow-y: auto; padding: 12px;
  font-size: .9rem; line-height: 1.5; cursor: text;
}
.rte-editor:focus { outline: none; border-color: var(--tes-red); box-shadow: 0 0 0 2px var(--tes-red-soft); }

/* Cadence filter bar */
.cadence-filters { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.cadence-filters .form-control, .cadence-filters .form-select { max-width: 220px; }
.cadence-filters .form-control[name="q"] { max-width: 260px; }

/* ===== Calendar ===== */
.cal-wrap { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.cal-day {
  display: flex; gap: 18px; background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(9,30,66,.05);
}
.cal-day--today { border-color: var(--tes-red); box-shadow: 0 0 0 1px var(--tes-red), 0 4px 12px rgba(211,13,23,.08); }
.cal-day__date {
  flex: 0 0 58px; text-align: center; padding-top: 2px;
  border-right: 1px solid var(--border); padding-right: 16px;
}
.cal-day__dow { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 700; }
.cal-day__num { font-size: 1.9rem; font-weight: 800; line-height: 1.05; color: var(--ink); }
.cal-day--today .cal-day__num { color: var(--tes-red); }
.cal-day__mon { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.cal-day__events { flex: 1; min-width: 0; }
.cal-day__label { font-weight: 700; font-size: .95rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.cal-chip { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 20px; background: var(--app-bg); color: var(--text-muted); }
.cal-chip--today { background: #FDE6E8; color: #C62531; }

.cal-event { display: flex; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border); }
.cal-event:first-of-type { border-top: 0; padding-top: 0; }
.cal-event__time {
  flex: 0 0 62px; display: flex; flex-direction: column; align-items: flex-start;
  font-variant-numeric: tabular-nums;
}
.cal-event__start { font-weight: 700; color: var(--ink); font-size: .95rem; }
.cal-event__end { font-size: .78rem; color: var(--text-muted); }
.cal-event--allday .cal-event__time { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; }
.cal-event__body { flex: 1; min-width: 0; border-left: 3px solid var(--tes-red); padding-left: 14px; }
.cal-event--allday .cal-event__body { border-left-color: #8B97A7; }
.cal-event__title { font-weight: 600; color: var(--ink); }
.cal-event__loc { font-size: .82rem; color: var(--text-muted); margin-top: 2px; }

.cal-empty { text-align: center; padding: 70px 20px; color: var(--text-muted); }
.cal-empty__icon { font-size: 2.6rem; margin-bottom: 10px; }
.cal-empty__title { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.cal-empty__sub { font-size: .9rem; margin-top: 4px; }

/* Kanban filter selects — auto width but leave room for the dropdown arrow */
.kb-select { width: auto; padding-right: 2.2rem; min-width: 120px; }

/* Ensure every dropdown select leaves room for its arrow (fixes text/arrow overlap) */
.form-select { padding-right: 2.25rem; background-position: right 0.65rem center; }

/* ============================================================
   Responsive tables — on mobile, collapse to priority columns
   with a tap-to-expand detail row. Desktop is unchanged.
   Mark cells: class="col-primary" (always shown),
   class="col-hide" (hidden on mobile, shown when expanded),
   and give every td a data-label="Column name".
   ============================================================ */
@media (max-width: 720px) {
  table.rtable, table.rtable thead, table.rtable tbody,
  table.rtable th, table.rtable td, table.rtable tr { display: block; }

  table.rtable thead { display: none; }               /* header row hidden on mobile */

  table.rtable tbody tr {
    position: relative;
    border-bottom: 1px solid var(--border);
    padding: .85rem 2.4rem .85rem 1.1rem;              /* room on right for chevron */
  }
  table.rtable tbody tr:last-child { border-bottom: 0; }

  /* Priority cells: shown, stacked; first one is the headline */
  table.rtable td { border: 0 !important; padding: 2px 0 !important; font-size: .9rem; }
  table.rtable td.col-primary { font-weight: 600; }

  /* Secondary cells: hidden until the row is expanded */
  table.rtable td.col-hide { display: none; }
  table.rtable tr.is-open td.col-hide { display: block; }

  /* When expanded, secondary cells show their column label */
  table.rtable tr.is-open td.col-hide::before {
    content: attr(data-label) ": ";
    font-weight: 600; color: var(--text-muted);
  }

  /* The expand chevron */
  table.rtable tbody tr::after {
    content: "";
    position: absolute; top: 1.05rem; right: 1rem;
    width: 8px; height: 8px; border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg); transition: transform .15s;
  }
  table.rtable tbody tr.is-open::after { transform: rotate(225deg); }

  /* Action cell: hidden until expanded, then full-width buttons */
  table.rtable td.col-actions { display: none; }
  table.rtable tr.is-open td.col-actions { display: block; margin-top: 8px; }
  table.rtable tr.is-open td.col-actions .btn { margin: 2px 4px 2px 0; }
}

/* ============================================================
   MOBILE POLISH — tighten layout, stack buttons, fix wrapping
   ============================================================ */
@media (max-width: 720px) {
  /* Page header: title on its own line, buttons wrap full-width below */
  .page-head { flex-direction: column; align-items: stretch; gap: .75rem; margin-bottom: 1rem; }
  .page-head h1 { font-size: 1.35rem; }
  /* Any buttons/forms in the header wrap neatly and size to content */
  .page-head > .d-flex,
  .page-head form { flex-wrap: wrap; gap: .5rem !important; }
  .page-head .btn { flex: 1 1 auto; white-space: nowrap; }
  /* The primary action (Add) goes full width and first-class */
  .page-head .btn-primary { flex-basis: 100%; }

  /* Filter cards: less vertical bulk */
  .data-toolbar { flex-direction: column; gap: .5rem; }
  .data-toolbar .form-control, .data-toolbar .form-select { width: 100%; }
  .data-toolbar .msel, .data-toolbar .msel__btn { width: 100%; }
  .data-toolbar .gp-min-group { width: 100%; }
  .data-toolbar .gp-min-group .form-control { width: auto; flex: 1; max-width: none; }

  /* Tighter table rows on mobile (they were too tall) */
  table.rtable tbody tr { padding: .7rem 2.2rem .7rem .9rem; }
  table.rtable td { padding: 1px 0 !important; line-height: 1.35; }
  table.rtable td.col-primary { font-size: .95rem; }

  /* Long names shouldn't stack into skyscrapers — allow break, cap sensibly */
  table.rtable td.col-primary { overflow-wrap: anywhere; }

  /* Card bodies a touch tighter */
  .card-body { padding: 1rem; }

  /* Topbar: show the user name next to the avatar isn't needed, keep avatar tidy */
  .topbar { padding-left: .5rem; padding-right: .75rem; }
  .topbar__title { font-size: 1.05rem; }
}

/* Filter cards / toolbars that use inline flex — make them wrap on small screens */
@media (max-width: 720px) {
  .cadence-filters { flex-direction: column; }
  .cadence-filters .form-control, .cadence-filters .form-select { max-width: 100%; width: 100%; }
}

/* Pagination bar */
.pagination-bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding:14px 4px 4px; }
.pagination-controls { display:flex; gap:4px; flex-wrap:wrap; }
.pagination-controls .btn { min-width:38px; }
@media (max-width:720px){ .pagination-bar { flex-direction:column; align-items:stretch; } .pagination-controls { justify-content:center; } }

/* ---- Kanban: batch of card tweaks (checklist, new-email badge, mobile scroll) ---- */
.kanban-new-badge { display:inline-block; background:#e8930c; color:#111; font-size:.62rem; font-weight:800; padding:1px 6px; border-radius:10px; margin-bottom:4px; }
.kb-checklist { display:flex; flex-direction:column; gap:2px; }
.kb-check-item { display:flex; align-items:center; gap:6px; }
.kb-check-label { display:flex; align-items:center; gap:7px; flex:1; margin:0; font-size:.9rem; cursor:pointer; }
.kb-check-label.done span { text-decoration:line-through; color:var(--text-muted); }
.kb-check-del { background:none; border:0; color:var(--text-muted); font-size:1.1rem; line-height:1; cursor:pointer; padding:0 4px; }
.kb-check-del:hover { color:#C62531; }

/* Mobile: let each Kanban column's card list scroll independently when long */
@media (max-width: 720px) {
  .kanban-board { -webkit-overflow-scrolling: touch; }
  .kanban-col { min-width: 84vw; max-width: 84vw; }
  .kanban-cards { max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* Kanban card checklist progress badge */
.kanban-badge--check { background:#EEF1F4; color:#5a6b7b; font-variant-numeric:tabular-nums; }
.kanban-badge--check.is-complete { background:#E4F6EC; color:#1E7B46; }
.kanban-badge--attach { background:#EEF1F4; color:#5a6b7b; }

/* Support-period bundle (25 Sep 2026): search, checklist edit/reorder,
   archive, attachments, comments */
.kanban-card--archived { opacity:.55; }
.kanban-badge--archived { display:inline-block; background:#5a6b7b; color:#fff; font-size:.62rem; font-weight:700; padding:1px 6px; border-radius:10px; margin-bottom:4px; }

.kb-check-drag { cursor: grab; color: var(--text-muted); font-size: .8rem; line-height:1; padding: 0 2px; touch-action:none; }
/* 14 Oct 2026: checklist reorder on phones - bigger grip, and the item lifts while held */
.kb-check-chosen { background: var(--bs-light, #f4f4f6); border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
@media (pointer: coarse) {
  .kb-check-drag { font-size: 1rem; padding: 8px 6px; touch-action: auto; }
  .kb-check-item, .kb-check-item *, .kanban-card, .kanban-card * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .kb-check-item { padding: 2px 0; }
}
body.kb-dragging, body.kb-dragging * { -webkit-user-select: none !important; user-select: none !important; }
.kb-check-text { display:inline-block; }
.kb-check-edit { padding:1px 6px; height:auto; font-size:.9rem; }

.kb-attachments { display:flex; flex-direction:column; gap:4px; }
.kb-attach-item { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.9rem; }
.kb-attach-item a { text-decoration:none; }
.kb-attach-item a:hover { text-decoration:underline; }
.kb-attach-del { background:none; border:0; color:var(--text-muted); font-size:1.1rem; line-height:1; cursor:pointer; padding:0 4px; }
.kb-attach-del:hover { color:#C62531; }
.kb-attach-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.kb-attach-block { background:none; border:0; color:var(--text-muted); font-size:.75rem; cursor:pointer; padding:0 4px; text-decoration:underline; }
.kb-attach-block:hover { color:#C62531; }

.kb-comments { display:flex; flex-direction:column; gap:8px; max-height:220px; overflow-y:auto; padding-right:2px; }
.kb-comment-item { background:#F5F6F8; border-radius:8px; padding:6px 10px; }
.kb-comment-meta { margin-bottom:2px; }
.kb-comment-body { font-size:.9rem; white-space:pre-wrap; word-break:break-word; }

/* Documents tab - per-type totals strip */
.doc-totals { display:flex; flex-wrap:wrap; gap:12px; }
.doc-total { flex:1 1 auto; min-width:130px; background:#F7F9FB; border:1px solid var(--border); border-radius:12px; padding:12px 16px; }
.doc-total__label { font-size:.8rem; color:var(--text-muted); margin-bottom:4px; }
.doc-total__value { font-size:1.3rem; font-weight:750; color:var(--ink); letter-spacing:-.02em; }
@media (max-width:720px){ .doc-total { min-width:calc(50% - 6px); } }

/* Real gross profit shown under the actual value in the targets grid */
.tcell-gp { font-size: .68rem; color: #6b7480; margin-top: 1px; }

/* Documents tab GP line in the totals strip */
.doc-total__gp { font-size: .75rem; color: #1E7B46; font-weight: 600; margin-top: 2px; }

/* Bulk action bar (cadence board bulk tier/owner update) */
.bulk-bar { display:none; align-items:center; gap:10px; background:#F0F4FF; border:1px solid #C7D6FF; border-radius:10px; padding:10px 14px; }
.bulk-bar__count { font-weight:600; font-size:.85rem; color:#2A4B9B; }

/* ---- Multi-select dropdown (checkbox list in a popover) ---- */
.msel { position: relative; display: inline-block; }
.msel__btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: .55rem .75rem; font-size: .92rem;
  color: var(--ink); cursor: pointer; white-space: nowrap; min-height: calc(1.5em + 1.1rem + 2px);
  min-width: 190px; line-height: 1.5;
  transition: border-color .15s, box-shadow .15s;
}
.msel__btn:hover { border-color: #B9C1CE; }
.msel__btn.is-open, .msel__btn:focus-visible {
  border-color: #8FA3D9; box-shadow: 0 0 0 3px rgba(74,108,217,.12); outline: none;
}
.msel__btn-label { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.msel__btn-label.is-placeholder { color: var(--text-muted); }
.msel__count {
  background: #EEF2FB; color: #3C57B0; font-size: .68rem; font-weight: 700;
  border-radius: 999px; padding: 1px 7px; line-height: 1.4;
}
.msel__chevron { color: var(--text-muted); font-size: .7rem; transition: transform .15s; }
.msel__btn.is-open .msel__chevron { transform: rotate(180deg); }
.msel__panel {
  /* Fixed to the window and placed by multiselect.js under its button, so a
     parent card with overflow:hidden can never clip it. */
  position: fixed; top: 0; left: 0; z-index: 1050;
  min-width: 220px; max-width: 300px; max-height: 320px;
  display: none; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(20,24,34,.14);
  padding: 6px;
}
.msel__panel.is-open { display: flex; }
/* Searchable variant (data-msel-search): wider, taller, search pinned on top. */
.msel__panel--search { width: 340px; max-width: calc(100vw - 24px); max-height: 380px; padding: 0; }
.msel__panel--search .msel__options { padding: 4px 6px; }
.msel__panel--search .msel__footer { margin: 0 6px; padding: 8px 5px 8px; }
.msel__search-wrap { padding: 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.msel__search {
  width: 100%; border: 1px solid var(--border-strong); border-radius: 7px;
  padding: .45rem .7rem .45rem 2rem; font-size: .88rem; color: var(--ink);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238B97A7' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat .65rem center;
}
.msel__search:focus { outline: none; border-color: #8FA3D9; box-shadow: 0 0 0 3px rgba(74,108,217,.12); }
.msel__nomatch { padding: 14px 9px; color: var(--text-muted); font-size: .85rem; text-align: center; }
/* The option list is the ONLY part that scrolls, so the Clear/Apply footer
   below it always stays visible regardless of how many options there are. */
.msel__options { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.msel__option {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: 7px; cursor: pointer; font-size: .87rem;
  color: var(--ink); user-select: none;
}
.msel__option:hover { background: #F1F4FA; }
.msel__option input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0; accent-color: #4A6CD9; cursor: pointer; flex-shrink: 0;
}
.msel__option-sub { color: var(--text-muted); font-size: .76rem; margin-left: auto; padding-left: 8px; }
.msel__footer {
  display: flex; justify-content: space-between; gap: 6px; flex-shrink: 0;
  border-top: 1px solid var(--border); margin-top: 4px; padding: 7px 5px 2px;
}
.msel__footer button {
  background: none; border: 0; color: #4A6CD9; font-size: .78rem; font-weight: 600;
  cursor: pointer; padding: 2px 4px;
}
.msel__footer button:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .msel__panel { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; max-width: none; }
  .msel__panel--search { width: auto; max-height: 70vh; }
}

/* ---- Kanban quick controls on the card (15 Oct 2026) ---- */
.kanban-card__top { display: flex; align-items: flex-start; gap: 8px; }
.kanban-card--ctl .kanban-card__title { padding-right: 18px; }
.kanban-card__desc-icon { color: var(--text-dim); font-size: .8rem; }
.kb-card-done-wrap { display: inline-flex; align-items: center; justify-content: center; margin: 1px 0 0; padding: 0; cursor: pointer; flex: 0 0 auto; }
.kb-card-done { width: 17px; height: 17px; margin: 0; cursor: pointer; accent-color: #1E7A47; }
.kb-card-archive {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .12s, background .12s; cursor: pointer; padding: 0;
}
.kanban-card:hover .kb-card-archive, .kb-card-archive:focus-visible { opacity: 1; }
.kb-card-archive:hover { background: rgba(9,30,66,.08); color: var(--ink); }
.kb-due-wrap { position: relative; display: inline-flex; cursor: pointer; }
.kb-due-badge { cursor: pointer; }
.kb-due-badge.is-empty { background: transparent; border: 1px dashed #C9CED4; color: var(--text-dim); font-weight: 500; }
/* 16 Oct 2026: date badge always looks clickable, with a calendar icon */
.kb-due-badge { display: inline-flex; align-items: center; gap: 4px; }
.kb-due-badge .kb-cal { flex: 0 0 auto; opacity: .8; }
.kb-due-wrap:hover .kb-due-badge { box-shadow: 0 0 0 1px currentColor; }
.kb-due-wrap.kb-due-open .kb-due-input { position: absolute; left: 0; top: 100%; width: 160px; height: 32px; opacity: 1; z-index: 20; border: 1px solid #C9CED4; border-radius: 6px; padding: 2px 6px; background: #fff; font-size: 14px; }
.kb-due-input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
  border: 0; padding: 0; margin: 0; font-size: 16px; /* 16px stops iPhone zooming in */
}
.kb-due-input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.kanban-badge--recur { background: #EEE9FB; color: #5B3FB0; }
.kanban-card--done .kanban-card__title { text-decoration: line-through; color: var(--text-muted); }
.kanban-card--done { opacity: .72; }
.kanban-card--rolled { box-shadow: 0 0 0 2px #1E7A47, 0 2px 6px rgba(9,30,66,.18); }
.kb-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 2000;
  background: #1F2328; color: #fff; border-radius: 10px; padding: 10px 14px; font-size: .9rem;
  display: flex; align-items: center; gap: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; max-width: calc(100vw - 32px);
}
.kb-toast.is-show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.kb-toast__undo { background: transparent; border: 0; color: #8FD3FF; font-weight: 700; padding: 0; cursor: pointer; }
@media (pointer: coarse) {
  .kb-card-archive { opacity: .6; width: 32px; height: 32px; top: 4px; right: 4px; }
  .kanban-card--ctl .kanban-card__title { padding-right: 26px; }
  .kb-card-done { width: 20px; height: 20px; }
  .kb-card-done-wrap { padding: 2px; margin: -2px 0 0 -2px; }
}

/* ---- Top bar: back / forward and quick search (16 Oct 2026) ---- */
.topbar { gap: .5rem; }
.topbar__nav { display: inline-flex; gap: 2px; }
.topbar__navbtn {
  width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: #fff;
  color: var(--ink); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
}
.topbar__navbtn:hover { background: #F1F3F5; }
.topbar__navbtn.is-off { opacity: .35; }
.topbar__titlewrap { min-width: 0; }
.topbar__titlewrap .topbar__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__search { width: 260px; margin: 0; }
.topbar__search .form-control { font-size: 16px; } /* 16px stops iPhone zooming in */
.topbar__searchbtn { display: none; }
@media (max-width: 767.98px) {
  .topbar__search { display: none; }
  .topbar__searchbtn { display: inline-flex; }
  .topbar.search-open .topbar__titlewrap, .topbar.search-open .topbar__spacer { display: none; }
  .topbar.search-open .topbar__search { display: block; flex: 1; width: auto; }
}
.task-jobref { line-height: 1.25; margin-top: 1px; }
.data-toolbar .cust-search { flex: 0 1 420px; width: auto; flex-wrap: nowrap; }
.data-toolbar .cust-search .form-control { max-width: none; flex: 1 1 auto; width: 1%; font-size: 16px; }
@media (max-width: 767.98px) {
  .data-toolbar .cust-search { width: 100%; flex-basis: auto; }
}
details.task-details-more > summary { cursor: pointer; padding: .4rem 0; }

/* ---- Targets: turnover + GP% per month (21 Oct 2026) ---- */
.target-cell-form { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.tf-row { display: inline-flex; align-items: center; gap: 4px; }
.tf-lbl { font-size: .62rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; min-width: 30px; text-align: right; }
.target-cell-form .target-input { width: 72px; }
.target-cell-form .tf-pc { width: 48px; }
.tf-gp { font-size: .78rem; font-weight: 650; color: var(--ink); min-height: 1em; font-variant-numeric: tabular-nums; }