/* ---------------------------------------------------------------------- */
/* Design tokens */
/* ---------------------------------------------------------------------- */
:root {
  --bg: #f3f4f7;
  --surface: #ffffff;
  --border: #e4e7ec;
  --border-strong: #d0d5dd;
  --ink: #14161a;
  --muted: #66707e;
  --faint: #98a2b3;
  --accent: #0078c8;
  --accent-hover: #005fa3;
  --accent-soft: #e6f2fb;
  /* Xero-style navy menu bar */
  --nav-bg: #0d2c4c;
  --nav-ink: #ffffff;
  --nav-muted: rgba(255, 255, 255, 0.72);
  --nav-hover: rgba(255, 255, 255, 0.12);
  --nav-underline: #13b5ea;
  --dash-slate: #8a939e;
  --green: #16a34a;
  --green-soft: #ecfdf3;
  --red: #dc2626;
  --red-soft: #fef2f2;
  --amber: #b45309;
  --amber-soft: #fffbeb;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.16);
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  margin: 0;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { letter-spacing: -0.01em; }

/* ---------------------------------------------------------------------- */
/* App shell — Xero-style: a navy menu bar across the top (brand + project
   switcher, the project's modules as menus with drop-downs, then Settings
   and the account menu), with the page content centred below. No left
   sidebar. Built by renderSidebarModules() in app.js. */
/* ---------------------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.app-topbar {
  display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap;
  min-height: 56px; padding: 0 20px; background: var(--nav-bg); color: var(--nav-ink);
  position: sticky; top: 0; z-index: 30;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.app-topbar-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.sidebar-brand-btn {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: transparent; border: none; border-radius: var(--radius-sm);
  padding: 6px 8px; margin: 0 0 0 -8px; cursor: pointer; flex: none;
}
.sidebar-brand-btn:hover { background: var(--nav-hover); }
.sidebar-brand-btn:active { transform: none; }
.brand-logo { max-height: 28px; max-width: 120px; object-fit: contain; border-radius: 6px; flex: none; background: #fff; }
.sidebar-brand-name { font-size: 15px; font-weight: 700; color: var(--nav-ink); line-height: 1.2; white-space: nowrap; }
.subtitle { color: var(--muted); font-size: 13px; margin: 2px 0 0; }

/* The project switcher reads like Xero's organisation switcher: the
   project name in white with a caret, on a slightly lighter pill. */
.project-switcher { display: flex; min-width: 0; }
.project-switcher select#topbar-project-select {
  appearance: none; -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--nav-ink); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px;
  font-size: 13.5px; font-weight: 600; padding: 7px 34px 7px 14px;
  width: clamp(170px, 15vw, 240px); max-width: 100%; text-overflow: ellipsis; cursor: pointer;
}
.project-switcher select#topbar-project-select:hover { background-color: rgba(255, 255, 255, 0.16); }
.project-switcher select#topbar-project-select:focus-visible { outline: 2px solid var(--nav-underline); outline-offset: 1px; }
.project-switcher select#topbar-project-select option { color: var(--ink); background: #fff; font-weight: 500; }

/* Keep the menu bar on one row at laptop widths: a long company name is
   truncated (its full name is the button's tooltip) and spacing tightens. */
.app-topbar .sidebar-brand-name { display: block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Module menu bar */
.app-nav { display: flex; align-items: stretch; flex-wrap: wrap; gap: 2px; align-self: stretch; }
.app-nav-hint { align-self: center; font-size: 13px; color: var(--nav-muted); }
.nav-item { position: relative; display: flex; }
/* Back arrow — first thing in the menu bar, only while a project page is open. */
.nav-back {
  align-self: center; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-right: 6px; padding: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--nav-ink); cursor: pointer; transition: background .12s ease;
}
.nav-back:hover { background: rgba(255, 255, 255, 0.2); }
.nav-back:active { transform: none; }
.nav-back:focus-visible { outline: 2px solid var(--nav-underline); outline-offset: 1px; }
.nav-link {
  position: relative; display: flex; align-items: center; gap: 6px;
  background: transparent; border: none; border-radius: 0; cursor: pointer;
  padding: 0 clamp(8px, 0.75vw, 12px); min-height: 56px; font-size: 14px; font-weight: 600; color: var(--nav-muted);
  transition: color .12s ease, background .12s ease;
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--nav-ink); background: var(--nav-hover); }
.nav-link:active { transform: none; }
.nav-link.active { color: var(--nav-ink); }
.nav-link.active::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--nav-underline);
}
.nav-caret {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .8; transition: transform .15s ease;
}
.nav-link[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-link:focus-visible, .sidebar-brand-btn:focus-visible, .sidebar-settings-btn:focus-visible, .user-avatar:focus-visible {
  outline: 2px solid var(--nav-underline); outline-offset: -2px;
}

/* Drop-down menus (module sections and the account menu) */
.nav-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
  min-width: 220px; padding: 6px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 1px;
  animation: fade-in .12s ease;
}
.nav-menu[hidden] { display: none; }
.nav-menu-right { left: auto; right: 0; }
.nav-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: transparent; border: none; border-radius: 6px; cursor: pointer;
  padding: 9px 12px; font-size: 14px; font-weight: 500; color: var(--ink);
}
.nav-menu-item:hover, .nav-menu-item:focus-visible { background: var(--accent-soft); color: var(--accent-hover); outline: none; }
.nav-menu-item:active { transform: none; }
.nav-menu-item.active { color: var(--accent); font-weight: 600; }
.nav-menu-item.active::after { content: '✓'; margin-left: auto; font-weight: 700; }

.sidebar-settings-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; background: transparent; border: none; border-radius: 999px;
  padding: 0; color: var(--nav-muted);
}
.sidebar-settings-btn:hover { background: var(--nav-hover); color: var(--nav-ink); }
.sidebar-settings-btn.active { background: rgba(255, 255, 255, 0.2); color: var(--nav-ink); }
.sidebar-settings-btn:active { transform: none; }

.user-avatar {
  width: 34px; height: 34px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.35);
  background: var(--nav-underline); color: var(--nav-bg); font-size: 12.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
}
.user-avatar:hover { border-color: #fff; }
.user-avatar:active { transform: none; }
.user-menu-head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 12px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }

.app-shell { min-height: calc(100vh - 56px); }

/* Home: one tile per project, like Xero's organisation list. */
.home-header { margin-bottom: 18px; }
.home-header h2 { font-size: 22px; margin: 0 0 4px; }
.home-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.home-project-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px 18px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.home-project-tile:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.home-project-tile:active { transform: none; }
.home-project-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.home-project-tile.selected { border-color: var(--accent); }
.home-project-name { font-size: 15px; font-weight: 700; color: var(--accent); }
.home-project-meta { font-size: 13px; color: var(--muted); }
.home-projects .empty-state { grid-column: 1 / -1; }

.app-content { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------------- */
/* Layout */
/* ---------------------------------------------------------------------- */
main { padding: 28px 32px 60px; max-width: 1240px; margin: 0 auto; }

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fade-in .18s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px 26px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.card h2 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.card > .subtitle { margin-bottom: 18px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------- */
/* Forms */
/* ---------------------------------------------------------------------- */
.inline-form { display: flex; gap: 8px; margin-bottom: 4px; }
.inline-form input { flex: 1; }

.stacked-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
/* Same recurring fix as .issue-step[hidden]/.drawing-form-row[hidden]/etc
   elsewhere in this file: an author display:flex rule always wins over the
   browser's own [hidden]{display:none} rule at equal specificity, so toggling
   .hidden on a .stacked-form (the login vs. setup auth forms) needs its own,
   more specific override to actually disappear. */
.stacked-form[hidden] { display: none; }
.stacked-form > label { font-size: 13px; color: var(--muted); font-weight: 500; }

input, select, textarea, button {
  font-family: inherit; font-size: 14px; padding: 9px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

button {
  cursor: pointer; background: #f5f6f8; border: 1px solid var(--border-strong);
  font-weight: 500; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
button:hover { background: #ececef; }
button:active { transform: translateY(1px); }
button.primary { background: var(--accent); color: white; border-color: var(--accent); box-shadow: var(--shadow-sm); }
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.small-btn { font-size: 12.5px; padding: 6px 10px; }
.danger-btn { background: var(--surface); color: var(--red); border-color: #fca5a5; }
.danger-btn:hover { background: var(--red-soft); }

.file-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: #f5f6f8; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 9px 14px; font-size: 13.5px; font-weight: 500;
}
.file-btn:hover { background: #ececef; }

/* ---------------------------------------------------------------------- */
/* Lists — trades / contacts / projects, all built from <ul class="simple-list"> */
/* ---------------------------------------------------------------------- */
.simple-list { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.simple-list li { padding: 10px 6px; border-bottom: 1px solid #f0f1f3; }
.simple-list li:last-child { border-bottom: none; }
.simple-list li.sub-heading {
  border-bottom: none; margin-top: 14px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); font-weight: 700; padding: 6px 6px 4px;
}
.simple-list li.sub-heading:first-child { margin-top: 0; }
.simple-list li.sub-row { padding-left: 6px; }
.project-row-actions { float: right; display: flex; gap: 6px; margin-left: 10px; }
.archived-projects { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.archived-projects summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.archived-projects[hidden] { display: none; }
.archived-projects .sub-row strong { color: var(--muted); }

.simple-list.clickable-list li.sub-row { cursor: pointer; border-radius: var(--radius-sm); transition: background .12s ease; }
.simple-list.clickable-list li.sub-row:hover { background: #f6f7f9; }

.simple-list li.sub-heading[data-group-toggle] { cursor: pointer; user-select: none; border-radius: var(--radius-sm); }
.simple-list li.sub-heading[data-group-toggle]:hover { color: var(--ink); background: #f6f7f9; }
.group-count { color: var(--faint); font-weight: 500; text-transform: none; letter-spacing: normal; }

.simple-list li.sub-row .sub-select { margin-right: 10px; }

.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 36px 16px; color: var(--faint); text-align: center;
  border: 1px dashed var(--border); border-radius: var(--radius-md); background: #fafbfc;
}
.empty-state svg { opacity: .55; margin-bottom: 2px; }
.empty-state strong { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.empty-state span { font-size: 12.5px; }
.simple-list li.empty-row { border-bottom: none; padding: 4px 0; }

/* Contact avatar initials */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 700; margin-right: 10px; vertical-align: middle;
}

/* ---------------------------------------------------------------------- */
/* Import boxes / helper text */
/* ---------------------------------------------------------------------- */
.import-row { margin-bottom: 14px; padding: 12px 14px; background: #fafbfc; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.import-label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 6px; }
.import-hint { font-size: 12px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }
.import-result { font-size: 12px; color: var(--accent); margin: 6px 0 0; min-height: 14px; }
.settings-section-heading { font-size: 14px; font-weight: 700; margin: 20px 0 4px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ---------------------------------------------------------------------- */
/* Drag-and-drop file upload zones */
/* ---------------------------------------------------------------------- */
.dropzone {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: #fff; padding: 8px 10px; transition: border-color .12s ease, background .12s ease;
}
.dropzone-hint { font-size: 12px; color: var(--faint); }
.dropzone.dropzone-active { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.dropzone-active .dropzone-hint { color: var(--accent); font-weight: 500; }
.logo-preview.dropzone-active { border-color: var(--accent); background: var(--accent-soft); }

/* ---------------------------------------------------------------------- */
/* Contacts toolbar — search + filter row, Xero-inspired: a soft-filled
   pill search box with an inline icon, and pill-shaped filter/sort
   dropdowns beside it. .contacts-toolbar/.contacts-search/.contacts-sort-
   -label are shared app-wide (Contacts, Document register, Tasks, the
   Correspondence register, …), so this one pass reaches every search/
   filter row in the app, not just one screen. */
/* ---------------------------------------------------------------------- */
.trade-search {
  width: 100%; margin-bottom: 10px; background: #f5f6f9; border: 1px solid transparent;
  border-radius: 999px; padding: 9px 14px 9px 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.trade-search:focus { background-color: var(--surface); border-color: var(--accent); }
.contacts-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 14px; }
.contacts-search {
  flex: 1; min-width: 160px; margin: 0; background: #f5f6f9; border: 1px solid transparent;
  border-radius: 999px; padding: 9px 14px 9px 34px; font-size: 13.5px; color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.contacts-search:focus { background-color: var(--surface); border-color: var(--accent); }
.contacts-sort-label {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted);
  white-space: nowrap; margin: 0 !important; background: #f5f6f9; border-radius: 999px; padding: 3px 4px 3px 14px;
  transition: background-color .12s ease;
}
.contacts-sort-label select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border: none; background-color: transparent; padding: 6px 22px 6px 6px;
  font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2366707e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center;
}
@media (max-width: 560px) {
  .contacts-toolbar { flex-direction: column; align-items: stretch; }
  .contacts-sort-label { padding-left: 12px; }
}

.bulk-actions {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 14px;
  background: var(--accent-soft); border-radius: var(--radius-md); font-size: 13px; color: var(--accent-hover);
}

/* ---------------------------------------------------------------------- */
/* Projects tab */
/* ---------------------------------------------------------------------- */
.project-meta { color: var(--muted); font-size: 12.5px; margin: 3px 0 0; }
.project-team { color: var(--muted); font-size: 12.5px; margin: 3px 0 0; }

.team-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.team-row { display: flex; gap: 6px; align-items: center; }
.team-row input { flex: 1; }
.team-row .team-remove { flex: none; }

.client-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.client-row { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.client-row .client-row-remove { align-self: flex-start; }

.client-info-block { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.client-info-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.client-info-block h4 { margin: 0 0 6px; }

/* ---------------------------------------------------------------------- */
/* Document register — multi-file upload list (edit each file's title/
   revision/date individually, with a one-click "copy this row to all
   the others" button per row) */
/* ---------------------------------------------------------------------- */
.drawing-multi-file-list { margin-top: 4px; }
.drawing-multi-file-rows { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.drawing-multi-file-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface);
}
.drawing-multi-file-name {
  flex: 1 1 150px; min-width: 110px; font-size: 12.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drawing-multi-file-row input[type="text"] { flex: 1 1 130px; min-width: 90px; }
.drawing-multi-file-row input[type="date"] { flex: 0 1 145px; min-width: 130px; }
.drawing-multi-file-copy-btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) {
  .drawing-multi-file-name { flex-basis: 100%; }
}

/* ---------------------------------------------------------------------- */
/* Board (Tenders by Trade) */
/* ---------------------------------------------------------------------- */
#package-board { display: flex; flex-direction: column; gap: 24px; margin-top: 18px; }
.trade-group { display: flex; flex-direction: column; gap: 10px; }
.trade-group-heading {
  margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 700;
}

.package-row {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px 18px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, border-color .15s ease, transform .1s ease;
}
.package-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }

.package-row-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.package-status {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
  background: #f2f3f5; padding: 3px 10px; border-radius: 999px; color: var(--muted);
}
.due-overdue { color: var(--red); font-weight: 600; }

.invite-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip {
  font-size: 12px; padding: 5px 10px; border-radius: 999px; background: #f2f3f5;
  display: inline-flex; gap: 6px; align-items: center; font-weight: 500;
}
.chip.status-invited { background: #f1f5f9; color: #475569; }
.chip.status-accepted_to_quote { background: var(--amber-soft); color: var(--amber); }
.chip.status-declined { background: #f1f1f1; color: var(--faint); text-decoration: line-through; }
.chip.status-quote_submitted { background: var(--green-soft); color: #166534; }
.chip.status-won { background: var(--green); color: white; }
.chip.status-lost { background: var(--red-soft); color: var(--red); }
.chip.pkg-draft { background: #f1f5f9; color: #475569; }
.chip.pkg-issued { background: var(--amber-soft); color: var(--amber); }
.chip.pkg-under_review { background: #dbeafe; color: #1e40af; }
.chip.pkg-let { background: var(--green); color: white; }
.chip.pkg-not_started { background: #f1f5f9; color: #475569; }
.chip.pkg-signed { background: var(--green-soft); color: #166534; }

/* Client Management status chips — client selections (pending/selected/
   confirmed), progress payments (pending/invoiced/paid) and head contract
   variations (pending/approved/rejected). "pending" is shared across all
   three; the others don't collide, so one flat set of classes works. */
.chip.chip-pending { background: #f1f5f9; color: #475569; }
.chip.chip-selected { background: var(--accent-soft); color: var(--accent-hover); }
.chip.chip-confirmed { background: var(--green-soft); color: #166534; }
.chip.chip-invoiced { background: var(--amber-soft); color: var(--amber); }
.chip.chip-paid { background: var(--green-soft); color: #166534; }
.chip.chip-approved { background: var(--green-soft); color: #166534; }
.chip.chip-rejected { background: var(--red-soft); color: var(--red); }

/* ---------------------------------------------------------------------- */
/* Procurement schedule — a second view of the Board tab (Contracts
   Administration > Procurement), toggled alongside the card board above.
   Modelled on the user's manual procurement register: category-grouped
   tables with program dates, budget/contract sum, gain/loss and a milestone
   checklist per line. */
/* ---------------------------------------------------------------------- */
.view-toggle { display: inline-flex; gap: 4px; background: #f2f3f5; border-radius: 999px; padding: 3px; margin: 4px 0; }
.view-toggle-btn {
  border: none; background: transparent; padding: 6px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.view-toggle-btn.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* #package-board sets its own `display: flex` above, which otherwise beats
   the browser's `[hidden] { display: none }` UA rule at equal specificity —
   same fix as .drawing-form-row[hidden] elsewhere in this file. */
#package-board[hidden] { display: none; }
#procurement-schedule[hidden] { display: none; }

.procurement-schedule-toolbar { margin-top: 18px; margin-bottom: 0; }
.procline-category-group { margin-top: 22px; }
.procline-category-group:first-child { margin-top: 18px; }

/* Excel-style register: a real grid — every cell boxed, a frozen/sticky
   header row, tight zebra-striped rows and a monospace-leaning numeric feel
   — closer to the manual spreadsheet register this view replaces than the
   app's usual card styling. The wrapping div gives it its own horizontal
   scrollbar (rather than the whole page) once all fourteen columns don't
   fit, with the header staying pinned while you scroll down a long list. */
.procline-table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.procline-table { width: 100%; min-width: 1520px; border-collapse: collapse; background: var(--surface); font-variant-numeric: tabular-nums; }
.procline-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
  color: var(--muted); font-weight: 700; padding: 7px 10px; background: #f1f3f6;
  border: 1px solid var(--border); position: sticky; top: 0; z-index: 1;
}
.procline-table td {
  padding: 6px 10px; font-size: 12.5px; border: 1px solid var(--border); vertical-align: top; white-space: nowrap;
}
.procline-table td.procline-wrap { white-space: normal; min-width: 130px; }
.procline-row { cursor: pointer; transition: background .1s ease; }
.procline-row:nth-child(even) { background: #fafbfc; }

/* Settings > Cost codes table — same procline-table look, but only 5 columns
   so it shouldn't force the 1520px min-width/scrollbar that the wider
   procurement schedule table needs. */
.trade-cost-table { min-width: 0; }
.trade-cost-table td { white-space: normal; }
.trade-cost-table tbody tr.sub-row { cursor: pointer; transition: background .12s ease; }
.trade-cost-table tbody tr.sub-row:hover { background: #f6f7f9; }
.trade-cost-table tbody tr.sub-row:nth-child(even) { background: #fafbfc; }
.procline-row:hover { background: #eef2f7; }
.procline-gain { color: var(--green); font-weight: 600; }

/* Budget Cost Report's category-subtotal and project-grand-total rows —
   bold + shaded so they read as sums at a glance, same table grid as the
   line rows above them so their columns still line up. */
.procline-subtotal-row td, .procline-grandtotal-row td { font-weight: 700; background: #f1f3f6; }
.procline-grandtotal-row td { background: #e4e9f0; font-size: 13.5px; }

/* Contracts Administration — compact register grid (Schedule, Let schedule,
   Budget Cost Report). One table per view: category rows carry their own
   subtotals, the project total is pinned to the bottom, figures are
   right-aligned in tabular numerals, and only horizontal rules are drawn so
   dense rows stay easy to scan. The scroll box has a max height so the
   header and total stay in view on a long project. */
#tab-board .procurement-schedule-toolbar { margin-top: 12px; padding: 10px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
#tab-board .procurement-schedule-toolbar .contacts-search { flex: 0 1 320px; margin: 0; }
#tab-board .procurement-schedule-toolbar .import-hint { flex: 1 1 320px; margin: 0; font-size: 11.5px; }
.ca-scroll { margin-top: 12px; max-height: calc(100vh - 230px); overflow: auto; }
.procline-table.ca-grid { min-width: 0; font-size: 12px; }
.ca-grid-cost { min-width: 980px !important; }
.ca-grid th, .ca-grid td { border: none; border-bottom: 1px solid var(--border); }
.ca-grid th { padding: 6px 8px; font-size: 10px; background: #f5f6f8; box-shadow: inset 0 -1px 0 var(--border-strong); }
.ca-grid td { padding: 4px 8px; font-size: 12px; line-height: 1.35; vertical-align: middle; }
.ca-grid td.procline-wrap { min-width: 120px; max-width: 220px; }
.ca-grid .num { text-align: right; white-space: nowrap; }
.ca-grid td.mono { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11.5px; color: var(--muted); }
.ca-grid .procline-row:nth-child(even) { background: transparent; }
.ca-grid .procline-row:hover, .ca-grid tr.procline-budgetonly:hover { background: #eef4fa; }
.ca-grid tr.ca-cat td {
  background: #eef1f5; font-weight: 700; font-size: 11.5px; padding-top: 5px; padding-bottom: 5px;
  border-top: 1px solid var(--border-strong);
}
.ca-grid tr.ca-cat td:first-child { text-transform: uppercase; letter-spacing: 0.04em; font-size: 10.5px; color: var(--ink, #1f2937); }
.ca-cat-n { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: #dde3ea; color: var(--muted); font-size: 10px; text-align: center; letter-spacing: 0; }
.ca-grid tfoot td {
  position: sticky; bottom: 0; z-index: 1; background: #e4e9f0; font-weight: 700; font-size: 12.5px;
  padding-top: 7px; padding-bottom: 7px; border-top: 2px solid var(--border-strong); border-bottom: none;
}
.ca-grid tfoot td:first-child { text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }
.ca-chip { font-size: 10.5px; padding: 1px 7px; line-height: 1.5; font-weight: 600; }
.ca-dots { display: inline-flex; align-items: center; gap: 3px; cursor: help; }
.ca-dots i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--border-strong); box-sizing: border-box; }
.ca-dots i.is-pending { border-color: var(--amber); background: linear-gradient(90deg, var(--amber) 50%, transparent 50%); }
.ca-dots i.is-done { border-color: var(--green); background: var(--green); }
.ca-dots-n { margin-left: 4px; font-size: 10.5px; color: var(--muted); }
#tab-board > .card, #contracts-panel-procurement > .card:first-child { padding: 12px 18px; margin-bottom: 12px; }
#tab-board > .card h2 { font-size: 16px; margin: 0; }
#contracts-panel-procurement > .card:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
#contracts-panel-procurement > .card:first-child > button { margin: 0; }
#contracts-panel-procurement > .card:first-child > button[hidden] { display: none; }
.ca-grid-schedule { min-width: 1120px !important; }
.ca-grid-schedule td.procline-wrap { max-width: 180px; }
.ca-nil { color: var(--faint); }
.ca-grid td.ca-vos { white-space: nowrap; }
.ca-grid .pbm-vo { font-size: 11px; padding: 0 6px; margin: 0 3px 0 0; }
input.procline-readonly { background: #f5f6f8; color: var(--muted); cursor: not-allowed; }

.procline-checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 14px 0 5px; }
.procline-checkbox-label input { width: auto; }
.procline-milestones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; }
@media (max-width: 640px) {
  .procline-milestones { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------- */
/* Dialogs / modals */
/* ---------------------------------------------------------------------- */
dialog {
  border: none; border-radius: var(--radius-lg); padding: 0; width: min(560px, 92vw);
  max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg);
}
dialog.wide-dialog { width: min(720px, 94vw); }
dialog::backdrop { background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(1.5px); }
dialog[open] { animation: modal-in .16s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

dialog form, dialog > div { padding: 24px; }
dialog h2 { margin: 0 0 16px; font-size: 17px; font-weight: 700; padding-right: 24px; }
dialog label { display: block; font-size: 13px; color: var(--muted); font-weight: 500; margin: 14px 0 5px; }
dialog input, dialog select, dialog textarea { width: 100%; }
.issue-step[hidden] { display: none; }
#issue-preview p { margin: 10px 0 4px; }
#issue-preview p:first-child { margin-top: 0; }
.issue-preview-scope, .issue-preview-subject { background: #fafbfc; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13.5px; }
.issue-preview-subject { font-weight: 600; }
#issue-new-files-preview { margin-top: 6px; }
.checkbox-list label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); margin: 6px 0; font-weight: 400; }
.checkbox-list input { width: auto; }
.checkbox-list.scrollable { max-height: 190px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; background: #fafbfc; }
.checkbox-list .contact-trades { color: var(--muted); font-size: 12px; }
.checkbox-line { display: flex !important; align-items: center; gap: 8px; }
.checkbox-line input { width: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.modal-actions-split { justify-content: space-between; align-items: center; flex-wrap: wrap; }
.modal-actions-split > div { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-md); margin-top: 14px; padding: 4px 10px 10px; }
legend { font-size: 12.5px; color: var(--muted); font-weight: 600; padding: 0 6px; }

/* Settings > Interface — a module/tab row plus its up/down reorder buttons;
   a module with its own toggleable tabs (see NAV_SUBTAB_SOURCES in app.js)
   nests its .nav-config-subrow list right underneath, indented. */
.nav-config-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px; border-bottom: 1px solid var(--border);
}
.nav-config-row label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.nav-config-row input[type="checkbox"] { width: auto; padding: 0; }
.nav-config-module-row { background: #fafbfc; border-radius: var(--radius-sm); margin-top: 4px; }
.nav-config-sublist { padding-left: 24px; }
.nav-config-subrow label { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.nav-config-reorder { display: flex; gap: 4px; flex: none; }
.nav-config-reorder .small-btn { padding: 3px 9px; }

.close-x {
  float: right; background: none; border: none; font-size: 20px; line-height: 1; cursor: pointer;
  color: var(--faint); padding: 4px; margin: -4px -4px 0 0; border-radius: 6px;
}
.close-x:hover { color: var(--ink); background: #f2f3f5; }

/* ---------------------------------------------------------------------- */
/* Package detail */
/* ---------------------------------------------------------------------- */
.detail-section { margin-bottom: 20px; }
.detail-section h3 { font-size: 13.5px; margin-bottom: 10px; font-weight: 700; }
table.quote-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.quote-table td, table.quote-table th { padding: 8px 6px; border-bottom: 1px solid #eef0f2; text-align: left; }
table.quote-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--faint); font-weight: 700; }
table.quote-table td:first-child, table.quote-table th:first-child { width: 26px; }
.doc-list { font-size: 13px; }
.doc-list a { color: var(--accent); }

/* ---------------------------------------------------------------------- */
/* Trade/contact search + cost code labels */
/* ---------------------------------------------------------------------- */
.trade-cost-code { color: var(--faint); font-variant-numeric: tabular-nums; }
.hint-text { color: var(--faint); font-size: 13px; }

/* ---------------------------------------------------------------------- */
/* Email modal */
/* ---------------------------------------------------------------------- */
.email-progress { font-size: 12px; color: var(--muted); margin: -8px 0 14px; font-weight: 500; }
#email-body { width: 100%; font-family: inherit; resize: vertical; }
.email-open-link {
  display: inline-flex; align-items: center; text-decoration: none;
  padding: 9px 16px; border-radius: var(--radius-sm);
}
.email-hint { font-size: 12px; color: var(--faint); margin-top: 12px; line-height: 1.5; }
.email-ai-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.email-ai-row #email-ai-instruction {
  flex: 1 1 220px; min-width: 160px; padding: 8px 10px; font-size: 13px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-family: inherit;
}
.email-ai-row .import-result { margin: 0; flex-basis: 100%; }

/* ---------------------------------------------------------------------- */
/* Settings tab */
/* ---------------------------------------------------------------------- */
.settings-form { display: flex; flex-direction: column; gap: 22px; }
.settings-logo-row { display: flex; align-items: center; gap: 18px; }
.logo-preview {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 96px; height: 96px; border-radius: var(--radius-md); border: 1px dashed var(--border-strong);
  background: #fafbfc; overflow: hidden;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-preview span { color: var(--faint); font-size: 11.5px; text-align: center; padding: 0 8px; }
.logo-controls { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.login-bg-preview {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 160px; height: 96px; border-radius: var(--radius-md); border: 1px dashed var(--border-strong);
  background: #fafbfc; overflow: hidden;
}
.login-bg-preview img { width: 100%; height: 100%; object-fit: cover; }
.login-bg-preview span { color: var(--faint); font-size: 11.5px; text-align: center; padding: 0 8px; }
.login-bg-preview.dropzone-active { border-color: var(--accent); background: var(--accent-soft); }

.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.settings-grid label { font-size: 13px; color: var(--muted); font-weight: 500; display: flex; flex-direction: column; gap: 5px; }
.settings-grid-full { grid-column: 1 / -1; }
@media (max-width: 640px) { .settings-grid { grid-template-columns: 1fr; } }

.settings-actions { display: flex; align-items: center; gap: 12px; }

.settings-subnav {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px;
}
.settings-subtab-btn {
  background: transparent; border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 7px 15px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--muted);
}
.settings-subtab-btn:hover { background: #f2f3f5; color: var(--ink); }
.settings-subtab-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.settings-subpanel { display: none; }
.settings-subpanel.active { display: block; animation: fade-in .18s ease; }

/* Document register page reuses the exact same tab look as Settings, under
   its own class names — a shared JS handler on .settings-subtab-btn drives
   the Settings tabs, so the drawings tabs need separate classes to avoid
   both being toggled at once. */
/* Document register's own tab strip moved into the sidebar (see
   .sidebar-doc-submodules below) — .drawings-subnav/-tab-btn are unused for
   it now, but stay defined here since Tasks/Communications still reuse the
   .drawings-subnav layout rule below under their own tab-btn classes. */
.drawings-subnav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.drawings-subpanel { display: none; }
.drawings-subpanel.active { display: block; animation: fade-in .18s ease; }

/* Tasks page reuses the same tab look again, under its own JS-bound
   classes for the same reason as above. */
.tasks-tab-btn {
  background: transparent; border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 7px 15px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--muted);
}
.tasks-tab-btn:hover { background: #f2f3f5; color: var(--ink); }
.tasks-tab-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tasks-subpanel { display: none; }
.tasks-subpanel.active { display: block; animation: fade-in .18s ease; }

/* Site management (Defects / Site Diary) — switched via the sidebar submodule
   buttons, same show/hide-by-class approach as .client-subpanel. */
.site-subpanel { display: none; }
.site-subpanel.active { display: block; animation: fade-in .18s ease; }

/* Communications/Correspondence — the .comm-view register/create-new pair,
   reused once in the main Communications module (party: sub) and again
   under Client management > Correspondence (party: client), both driven by
   wireCommView() in app.js. Same tab look a third time, again under its own
   JS-bound classes so its tab clicks never collide with Settings' or
   Tasks'. */
.comm-view-tab-btn {
  background: transparent; border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 7px 15px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--muted);
}
.comm-view-tab-btn:hover { background: #f2f3f5; color: var(--ink); }
.comm-view-tab-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.comm-view-subpanel { display: none; }
.comm-view-subpanel.active { display: block; animation: fade-in .18s ease; }

/* Client management > Head contract management reuses the same tab look
   again, one level deeper inside its own sidebar section (Client
   management's other sections don't need this — only Head contract
   management has children of its own). */
.hc-tab-btn, .scm-tab-btn, .scm-var-tab-btn {
  background: transparent; border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 7px 15px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--muted);
}
.hc-tab-btn:hover, .scm-tab-btn:hover, .scm-var-tab-btn:hover { background: #f2f3f5; color: var(--ink); }
.hc-tab-btn.active, .scm-tab-btn.active, .scm-var-tab-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.hc-subpanel, .scm-subpanel, .scm-var-subpanel { display: none; }
.hc-subpanel.active, .scm-subpanel.active, .scm-var-subpanel.active { display: block; animation: fade-in .18s ease; }
.client-subpanel { display: none; }
.client-subpanel.active { display: block; animation: fade-in .18s ease; }
.insurance-file-name { display: block; font-size: 13px; color: var(--muted); margin: 6px 0 4px; }

.drawings-layout { display: flex; gap: 20px; align-items: flex-start; }
.drawings-main { flex: 1; min-width: 0; }

/* Document register > Current register — a list + preview pane, so clicking
   a document shows its details without leaving the list or opening a modal. */
.drawings-register-layout { display: flex; gap: 20px; align-items: flex-start; }
.drawings-register-list-card { flex: 1; min-width: 0; }
.drawings-preview-pane { width: 300px; flex: none; position: sticky; top: 20px; }
.drawings-preview-empty { color: var(--faint); font-size: 13.5px; margin: 0; }
.drawings-preview-fields { display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; font-size: 13.5px; margin: 14px 0 0; }
.drawings-preview-fields dt { color: var(--muted); font-weight: 500; }
.drawings-preview-fields dd { margin: 0; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.drawings-preview-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.drawing-row.drawing-row-selected { background: var(--accent-soft); }
@media (max-width: 860px) {
  .drawings-register-layout { flex-direction: column; }
  .drawings-preview-pane { width: 100%; position: static; }
}

/* ---------------------------------------------------------------------- */
/* Drawing register */
/* ---------------------------------------------------------------------- */
.project-actions { margin-top: 10px; }

/* The project dropdown is only kept around as a value-holder that JS sets
   programmatically (see showBoardForProject()) — the project is chosen
   from the sidebar, so this never needs to be shown. */
.board-select-label { display: none; }

.locked-notice {
  background: var(--amber-soft); color: var(--amber); border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: 13px; font-weight: 500; margin: 0 0 4px;
}
/* Used on the welcome page for a license-renewal reminder — amber while
   there's still time to renew, red once a license has actually lapsed. */
#license-reminder-banner { margin-bottom: 14px; }
#license-reminder-banner.expired-notice { background: var(--red-soft); color: var(--red); }
.drawing-form-row { display: flex; gap: 8px; }
/* .drawing-form-row's own `display: flex` otherwise beats the browser's
   default `[hidden] { display: none }` rule (an author-stylesheet rule
   always wins over that user-agent one, whatever the source order) — this
   is what let a hidden trade/contact row (see edit-comm-trade-contact-row,
   toggled for client-party communications) stay visible. */
.drawing-form-row[hidden] { display: none; }
.drawing-form-row input, .drawing-form-row select { flex: 1; }
.drawing-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
}
.drawing-link { color: var(--ink); text-decoration: none; min-width: 160px; }
.drawing-link:hover { color: var(--accent); text-decoration: underline; }
.drawing-row-spacer { flex: 1 1 20px; min-width: 0; }
.drawing-meta { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.drawing-row .drawing-select { margin-right: 2px; }
.drawing-icon { font-size: 13px; }

.task-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
}
.task-title { color: var(--ink); min-width: 160px; }
.task-row.task-done .task-title { color: var(--faint); text-decoration: line-through; }
.task-row-spacer { flex: 1 1 20px; min-width: 0; }
.task-meta { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.task-priority-high { color: var(--red); font-weight: 600; }
.task-priority-medium { color: var(--amber); font-weight: 600; }
.task-priority-low { color: var(--faint); }
.task-overdue { color: var(--red); font-weight: 600; }
.task-status-chip {
  background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600;
  padding: 1px 8px; border-radius: 999px; white-space: nowrap;
}

/* Tasks/Defects — list vs. board view toggle, same pill look as the
   Communications/Head-contract tab strips (.comm-tab-btn/.hc-tab-btn). */
.task-view-toggle { display: flex; gap: 4px; margin-right: auto; }
.task-view-btn {
  background: transparent; border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 6px 13px; cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--muted);
}
.task-view-btn:hover { background: #f2f3f5; color: var(--ink); }
.task-view-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Kanban board — three columns (To do / In progress / Done), matching
   `status` exactly so a card's column *is* its status (see KANBAN_COLUMNS
   in app.js). Dragging a card between columns, or the ‹ › buttons on a
   card, both just PATCH that task's status. */
.kanban-board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 4px; }
/* Same fix as .drawing-form-row[hidden] above: an author rule setting
   `display` always beats the browser's own `[hidden]{display:none}`, so
   without this the board stayed visible even with the `hidden` attribute
   set on page load. */
.kanban-board[hidden] { display: none; }
.kanban-column {
  flex: 1 1 220px; min-width: 220px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 10px;
}
.kanban-column-header {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); padding: 2px 4px 10px;
}
.kanban-cards { display: flex; flex-direction: column; gap: 8px; min-height: 60px; border-radius: var(--radius-sm); transition: background .1s ease; }
.kanban-cards.drag-over { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -2px; }
.kanban-empty { color: var(--faint); font-size: 12.5px; padding: 10px 4px; text-align: center; }

.kanban-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); padding: 10px 10px 8px; cursor: grab;
}
.kanban-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.kanban-card.dragging { opacity: .4; }
.kanban-card-top { display: flex; align-items: flex-start; gap: 6px; }
.kanban-card-title { font-size: 13.5px; color: var(--ink); line-height: 1.3; }
.kanban-priority-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.kanban-priority-high { background: var(--red); }
.kanban-priority-medium { background: var(--amber); }
.kanban-priority-low { background: var(--border-strong); }
.kanban-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.kanban-avatar {
  width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 9.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kanban-due { font-size: 11px; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 1px 7px; }
.kanban-due.task-overdue { background: var(--red-soft); color: var(--red); }
.kanban-trade { font-size: 11px; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 1px 7px; }
.kanban-card-move { display: flex; justify-content: flex-end; gap: 2px; margin-top: 6px; }
.kanban-move-btn {
  background: transparent; border: 1px solid var(--border); border-radius: 5px; color: var(--muted);
  width: 22px; height: 20px; font-size: 12px; line-height: 1; cursor: pointer;
}
.kanban-move-btn:hover:not(:disabled) { background: var(--bg); color: var(--ink); }
.kanban-move-btn:disabled { opacity: .3; cursor: default; }
@media (max-width: 860px) { .kanban-board { flex-direction: column; } .kanban-column { min-width: 0; } }

/* Communications rows share the exact same row/title/spacer/meta/overdue
   look as Tasks (.task-row etc.) — only the row wrapper gets its own class,
   since a communication row also needs a couple of its own bits (the email
   sent/not-sent pill, a quick "draft email" button). */
.comm-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
}
.comm-email-pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; margin-right: 4px;
}
.comm-email-pill.comm-email-sent { background: var(--green-soft); color: #166534; }
.comm-email-pill.comm-email-draft { background: #f1f2f4; color: var(--muted); }
.comm-email-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.comm-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Outlook integration (Settings > Company details) */
.outlook-connect-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.outlook-device-code-panel {
  background: #f8f8f9; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; margin: 10px 0; font-size: 13.5px;
}
.outlook-user-code {
  font-size: 22px; font-weight: 700; letter-spacing: 2px; font-family: monospace;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 14px; display: inline-block; margin: 6px 0;
}

/* ---------------------------------------------------------------------- */
/* Transmittals */
/* ---------------------------------------------------------------------- */
.drawing-form-row fieldset {
  flex: 1; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px 12px;
}
.drawing-form-row fieldset legend { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 4px; }
.drawing-form-row fieldset input { margin: 6px 0 0; }
.drawing-form-row fieldset input:first-of-type { margin-top: 0; }

.transmittal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.transmittal-toolbar .import-hint { margin: 0; flex: 1; min-width: 220px; }

.transmittal-drawing-list { margin-top: 8px; }
.transmittal-drawing-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid #eef0f2;
}
.transmittal-drawing-row:last-child { border-bottom: none; }
.transmittal-drawing-info { flex: 1; font-size: 13px; color: var(--ink); }
.transmittal-drawing-remarks { width: 180px !important; font-size: 12.5px; padding: 5px 8px !important; }

.transmittal-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.transmittal-row .task-title { min-width: 200px; }

.transmittal-preview { font-size: 13px; }
.transmittal-preview .letterhead { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 16px; }
.transmittal-preview .letterhead-logo { max-height: 48px; max-width: 180px; object-fit: contain; }
.transmittal-preview h1 { font-size: 18px; text-align: center; letter-spacing: 0.04em; margin: 4px 0 14px; }
.transmittal-preview .meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; font-size: 13px; }
.transmittal-preview .meta-grid span.label { color: var(--muted); display: inline-block; min-width: 110px; }
.transmittal-preview .parties { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 18px; }
.transmittal-preview .parties h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 5px; }
.transmittal-preview .parties p { margin: 2px 0; }
.transmittal-preview .purpose { margin-top: 14px; }
.transmittal-preview table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 12.5px; }
.transmittal-preview th, .transmittal-preview td { padding: 6px 8px; border-bottom: 1px solid #eee; text-align: left; }
.transmittal-preview th { background: #f5f5f5; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }

/* Transmittal additions — discipline groups in the picker/preview, receipt */
.transmittal-drawing-group { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 10px 4px 4px; border-bottom: 1px solid var(--border); }
.transmittal-drawing-group:first-child { padding-top: 2px; }
.transmittal-preview tr.transmittal-group-row td { background: #fafbfc; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.transmittal-receipt-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding: 10px 12px; background: #fafbfc; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; }
.transmittal-receipt-form input { width: auto; flex: 1; min-width: 140px; margin: 0; }
.transmittal-receipt-form input[type="date"] { flex: 0 0 auto; }

/* Transmittal recipients — picker, type/trade row, contract schedule option */
.transmittal-recipient-type-row { display: flex; gap: 8px; }
.transmittal-recipient-type-row select { flex: 0 0 130px; margin: 0; }
.transmittal-recipient-type-row input { flex: 1; margin: 0 !important; }
.transmittal-recipient-type-row input[hidden] { display: none; }
.drawing-form-row fieldset .transmittal-recipient-type-row + input { margin-top: 6px; }
.transmittal-contract-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 4px; padding: 10px 12px; background: var(--accent-soft); border-radius: var(--radius-sm); font-size: 13px; }
.transmittal-contract-row[hidden] { display: none; }
.transmittal-contract-row .inline-check { flex: 1; min-width: 260px; display: flex; align-items: center; gap: 8px; margin: 0; }
.transmittal-contract-row .inline-check input { width: auto; margin: 0; }
.transmittal-contract-row input[type="text"] { width: 200px; margin: 0; }
#transmittal-filter { width: auto; margin: 0; }
.cl-contract-schedule-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cl-contract-schedule-head h3 { margin: 0 0 4px; }
#client-contract-schedule-list .small-btn { text-decoration: none; }

/* Current register — contacts-style manager (register.js) */
.rm .ccm-head { margin-bottom: 12px; }
.rm-warn { color: var(--amber); font-weight: 600; }
.ccm-grid.rm-grid { min-width: 980px; table-layout: fixed; }
.ccm-grid.rm-grid td { vertical-align: middle; padding: 3px 6px; }
.rm-grid td.ccm-tick { padding: 0; }
.rm-grid td > .cm-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
.rm-grid tr.rm-row { cursor: pointer; }
.rm-grid tr.rm-row:hover td { background: #f7f9fc; }
.rm-grid tr.rm-row.is-sel td { background: var(--accent-soft); }
.rm-grid tr.rm-row.is-flash td { background: var(--green-soft); }
.rm-grid tr.rm-row.is-arch td { color: var(--muted); }
.rm-grid tr.rm-group td { background: #f2f4f7; font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 6px 10px; cursor: default; }
.rm-in { width: 100%; margin: 0; padding: 5px 7px; border: 1px solid transparent; border-radius: 6px; background: transparent; font: inherit; color: var(--ink); min-width: 0; }
.rm-in:hover { border-color: var(--border); background: var(--surface); }
.rm-in:focus { border-color: var(--accent); background: var(--surface); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.rm-in::placeholder { color: var(--faint); }
.rm-num .rm-in { font-weight: 600; }
.rm-title .rm-in { width: calc(100% - 24px); }
.rm-title .rm-icon { display: inline-block; width: 20px; }
.rm-title .rm-icon { flex: 0 0 auto; }
.rm-rev .rm-in { text-align: center; }
.rm-sub { display: block; font-size: 11.5px; color: var(--muted); }
.rm-file .cm-link { white-space: nowrap; }
.rm-bulk label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.rm-bulk input { width: 150px; margin: 0; padding: 5px 8px; }
.rm-bulk input.rm-bulk-rev { width: 60px; }
.rm-bulk input[type="date"] { width: 145px; }

/* Upload & register — draft grid (upload.js) */
.um-dropzone { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; justify-content: center; padding: 18px; margin-bottom: 14px; text-align: center; }
.um-dropzone .dropzone-hint { flex-basis: 100%; }
.um .um-default-disc { width: 190px; margin: 0 0 0 6px; padding: 6px 8px; }
.um .um-auto-ai input { width: auto; margin: 0 4px 0 0; }
.ccm-grid.um-grid { min-width: 1000px; }
.um-grid td.um-title .um-file { font-size: 11.5px; color: var(--muted); padding: 0 7px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-grid .um-in { width: 100%; margin: 0; padding: 5px 7px; border: 1px solid transparent; border-radius: 6px; background: transparent; font: inherit; color: var(--ink); min-width: 0; }
.um-grid .um-in:hover { border-color: var(--border); background: var(--surface); }
.um-grid .um-in:focus { border-color: var(--accent); background: var(--surface); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.um-grid .um-in::placeholder { color: var(--faint); }
.um-grid .um-in.strong { font-weight: 600; }
.um-grid td.c .um-in { text-align: center; }
.um-grid .um-in.is-ai { background: #f4efff; border-color: #d9ccff; }
.um-grid select.um-sup { font-size: 12.5px; padding: 5px 4px; border-color: var(--border); background: var(--surface); }
.um-grid td.um-status { white-space: normal; line-height: 1.9; }
.um-grid tr.um-row:hover td { background: #f7f9fc; }
.um-grid tr.um-row.is-sel td { background: var(--accent-soft); }
.um-fill { border: 0; background: rgba(255, 255, 255, 0.16); color: inherit; border-radius: 4px; padding: 0 5px; margin-left: 4px; cursor: pointer; font-size: 12px; line-height: 18px; }
.um-fill:hover { background: rgba(255, 255, 255, 0.32); }
.um-ai-note { font-size: 11.5px; color: #6d4bd1; white-space: nowrap; }

/* Document card — details + history on the left, file preview on the right */
.drawing-card { width: min(1100px, 96vw); }
.drawing-card-body { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 20px; align-items: start; }
.drawing-card-fields label { display: block; }
.drawing-card-sub { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 16px 0 6px; }
.drawing-card-sub[hidden] { display: none; }
.drawing-card-preview { border: 1px solid var(--border); border-radius: var(--radius-sm); background: #f7f8fa; min-height: 420px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.drawing-card-preview iframe { width: 100%; height: 62vh; border: 0; background: #fff; }
.drawing-card-preview img { max-width: 100%; max-height: 62vh; object-fit: contain; }
#drawing-card-open-link { text-decoration: none; }
@media (max-width: 800px) {
  .drawing-card-body { grid-template-columns: 1fr; }
  .drawing-card-preview { min-height: 240px; }
  .drawing-card-preview iframe { height: 45vh; }
}

/* ---------------------------------------------------------------------- */
/* Issue register — revision-by-issue matrix */
/* ---------------------------------------------------------------------- */
.issue-register-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.issue-summary-chip { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: #f2f4f7; color: var(--muted); }
.issue-summary-chip strong { color: var(--ink); }
.issue-summary-awaiting strong, .issue-summary-revised strong { color: var(--amber); }
.issue-register-scroll { overflow-x: auto; margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.issue-register-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.issue-register-table th, .issue-register-table td { padding: 6px 10px; border-bottom: 1px solid #eef0f2; text-align: left; white-space: nowrap; }
.issue-register-table thead th { position: sticky; top: 0; background: #f7f8fa; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); vertical-align: bottom; }
.issue-register-table th.issue-col, .issue-register-table td.issue-cell { text-align: center; min-width: 64px; }
.issue-register-table th.issue-col-set { background: var(--accent-soft); color: var(--accent-hover); }
.issue-register-table th small { font-weight: 400; text-transform: none; }
.issue-register-table td.issue-title { white-space: normal; min-width: 200px; }
.issue-register-table td.issue-num { font-weight: 600; }
.issue-register-table td.issue-current { font-weight: 700; background: #fafbfc; }
.issue-register-table tr.issue-group td { background: #f2f4f7; font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.issue-register-table tr.issue-row { cursor: pointer; }
.issue-register-table tr.issue-row:hover td { background: var(--accent-soft); }

.issue-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #f2f4f7; color: var(--muted); white-space: nowrap; }
.issue-pill-new { background: var(--accent-soft); color: var(--accent-hover); }
.issue-pill-contract { background: var(--green-soft); color: var(--green); }
.issue-pill-revised, .issue-pill-awaiting { background: var(--amber-soft); color: var(--amber); }
.issue-pill-not_issued { background: #f2f4f7; color: var(--faint); }

.drawing-issue-history { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12.5px; font-weight: 400; }
.drawing-issue-history li { padding: 3px 0; border-bottom: 1px dashed #eef0f2; }
.drawing-issue-history li:last-child { border-bottom: none; }
#drawing-preview-issues .muted { color: var(--muted); font-weight: 400; }

/* ---------------------------------------------------------------------- */
/* Responsive */
/* ---------------------------------------------------------------------- */
@media (max-width: 760px) {
  .app-topbar { position: relative; padding: 8px 16px 0; }
  .topbar-left { flex: 1; }
  .project-switcher { flex: 1; }
  .project-switcher select#topbar-project-select { width: 100%; }
  .app-nav { order: 3; width: 100%; }
  .nav-link { min-height: 44px; padding: 0 10px; font-size: 13.5px; }
  .nav-item { position: static; }
  /* Menus drop from the bottom of the whole bar, full width. */
  .nav-menu, .nav-menu-right { left: 16px; right: 16px; top: calc(100% + 4px); }
  .user-menu { position: static; }
  main { padding: 20px 16px 48px; max-width: none; }
  .card { padding: 18px; }
}

/* ---------------------------------------------------------------------
   Login / one-time setup screen. Shown instead of the whole app-shell
   until app.js confirms a valid session (see the .authed rule below and
   the bootstrapAuth() function in app.js).
--------------------------------------------------------------------- */
.app-frame { display: none; }
body.authed .app-frame { display: block; }
body.authed #auth-screen { display: none; }

/* Sign-in: a full-screen background — a navy blueprint grid, or the photo
   uploaded under Settings > Company details — with one centred card
   holding the logo, company name, form and footer. Coloured in the Rehaan
   logo's navy and slate grey. */
.auth-screen {
  /* Rehaan logo colours: the navy of "REHAAN" and the slate grey of
     "B" / "BUILDERS", on cool whites. */
  --auth-navy: #1c3048;
  --auth-navy-deep: #13233a;
  --auth-slate: #5b6470;
  --auth-paper: #f8f9fb;
  --auth-line: #cfd5dc;
  --auth-hair: #e3e7ec;
  --auth-ink: #1c3048;
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 16px; background: #0d2c4c;
}
.auth-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 50% 55%, rgba(138, 147, 158, 0.2), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(160deg, #123a63 0%, #0d2c4c 45%, #081c31 100%);
}
.auth-bg.has-photo {
  background:
    radial-gradient(ellipse at center, rgba(8, 28, 49, 0) 40%, rgba(8, 28, 49, 0.28) 100%),
    var(--auth-photo) center / cover no-repeat,
    #0d2c4c;
}
/* With no photo uploaded, the company name sits centred on the navy. */
.auth-hero-brand { position: relative; text-align: center; color: #fff; padding: 0 16px; }
.auth-screen.has-photo .auth-hero-brand { display: none; }
.auth-hero-name {
  font-size: clamp(24px, 3.4vw, 50px); font-weight: 700; line-height: 1.1;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.auth-hero-tag { margin-top: 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: #aeb6c0; }

/* Centre the no-photo company name in the space left of the corner card. */
@media (min-width: 521px) { .auth-screen { padding-right: 430px; } }

/* The sign-in card, always open in the top-right corner. */
.auth-corner { position: absolute; top: 24px; right: 24px; z-index: 2; }
.auth-panel.auth-popover {
  width: 380px; max-height: calc(100dvh - 48px); overflow-y: auto;
  transform-origin: top right; animation: auth-pop .2s ease-out;
}
@keyframes auth-pop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .auth-popover { animation: none; } }
/* Logo and company name head the card, above a hairline. */
.auth-brand {
  text-align: center; color: var(--auth-ink);
  margin: 0 0 24px; padding: 0 0 20px; border-bottom: 1px solid var(--auth-hair);
}
.auth-logo { display: block; max-height: 60px; max-width: 200px; margin: 0 auto 12px; border-radius: 8px; }
.auth-logo[hidden] { display: none; }
.auth-brand-name { font-size: 16px; font-weight: 800; line-height: 1.25; letter-spacing: 0.16em; text-transform: uppercase; }
.auth-brand-tag {
  margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--auth-slate);
}

.auth-panel {
  padding: 26px 28px 18px; border-radius: 16px;
  background: var(--auth-paper); color: var(--auth-ink);
  position: relative; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
}
.auth-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--auth-navy) 0 50%, var(--auth-slate) 50% 100%);
}
.auth-card { width: 100%; }
.auth-heading { margin: 0; font-size: 28px; font-weight: 400; letter-spacing: -0.01em; }
.auth-heading { color: var(--auth-slate); }
.auth-heading strong { font-weight: 800; color: var(--auth-navy); }
.auth-subtitle { margin: 4px 0 26px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: #5b6b7c; }

.auth-form { display: flex; flex-direction: column; gap: 20px; }
.auth-form[hidden] { display: none; }
.auth-field { display: flex; flex-direction: column; gap: 2px; }
.auth-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4a5a6b; }
.auth-label em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 0.8; }
.auth-form input[type="text"], .auth-form input[type="email"], .auth-form input[type="password"] {
  width: 100%; padding: 10px 2px 8px; font-size: 16px; color: var(--auth-ink);
  background: transparent; border: none; border-bottom: 2px solid var(--auth-line);
  border-radius: 0; box-shadow: none;
}
.auth-form input:focus { outline: none; border-bottom-color: var(--auth-navy); box-shadow: 0 2px 0 0 var(--auth-navy); }
.auth-form input:-webkit-autofill {
  -webkit-text-fill-color: var(--auth-ink);
  -webkit-box-shadow: 0 0 0 40px var(--auth-paper) inset;
}
.auth-password { position: relative; display: block; }
.auth-password input { padding-right: 56px !important; }
.auth-reveal {
  position: absolute; right: 0; bottom: 6px; padding: 4px 6px; border: none; background: transparent;
  color: var(--auth-ink); font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; cursor: pointer; box-shadow: none;
}
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: -4px; }
.auth-check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.auth-check input {
  appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; padding: 0;
  border: 2px solid var(--auth-line); border-radius: 5px; background: #fff; cursor: pointer;
  display: grid; place-content: center;
}
.auth-check input::after {
  content: ""; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px;
  transform: translateY(-1px) rotate(-45deg); opacity: 0;
}
.auth-check input:checked { background: var(--auth-navy); border-color: var(--auth-navy); }
.auth-check input:checked::after { opacity: 1; }
.auth-check input:focus-visible, .auth-link:focus-visible, .auth-reveal:focus-visible, .auth-submit:focus-visible {
  outline: 2px solid var(--auth-navy); outline-offset: 3px;
}
.auth-link {
  padding: 0; border: none; background: none; box-shadow: none; cursor: pointer;
  color: var(--auth-ink); font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--auth-slate); text-underline-offset: 3px;
}
.auth-note {
  margin: 0; padding: 12px 14px; font-size: 13.5px; line-height: 1.45;
  background: #fff; border: 1px solid var(--auth-hair); border-radius: 8px;
}
.auth-note[hidden] { display: none; }
.auth-error:empty { display: none; }
.auth-panel .auth-error {
  margin: 0; padding: 10px 14px; font-size: 13.5px; font-weight: 600;
  color: #7f1d1d; background: #fff1f0; border-left: 4px solid #b91c1c; border-radius: 6px;
}
.auth-submit {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  margin-top: 6px; padding: 16px 18px; border: none; border-radius: 6px; cursor: pointer;
  background: var(--auth-navy); color: #fff;
  font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(28, 48, 72, 0.3); transition: background .12s ease, transform .12s ease;
}
.auth-submit:hover { background: var(--auth-navy-deep); }
.auth-submit:active { transform: translateY(1px); }
.auth-submit:disabled { opacity: 0.7; cursor: progress; }
.auth-footer { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--auth-hair); font-size: 12px; line-height: 1.6; text-align: center; color: #6b7785; }
.auth-footer a { color: inherit; font-weight: 600; }
/* Everywhere else the app uses .auth-error for small inline messages. */
.auth-error { color: var(--red, #b91c1c); font-size: 13px; min-height: 18px; margin: 4px 0 0; }

@media (max-width: 520px) {
  /* On phones the card spans the screen width at the top (and already
     shows the company name, so the centred one is hidden). */
  .auth-hero-brand { display: none; }
  .auth-corner { top: 12px; right: 12px; left: 12px; }
  .auth-panel.auth-popover { width: auto; max-height: calc(100dvh - 24px); }
  .auth-panel { padding: 24px 20px 16px; }
}

.sidebar-user-name { font-size: 14px; font-weight: 700; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-head .chip { background: var(--accent-soft); color: var(--accent-hover); text-transform: capitalize; }

/* ---------------------------------------------------------------------- */
/* Project dashboard (see showDashboardForProject() in app.js). Figures sit
   in text ink; colour only marks data — accent for forecast/claims, a
   lighter step of the same blue for tracks, critical red (always with a ▲
   or ⚠ and words) for over budget / overdue. */
/* ---------------------------------------------------------------------- */
.dash-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 22px 26px; border-radius: var(--radius-lg); color: #fff;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(120deg, #0d2c4c, #12497a);
}
.dash-head-text { min-width: 0; }
.dash-head h2 { font-size: 26px; margin: 0; color: #fff; letter-spacing: -0.015em; }
.dash-head-address { margin: 4px 0 10px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.82); }
.dash-head-address:empty { display: none; }
.dash-head-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dash-head-edit {
  background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.28);
  font-weight: 600; padding: 9px 16px; border-radius: 999px;
}
.dash-head-edit:hover { background: rgba(255, 255, 255, 0.22); }

/* Rounded icon badge used on tiles, key dates and donut footers. */
.dash-icon {
  flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
}
.dash-tile-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.dash-tile-head .dash-icon { width: 32px; height: 32px; border-radius: 8px; }
.dash-hero .dash-icon { background: rgba(255, 255, 255, 0.14); color: #c9ced6; }

/* Key dates + money strip */
.dash-keydates { margin: 0 0 16px; display: flex; flex-direction: column; gap: 14px; }
.dash-kd-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 36px; }
.dash-kd { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dash-kd > div { display: flex; flex-direction: column; min-width: 0; }
.dash-kd-label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.dash-kd-value { font-size: 14px; color: var(--muted); }
.dash-kd-sub { font-size: 12px; color: var(--faint); }
.dash-kd-link { margin-left: auto; font-size: 13px; }
.dash-chip { padding: 4px 10px; border-radius: 6px; background: var(--bg); font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.dash-chip.is-late { background: var(--red-soft); color: var(--red); }
.dash-timebar {
  position: relative; display: flex; align-items: center; min-height: 46px; padding: 0 16px;
  border-radius: 10px; background: #e7edf4; overflow: hidden;
}
.dash-timebar-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--nav-bg); }
.dash-timebar-text { position: relative; font-size: 13px; font-weight: 700; color: var(--ink); }
.dash-timebar:not(.is-empty):not(.is-money) .dash-timebar-text { color: #fff; text-shadow: 0 0 6px rgba(13, 44, 76, 0.9); }
.dash-timebar.is-empty .dash-timebar-text { color: var(--muted); font-weight: 500; text-shadow: none; }
.dash-timebar.is-late .dash-timebar-fill { background: var(--red); }
.dash-timebar.is-money { background: #eceff2; }
.dash-timebar.is-money .dash-timebar-fill { background: var(--dash-slate); }
.dash-timebar.is-money.is-empty .dash-timebar-text { color: #4b5563; }

/* Donut cards */
.dash-donuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.dash-donuts > .card { margin: 0; }
.dash-donut-card { display: flex; flex-direction: column; align-items: stretch; }
.dash-donut-card h3 { margin: 0 0 12px; font-size: 16px; text-align: center; }
.dash-donut { position: relative; width: 150px; height: 150px; margin: 0 auto 10px; }
.dash-donut svg { width: 100%; height: 100%; display: block; }
.dash-arc-track { fill: none; stroke: #e4e7ec; stroke-width: 14; }
.dash-arc { fill: none; stroke-width: 14; }
.dash-donut-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.dash-donut-centre strong { font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; }
.dash-donut-centre span { font-size: 12px; color: var(--muted); }
.dash-donut-centre em { font-style: normal; color: var(--red); font-weight: 700; }
.dash-donut-legend { justify-content: center; margin-bottom: 14px; }
.c-navy { stroke: var(--nav-bg); background: var(--nav-bg); }
.c-slate { stroke: var(--dash-slate); background: var(--dash-slate); }
.c-blue { stroke: #4f9fd8; background: #4f9fd8; }
.c-grey { stroke: #d0d5dd; background: #d0d5dd; }
.dash-donut-foot {
  margin-top: auto; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0 0;
  border: none; border-top: 1px solid var(--border); border-radius: 0; background: none; text-align: left; cursor: pointer;
  box-shadow: none;
}
.dash-donut-foot:hover { background: none; }
.dash-donut-foot:active { transform: none; }
.dash-donut-foot-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dash-donut-foot-text strong { font-size: 14px; }
.dash-donut-foot-text span { font-size: 12.5px; color: var(--muted); }
.dash-go { padding: 4px 10px; border-radius: 6px; background: var(--bg); font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.dash-donut-foot:hover .dash-go { background: var(--accent); color: #fff; }
.dash-donut-card .dash-attn { margin-top: auto; border-top: 1px solid var(--border); }
.dash-donut-card .dash-attn-row:first-child { padding-top: 10px; }
.dash-grid .dash-overview { margin: 0; }
.dash-grid .dash-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.dash-kpis { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.dash-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px 18px; box-shadow: var(--shadow-sm); font: inherit; color: var(--ink); min-width: 0;
}
button.dash-tile { cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
button.dash-tile:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
button.dash-tile:active { transform: none; }
button.dash-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dash-value { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.dash-hero { background: var(--nav-bg); border-color: var(--nav-bg); color: #fff; }
.dash-hero .dash-label, .dash-hero .dash-sub { color: rgba(255, 255, 255, 0.78); }
.dash-hero .dash-value { font-size: 36px; }
.dash-hero .dash-value.is-negative { color: #ffb4b4; }
.dash-sub { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin: 0; }
.dash-sub strong { color: var(--ink); }
.dash-meter { display: block; width: 100%; height: 6px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; margin: 4px 0 2px; }
.dash-meter span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

.dash-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash-col > .card { margin: 0; }
.dash-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dash-card-head h3 { margin: 0; font-size: 15px; }
.dash-link {
  background: none; border: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--accent); cursor: pointer; white-space: nowrap;
}
.dash-link:hover { color: var(--accent-hover); text-decoration: underline; }
.dash-link:active { transform: none; }

.dash-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.dash-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dash-legend i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; }
.dash-legend .lg-fill, .dash-legend .lg-let { background: var(--accent); }
.dash-legend .lg-out { background: #6fb3e3; }
.dash-legend .lg-draft { background: #d6e8f6; }
.dash-legend .lg-over { background: var(--red); }
.dash-legend .lg-tick { width: 2px; height: 12px; background: var(--ink); border-radius: 1px; }

.dash-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.dash-cat-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; margin-bottom: 5px; }
.dash-cat-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-over { color: var(--red); font-weight: 700; white-space: nowrap; font-size: 12.5px; }
.dash-under { color: var(--muted); white-space: nowrap; font-size: 12.5px; }
.dash-bar { position: relative; height: 10px; border-radius: 4px; background: var(--accent-soft); }
.dash-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 4px; }
.dash-bar-over { position: absolute; top: 0; bottom: 0; background: var(--red); border-radius: 0 4px 4px 0; border-left: 2px solid var(--surface); }
.dash-bar-budget { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.dash-cat-figs { font-size: 12px; color: var(--muted); margin-top: 4px; }

.dash-stack { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.dash-stack span { min-width: 4px; }
.dash-stack-let { background: var(--accent); }
.dash-stack-out { background: #6fb3e3; }
.dash-stack-draft { background: #d6e8f6; }

.dash-attn { display: flex; flex-direction: column; }
.dash-attn-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; border-top: 1px solid var(--border); padding: 11px 2px;
  font: inherit; font-size: 14px; color: var(--ink); cursor: pointer;
}
.dash-attn-row:first-child { border-top: none; padding-top: 2px; }
.dash-attn-row:hover .dash-attn-label { color: var(--accent); }
.dash-attn-row:active { transform: none; }
.dash-attn-label { font-weight: 600; flex: 1; }
.dash-attn-count { color: var(--muted); font-size: 13px; }
.dash-flag { background: var(--red-soft); color: var(--red); font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.dash-ok { color: var(--green); font-size: 12px; font-weight: 600; white-space: nowrap; }

.dash-upcoming { list-style: none; margin: 0; padding: 0; }
.dash-upcoming li + li { border-top: 1px solid var(--border); }
.dash-upcoming button {
  display: flex; gap: 12px; align-items: baseline; width: 100%; text-align: left;
  background: none; border: none; padding: 8px 2px; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer;
}
.dash-upcoming button:hover .dash-up-text { color: var(--accent); }
.dash-upcoming button:active { transform: none; }
.dash-date { flex: none; width: 96px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-date.is-overdue { color: var(--red); }
.dash-up-text { min-width: 0; }
.dash-up-kind { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.dash-diary-meta { margin: 0 0 6px; font-size: 13.5px; }
.dash-diary-text { margin: 0; font-size: 13.5px; color: var(--ink); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Project overview strip (type, client, program, insurances, setup) */
.dash-overview { margin: 0 0 16px; }
.dash-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) repeat(2, minmax(0, 1.35fr)); gap: 16px 20px; }
.dash-fact { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dash-fact-value { font-size: 14px; font-weight: 600; color: var(--ink); display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.dash-fact-value .dash-sub { font-weight: 400; }
.dash-muted { color: var(--muted); font-weight: 400; }
.dash-warn-link { color: var(--red); text-align: left; padding: 0; }
.dash-meter.is-late span { background: var(--red); }
.dash-ins-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 8px; font-size: 13px; font-weight: 500; }
.dash-ins-row > span:first-child { white-space: nowrap; }
.dash-missing { display: flex; flex-wrap: wrap; gap: 4px; }
.dash-missing-item {
  font: inherit; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; cursor: pointer;
  background: var(--accent-soft); color: var(--accent); border: 1px solid transparent;
}
.dash-missing-item:hover { border-color: var(--accent); }
.dash-missing-item:active { transform: none; }

/* Project stage badge + dashboard stage stepper */
.project-stage-badge {
  display: inline-block; align-self: flex-start; font-size: 11.5px; font-weight: 600; line-height: 1.4;
  padding: 1px 8px; border-radius: 999px; white-space: nowrap; background: #eef0f3; color: var(--ink);
}
.project-stage-badge.stage-tender { background: #f3e8ff; color: #6b21a8; }
.project-stage-badge.stage-design { background: #e0f2fe; color: #075985; }
.project-stage-badge.stage-approval { background: #fef3c7; color: #92400e; }
.project-stage-badge.stage-construction { background: #ffedd5; color: #9a3412; }
.project-stage-badge.stage-completion { background: var(--green-soft); color: #166534; }
.project-stage-badge.stage-dlp { background: #e2e8f0; color: #334155; }
.project-stage-badge.is-unset { background: var(--red-soft); color: var(--red); }
.project-lock-badge { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.home-project-badges { display: flex; flex-wrap: wrap; gap: 4px; }

.dash-stage-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.dash-stage-head h3 { margin: 0; font-size: 15px; }
.dash-stages { list-style: none; margin: 0 0 18px; padding: 0 0 16px; display: flex; border-bottom: 1px solid var(--border); }
.dash-stages li { flex: 1; position: relative; min-width: 0; }
.dash-stages li + li::before {
  content: ''; position: absolute; top: 13px; left: -50%; right: 50%; height: 2px; background: var(--border);
}
.dash-stages li.is-done + li::before, .dash-stages li.is-done + li.is-current::before { background: var(--accent); }
.dash-stages button {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%;
  background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: var(--muted);
}
.dash-stages button:active { transform: none; }
.dash-stage-dot {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
  background: var(--surface); border: 2px solid var(--border); color: var(--muted);
}
.dash-stages button:hover .dash-stage-dot { border-color: var(--accent); }
.dash-stages li.is-done .dash-stage-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.dash-stages li.is-current .dash-stage-dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.dash-stages li.is-current button { color: var(--ink); font-weight: 700; }
.dash-stage-label { font-size: 12.5px; text-align: center; overflow-wrap: anywhere; }

/* Project type badge + home page type filter */
.project-type-badge {
  display: inline-block; align-self: flex-start; font-size: 11.5px; font-weight: 600; line-height: 1.4;
  padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); white-space: nowrap;
}
.project-type-badge.is-unclassified { background: var(--red-soft); color: var(--red); }
.project-type-hint { margin: -4px 0 4px; }
.type-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.type-chips[hidden] { display: none; }
.type-chip {
  font: inherit; font-size: 13px; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border);
}
.type-chip:hover { border-color: var(--accent); }
.type-chip:active { transform: none; }
.type-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.type-chip-count { opacity: 0.7; font-variant-numeric: tabular-nums; }

@media (max-width: 1200px) {
  .dash-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-donuts { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .dash-kpis { grid-template-columns: 1fr; }
  .dash-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------- */
/* ✨ AI assist — every AI control carries .ai-only (inline) or
   .ai-only-block and stays hidden until Settings has an API key
   (body.ai-on, set in applyBranding() in app.js). */
/* ---------------------------------------------------------------------- */
body:not(.ai-on) .ai-only, body:not(.ai-on) .ai-only-block { display: none !important; }
.ai-btn {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  background: var(--accent-soft); color: var(--accent-hover); border: 1px solid transparent;
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.ai-btn:hover { border-color: var(--accent); }
.ai-btn:disabled { opacity: .7; cursor: progress; }
.ai-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-status { font-size: 12.5px; color: var(--muted); }
.ai-box {
  display: flex; flex-direction: column; gap: 8px; padding: 12px; margin-bottom: 4px;
  border: 1px dashed var(--accent); border-radius: var(--radius-sm); background: #f7fbfe;
}
.drawing-form-row .ai-cc-btn { align-self: center; }

.dash-ai-headline { font-weight: 700; font-size: 15px; margin: 0 0 6px; }
.dash-ai-text { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; }
#dash-ai-body h4 { margin: 10px 0 4px; font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
#dash-ai-body ul { margin: 0 0 8px; padding-left: 18px; font-size: 13.5px; line-height: 1.5; }

/* Companies (Settings > Company details > Other companies) */
.company-logo-preview { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.company-logo-preview img { max-height: 40px; max-width: 160px; object-fit: contain; border: 1px solid var(--border); border-radius: 6px; padding: 4px; background: #fff; }
.company-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.inline-label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }

/* ---------------------------------------------------------------------- */
/* Folder panel (Windows File Explorer–style tree) + breadcrumb — see
   renderTree() in app.js. Wide screens: a column left of the page that can
   be hidden with the ☰ button. Narrow screens: slides in over the page. */
/* ---------------------------------------------------------------------- */
.tree-toggle {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: var(--radius-sm); border: none;
  background: transparent; color: var(--nav-muted); cursor: pointer; padding: 0; margin-left: -8px;
}
.tree-toggle:hover { background: var(--nav-hover); color: var(--nav-ink); }
.tree-toggle:active { transform: none; }
.tree-toggle:focus-visible { outline: 2px solid var(--nav-underline); outline-offset: -2px; }

.app-shell { display: flex; align-items: stretch; }
.app-tree {
  flex: none; width: 260px; position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto;
  background: var(--surface); border-right: 1px solid var(--border); padding: 10px 6px 24px;
}
body.tree-hidden .app-tree { display: none; }
.app-tree-scrim { display: none; }

.tree-row {
  display: flex; align-items: center; gap: 0; min-height: 30px; border-radius: 6px;
  padding-left: calc(var(--depth) * 16px);
}
.tree-row:hover { background: #f2f4f7; }
.tree-row.active { background: var(--accent-soft); }
.tree-row.active .tree-text { color: var(--accent-hover); font-weight: 600; }
.tree-twisty, .tree-twisty-space { flex: none; width: 20px; height: 26px; }
.tree-twisty {
  border: none; background: transparent; padding: 0; cursor: pointer; border-radius: 4px; color: var(--faint);
  display: flex; align-items: center; justify-content: center;
}
.tree-twisty::before {
  content: ''; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor; transition: transform .12s ease;
}
.tree-twisty.open::before { transform: rotate(90deg); }
.tree-twisty:hover { color: var(--ink); background: #e8ebf0; }
.tree-twisty:active { transform: none; }
.tree-label {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; text-align: left;
  border: none; background: transparent; padding: 4px 6px 4px 2px; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; border-radius: 4px;
}
.tree-label:active { transform: none; }
.tree-label:focus-visible, .tree-twisty:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tree-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-ico { flex: none; width: 18px; height: 18px; color: #6b7385; }
.tree-row:hover .tree-ico { color: var(--ink); }
.tree-row.active .tree-ico { color: var(--accent); }
.tree-row[aria-expanded="true"] > .tree-label .tree-ico { color: var(--accent); }

/* The selected project, as a header above its modules. */
.tree-project {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: calc(100% - 8px);
  margin: 10px 4px 6px; padding: 10px 12px; text-align: left; cursor: pointer;
  background: var(--accent-soft); border: 1px solid transparent; border-radius: var(--radius-sm); font: inherit;
}
.tree-project:hover { border-color: var(--accent); }
.tree-project:active { transform: none; }
.tree-project:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tree-project-label { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-hover); }
.tree-project-name { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 14px; font-weight: 700; color: var(--ink); }
.tree-project-name .tree-badge { margin-left: auto; }
.tree-project-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tree-hint { margin: 10px 12px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.tree-badge {
  flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.tree-sep { height: 1px; background: var(--border); margin: 8px 6px; }

.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: -8px 0 16px; font-size: 13px; }
.breadcrumb[hidden] { display: none; }
.crumb { background: none; border: none; padding: 2px 4px; border-radius: 4px; font: inherit; color: var(--accent); cursor: pointer; }
.crumb:hover { background: var(--accent-soft); }
.crumb:active { transform: none; }
.crumb.current { color: var(--muted); cursor: default; }
.crumb-sep { color: var(--faint); }

@media (max-width: 900px) {
  .app-tree {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; z-index: 50; width: min(300px, 85vw);
    transform: translateX(-100%); transition: transform .18s ease; box-shadow: var(--shadow-lg);
  }
  body.tree-hidden .app-tree { display: block; }
  body.tree-open .app-tree { transform: none; }
  .app-tree-scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(13, 44, 76, .35); }
  .app-tree-scrim[hidden] { display: none; }
}

/* Project Contacts module */
body:not(.is-admin) .admin-only { display: none !important; }
.pc-table td { vertical-align: top; }
.pc-table td a { color: var(--accent); text-decoration: none; }
.pc-table td a:hover { text-decoration: underline; }
.pc-actions { text-align: right; white-space: nowrap; width: 1%; }
#tab-contacts > .card { margin-bottom: 16px; }
.pc-table { width: 100%; min-width: 640px; table-layout: fixed; }
.pc-table th:nth-child(1) { width: 42%; }
.pc-table th:nth-child(2) { width: 18%; }
.pc-table th:nth-child(3) { width: 30%; }
.pc-table th:nth-child(4) { width: 10%; }
.pc-table td { white-space: normal; overflow-wrap: anywhere; }
.pc-table .chip { margin-top: 4px; }
#pc-add-btn { white-space: nowrap; flex: none; }

/* ---------------------------------------------------------------------- */
/* Task workspace — Asana-style list/board + detail pane (Tasks and Site >
   Defects). See mountTaskWorkspace() in app.js. */
/* ---------------------------------------------------------------------- */
.tw-head { margin-bottom: 14px; }
.tw-head h2 { font-size: 22px; margin: 0; }
.tw.card { padding: 0; overflow: hidden; }
.tw-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.tw-toolbar .contacts-search { width: 220px; max-width: 100%; }
.tw-spacer { flex: 1; }
.tw-add-btn { padding: 7px 14px; font-size: 13.5px; }
.tw-tabs { display: flex; gap: 2px; }
.tw-tab {
  background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 6px 10px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.tw-tab:hover { color: var(--ink); }
.tw-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.tw-tab:active { transform: none; }

/* List view */
.tw-list { padding: 0 0 12px; }
.tw-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 180px 140px 104px 200px; align-items: center;
  min-height: 40px; border-bottom: 1px solid #edf0f3; cursor: pointer; background: var(--surface);
}
.tw-row:hover { background: #f7f8fa; }
.tw-row.is-open { background: var(--accent-soft); }
.tw-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tw-cell { padding: 6px 12px; min-width: 0; font-size: 13.5px; display: flex; align-items: center; gap: 8px; border-left: 1px solid #edf0f3; height: 100%; }
.tw-cell.tw-name { border-left: none; padding-left: 36px; }
.tw-header { cursor: default; min-height: 34px; background: var(--surface); position: sticky; top: 0; z-index: 1; }
.tw-header:hover { background: var(--surface); }
.tw-header .tw-cell { font-size: 12px; font-weight: 600; color: var(--muted); }
.tw-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-row.is-done .tw-title, .tw-card.is-done .tw-title { color: var(--faint); }
.tw-has-notes { color: var(--faint); font-size: 12px; }
.tw-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-assignee, .tw-trade { color: var(--ink); }
.tw-trade { color: var(--muted); font-size: 12.5px; }

.tw-section-head {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid #edf0f3; border-radius: 0;
  padding: 16px 18px 8px; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.tw-section-head:active { transform: none; }
.tw-section-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tw-twisty { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid var(--muted); transition: transform .12s ease; }
.tw-twisty.open { transform: rotate(90deg); }
.tw-count { font-size: 12.5px; font-weight: 600; color: var(--faint); }
.tw-add-row, .tw-col-add {
  display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 0;
  padding: 9px 12px 9px 36px; font: inherit; font-size: 13.5px; color: var(--faint); cursor: pointer; border-bottom: 1px solid #edf0f3;
}
.tw-add-row:hover, .tw-col-add:hover { color: var(--ink); background: #f7f8fa; }
.tw-add-row:active, .tw-col-add:active { transform: none; }
.tw-row-add { grid-template-columns: 1fr; cursor: default; }
.tw-row-add .tw-cell.tw-name { padding-left: 36px; }
.tw-quick-input { flex: 1; border: none; outline: none; background: transparent; font: inherit; font-size: 13.5px; padding: 4px 0; box-shadow: none; }
.tw-empty { padding: 18px; margin: 0; color: var(--muted); font-size: 13.5px; }

/* The round "complete" tick */
.tw-check {
  flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #9aa3b2; background: #fff;
  padding: 0; cursor: pointer; position: relative; transition: background .12s ease, border-color .12s ease;
}
.tw-name .tw-check { margin-left: -26px; }
.tw-check::after {
  content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
  border: solid #9aa3b2; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); opacity: 0; transition: opacity .12s ease;
}
.tw-check:hover { border-color: #0d9f6e; }
.tw-check:hover::after { opacity: 1; border-color: #0d9f6e; }
.tw-check.checked { background: #0d9f6e; border-color: #0d9f6e; }
.tw-check.checked::after { opacity: 1; border-color: #fff; }
.tw-check:active { transform: none; }
.tw-check-ghost { cursor: default; }
.tw-check-ghost:hover { border-color: #9aa3b2; }
.tw-check-ghost:hover::after { opacity: 0; }

/* Due dates, pills, avatars */
.tw-due { color: var(--muted); font-size: 13px; }
.tw-due.due-late { color: #d1242f; font-weight: 600; }
.tw-due.due-today { color: #0d9f6e; font-weight: 600; }
.tw-due.due-soon { color: #b76e00; }
.tw-pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; }
.tw-pill.pri-high { background: #fde4e4; color: #b42318; }
.tw-pill.pri-medium { background: #fdf0d2; color: #8a5200; }
.tw-pill.pri-low { background: #d9f2e8; color: #0f6e4f; }
.tw-pill-trade { background: #eef0f4; color: #4a5160; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tw-avatar {
  flex: none; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 10.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.tw-avatar.sm { width: 22px; height: 22px; font-size: 10px; }

/* Board view */
.tw-board { display: flex; gap: 14px; padding: 16px 18px 20px; overflow-x: auto; align-items: flex-start; background: #f7f8fa; }
.tw-col { flex: 1 1 0; min-width: 250px; }
.tw-col-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; padding: 2px 4px 10px; }
.tw-col-cards { display: flex; flex-direction: column; gap: 8px; min-height: 60px; border-radius: var(--radius-sm); padding: 2px; }
.tw-col-cards.drag-over { background: var(--accent-soft); }
.tw-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px;
  box-shadow: var(--shadow-sm); cursor: pointer; display: flex; flex-direction: column; gap: 10px;
}
.tw-card:hover { border-color: #c4cad4; box-shadow: var(--shadow-md); }
.tw-card.is-open { border-color: var(--accent); }
.tw-card.dragging { opacity: .5; }
.tw-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tw-card-top { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.tw-card-top .tw-title { white-space: normal; }
.tw-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tw-card-foot { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.tw-card-add { cursor: default; }
.tw-card-add .tw-cell { border: none; padding: 0; }
.tw-col-add { border: none; border-radius: var(--radius-sm); padding: 8px 10px; }

/* Detail pane */
.task-pane {
  position: fixed; top: 56px; right: 0; bottom: 0; width: min(520px, 100vw); z-index: 25;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: -12px 0 32px rgba(16, 24, 40, .10);
  display: flex; flex-direction: column; animation: pane-in .16s ease;
}
.task-pane[hidden] { display: none; }
@keyframes pane-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.task-pane-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.task-pane-complete {
  display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 6px 12px; font: inherit; font-size: 13.5px; cursor: pointer; color: var(--ink);
}
.task-pane-complete .tw-check { margin: 0; pointer-events: none; }
.task-pane-complete:hover { border-color: #0d9f6e; color: #0d9f6e; }
.task-pane-complete.is-done { background: #e3f6ee; border-color: #0d9f6e; color: #0b7a55; }
.task-pane-complete.is-done .tw-check { background: #0d9f6e; border-color: #0d9f6e; }
.task-pane-complete.is-done .tw-check::after { opacity: 1; border-color: #fff; }
.task-pane-complete:active { transform: none; }
.task-pane-saved { flex: 1; font-size: 12.5px; color: var(--muted); }
.task-pane-icon-btn {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; padding: 0;
}
.task-pane-icon-btn:hover { background: #f2f4f7; color: var(--ink); }
#task-pane-delete:hover { color: var(--red); }
.task-pane-icon-btn:active { transform: none; }
.task-pane-body { padding: 18px 24px 32px; overflow-y: auto; }
.task-pane-title {
  width: 100%; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 6px 8px; margin: 0 -8px 14px;
  font: inherit; font-size: 22px; font-weight: 700; resize: none; overflow: hidden; background: transparent; box-shadow: none;
}
.task-pane-title:hover { border-color: var(--border); }
.task-pane-title:focus { border-color: var(--accent); outline: none; }
.task-pane-fields { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; align-items: center; margin: 0 0 20px; }
.task-pane-fields dt { font-size: 13px; color: var(--muted); }
.task-pane-fields dd { margin: 0; }
.task-pane-fields select, .task-pane-fields input {
  width: 100%; border: 1px solid transparent; background: transparent; padding: 6px 8px; border-radius: var(--radius-sm); font-size: 13.5px; box-shadow: none;
}
.task-pane-fields select:hover, .task-pane-fields input:hover { border-color: var(--border); }
.task-pane-fields select:focus, .task-pane-fields input:focus { border-color: var(--accent); outline: none; }
.task-pane-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.task-pane-notes { width: 100%; font: inherit; font-size: 14px; }
.task-pane-meta { margin-top: 18px; font-size: 12.5px; color: var(--faint); }

@media (max-width: 900px) {
  .tw-row { grid-template-columns: minmax(0, 1fr) 110px 90px; }
  .tw-row .tw-priority, .tw-row .tw-trade { display: none; }
  .tw-row .tw-assignee .tw-ellipsis { display: none; }
  .tw-row-add { grid-template-columns: 1fr; }
  .tw-board { flex-direction: column; }
  .tw-col { min-width: 0; width: 100%; }
  .task-pane { top: 0; z-index: 60; }
}
/* On wide screens the list makes room for the detail pane instead of
   sitting under it. */
@media (min-width: 1200px) {
  body.task-pane-open .app-content { margin-right: min(520px, 40vw); }
  .task-pane { width: min(520px, 40vw); }
}

/* Inline editing in the task list/board (openInlineEditor in app.js) */
.tw-editable { cursor: text; }
.tw-cell.tw-editable:hover, .tw-card .tw-editable:hover { box-shadow: inset 0 0 0 1px #c4cad4; border-radius: 4px; }
.tw-row .tw-title.tw-editable { padding: 2px 4px; margin-left: -4px; border-radius: 4px; }
.tw-row .tw-title.tw-editable:hover { box-shadow: inset 0 0 0 1px #c4cad4; }
.tw-placeholder { color: transparent; font-size: 12.5px; }
.tw-row:hover .tw-placeholder, .tw-card:hover .tw-placeholder, .tw-editable:focus-within .tw-placeholder { color: var(--faint); }
.tw-details-btn {
  margin-left: auto; flex: none; opacity: 0; background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 2px 8px; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer;
}
.tw-row:hover .tw-details-btn, .tw-details-btn:focus-visible { opacity: 1; }
.tw-details-btn:hover { color: var(--ink); border-color: var(--border-strong); background: #fff; }
.tw-details-btn:active { transform: none; }
.tw-editor {
  width: 100%; min-width: 0; font: inherit; font-size: 13.5px; padding: 4px 6px; border: 1px solid var(--accent);
  border-radius: 6px; background: #fff; box-shadow: 0 0 0 3px var(--accent-soft); outline: none;
}
.tw-name .tw-editor { flex: 1; }
.tw-card .tw-editor { width: auto; max-width: 100%; font-size: 12.5px; padding: 2px 4px; }
.tw-card-foot { flex-wrap: wrap; }
@media (max-width: 900px) {
  .tw-row { grid-template-columns: minmax(0, 1fr) 90px 128px; }
  .tw-details-btn { opacity: 1; }
}

/* ---------------------------------------------------------------------- */
/* Settings > Cost codes — cost code manager (renderCostCodeManager). */
/* ---------------------------------------------------------------------- */
#ccm { display: flex; flex-direction: column; gap: 14px; }
.ccm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ccm-head h2 { margin: 2px 0 4px; font-size: 24px; }
.ccm-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.ccm-row-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ccm-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
.ccm-btn:hover { background: #f5f7fa; }
.ccm-btn:active { transform: none; }
.ccm-btn:disabled { opacity: .45; cursor: not-allowed; }
.ccm-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.ccm-btn.primary:hover { background: var(--accent-hover); }
.ccm-btn.danger { background: #b42318; border-color: #b42318; color: #fff; }
.ccm-btn.danger:hover { background: #912018; }
.ccm-rules {
  display: flex; gap: 10px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); font-size: 13px; line-height: 1.5; color: #34373d;
}
.ccm-rules svg { flex: none; color: var(--accent); margin-top: 2px; }
.ccm-pills, .ccm-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.ccm-seg { padding: 4px; background: #e9edf2; border-radius: 999px; }
.ccm-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink); cursor: pointer; white-space: nowrap;
}
.ccm-seg .ccm-pill { border-color: transparent; background: transparent; }
.ccm-pill span { opacity: .65; }
.ccm-pill.on, .ccm-seg .ccm-pill.on { background: var(--nav-bg); border-color: var(--nav-bg); color: #fff; }
.ccm-pill:active { transform: none; }
.ccm-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ccm-search { width: 380px; max-width: 100%; }
.ccm-toast { margin-left: auto; font-size: 13px; color: var(--muted); }
.ccm-bulk {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--nav-bg); color: #fff; font-size: 13px;
}
.ccm-bulk select, .ccm-bulk input { min-height: 32px; border-radius: 6px; border: 1px solid transparent; padding: 0 8px; font-size: 13px; }
.ccm-bulk input { width: 200px; }
.ccm-sep { width: 1px; height: 24px; background: rgba(255,255,255,.3); }
.ccm-confirm { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; background: #fff8f1; border: 1px solid #efc79f; border-radius: var(--radius-md); }
.ccm-confirm-title { font-size: 16px; font-weight: 700; }
.ccm-keep { font-size: 13px; color: #7c2d12; display: flex; flex-direction: column; gap: 6px; }
.ccm-keep-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ccm-keep-list span { padding: 3px 10px; border-radius: 6px; background: #fff; border: 1px solid #efc79f; color: #4a4b45; }
.ccm-panel { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.ccm-panel h3 { margin: 0; font-size: 16px; }
.ccm-panel-title { font-weight: 700; }
.ccm-panel textarea { width: 100%; font-size: 12.5px; }
.ccm-pv { font-size: 13px; color: var(--muted); }
.ccm-errors { margin: 0; padding-left: 18px; font-size: 12.5px; color: #b42318; }

.ccm-grid-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: auto; max-height: 72vh; }
.ccm-grid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1560px; font-size: 13px; }
.ccm-grid th {
  position: sticky; top: 0; z-index: 2; background: var(--nav-bg); color: #fff; font-size: 11.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; text-align: left; padding: 10px 8px; white-space: nowrap;
}
.ccm-grid td { border-bottom: 1px solid #e8ebf0; border-right: 1px solid #f0f2f5; padding: 0; vertical-align: middle; }
.ccm-grid tr:hover td { background: #f7f9fc; }
.ccm-grid tr.is-sel td { background: #eaf3fb; }
.ccm-grid tr.is-arch td { opacity: .6; }
.ccm-grid tr.is-draft td { background: #fffbea; }
.ccm-tick { width: 36px; text-align: center; }
.ccm-cell {
  width: 100%; box-sizing: border-box; border: 0; background: transparent; font: inherit; color: inherit;
  padding: 9px 8px; min-height: 38px; outline: none; border-radius: 0; box-shadow: none;
}
select.ccm-cell { cursor: pointer; }
.ccm-cell:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--accent); }
.ccm-cell.strong { font-weight: 700; }
.ccm-cell.ccm-error { box-shadow: inset 0 0 0 2px #b42318; background: #fdecec; }
.mono, .ccm-cell.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.ccm-status { padding: 4px 8px !important; }
.ccm-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.ccm-badge { padding: 2px 8px; border-radius: 4px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.b-lock { background: #dbe7ff; color: #1e3a8a; }
.b-used { background: #fde7d2; color: #7c2d12; }
.b-arch { background: #e6e8ec; color: #3f4450; }
.b-check { background: #fef3c7; color: #713f12; }
.b-new { background: #dff5e8; color: #0f6e4f; }
.ccm-flag { font-size: 11.5px; color: #713f12; margin-top: 3px; line-height: 1.3; }
.ccm-actions { padding: 0 6px !important; white-space: nowrap; }
.ccm-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px;
  border: 1px solid transparent; background: transparent; color: #4a5160; cursor: pointer; padding: 0;
}
.ccm-icon:hover { background: #eef1f5; border-color: #d8dde5; }
.ccm-icon.is-locked { color: #1e40af; }
.ccm-icon.ccm-del { color: #b42318; }
.ccm-icon:disabled { opacity: .28; cursor: not-allowed; background: transparent; border-color: transparent; }
.ccm-icon:active { transform: none; }
.ccm-empty { padding: 36px; text-align: center; color: var(--muted); margin: 0; }
.ccm-pager { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.ccm-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ccm-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.ccm-check .mono { min-width: 36px; font-weight: 700; }
.ccm-check .warn { color: #b45309; }
.ccm-check .ok { color: #166534; }
.ccm-check span:nth-child(2) { flex: 1; }
.ccm-log { display: grid; grid-template-columns: 118px 110px 1fr; gap: 10px; font-size: 12.5px; }
.ccm-log .mono { color: var(--muted); font-size: 12px; }
@media (max-width: 900px) {
  .ccm-panels { grid-template-columns: 1fr; }
  .ccm-log { grid-template-columns: 1fr; gap: 0; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
}
/* Standard cost code list panel (add company codes from it) */
.ccm-std { gap: 12px; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ccm-std-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.ccm-std-wrap { max-height: 440px; }
.ccm-std-grid { min-width: 1100px; }
.ccm-std-grid td { padding: 7px 8px; }
.ccm-std-grid td.ccm-tick { padding: 0; }
.ccm-std-grid tr.is-added td { color: var(--muted); background: #f6f8f7; }
.ccm-grid td.strong { font-weight: 700; }
.ccm-muted { color: var(--faint); }
/* Locked cost codes are read-only until an admin unlocks them */
.ccm-grid tr.is-locked td { background: #f7f8fa; }
.ccm-grid tr.is-locked .ccm-cell { color: var(--muted); cursor: not-allowed; }
.ccm-grid tr.is-locked .ccm-cell:focus { box-shadow: none; outline: 1px dashed var(--border, #c9d1da); }
.dash-stages li.is-done .dash-stage-dot { font-size: 15px; }
.project-row-actions button:disabled { opacity: 0.45; cursor: not-allowed; }
/* Cost code tabs: Live · Locked · Archived | Standard list · Used on projects · Checks & history */
.ccm-tabs { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--border-strong); overflow-x: auto; scrollbar-width: none; }
.ccm-tabs::-webkit-scrollbar { display: none; }
.ccm-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent;
  background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.ccm-tab:hover { color: var(--ink); }
.ccm-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.ccm-tab-n { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #e9edf2; color: var(--muted); }
.ccm-tab.on .ccm-tab-n { background: var(--accent-soft); color: var(--accent); }
.ccm-tab-n.warn { background: var(--amber-soft); color: var(--amber); }
.ccm-tab-sep { width: 1px; align-self: stretch; margin: 8px 8px 10px; background: var(--border-strong); }
.ccm-select { min-height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); font: inherit; font-size: 13px; max-width: 320px; }
.ccm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 600; }
.ccm-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 12px; padding: 2px 6px; border-radius: 999px; }
.ccm-chip button:hover { background: rgba(0, 120, 200, .12); }
.ccm-more { position: relative; }
.ccm-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 190px; padding: 6px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}
.ccm-menu button, .ccm-menu a { text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; text-decoration: none; }
.ccm-menu button:hover, .ccm-menu a:hover { background: var(--accent-soft); }
.ccm-intro { margin: 0; }
.ccm-proj { gap: 12px; }
.ccm-proj-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ccm-proj-grid { min-width: 1150px; }
.ccm-proj-grid td { padding: 8px; }
.ccm-grid th.num, .ccm-grid td.num { text-align: right; width: 96px; }
@media (max-width: 700px) { .ccm-search { width: 100%; } .ccm-select { max-width: 100%; flex: 1; } }
.ccm-proj-grid { min-width: 1240px; table-layout: fixed; }
.ccm-proj-grid th.num { width: 92px; letter-spacing: .02em; }
.ccm-proj-grid td.num { width: 92px; }
.ccm-proj-grid td .ccm-badge { margin-left: 4px; }
.ccm-tabs .ccm-tab, .ccm-tabs .ccm-tab:hover, .ccm-tabs .ccm-tab:focus, .ccm-tabs .ccm-tab:active { background: none; box-shadow: none; transform: none; border-radius: 0; }
.ccm-tabs .ccm-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ccm-viewonly { font-size: 12.5px; font-weight: 600; color: var(--amber); background: var(--amber-soft); padding: 6px 10px; border-radius: 999px; }
/* Contracts > Project budget (shares the cost code screen's .ccm-* look) */
#pbm { display: flex; flex-direction: column; gap: 14px; }
.pbm-grid { min-width: 760px; }
.pbm-grid td { padding: 0 8px; height: 40px; }
.pbm-grid td.mono.strong { font-weight: 700; }
.pbm-grid .pbm-money { text-align: right; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.pbm-grid .pbm-money[readonly] { color: var(--muted); cursor: not-allowed; }
.pbm-adj { font-size: 11.5px; color: var(--muted); margin-left: 4px; }
.pbm-grid td.pbm-vos { white-space: normal; line-height: 1.9; }
.pbm-vo {
  display: inline-flex; align-items: baseline; gap: 4px; margin: 0 4px 0 0; padding: 1px 7px;
  border: 1px solid var(--border); border-radius: 999px; background: #f5f6f8; cursor: pointer;
  font: inherit; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink);
}
.pbm-vo:hover { border-color: var(--accent); background: #eef4fa; }
.pbm-vo-n { font-weight: 700; color: var(--accent); }
.pbm-total td { font-weight: 700; background: #f1f4f8; border-top: 2px solid var(--nav-bg); height: 44px; padding: 0 8px; }
.pbm-lockbadge { vertical-align: middle; font-size: 12px; margin-left: 8px; }
.pbm-add-grid { min-width: 760px; }
tr.procline-budgetonly td { color: var(--muted); }
/* Settings > Project defaults */
#pdm { display: flex; flex-direction: column; gap: 14px; }
.pd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pd-wide { grid-column: 1 / -1; }
.pd-field { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 6px 0; border-top: 1px solid var(--border); }
.pd-label { font-weight: 600; font-size: 13.5px; }
.pd-input { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pd-input input { width: 120px; min-height: 34px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; font-size: 13.5px; }
.pd-unit { font-size: 12.5px; color: var(--muted); }
.pd-usage { grid-column: 2; font-size: 12px; color: var(--muted); }
.pd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pd-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 6px; border-bottom: 1px solid var(--border); }
.pd-table td { padding: 4px 6px; border-bottom: 1px solid var(--border); }
.pd-table input { width: 100%; min-height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; font: inherit; }
.pd-table input:hover:not(:disabled) { border-color: var(--border-strong); }
.pd-table input:focus { border-color: var(--accent); background: var(--surface); outline: none; }
.pd-table .num, .pd-table .num input { text-align: right; }
.pd-foot { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.pd-total { font-size: 13px; font-weight: 600; margin-left: auto; }
.pd-total.warn { color: var(--amber); }
@media (max-width: 800px) { .pd-grid { grid-template-columns: 1fr; } .pd-field { grid-template-columns: 1fr; } .pd-usage { grid-column: 1; } }
.pd-wideinput { width: 100% !important; max-width: 320px; }
.pd-upload { cursor: pointer; }
.pd-textlabel { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13.5px; }
.pd-textlabel textarea { font: inherit; font-weight: 400; font-size: 13px; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); resize: vertical; }
/* Role drop-down on staff / project team rows (roles from Project defaults) */
.team-row select.role-select { flex: 0 1 200px; min-width: 140px; }
@media (max-width: 700px) { .team-row { flex-wrap: wrap; } .team-row input, .team-row select.role-select { flex: 1 1 45%; } }
#settings-panel-company button:disabled, #settings-panel-company label.file-btn:has(input:disabled) { opacity: .45; cursor: not-allowed; }
/* Settings > Users > People */
.people-table td { vertical-align: top; padding: 10px 6px; }
.people-alloc td { background: var(--accent-soft); }
.people-alloc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; }
.people-alloc-list label { display: flex; gap: 8px; align-items: center; font-size: 13.5px; }
.people-alloc-list input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; flex: none; margin: 0; }
.people-alloc-list label { justify-content: flex-start; padding: 4px 0; }
/* Company dashboard (Home) */
.home-kpis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.home-kpis .dash-value { font-size: 24px; }
.home-kpis .dash-hero .dash-value { font-size: 28px; }
.home-kpis .dash-tile.is-attention .dash-value { color: var(--red); }
.home-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.home-toolbar #home-search { flex: 1 1 320px; max-width: 460px; }
.home-sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.home-sort select { min-height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); font: inherit; font-size: 13px; color: var(--ink); }
.home-view { display: flex; gap: 4px; margin-left: auto; }
.home-projects:not(.is-table) { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.home-projects.is-table { display: block; }
.home-project-card { gap: 8px; }
.home-pm { font-size: 13px; color: var(--muted); }
.home-pm strong { color: var(--ink); font-weight: 600; }
.home-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.home-fig { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-fig-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.home-fig-value { font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.home-fig-value small { font-size: 12px; font-weight: 600; color: var(--muted); }
.is-negative, .home-fig-value.is-negative { color: var(--red); }
.home-bar-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12.5px; width: 100%; }
.home-bar-row > .hint-text { grid-column: 2 / -1; font-size: 12.5px; }
.home-bar-label { color: var(--muted); font-weight: 600; }
.home-bar { display: block; height: 8px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.home-bar span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.home-bar span.is-over { background: var(--red); }
.home-bar-time span { background: var(--nav-bg); }
.home-bar-value { color: var(--ink); white-space: nowrap; }
.home-bar-value.is-negative { color: var(--red); font-weight: 600; }
.home-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); padding-top: 2px; }
.home-trades { margin-right: auto; }
.home-flag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #eef1f5; color: var(--muted); white-space: nowrap; }
.home-flag.is-bad { background: var(--red-soft); color: var(--red); }
.home-flag.is-warn { background: var(--amber-soft); color: var(--amber); }
.home-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.home-table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 13px; }
.home-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--nav-bg); padding: 10px; white-space: nowrap; }
.home-table td { padding: 10px; border-top: 1px solid var(--border); vertical-align: middle; }
.home-table .num { text-align: right; white-space: nowrap; }
.home-table tbody tr { cursor: pointer; }
.home-table tbody tr:hover, .home-table tbody tr:focus-visible { background: var(--accent-soft); outline: none; }
@media (max-width: 1200px) { .home-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .home-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-projects:not(.is-table) { grid-template-columns: 1fr; } .home-view { margin-left: 0; } }
.home-project-card > .home-figs, .home-project-card > .home-bar-row, .home-project-card > .home-foot { width: 100%; align-self: stretch; }
/* Correspondence — Outlook-style, same header/tabs/toolbar as Cost codes */
#tab-communications { display: none; flex-direction: column; gap: 14px; }
#tab-communications.active { display: flex; }
.mail { display: flex; flex-direction: column; gap: 14px; }
.mail-panes { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; min-height: 560px; }
.mail-list { border-right: 1px solid var(--border); overflow-y: auto; max-height: calc(100vh - 290px); min-height: 560px; }
.mail-group { position: sticky; top: 0; z-index: 1; padding: 6px 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: #f5f7fa; border-bottom: 1px solid var(--border); }
.mail-row { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 10px 14px 10px 16px; border: 0; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; background: var(--surface); font: inherit; color: var(--ink); cursor: pointer; }
.mail-row:hover { background: #f5f8fc; }
.mail-row.is-selected { background: var(--accent-soft); border-left-color: var(--accent); }
.mail-row-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.mail-who { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row.is-open .mail-who, .mail-row.is-open .mail-subject { font-weight: 700; }
.mail-to { font-weight: 500; color: var(--muted); font-size: 12px; }
.mail-date { font-size: 12px; color: var(--muted); white-space: nowrap; }
.mail-date.is-overdue, .is-overdue { color: var(--red); }
.mail-subject { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row.is-open .mail-subject { color: var(--accent); }
.mail-preview { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-icons { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 3px; font-size: 11.5px; }
.mail-icon { color: var(--muted); }
.mail-done { color: var(--green); font-weight: 600; }
.mail-flag { color: var(--amber); font-weight: 600; }
.mail-flag.is-overdue { color: var(--red); }
.ccm-badge.b-cost { background: #eef6ee; color: #1f6b35; }
.mail-reading { overflow-y: auto; max-height: calc(100vh - 290px); min-height: 560px; }
.mail-read, .mail-compose { padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 12px; }
.mail-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.mail-read-subject { font-size: 20px; margin: 4px 0 0; }
.mail-read-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mail-read-meta { display: grid; grid-template-columns: 90px 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.mail-read-meta dt { color: var(--muted); font-weight: 600; }
.mail-read-meta dd { margin: 0; }
.mail-body { white-space: pre-wrap; font-size: 14px; line-height: 1.6; padding: 14px 0; border-top: 1px solid var(--border); }
.mail-section { border-top: 1px solid var(--border); padding-top: 12px; }
.mail-section h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mail-section .mail-body { border-top: 0; padding-top: 0; }
.mail-cost-row { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm); background: #f5f8fc; border: 1px solid var(--border); }
.mail-reply { padding: 8px 0; border-bottom: 1px dashed var(--border); }
.mail-reply-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.mail-reply .mail-preview { white-space: normal; }
.mail-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.mail-empty { padding: 40px 20px; }
.mail-compose h3 { margin: 0; font-size: 18px; }
.mail-compose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.mail-compose-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.mail-compose-grid .span-2 { grid-column: 1 / -1; }
.mail-compose-grid input, .mail-compose-grid select, .mail-compose-grid textarea { font: inherit; font-weight: 400; font-size: 14px; color: var(--ink); min-height: 38px; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); width: 100%; }
.mail-compose-grid textarea { line-height: 1.55; resize: vertical; }
.mail-cc { display: flex; gap: 6px; }
.mail-cc select { flex: 1; min-width: 0; }
.mail-compose-docs summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.mail-compose-docs .mail-doc-list { max-height: 220px; margin-top: 8px; }
.mail-compose-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mail-compose-msg { font-size: 13px; color: var(--muted); }
.mail-back { display: none; align-self: flex-start; }
@media (max-width: 900px) {
  .mail-panes { grid-template-columns: 1fr; }
  .mail-list, .mail-reading { max-height: none; min-height: 0; border-right: 0; }
  .mail:not(.show-read) .mail-reading { display: none; }
  .mail.show-read .mail-list { display: none; }
  .mail-back { display: inline-flex; }
  .mail-compose-grid { grid-template-columns: 1fr; }
}
.ccm-btn[hidden], .ccm-icon[hidden] { display: none !important; }
/* Document preview (printable pages) */
dialog.doc-preview { width: min(980px, 96vw); height: 92vh; max-height: 92vh; padding: 0; border: 0; border-radius: var(--radius-md); overflow: hidden; display: none; flex-direction: column; box-shadow: var(--shadow-lg); }
dialog.doc-preview[open] { display: flex; }
.doc-preview-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.doc-preview-bar strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; }
#doc-preview-frame { flex: 1; width: 100%; border: 0; background: #e9edf2; }
.pd-types { margin-top: 14px; }
/* Clients — one page in the Cost codes layout */
#tab-clients.active { display: flex; flex-direction: column; gap: 14px; }
#tab-clients .client-subpanel.active { display: flex; flex-direction: column; gap: 14px; }
.cl-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.cl-summary .ccm-panel { gap: 6px; }
.cl-summary .drawings-preview-fields { grid-template-columns: 120px minmax(0, 1fr); font-size: 13px; margin: 0; }
.cl-summary .drawings-preview-fields dd { overflow-wrap: anywhere; }
.cl-sub { margin: 8px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cl-summary .cl-sub:first-of-type { margin-top: 2px; }
.hc-subpanel { display: none; flex-direction: column; gap: 12px; }
.hc-subpanel.active { display: flex; }
.hc-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.hc-tab-btn.active .ccm-tab-n { background: var(--accent-soft); color: var(--accent); }
details.cl-add { gap: 12px; }
details.cl-add > summary { list-style: none; align-self: flex-start; cursor: pointer; }
details.cl-add > summary::-webkit-details-marker { display: none; }
details.cl-add:not([open]) { padding: 0; border: 0; background: none; }
details.cl-add[open] > summary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.cl-form-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cl-section-title { margin: 6px 0 0; font-size: 16px; }
#tab-clients .procline-table { width: 100%; }
@media (max-width: 1100px) { .cl-summary { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .cl-summary { grid-template-columns: 1fr; } }
#tab-clients .procline-table { min-width: 0; width: 100%; table-layout: auto; }
#tab-clients #payment-schedule-table { display: block; overflow-x: auto; }
#tab-clients #payment-schedule-table thead, #tab-clients #payment-schedule-table tbody { display: table; width: 100%; table-layout: fixed; }
details.cl-add[open] > summary.ccm-btn.primary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
details.cl-add[open] > summary.ccm-btn.primary::before { content: '✕ '; }
#tab-clients .hint-text { margin: 2px 0 6px; }

/* Head contract Variation Order editor */
dialog.vo-modal { width: min(1180px, calc(100vw - 32px)); }
.vo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; margin: 8px 0 12px; }
.vo-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
.vo-grid input, .vo-grid select, .vo-grid textarea { width: 100%; }
.vo-grid .vo-wide { grid-column: span 4; }
.vo-grid-2 { grid-template-columns: 1fr 1fr; margin-top: 12px; }
.vo-refs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 0 0 12px; }
.vo-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.vo-ref-label { font-size: 12px; font-weight: 700; color: var(--muted); min-width: 92px; }
.vo-ref-links { display: contents; }
.vo-ref-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 8px; border-radius: 999px; background: #eef4fa; border: 1px solid #cfe0f1; font-size: 12px; font-weight: 700; color: var(--accent); }
.vo-ref-chip em { font-style: normal; font-weight: 600; color: var(--amber); font-size: 11px; }
.vo-ref-chip button { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1; padding: 0 2px; }
.vo-ref select.vo-ref-add { flex: 1 1 150px; min-width: 0; font-size: 12px; padding: 3px 6px; }
.vo-ref input[type="text"] { flex: 1 1 110px; min-width: 0; font-size: 12px; padding: 4px 6px; }
.vo-eot-btn { font-size: 12px; padding: 3px 9px; }
.vo-lines td select.vo-line-cc { width: 100%; font-size: 12px; padding: 4px 4px; }
@media (max-width: 760px) { .vo-refs { grid-template-columns: 1fr; } }
.vo-lines-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.vo-lines { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13px; }
.vo-lines th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px; background: var(--surface-2, #f7f8fa); border-bottom: 1px solid var(--border); }
.vo-lines td { padding: 3px 4px; border-bottom: 1px solid var(--border); }
.vo-lines td input { width: 100%; padding: 5px 6px; font-size: 13px; }
.vo-lines .num { text-align: right; white-space: nowrap; padding-right: 8px; }
.vo-lines .vo-neg { color: #c81e1e; }
.vo-lines tr.vo-hd td input { font-weight: 700; background: #fffbd1; }
.vo-lines td button { border: 0; background: none; font-size: 18px; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 6px; }
.vo-lines td button:hover { color: #c81e1e; }
.vo-line-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.vo-totals { display: grid; grid-template-columns: 1fr 140px; gap: 4px 12px; align-items: center; margin-left: auto; max-width: 560px; font-size: 13px; }
.vo-totals > div:nth-child(odd) { text-align: right; }
.vo-totals .num { text-align: right; padding: 3px 8px; border: 1px solid var(--border); border-radius: 4px; }
.vo-totals .vo-margin input[type=number] { width: 70px; }
.vo-totals .vo-margin input[type=text] { width: 190px; }
.cl-var-actions { justify-content: flex-start; align-items: center; gap: 12px; }
#contract-variation-list .vo-pdf { margin-left: 10px; padding: 3px 10px; font-size: 12px; }
@media (max-width: 700px) { .vo-grid { grid-template-columns: 1fr 1fr; } .vo-grid .vo-wide { grid-column: span 2; } .vo-grid-2 { grid-template-columns: 1fr; } }
.vo-attach:not(section) { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.vo-attach h3 { margin: 0 0 6px; font-size: 14px; }
.vo-attach label.ccm-btn { cursor: pointer; }
#vo-register-picker { margin-top: 6px; }
.vo-register-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 8px; margin-top: 6px; }
.vo-reg-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; border-bottom: 1px solid var(--border); cursor: pointer; }
.vo-reg-row:last-child { border-bottom: 0; }
.ct-table { width: 100%; }
.ct-table input.ct-abbr { width: 110px; text-transform: uppercase; font-weight: 600; }
/* Project defaults: section head with status + Edit / Lock */
.pd-sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.pd-sec-head h3 { margin: 0; }
.pd-sec-btns { margin-left: auto; display: flex; gap: 6px; }
.pd-sec-btns .ccm-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 12.5px; }
#correspondence-type-add-row[hidden] { display: none !important; }
/* view-only (not being edited, or locked) fields read as plain values */
#pdm input:disabled, #pdm textarea:disabled, .ct-table input.ct-abbr:disabled { background: transparent; border-color: transparent; box-shadow: none; color: var(--text, #1a1a1a); opacity: 1; -webkit-text-fill-color: currentColor; cursor: default; resize: none; }
#pdm textarea:disabled { border-color: var(--border); background: var(--surface-2, #f7f8fa); }

/* ---------------------------------------------------------------------- */
/* Settings > Contacts — contact manager (contacts.js), built on the cost
   code manager's .ccm-* look, plus the Xero-style contact card. */
/* ---------------------------------------------------------------------- */
#cm { display: flex; flex-direction: column; gap: 14px; }
.cm-grid { min-width: 1600px; }
.cm-grid td.cm-cell { padding: 8px; }
.cm-grid tr.cm-row { cursor: pointer; }
.cm-name-cell { display: flex; align-items: center; gap: 10px; border-right: 0 !important; }
.cm-name-text { display: flex; flex-direction: column; min-width: 0; }
.cm-name-text strong { color: var(--accent); }
.cm-sub { display: block; font-size: 11.5px; color: var(--muted); }
.cm-link { color: var(--ink); text-decoration: none; }
.cm-link:hover { color: var(--accent); text-decoration: underline; }
.cm-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cm-chip { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #eef1f5; color: #3f4450; white-space: nowrap; }
.cm-chip.is-unlisted { background: transparent; border: 1px dashed #c3c9d2; color: var(--muted); }
.cm-trades { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-b-sub { background: #ffedd5; color: #9a3412; }
.cm-b-sup { background: #e0f2fe; color: #075985; }
.cm-b-both { background: #ede9fe; color: #5b21b6; }
.cm-b-client { background: var(--green-soft); color: #166534; }
.cm-comp { font-size: 12.5px; }
.cm-comp-none { color: var(--faint, #9aa1ab); }
.cm-comp-ok { color: #166534; }
.cm-comp-expiring { color: #92400e; font-weight: 600; }
.cm-comp-expired { color: #b42318; font-weight: 700; }
.cm-open { min-height: 28px; padding: 0 10px; }

.cm-quick {
  display: grid; grid-template-columns: auto minmax(180px, 2fr) minmax(150px, 1.2fr) minmax(160px, 1.5fr) minmax(110px, 1fr) auto auto;
  gap: 8px; align-items: center; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.cm-quick > * { min-width: 0; width: 100%; }
.cm-quick > button, .cm-quick > .cm-quick-title { width: auto; }
@media (max-width: 1100px) { .cm-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cm-quick-title { grid-column: 1 / -1; } }
.cm-quick-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.cm-quick input, .cm-quick select { min-height: 34px; font-size: 13px; }

/* Contact card */
dialog.cm-editor { width: min(1040px, calc(100vw - 32px)); max-width: none; height: min(860px, calc(100vh - 32px)); padding: 0; overflow: hidden; }
#cm-editor-form { display: flex; flex-direction: column; height: 100%; margin: 0; }
.cm-ed-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 24px 14px; border-bottom: 1px solid var(--border); }
.cm-ed-head h2 { margin: 2px 0 0; font-size: 20px; }
.cm-ed-head .close-x { position: static; }
.cm-ed-body { flex: 1; display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 0; }
.cm-ed-nav { border-right: 1px solid var(--border); padding: 14px 0; display: flex; flex-direction: column; background: var(--surface); }
.cm-ed-nav button {
  text-align: left; background: none; border: 0; border-left: 3px solid transparent; padding: 9px 18px; font: inherit; font-size: 14px;
  color: var(--ink); cursor: pointer; border-radius: 0;
}
.cm-ed-nav button:hover { background: #f5f7fa; }
.cm-ed-nav button:active { transform: none; }
.cm-ed-nav button.on { color: var(--accent); border-left-color: var(--accent); font-weight: 600; background: var(--accent-soft); }
.cm-ed-note { margin: 16px 18px 0; font-size: 12px; color: var(--muted); }
.cm-ed-main { overflow-y: auto; padding: 8px 32px 40px; scroll-padding-top: 12px; }
.cm-ed-main section { max-width: 640px; padding: 16px 0 24px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; }
.cm-ed-main section:last-child { border-bottom: 0; }
.cm-ed-main h3 { margin: 0; font-size: 16px; }
.cm-ed-main h4 { margin: 8px 0 0; font-size: 14px; }
.cm-ed-main label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ink); }
.cm-ed-main label input, .cm-ed-main label textarea { font-weight: 400; }
.cm-req, .cm-hint-inline { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.cm-hint { font-size: 12px; font-weight: 400; color: var(--muted); }
.cm-hint a { color: var(--accent); }
.cm-count { font-weight: 400; font-size: 12px; color: var(--muted); }
.cm-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cm-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cm-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cm-fieldset legend { font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 6px; }
.cm-type-seg { align-self: flex-start; }
.cm-type-seg .ccm-pill { cursor: pointer; font-weight: 600; flex-direction: row; }
.cm-type-seg input { position: absolute; opacity: 0; pointer-events: none; }
.cm-type-seg .ccm-pill:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.cm-cat-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-ed-main label.cm-cat {
  flex-direction: row; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-strong);
  font-size: 12.5px; font-weight: 500; cursor: pointer; background: var(--surface);
}
.cm-ed-main label.cm-cat input { margin: 0; width: auto; min-height: 0; padding: 0; flex: none; }
.cm-ed-main label.cm-cat { white-space: nowrap; }
.cm-ed-main label.cm-check input { width: auto; min-height: 0; flex: none; margin: 0; }
.cm-lbl-row { display: flex; justify-content: space-between; align-items: baseline; }
.cm-ed-main label.cm-cat.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.cm-row-add { display: flex; gap: 8px; }
.cm-row-add input { flex: 1; max-width: 280px; }
.cm-people { display: flex; flex-direction: column; gap: 10px; }
.cm-person { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fafbfc; }
/* Trade portal logins on the contact card — name on the left, buttons on the right. */
.cm-portal-login { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fafbfc; }
.cm-portal-login > div { flex: 1; min-width: 180px; }
.cm-remove { align-self: flex-end; background: none; border: 0; color: #b42318; font: inherit; font-size: 12.5px; cursor: pointer; padding: 0; }
.cm-remove:active, .cm-add-link:active { transform: none; }
.cm-add-link { align-self: flex-start; background: none; border: 0; color: var(--accent); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 4px 0; }
.cm-add-link:hover { text-decoration: underline; }
.cm-ed-main label.cm-check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.cm-check-pad { padding-top: 22px; }
.cm-trade-list { max-height: 280px; }
.cm-ed-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 24px; border-top: 1px solid var(--border); background: var(--surface); }
.cm-ed-error { color: #b42318; font-size: 13px; }
.cm-danger-text { color: #b42318; }
@media (max-width: 760px) {
  .cm-ed-body { grid-template-columns: 1fr; }
  .cm-ed-nav { display: none; }
  .cm-ed-main { padding: 8px 16px 32px; }
  .cm-row2, .cm-row3 { grid-template-columns: 1fr; }
}
.cm-ed-main .cm-trade-list label { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.cm-ed-main .cm-trade-list label input { width: auto; min-height: 0; flex: none; margin: 0; }
.ct-table input.ct-name { width: 100%; max-width: 320px; }

/* Tenders */
.enq-table-wrap { overflow-x: auto; }
.enq-table { width: 100%; min-width: 900px; }
.enq-table tbody tr.enq-row { cursor: pointer; }
.enq-table tbody tr.enq-row:hover td { background: var(--surface-2, #f7f8fa); }
.enq-table .hint-text { font-size: 12px; }
.enq-overdue { color: #c81e1e; font-weight: 600; }
.enq-h { margin: 14px 0 4px; font-size: 14px; }
.vo-grid .vo-wide-2 { grid-column: span 2; }
.enq-convert { background: #0f6e4f; color: #fff; border-color: #0f6e4f; }
.enq-carry { display: grid; grid-template-columns: 130px 1fr; gap: 3px 12px; margin: 10px 0 14px; padding: 10px 12px; background: var(--surface-2, #f7f8fa); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; }
.enq-carry dt { font-weight: 600; color: var(--muted); }
.enq-carry dd { margin: 0; }
.enq-won-choice { display: grid; gap: 8px; margin: 0 0 14px; }
.enq-won-choice label { display: flex; flex-direction: row; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; }
.enq-won-choice input { width: auto; margin: 2px 0 0; flex: none; }
.enq-won-choice span { flex: 1; font-weight: 400; }
.enq-team { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 10px; }
.enq-team label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent, #0b6bcb); cursor: pointer; font-size: 12px; }
.tree-badge-info { background: #dbe7ff; color: #1e3a8a; }
#enquiry-convert-modal { width: min(760px, 96vw); }
@media (max-width: 700px) { .vo-grid .vo-wide-2 { grid-column: span 2; } }
.enq-team label { flex-direction: row !important; width: auto; margin: 0; }
.enq-team label input[type=checkbox] { width: auto; margin: 0; }
/* Contacts import panel + export menu */
.ccm-btn.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.cm-export-menu { min-width: 230px; }
.cm-menu-label { padding: 8px 10px 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cm-inline-link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.cm-inline-link:active { transform: none; }
.cm-imp { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); gap: 14px; }
.cm-imp.is-drag { background: var(--accent-soft); }
.cm-imp-head { display: flex; justify-content: space-between; align-items: center; }
.cm-imp-head .close-x { position: static; }
.cm-imp-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 14px; font-size: 13.5px; }
.cm-imp-steps li > .ccm-row-btns, .cm-imp-steps li > .cm-drop, .cm-imp-steps li > .cm-imp-opts { margin-top: 8px; }
.cm-drop { display: flex; align-items: center; gap: 12px; padding: 18px; border: 2px dashed var(--border-strong); border-radius: var(--radius-md); background: #fafbfc; }
.cm-imp-opts { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.cm-imp-opts label { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; }
.cm-imp-opts input { width: auto; min-height: 0; margin: 2px 0 0; flex: none; }
.cm-imp-cols summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); }
.cm-imp-cols code { font-size: 12px; }
.cm-imp-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; font-size: 13.5px; }
.cm-imp-summary .warn { color: #92400e; }
.cm-imp-n { font-size: 24px; font-weight: 700; margin-right: 4px; font-variant-numeric: tabular-nums; }
.cm-imp-facts { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.cm-imp-facts .cm-chip { display: inline-block; margin: 2px 2px 2px 0; }
.cm-imp-table { max-height: 320px; }
.cm-imp-table .ccm-grid { min-width: 700px; }
.cm-imp-error { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: #fdecec; color: #b42318; font-size: 13px; }
.cm-imp-table td.cm-cell { padding: 8px; }

/* Home: tenders */
.home-tile-link { text-align: left; cursor: pointer; font: inherit; }
.home-tile-link:hover { border-color: var(--accent, #0b6bcb); }
.home-tenders { margin-bottom: 16px; }
.home-tenders-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 6px; }
.home-tenders-head h3 { margin: 0; display: flex; align-items: center; gap: 6px; }
.home-tenders-btns { margin-left: auto; display: flex; gap: 6px; }
.home-tenders-table { width: 100%; }
.home-tenders-table tbody tr { cursor: pointer; }
.home-tenders-table tbody tr:hover td { background: var(--surface-2, #f7f8fa); }
@media (max-width: 700px) { .home-tenders-table th:nth-child(3), .home-tenders-table td:nth-child(3), .home-tenders-table th:nth-child(7), .home-tenders-table td:nth-child(7) { display: none; } }
/* Tender editor — same card as Settings › Contacts (cm-ed-*) */
#enquiry-form { display: flex; flex-direction: column; height: 100%; margin: 0; }
.enq-step-n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--border); color: var(--ink); font-size: 11.5px; font-weight: 700; margin-right: 8px; flex: none; }
.cm-ed-nav.enq-steps button { display: flex; align-items: center; }
.cm-ed-nav.enq-steps button.on .enq-step-n { background: var(--accent); color: #fff; }
.enq-step-ok { margin-left: auto; color: #0f6e4f; font-weight: 700; }
.enq-ed-main h3 { display: flex; align-items: center; }
.enq-ed-main select { font-weight: 400; }
.enq-doc-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.enq-doc-add input[type=text] { max-width: 220px; }
.cm-ed-main label.enq-file-btn { flex-direction: row; align-items: center; cursor: pointer; color: inherit; font-weight: 600; }
.enq-missing { border-color: #c81e1e !important; box-shadow: 0 0 0 3px rgba(200, 30, 30, .15); }

/* ---------------------------------------------------------------------- */
/* Card windows — every pop-up in the contact-editor layout (cards.js)     */
dialog.card-dialog { width: min(760px, calc(100vw - 32px)); max-width: none; max-height: min(880px, calc(100vh - 32px)); padding: 0; overflow: hidden; }
dialog.card-dialog.card-wide, dialog.card-dialog.card-has-nav { width: min(1040px, calc(100vw - 32px)); }
dialog.card-dialog.card-has-nav { height: min(860px, calc(100vh - 32px)); }
dialog.card-dialog[open] { display: flex; flex-direction: column; }
.cd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 24px 14px; border-bottom: 1px solid var(--border); flex: none; }
.cd-head h2 { margin: 2px 0 0; font-size: 20px; padding: 0; }
.cd-head .close-x { position: static; float: none; margin: 0; }
.cd-body { flex: 1; min-height: 0; display: flex; }
.cd-body .cd-nav { flex: none; width: 210px; overflow-y: auto; }
.cd-body .cd-nav[hidden] { display: none; }
.cd-body .cd-nav button { display: flex; align-items: center; }
.cd-body .cd-nav button.on .enq-step-n { background: var(--accent); color: #fff; }
.cd-main { flex: 1; min-width: 0; overflow-y: auto; padding: 8px 28px 28px; scroll-padding-top: 12px; }
dialog.card-dialog .cd-main form, dialog.card-dialog .cd-main > div { padding: 0; }
dialog.card-dialog .cd-main form + form, dialog.card-dialog .cd-main form ~ form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
dialog.card-dialog .cd-main form h2 { font-size: 16px; margin: 6px 0 4px; }
dialog.card-dialog .cd-main label { font-size: 13px; font-weight: 600; color: var(--ink); margin: 14px 0 5px; }
dialog.card-dialog .cd-main label input, dialog.card-dialog .cd-main label select, dialog.card-dialog .cd-main label textarea { font-weight: 400; margin-top: 5px; }
dialog.card-dialog .cd-main fieldset { border: 0; border-top: 1px solid var(--border); border-radius: 0; margin: 18px 0 0; padding: 14px 0 0; }
dialog.card-dialog .cd-main legend { font-size: 15px; font-weight: 700; color: var(--ink); padding: 0 8px 0 0; }
dialog.card-dialog .cd-main h3 { font-size: 15px; margin: 18px 0 8px; }
.cd-foot { flex: none; display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 12px 24px; border-top: 1px solid var(--border); background: var(--surface); }
.cd-foot[hidden] { display: none; }
.cd-foot > .modal-actions { margin: 0; padding: 0; border: 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.cd-foot > .modal-actions.modal-actions-split { justify-content: space-between; }
.cd-foot > .modal-actions > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cd-foot .ccm-btn.primary, .cd-foot a.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.cd-foot .ccm-btn.cm-danger-text { color: #b42318; }
@media (max-width: 760px) {
  .cd-body .cd-nav { display: none; }
  .cd-main { padding: 8px 16px 24px; }
  dialog.card-dialog, dialog.card-dialog.card-wide, dialog.card-dialog.card-has-nav { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
}
dialog.card-dialog > .cd-body { padding: 0; }
.cd-foot > .modal-actions.modal-actions-split > :last-child { margin-left: auto; }
.cd-head .close-x:focus:not(:focus-visible) { outline: none; }
.cd-head .close-x:focus { box-shadow: none; }

/* Xero — progress claim invoices (Clients › Progress payments) */
.chip-xero { background: #e6f4fb; color: #0b6e99; }
.stage-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.stage-actions .chip { border: 0; cursor: pointer; font: inherit; font-size: 12px; }
.xero-actions { margin-top: 10px; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
.xero-actions select { width: auto; }
.xero-msg { font-weight: 600; }
.xero-status { margin-bottom: 10px; }
#xero-redirect-uri { user-select: all; word-break: break-all; }
/* Correspondence — contacts-style register + step-by-step card (app.js
   renderMail / renderCorrEditor), built on the .cm-* / .enq-* styles. */
.corr-grid { min-width: 1100px; }
.corr-grid tr.corr-row.is-closed td { color: var(--muted); }
.corr-grid tr.corr-row.is-closed .cm-name-text strong { color: var(--muted); font-weight: 600; }
.corr-subject-cell .cm-name-text strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 440px; }
.corr-preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 440px; }
.corr-grid td.is-overdue { color: var(--red); font-weight: 600; }
.corr-b-overdue { background: #fdecec; color: #b42318; }
#corr-form { display: flex; flex-direction: column; height: 100%; margin: 0; }
.corr-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-ed-main label.corr-choice { padding: 8px 14px; font-size: 13px; }
.cm-ed-main label.corr-choice .mono { font-size: 11.5px; color: var(--muted); }
.cm-ed-main label.corr-choice.on .mono { color: inherit; }
.cm-ed-main label.corr-choice.is-off { display: none; }
.cm-ed-main label .mail-cc { display: flex; gap: 6px; }
.cm-ed-main label .mail-cc select { flex: 1; min-width: 0; font-weight: 400; }
.corr-quick-row { align-items: center; gap: 6px; }
.corr-quick { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
.corr-ai-row { display: flex; align-items: center; gap: 10px; }
.corr-doc-list { max-height: 260px; }
.corr-sent { margin: 0; }
.corr-replies h4 { margin: 8px 0 4px; }
/* Variations — contacts-style register + step-by-step card */
#variation-edit-form { display: flex; flex-direction: column; height: 100%; margin: 0; }
.vo-ed-main section.vo-sec-wide { max-width: 900px; }
.vo-ed-main .vo-totals { margin-left: auto; width: 100%; }
.vo-ed-main .vo-totals label, .vo-ed-main .vo-margin { flex-direction: row; }
.vo-ed-main .vo-line-btns { margin: 0; }
.vo-head-total { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; font-size: 18px; }
.vo-register { display: flex; flex-direction: column; gap: 14px; }
.vo-grid-table { min-width: 1000px; }
.vo-ed-main label.ccm-btn { flex-direction: row; align-items: center; font-weight: 500; font-size: 13px; cursor: pointer; }
.vo-grid-table td.num { text-align: right; white-space: nowrap; }
.vo-grid-table td.vo-neg { color: #c81e1e; }
.vo-grid-table tfoot td { background: #f5f7fa; border-top: 2px solid var(--border); }
.vo-row-btns { display: flex; gap: 6px; justify-content: flex-end; }
.vo-tab-sum { font-size: 11.5px; color: var(--muted); font-weight: 500; }
#vo-margin-dest { display: block; margin-top: 2px; text-align: right; font-size: 11.5px; }

/* Settings › Backup */
.backup-card { margin-bottom: 16px; }
.backup-card h3 { margin: 0 0 6px; }
.backup-btn { display: inline-block; padding: 9px 16px; border-radius: var(--radius-sm); background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; margin-top: 6px; }
.backup-btn:hover { background: var(--accent-hover); }
.backup-row { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-top: 10px; }
.backup-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.backup-check input { width: auto; margin: 0; }
.backup-keep { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.backup-keep input { width: 70px; margin: 0; padding: 5px 8px; }
.backup-last { margin: 14px 0 0; font-size: 13px; }

/* Laptop widths: tighten the menu bar so it stays on one row (see
   .app-topbar .sidebar-brand-name above). Kept last so it wins. */
@media (max-width: 1400px) and (min-width: 761px) {
  .app-topbar { padding: 0 14px; column-gap: 12px; }
  .topbar-left { gap: 10px; }
  .app-topbar .sidebar-brand-name { max-width: 120px; }
  .project-switcher select#topbar-project-select { width: 170px; }
  .nav-link { font-size: 13.5px; padding: 0 8px; }
}
@media (max-width: 760px) {
  /* Phones: leave the project switcher most of the row. */
  .app-topbar .sidebar-brand-name { max-width: 84px; font-size: 14px; }
}
/* Sending email (Settings) + correspondence replies */
.se-sub { margin: 16px 0 4px; font-size: 14px; }
.se-port { display: flex; gap: 6px; }
.se-port input { width: 90px; }
.se-check { flex-direction: row !important; align-items: center; gap: 8px; }
.se-check input { width: auto; }
.corr-reply-body { white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; margin: 4px 0; }
.corr-reply-files { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }

/* ====================================================================== */
/* iPad-style finish — softer forms, windows and buttons across the app.   */
/* Kept as one layer at the end so it wins over the older rules above:     */
/* grouped grey backgrounds with white rounded panels, filled (borderless)  */
/* inputs, iOS blue, rounded buttons, Settings-style side menus and a       */
/* blurred backdrop behind pop-up windows.                                  */
/* ====================================================================== */
:root {
  --bg: #f2f2f7;                       /* iOS grouped background */
  --accent: #007aff;                   /* iOS system blue */
  --accent-hover: #0062cc;
  --accent-soft: #e5f1ff;
  --border: rgba(60, 60, 67, 0.12);    /* iOS hairline */
  --border-strong: rgba(60, 60, 67, 0.2);
  --muted: #6e6e73;
  --faint: #a1a1a6;
  --red: #e5302a;
  --red-soft: #fff0ef;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --fill: #f2f3f7;                     /* filled input / button tint */
  --fill-hover: #e9eaf0;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.08);
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-feature-settings: "cv11", "ss01";
  letter-spacing: -0.005em;
}

/* Cards: no hard outline, a soft lift instead. */
.card { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm), 0 0 0 1px rgba(0, 0, 0, 0.03); }

/* Inputs: filled, borderless, 10px corners; white with a blue ring on focus. */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"])),
select, textarea {
  font-size: 15px; padding: 10px 13px; border: 1px solid transparent; border-radius: 10px;
  background-color: var(--fill); color: var(--ink);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"])):hover,
select:hover, textarea:hover { background-color: var(--fill-hover); }
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"])):focus,
select:focus, textarea:focus {
  background-color: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.14); outline: none;
}
input:disabled, select:disabled, textarea:disabled,
input[readonly]:where(:not([type="checkbox"]):not([type="radio"])) {
  background-color: #f7f7f9; color: #8e8e93; border-color: transparent; box-shadow: none; cursor: default;
}
input::placeholder, textarea::placeholder { color: #a1a1a6; }
/* Selects get an iOS-style chevron. */
select {
  -webkit-appearance: none; appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238e8e93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
select[multiple] { background-image: none; padding-right: 13px; }
input:where([type="checkbox"], [type="radio"]) { accent-color: var(--accent); }

/* Buttons: soft grey fill, rounded, semibold; blue for the main action. */
button, .file-btn, .ccm-btn, a.primary {
  border: 0; border-radius: 10px; font-weight: 600;
}
button, .file-btn, .ccm-btn { background: var(--fill); color: var(--ink); box-shadow: none; }
button:hover, .file-btn:hover, .ccm-btn:hover { background: var(--fill-hover); }
button:active { transform: scale(0.98); }
button.primary, .ccm-btn.primary, .cd-foot .ccm-btn.primary, .cd-foot a.primary {
  background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(0, 122, 255, 0.25);
}
button.primary:hover, .ccm-btn.primary:hover, .cd-foot .ccm-btn.primary:hover { background: var(--accent-hover); }
button:disabled, button[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.danger-btn, .ccm-btn.cm-danger-text, .cd-foot .ccm-btn.cm-danger-text { background: var(--red-soft); color: var(--red); border: 0; }
.danger-btn:hover, .ccm-btn.cm-danger-text:hover { background: #ffe1df; }
.small-btn { border-radius: 8px; }
.close-x {
  width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center;
  border-radius: 50%; background: var(--fill); color: #8e8e93; font-size: 17px;
}
.close-x:hover { background: var(--fill-hover); color: var(--ink); }
/* Segmented controls, like iOS. */
.view-toggle { background: rgba(118, 118, 128, 0.12); border-radius: 10px; padding: 2px; gap: 0; }
.view-toggle-btn { border-radius: 8px; background: transparent; color: var(--ink); font-weight: 500; }
.view-toggle-btn:hover { background: transparent; }
.view-toggle-btn.active { background: #fff; font-weight: 600; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04); }

/* Pop-up windows: frosted backdrop, big soft corners. */
dialog { border-radius: 22px; box-shadow: var(--shadow-lg); }
dialog::backdrop { background: rgba(0, 0, 0, 0.22); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }
dialog[open] { animation: ipad-sheet-in .28s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes ipad-sheet-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog[open] { animation: none; } }
dialog label { color: #3a3a3c; }

/* Card windows (cards.js) and the contact/tender editors: white bars top
   and bottom, a grey grouped body, each form on a white rounded panel,
   and an iPad Settings-style section menu on the left. */
.cd-head, .cm-ed-head {
  background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid var(--border);
  padding: 18px 22px 14px 24px; align-items: center;
}
.cd-head h2, .cm-ed-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.cd-foot { background: rgba(255, 255, 255, 0.92); border-top: 1px solid var(--border); padding: 12px 22px; }
.cd-main, .cm-ed-main { background: var(--bg); }
.cd-main { padding: 16px 24px 28px; }
dialog.card-dialog .cd-main > form:not([hidden]) {
  background: #fff; border-radius: 16px; padding: 4px 20px 20px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03);
}
dialog.card-dialog .cd-main form + form, dialog.card-dialog .cd-main form ~ form { margin-top: 16px; padding-top: 4px; border-top: 0; }
dialog.card-dialog .cd-main label { font-size: 13px; font-weight: 600; color: #3a3a3c; }
/* Section headings inside a form read like iOS group headers. */
dialog.card-dialog .cd-main fieldset { border-top: 0; margin-top: 22px; padding-top: 0; }
dialog.card-dialog .cd-main legend, dialog.card-dialog .cd-main h3 {
  font-size: 13px; font-weight: 600; color: #6e6e73; text-transform: uppercase; letter-spacing: 0.04em;
}
dialog.card-dialog .cd-main h3 { margin: 24px 0 8px; }
/* White inputs where they sit straight on the grey body. */
.cm-ed-main input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"])), .cm-ed-main select, .cm-ed-main textarea { background-color: #fff; }
.cm-ed-main input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"])):hover, .cm-ed-main select:hover, .cm-ed-main textarea:hover { background-color: #fff; border-color: var(--border-strong); }

.cm-ed-nav, .cd-body .cd-nav { background: #f7f7fa; border-right: 1px solid var(--border); padding: 12px 10px; gap: 2px; }
.cm-ed-nav button {
  border: 0; border-left: 0; border-radius: 10px; padding: 9px 12px; font-weight: 500; color: var(--ink); background: transparent;
}
.cm-ed-nav button:hover { background: rgba(118, 118, 128, 0.1); }
.cm-ed-nav button.on { background: var(--accent); color: #fff; font-weight: 600; border-left: 0; }
.cm-ed-nav button.on .enq-step-n, .cd-body .cd-nav button.on .enq-step-n { background: #fff; color: var(--accent); }
.enq-step-n { background: rgba(118, 118, 128, 0.16); color: #3a3a3c; }
.enq-step-ok { color: #34c759; }
.cm-ed-nav button.on .enq-step-ok { color: #fff; }

/* Notices: soft tinted panels, no hard edges. */
.locked-notice { background: #fff6e0; color: #9a5b00; border-radius: 12px; padding: 11px 14px; }

/* Settings > Projects: a New project button, then projects listed by number. */
.project-list-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.project-list-bar .contacts-search { flex: 1 1 280px; max-width: 420px; }
.project-list-count { color: var(--muted); font-size: 13px; margin-right: auto; }

/* Projects grid — spreadsheet-style, sharing the cost-code grid's navy
   heading bar. Headings are buttons that sort the column. */
.pj-grid-wrap { max-height: none; }
.ccm-grid.pj-grid { min-width: 900px; font-size: 13.5px; }
.pj-grid th { padding: 0; }
.pj-grid th.pj-actions-h { padding: 10px 12px; text-align: right; }
.pj-sort {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 11px 10px; white-space: nowrap; border: 0; border-radius: 0;
  background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; box-shadow: none;
}
.pj-sort:hover { background: rgba(255, 255, 255, 0.1); }
.pj-sort:active { transform: none; }
.pj-sort:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.pj-sort-arrow { font-size: 9px; opacity: 0.45; }
.pj-sort.is-on { background: rgba(255, 255, 255, 0.08); }
.pj-sort.is-on .pj-sort-arrow { opacity: 1; }
.pj-grid td { padding: 10px; vertical-align: middle; }
.pj-grid .project-row-actions { gap: 4px; }
.pj-grid .pj-icon-btn { width: 32px; height: 30px; padding: 0; display: inline-grid; place-items: center; font-size: 14px; }
.pj-grid tbody tr.sub-row { cursor: pointer; }
.pj-grid tbody tr.sub-row:nth-child(even) td { background: #fafbfc; }
.pj-grid tbody tr.sub-row:hover td { background: #eef5ff; }
.pj-grid tbody tr.sub-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pj-grid td.pj-number { white-space: nowrap; width: 1%; }
.pj-grid td.pj-name { min-width: 130px; }
.pj-grid td.pj-stage { white-space: nowrap; }
.pj-grid td.pj-type .project-type-badge { white-space: normal; display: inline-block; line-height: 1.35; border-radius: 8px; }
.pj-grid td.pj-type { min-width: 130px; }
.pj-grid td.pj-client, .pj-grid td.pj-team, .pj-grid td.pj-company { color: #3a3a3c; }
.pj-grid td.pj-actions { white-space: nowrap; width: 1%; text-align: right; }
.pj-grid .project-row-actions { float: none; display: inline-flex; margin: 0; }
.pj-grid .project-number { margin-right: 0; }
.pj-grid td.pj-empty { padding: 28px 12px; text-align: center; color: var(--muted); cursor: default; }
.project-number {
  display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 7px;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.project-number.is-missing { background: var(--fill, #f2f3f7); color: var(--faint); font-weight: 500; }
/* Shown when a new project has just been created and the window reopens on it. */
.created-notice { background: #e8f8ee; color: #1b7a3d; border-radius: 12px; padding: 11px 14px; font-size: 13.5px; font-weight: 600; margin: 0 0 4px; }
.created-notice[hidden] { display: none; }

/* Settings > Plugins — one card per connected service. */
.plugin-card .plugin-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.plugin-card .plugin-head h2 { margin: 0 0 2px; }
.plugin-card .plugin-head .subtitle { margin: 0; }
.plugin-icon {
  flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-soft); font-size: 22px; line-height: 1;
}
.plugin-icon-xero { background: #13b5ea; color: #fff; font-weight: 800; font-size: 22px; font-family: Arial, sans-serif; }
.plugin-state { margin-left: auto; flex: none; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.plugin-state:empty { display: none; }
.plugin-state.is-on { background: #e8f8ee; color: #1b7a3d; }
.plugin-state.is-off { background: var(--fill, #f2f3f7); color: var(--muted); }

/* Settings > Users — Logins and People grids (same look as Projects). */
.ccm-grid.user-grid, .ccm-grid.people-grid { min-width: 720px; }
.pj-grid td .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.pj-grid td .hint-text { font-size: 12px; color: var(--muted); }
.pj-grid tr.people-alloc td { background: var(--accent-soft); cursor: default; }
.chip.user-role-admin { background: var(--accent-soft); color: var(--accent); }

/* Settings > Contacts grouped by trade: a heading bar per trade. */
.cm-grid tr.cm-group td { padding: 0; background: #eef3f9; border-top: 1px solid var(--border); }
.cm-grid tr.cm-group.is-none td { background: #fff6e0; }
.cm-group-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 700; text-align: left; cursor: pointer; box-shadow: none;
  position: sticky; left: 0;
}
.cm-group-btn:hover { background: rgba(0, 122, 255, 0.06); }
.cm-group-btn:active { transform: none; }
.cm-grid tr.cm-group.is-sub .cm-group-btn { padding-left: 34px; font-weight: 600; }
.cm-group-caret { width: 12px; color: var(--muted); }
.cm-group-n { font-weight: 500; font-size: 12px; color: var(--muted); }

/* Contacts: duplicate warnings and the Possible duplicates tab. */
.cm-quick-dup { grid-column: 1 / -1; width: 100%; }
.cm-quick-dup:empty { display: none; }
.cm-dup-hint { display: inline-block; font-size: 13px; color: #9a5b00; background: #fff6e0; border-radius: 8px; padding: 6px 10px; }
.cm-dup-hint .cm-inline-link { font-weight: 700; }
.cm-dup-banner { margin: 0 0 12px; padding: 11px 14px; border-radius: 12px; background: #fff6e0; color: #7a4a00; font-size: 13.5px; }
.cm-ed-open-dup { margin-left: 6px; }
.cm-portal-error { color: var(--red); font-size: 13px; }