/* Algobuilt - Armour Engineering colors: black, white, gray, orange.
   Black lives in the side rail. Orange marks the job pipeline and every primary action. */
:root {
  --black: #000000;
  --ink: #1c1c1c;
  --gray-700: #3d3d3d;
  --gray-500: #6a6a6a;
  --gray-300: #cfcfcf;
  --gray-200: #dedede;
  --gray-100: #ececec;
  --gray-50: #f4f4f4;
  --white: #ffffff;
  --orange: #f26a1b;
  --orange-deep: #c04e0c;
  --orange-wash: #fff1e8;
  --danger: #b3261e;
  --font-head: Bahnschrift, "DIN Alternate", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--gray-50); color: var(--ink); font: 15px/1.45 var(--font-body); }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; margin: 0; letter-spacing: .01em; }
h1 { font-size: 30px; line-height: 1.1; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p { margin: 0 0 10px; }
a { color: var(--orange-deep); }
.num { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.strong { font-weight: 600; }
.muted { color: var(--gray-500); }
.small { font-size: 13px; }
.hidden { display: none !important; }
.spacer { flex: 1; }
.boot { padding: 40px; color: var(--gray-500); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* ----- buttons and inputs ----- */
.btn { font: 600 14px var(--font-body); padding: 9px 16px; border: 1px solid transparent; border-radius: 3px; cursor: pointer;
  text-decoration: none; display: inline-block; line-height: 1.2; transition: background-color .12s, border-color .12s; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--orange); color: var(--black); border-color: var(--orange); }
.btn-primary:hover:not(:disabled) { background: #ff7e33; }
.btn-quiet { background: var(--white); color: var(--ink); border-color: var(--gray-300); }
.btn-quiet:hover { border-color: var(--ink); }
.btn-danger { background: var(--white); color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #fdecea; }
.wide { width: 100%; padding: 12px; font-size: 15px; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--orange-deep); cursor: pointer; text-align: left; }
.link-btn:hover { text-decoration: underline; }
.link-btn.block { display: block; width: 100%; color: var(--ink); text-decoration: none; }
.icon-btn { background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; padding: 2px 8px; color: var(--gray-700); }
.input { width: 100%; padding: 9px 10px; border: 1px solid var(--gray-300); border-radius: 3px; background: var(--white);
  font: 15px var(--font-body); color: var(--ink); }
.input:disabled { background: var(--gray-50); color: var(--gray-700); }
textarea.input { resize: vertical; }
.input:focus { border-color: var(--orange); }
.file { font: 14px var(--font-body); }
.field { display: block; margin-bottom: 14px; }
.field-label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 4px; }
.hint { display: block; font-size: 12.5px; color: var(--gray-500); margin-top: 4px; }
.check { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.error-text { color: var(--danger); margin: 6px 0; min-height: 1em; }
.error-box { background: #fdecea; border-left: 4px solid var(--danger); padding: 14px 16px; margin: 24px; }
.notice { background: var(--gray-100); border-left: 4px solid var(--gray-700); padding: 10px 12px; font-size: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* ----- sign in ----- */
.auth { min-height: 100vh; background: var(--black); display: grid; place-items: center; padding: 20px; }
.auth-card { background: var(--white); width: 100%; max-width: 420px; padding: 32px; border-top: 6px solid var(--orange); }
.auth-card h1 { margin: 18px 0 14px; font-size: 26px; }
.auth-brand .brand-small { color: var(--gray-500); }
.auth-brand .brand-big { color: var(--black); }

/* ----- shell ----- */
.shell { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--black); color: var(--white); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { padding: 24px 22px 20px; border-bottom: 4px solid var(--orange); }
.brand-small { font-size: 12.5px; color: #b5b5b5; letter-spacing: .02em; }
.brand-big { font: 700 30px/1.05 var(--font-head); letter-spacing: .03em; }
.nav { padding: 14px 0; flex: 1; overflow-y: auto; }
.nav-link { display: block; padding: 11px 22px; color: #e8e8e8; text-decoration: none; border-left: 4px solid transparent; font-weight: 500; }
.nav-link:hover { background: #1a1a1a; }
.nav-link.active { border-left-color: var(--orange); background: #1f1f1f; color: var(--white); font-weight: 700; }
.side-foot { padding: 16px 22px 22px; border-top: 1px solid #2c2c2c; font-size: 13.5px; }
.who { display: flex; flex-direction: column; margin-bottom: 8px; }
.who span { color: #b5b5b5; text-transform: capitalize; }
.side-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.side .link-btn { color: #ffb88f; }
.main { padding: 26px 30px 60px; min-width: 0; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.page-actions { display: flex; gap: 8px; }
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .search { max-width: 420px; flex: 1 1 260px; }
.toolbar select.input { width: auto; min-width: 170px; }
.toolbar p { margin: 0; }

/* ----- dashboard ----- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.tile { background: var(--white); border: 1px solid var(--gray-200); border-top: 4px solid var(--orange); padding: 14px 16px 12px; }
.tile-num { font: 700 32px/1.1 var(--font-head); }
.tile-label { color: var(--gray-500); font-size: 14px; margin-top: 4px; }
.tile-sub { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--danger); }
.two-col { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; align-items: start; }
.card { background: var(--white); border: 1px solid var(--gray-200); }
.pad { padding: 18px 20px; }
.stack > * + * { margin-top: 12px; }
.card.stack { margin-bottom: 18px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bars { margin-top: 12px; }
.bar-row { display: grid; grid-template-columns: 112px 1fr 44px 104px; gap: 10px; align-items: center; padding: 6px 0;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gray-100); }
.bar-row:hover .bar-label { text-decoration: underline; }
.bar { background: var(--gray-100); height: 12px; display: block; }
.bar-fill { background: var(--orange); height: 100%; display: block; min-width: 0; }
.bar-count, .bar-val { text-align: right; }
.bar-val { color: var(--gray-500); font-size: 13px; }
.activity { list-style: none; margin: 10px 0 0; padding: 0; }
.activity li { border-bottom: 1px solid var(--gray-100); }
.activity .link-btn { padding: 9px 0; }
.act-job { display: block; font-weight: 600; }
.act-text { display: block; color: var(--gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-meta { display: block; font-size: 12.5px; color: var(--gray-500); }

/* ----- pipeline ----- */
.board { display: flex; overflow-x: auto; padding-bottom: 14px; align-items: flex-start; }
.col { flex: 0 0 276px; padding-right: 16px; min-height: 160px; }
.col-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 4px solid var(--orange);
  margin-right: -16px; padding: 0 0 8px; }
.col-name { font: 700 17px var(--font-head); }
.col-count { background: var(--black); color: var(--white); font-size: 13px; font-weight: 600; padding: 1px 9px; border-radius: 10px; margin-right: 16px; }
.col-total { color: var(--gray-500); font-size: 13.5px; padding: 6px 0 10px; }
.cards { display: flex; flex-direction: column; gap: 8px; min-height: 90px; padding: 2px; }
.col.over .cards { outline: 2px dashed var(--orange); outline-offset: -2px; background: var(--orange-wash); }
.col-empty { color: var(--gray-500); font-size: 13.5px; padding: 8px 2px; }
.jcard { background: var(--white); border: 1px solid var(--gray-200); border-left: 4px solid var(--ink); padding: 10px 12px; cursor: grab; display: block; }
.jcard:hover { border-color: var(--gray-300); border-left-color: var(--orange); }
.jcard:active { cursor: grabbing; }
.jc-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; }
.jc-sub { display: block; color: var(--gray-500); font-size: 13.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-weight: 600; }
.jc-who { background: var(--gray-100); color: var(--ink); font-size: 11.5px; font-weight: 700; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }

/* ----- tables ----- */
.table-wrap { background: var(--white); border: 1px solid var(--gray-200); overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th { text-align: left; font-size: 13px; font-weight: 700; color: var(--gray-700); background: var(--gray-50);
  border-bottom: 2px solid var(--ink); padding: 0; white-space: nowrap; }
.table th:not(:has(.th-btn)) { padding: 10px 12px; }
.table th.right .th-btn { text-align: right; }
.th-btn { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 10px 12px; width: 100%; text-align: left; }
.th-btn:hover { color: var(--orange-deep); }
th[aria-sort="ascending"] .th-btn::after { content: " \25B2"; font-size: 10px; color: var(--orange-deep); }
th[aria-sort="descending"] .th-btn::after { content: " \25BC"; font-size: 10px; color: var(--orange-deep); }
.table th.right, .table td.right { text-align: right; }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.row-click { cursor: pointer; }
.row-click:hover td { background: var(--orange-wash); }
.empty { text-align: center; color: var(--gray-500); padding: 30px 12px !important; }

/* ----- stage badges ----- */
.badge { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 3px; white-space: nowrap; border: 1px solid transparent; }
.s-lead { background: var(--gray-100); color: var(--ink); }
.s-prospect { background: var(--gray-200); color: var(--ink); }
.s-inspection { background: var(--white); border-color: var(--orange); color: var(--ink); }
.s-estimate-sent { background: var(--orange-wash); border-color: var(--orange); color: var(--ink); }
.s-approved { background: var(--orange); color: var(--black); }
.s-in-production { background: var(--black); color: var(--white); }
.s-completed { background: var(--gray-700); color: var(--white); }
.s-invoiced { background: var(--white); border-color: var(--ink); color: var(--ink); }
.s-closed { background: var(--gray-50); border-color: var(--gray-300); color: var(--gray-500); }
.s-cancelled { background: var(--gray-50); border-color: var(--gray-300); color: var(--gray-500); text-decoration: line-through; }
.s-other { background: var(--white); border: 1px dashed var(--gray-500); color: var(--ink); }

/* ----- slide-over panel and modal ----- */
.backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 50; display: flex; }
.backdrop.panel { justify-content: flex-end; }
.backdrop.modal { justify-content: center; align-items: center; padding: 16px; }
.layer-box { background: var(--white); display: flex; flex-direction: column; }
.panel .layer-box { width: min(580px, 100%); height: 100%; border-left: 6px solid var(--orange); animation: slide-in .16s ease-out; }
.modal.wide .layer-box { width: min(920px, 100%); }
.modal .layer-box { width: min(560px, 100%); max-height: calc(100vh - 32px); border-top: 6px solid var(--orange); }
@keyframes slide-in { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.layer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 16px 18px 12px 22px; border-bottom: 1px solid var(--gray-200); }
.layer-head h2 { font-size: 22px; line-height: 1.15; }
.layer-eyebrow { font-size: 13px; color: var(--gray-500); margin-bottom: 2px; }
.layer-eyebrow:empty { display: none; }
.layer-body { padding: 18px 22px; overflow-y: auto; flex: 1; }
.layer-foot { display: flex; gap: 8px; align-items: center; padding: 12px 22px; border-top: 1px solid var(--gray-200); background: var(--gray-50); }
.stage-line { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sect { padding: 4px 0 16px; margin-bottom: 8px; border-bottom: 1px solid var(--gray-100); }
.sect:last-child { border-bottom: 0; }
.sect h3 { margin-bottom: 10px; }
.row-end { display: flex; justify-content: flex-end; margin: 8px 0; }
.customers { display: grid; gap: 10px; }
.customer { border: 1px solid var(--gray-200); padding: 10px 12px; display: grid; gap: 2px; }
.tag { margin-left: 8px; font-size: 12px; font-weight: 700; background: var(--orange-wash); border: 1px solid var(--orange); padding: 0 6px; border-radius: 3px; }
.change-customer { margin-top: 10px; display: flex; gap: 8px; }
.log { list-style: none; margin: 12px 0 0; padding: 0; }
.log li { border-left: 3px solid var(--gray-300); padding: 4px 0 4px 12px; margin-bottom: 10px; overflow-wrap: anywhere; }
.log li.system { border-left-color: var(--orange); color: var(--gray-700); }
.job-list { list-style: none; margin: 0; padding: 0; }
.job-list li { border-bottom: 1px solid var(--gray-100); }
.job-list .link-btn { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 9px 0; align-items: center; }

/* ----- original records viewer ----- */
.source { margin-top: 10px; border: 1px solid var(--gray-200); }
.source > summary { cursor: pointer; padding: 10px 12px; font-weight: 600; background: var(--gray-50); }
.source-holder { padding: 8px 12px 12px; max-height: 420px; overflow: auto; }
.source-file { margin-top: 10px; }
.source-name { font-weight: 700; color: var(--orange-deep); }
.jt { margin-left: 14px; font-size: 13.5px; }
.jt > summary { cursor: pointer; padding: 2px 0; }
.jt-key { font-weight: 600; }
.jt-meta { color: var(--gray-500); }
.jt-leaf { margin-left: 14px; font-size: 13.5px; overflow-wrap: anywhere; }
.jt-val { color: var(--gray-700); }

/* ----- team, import ----- */
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.role-card { background: var(--white); border: 1px solid var(--gray-200); border-left: 4px solid var(--orange); padding: 12px 14px; }
.role-card p { margin: 6px 0 0; font-size: 14px; color: var(--gray-700); }
.plain { margin: 6px 0 10px; padding-left: 20px; }
.import-result { margin-top: 6px; }

/* ----- toasts ----- */
#toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 100; display: grid; gap: 8px; width: min(520px, calc(100% - 24px)); }
.toast { background: var(--black); color: var(--white); padding: 12px 16px; border-left: 5px solid var(--orange); font-weight: 500; }
.toast.error { background: #3b0d0a; border-left-color: #ff6b5e; }

/* ----- small screens ----- */
@media (max-width: 900px) {
  .shell { display: block; }
  .side { position: static; height: auto; }
  .brand { padding: 14px 16px 12px; display: flex; align-items: baseline; gap: 10px; }
  .nav { display: flex; overflow-x: auto; padding: 0; }
  .nav-link { border-left: 0; border-bottom: 4px solid transparent; white-space: nowrap; padding: 12px 16px; }
  .nav-link.active { border-bottom-color: var(--orange); }
  .side-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; }
  .who { margin: 0; }
  .side-actions { flex-direction: row; gap: 14px; }
  .main { padding: 18px 14px 50px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid3 { grid-template-columns: 1fr; }
  .two-col, .roles { grid-template-columns: 1fr; }
  .grid2 { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 96px 1fr 36px 84px; }
  .col { flex-basis: 250px; }
}
@media (prefers-reduced-motion: reduce) {
  .panel .layer-box { animation: none; }
  .btn { transition: none; }
}

/* ----- tabs, status pills ----- */
.tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--ink); margin: -4px 0 16px; overflow-x: auto; }
.tab { background: none; border: 0; font: 600 14px var(--font-body); padding: 9px 14px; cursor: pointer; color: var(--gray-700); border-bottom: 4px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--orange); }
.pill { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 3px; border: 1px solid transparent; white-space: nowrap; }
.p-draft { background: var(--white); border: 1px dashed var(--gray-500); color: var(--ink); }
.p-sent, .p-unpaid { background: var(--orange-wash); border-color: var(--orange); color: var(--ink); }
.p-partial { background: var(--white); border-color: var(--orange); color: var(--ink); }
.p-approved, .p-paid { background: var(--black); color: var(--white); }
.p-overdue { background: var(--danger); color: var(--white); }
.p-declined, .p-void { background: var(--gray-50); border-color: var(--gray-300); color: var(--gray-500); text-decoration: line-through; }

/* ----- money ----- */
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 0 14px; }
.sect-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.sect-head h3 { margin: 0; }
.fin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.fin-tile { border: 1px solid var(--gray-200); border-top: 3px solid var(--orange); padding: 8px 10px; background: var(--white); }
.fin-tile .strong { font-size: 18px; }
.items .table-wrap { margin-bottom: 8px; }
.items-table th, .items-table td { padding: 6px 6px; }
.items-table .input { padding: 6px 8px; }
.items-table td:nth-child(1) { min-width: 240px; }
.items-table td:nth-child(2) { width: 84px; }
.items-table td:nth-child(3) { width: 84px; }
.items-table td:nth-child(4) { width: 118px; }
.items-table td:nth-child(5) { width: 110px; }
.items-table td:nth-child(6) { width: 40px; }
.totals { margin: 12px 0 18px auto; width: 300px; max-width: 100%; }
.totals > div { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; gap: 10px; }
.totals .tax { width: 90px; display: inline-block; padding: 5px 8px; }
.totals .grand { border-top: 2px solid var(--ink); margin-top: 4px; padding-top: 8px; font: 700 18px var(--font-head); }
.check.inline { margin: 0 6px 0 0; font-size: 13.5px; }
.gap-top { margin-top: 26px; margin-bottom: 10px; }

/* ----- files ----- */
.dropzone { border: 2px dashed var(--gray-300); padding: 18px; text-align: center; background: var(--gray-50); display: grid; gap: 6px; justify-items: center; }
.dropzone.over { border-color: var(--orange); background: var(--orange-wash); }
.files-h { margin: 18px 0 8px; }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.ph { padding: 0; border: 1px solid var(--gray-200); background: var(--gray-100); aspect-ratio: 1; position: relative; cursor: pointer; overflow: hidden; display: block; }
.ph:hover { border-color: var(--orange); }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-cap { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .72); color: #fff; font-size: 12px; padding: 4px 6px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-fallback { display: grid; place-items: center; height: 100%; padding: 8px; font-size: 12px; overflow-wrap: anywhere; color: var(--gray-700); }
.doc-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--gray-100); align-items: center; }
.doc-row .small { grid-column: 1; }
.doc-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 12px; }
.lightbox-img { max-width: 100%; max-height: 60vh; display: block; margin: 0 auto 14px; }

/* =====================================================================
   v4: milestones, top bar, drawer layout, tasks, schedule, reports
   ===================================================================== */
.icon { flex: none; }
.content { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.nav-link { display: flex; align-items: center; gap: 12px; }
.nav-link .icon { opacity: .85; }
.nav-sep { height: 1px; background: #2c2c2c; margin: 10px 22px; }
.side-foot { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* top bar, search, new menu */
.topbar { position: sticky; top: 0; z-index: 30; background: var(--white); border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; gap: 16px; padding: 10px 30px; }
.gs { position: relative; flex: 1; max-width: 640px; display: flex; align-items: center; gap: 8px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 6px; padding: 0 10px; color: var(--gray-500); }
.gs:focus-within { border-color: var(--orange); background: var(--white); }
.gs-input { flex: 1; border: 0; background: transparent; padding: 10px 2px; font: 15px var(--font-body); color: var(--ink); outline: none; min-width: 0; }
.gs kbd { font: 12px var(--font-body); border: 1px solid var(--gray-300); border-radius: 3px; padding: 1px 6px; color: var(--gray-500); background: var(--white); }
.gs-drop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--white); border: 1px solid var(--gray-300); box-shadow: 0 10px 30px rgba(0, 0, 0, .14); max-height: 70vh; overflow-y: auto; z-index: 60; }
.gs-h { padding: 8px 12px 4px; font-size: 12px; font-weight: 700; color: var(--gray-500); }
.gs-item { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; width: 100%; text-align: left; background: none; border: 0; padding: 8px 12px; cursor: pointer; color: var(--ink); font: 14px var(--font-body); }
.gs-item .icon { grid-row: span 2; align-self: center; color: var(--gray-500); }
.gs-item.on, .gs-item:hover { background: var(--orange-wash); }
.gs-t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-s { font-size: 12.5px; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-none { padding: 14px 12px; color: var(--gray-500); }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.menu-wrap { position: relative; }
.new-btn { display: inline-flex; align-items: center; gap: 6px; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--white); border: 1px solid var(--gray-300); box-shadow: 0 10px 30px rgba(0, 0, 0, .14); min-width: 170px; z-index: 60; }
.menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 14px; font: 14px var(--font-body); cursor: pointer; }
.menu-item:hover { background: var(--orange-wash); }
.chip-user { display: flex; align-items: center; gap: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--black); color: var(--white); display: grid; place-items: center; font-weight: 700; font-size: 13px; border: 2px solid var(--orange); }
.who2 { display: flex; flex-direction: column; line-height: 1.2; font-size: 13px; }
.who2 span { color: var(--gray-500); }

/* dashboard */
.today-line { margin: 4px 0 0; }
.tile { position: relative; }
.tile-ico { position: absolute; top: 12px; right: 12px; color: var(--gray-300); }
.pad-top { padding-top: 8px; }
.sub-h { margin: 18px 0 6px; font-size: 15px; }
.late { color: var(--danger); }
.bar-fill.warn { background: var(--danger); }
.f-lead { background: #f5c400; } .f-prospect { background: #f69352; } .f-approved { background: #8cc63f; } .f-completed { background: #2f7d6d; }
.f-invoiced { background: #3d5a99; } .f-closed { background: #444; } .f-cancelled { background: #b9b9b9; }

/* AccuLynx-style milestones */
.ms-card { margin-bottom: 18px; }
.ms-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 20px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); }
.ms-head h2 { font-weight: 500; }
.ms-now { color: var(--gray-500); }
.ms-now strong { color: var(--ink); }
.ms-cancel { display: flex; gap: 10px; align-items: center; padding: 10px 20px 0; flex-wrap: wrap; }
.ms-track { display: flex; align-items: flex-start; justify-content: center; padding: 22px 14px 14px; overflow-x: auto; }
.ms-step { width: 96px; flex: none; text-align: center; }
.ms-dot { width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 6px; background: #cfcfcf; color: #fff; display: grid; place-items: center; font: 700 30px var(--font-head); }
.ms-step.reached .ms-dot { background: #444; }
.ms-step.r-lead .ms-dot { background: #f5c400; } .ms-step.r-prospect .ms-dot { background: #f69352; } .ms-step.r-approved .ms-dot { background: #8cc63f; }
.ms-step.r-completed .ms-dot { background: #2f7d6d; } .ms-step.r-invoiced .ms-dot { background: #3d5a99; } .ms-step.r-closed .ms-dot { background: #444; }
.ms-step.current .ms-dot { box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--orange); }
.ms-name { font-size: 15px; }
.ms-date { font-size: 13px; color: var(--gray-500); }
.ms-link { flex: 1 1 36px; min-width: 28px; max-width: 150px; margin-top: 32px; border-top: 3px solid #d6d6d6; position: relative; }
.ms-link.on { border-top-color: #9a9a9a; }
.ms-link span { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font-size: 13px; color: var(--gray-700); white-space: nowrap; }

/* job drawer */
.backdrop.drawer { justify-content: flex-end; }
.drawer .layer-box { width: min(1240px, 97vw); height: 100%; border-left: 6px solid var(--orange); animation: slide-in .16s ease-out; }
.drawer .layer-body { padding: 18px 24px; background: var(--gray-50); }
.job-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; align-items: start; }
.job-main { background: var(--white); border: 1px solid var(--gray-200); min-width: 0; }
.job-main .tabs { margin: 0; padding: 0 10px; background: var(--white); }
.tab-body { padding: 18px 20px 8px; }
.rail { display: grid; gap: 14px; }
.rail-card { padding: 14px 16px; }
.rail-card h3 { margin-bottom: 10px; font-size: 15px; }
.rl { display: flex; align-items: center; gap: 8px; margin-top: 4px; overflow-wrap: anywhere; }
.rl .icon { color: var(--gray-500); }
.customer { margin-bottom: 10px; }
.map-btn { margin-top: 10px; display: inline-block; }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.mini .strong { font-size: 17px; }
.nx { display: flex; gap: 8px; align-items: baseline; padding: 4px 0 4px 8px; border-left: 4px solid var(--k, var(--gray-300)); margin-bottom: 4px; font-size: 14px; }
.rail-links { display: flex; gap: 14px; margin-top: 8px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tag2 { background: var(--gray-100); border-radius: 3px; padding: 2px 8px; font-size: 12.5px; color: var(--gray-700); }

/* tasks */
.tasks { list-style: none; margin: 8px 0 0; padding: 0; }
.trow { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--gray-100); }
.trow.done .ttitle { text-decoration: line-through; color: var(--gray-500); }
.tbox { width: 22px; height: 22px; flex: none; border: 2px solid var(--gray-500); background: var(--white); border-radius: 4px; cursor: pointer; display: grid; place-items: center; padding: 0; color: var(--black); margin-top: 1px; }
.tbox.on { background: var(--orange); border-color: var(--orange); }
.tbox:hover { border-color: var(--orange); }
.tmain { flex: 1; min-width: 0; }
.ttitle { font-weight: 500; overflow-wrap: anywhere; }
.tmeta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--gray-500); margin-top: 2px; }
.due.late { color: var(--danger); font-weight: 700; }
.due.today { color: var(--orange-deep); font-weight: 700; }
.icon-btn.small { font-size: 20px; padding: 0 6px; color: var(--gray-500); }
.task-add { display: grid; grid-template-columns: minmax(160px, 1fr) 150px 160px auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.tgroup { margin-top: 18px; }
.tgroup h3 { font-size: 15px; margin-bottom: 2px; }
.done-box { margin-top: 18px; }
.done-box summary { cursor: pointer; font-weight: 600; }

/* segmented control */
.seg { display: inline-flex; border: 1px solid var(--gray-300); border-radius: 4px; overflow: hidden; background: var(--white); }
.seg-btn { background: none; border: 0; padding: 8px 14px; font: 600 13.5px var(--font-body); cursor: pointer; color: var(--gray-700); border-right: 1px solid var(--gray-300); }
.seg-btn:last-child { border-right: 0; }
.seg-btn.on { background: var(--black); color: var(--white); }

/* agenda lists and appointment colors */
.k-inspection { --k: #f26a1b; } .k-estimate { --k: #8a8a8a; } .k-install { --k: #000; } .k-delivery { --k: #555; } .k-meeting { --k: #f5c400; } .k-other { --k: #cfcfcf; }
.agenda { list-style: none; margin: 8px 0 0; padding: 0; }
.agenda li { border-bottom: 1px solid var(--gray-100); }
.ev { display: grid; grid-template-columns: 150px 1fr; column-gap: 12px; padding: 8px 0 8px 10px; border-left: 4px solid var(--k, transparent); }
.ev .muted { grid-column: 2; }
.ev-when { color: var(--gray-700); font-size: 13.5px; }
.ev-title { font-weight: 600; }
.agenda-day { margin-bottom: 12px; }
.agenda-day h3 { margin-bottom: 4px; }

/* calendar */
.cal-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.cal-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cal-title { margin-left: 8px; min-width: 170px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; color: var(--gray-700); }
.lg::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--k); margin-right: 6px; border: 1px solid rgba(0, 0, 0, .15); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--gray-200); border-left: 1px solid var(--gray-200); background: var(--white); }
.cal-dow { padding: 8px 10px; font-weight: 700; font-size: 13px; background: var(--gray-50); border-right: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.cal-cell { min-height: 118px; border-right: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); padding: 4px 5px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; cursor: pointer; }
.cal-cell:hover { background: #fffaf6; }
.cal-cell.other { background: var(--gray-50); color: var(--gray-500); }
.cal-cell.today { box-shadow: inset 0 0 0 2px var(--orange); }
.cal-num { font-size: 13px; font-weight: 700; color: var(--gray-700); }
.cal-cell.today .cal-num { color: var(--orange-deep); }
.chip { display: block; width: 100%; text-align: left; border: 0; border-left: 4px solid var(--k, #bbb); background: var(--gray-100); padding: 2px 6px; font: 12.5px var(--font-body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.chip:hover { background: var(--orange-wash); }
.chip-t { font-weight: 700; }
.chip.more { border-left-color: transparent; background: none; color: var(--orange-deep); font-weight: 700; }
.empty-box { text-align: center; color: var(--gray-500); }

/* reports charts */
.col-chart { display: flex; gap: 8px; align-items: flex-end; height: 190px; margin-top: 14px; }
.col-item { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; }
.col-track { flex: 1; display: flex; align-items: flex-end; border-bottom: 2px solid var(--ink); }
.col-bar { width: 100%; background: var(--orange); min-height: 2px; }
.col-lbl { text-align: center; font-size: 12.5px; color: var(--gray-500); padding-top: 4px; }

/* pipeline additions */
.jcard.cancelled { background: #fafafa; border-left-color: #b9b9b9; }
.jc-reason { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--danger); }
.jc-addr { font-size: 12.5px; }
.jc-right { display: flex; align-items: center; gap: 6px; }
.idle { font-size: 12px; font-weight: 700; background: var(--orange-wash); border: 1px solid var(--orange); padding: 0 6px; border-radius: 3px; color: var(--ink); }
.col-head { border-bottom-color: var(--orange); }

/* milestone badges (AccuLynx colors) */
.s-lead { background: #f5c400; color: #1c1c1c; } .s-prospect { background: #f69352; color: #1c1c1c; } .s-approved { background: #8cc63f; color: #1c1c1c; }
.s-completed { background: #2f7d6d; color: #fff; } .s-invoiced { background: #3d5a99; color: #fff; } .s-closed { background: #444; color: #fff; }
.s-cancelled { background: var(--white); border-color: var(--danger); color: var(--danger); text-decoration: none; }

@media (max-width: 1100px) { .job-grid { grid-template-columns: 1fr; } .task-add { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .topbar { padding: 8px 12px; gap: 8px; }
  .gs kbd, .who2 { display: none; }
  .content { min-height: 0; }
  .drawer .layer-box { width: 100%; }
  .cal-cell { min-height: 78px; }
  .ev { grid-template-columns: 1fr; }
  .ev .muted { grid-column: 1; }
}

/* v4 fixes */
.tile-num { font-size: 28px; padding-right: 26px; overflow-wrap: anywhere; }
.link-btn.block.ev { display: grid; }
.tag { white-space: nowrap; display: inline-block; margin-top: 2px; }
.customer > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.customer .tag { margin-left: 0; }
.ev-when .badge { vertical-align: middle; }

/* v4 fixes */
.tile { padding-right: 38px; }
.tile-num { font-size: clamp(22px, 2.1vw, 30px); overflow-wrap: anywhere; }
.tile-ico { top: 12px; right: 10px; }
.tag { white-space: nowrap; display: inline-block; margin-top: 2px; }
.link-btn.block.ev { display: grid; }
.link-btn.block.ev .badge { justify-self: start; }
.ev-title { overflow-wrap: anywhere; }
.nx { flex-wrap: wrap; }
.tile { padding-right: 34px; }
.tile-num { font-size: clamp(20px, 1.75vw, 27px); white-space: nowrap; overflow-wrap: normal; overflow: hidden; text-overflow: ellipsis; }
.tiles { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.tile-num { overflow: visible; text-overflow: clip; }


/* ---- job financials: summary strip, worksheet, payment tables ---- */
.fin-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 20px;
  border: 1px solid #bdbdbd; background: #fff; }
.fs-tile { padding: 12px 16px; border-top: 3px solid var(--orange); border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; min-width: 0; }
.fs-tile:nth-child(3n) { border-right: 0; }
.fs-tile:nth-child(n+4) { border-bottom: 0; }
.fs-lbl { font-size: 13px; color: #333; font-weight: 600; }
.fs-val { font-size: 22px; font-weight: 800; color: #111; line-height: 1.25; margin-top: 2px; white-space: nowrap; }
.fs-sub { font-size: 13px; color: #444; margin-top: 2px; }
.fs-tile.warn .fs-val { color: #9a3412; }
.fs-tile.neg .fs-val { color: #b91c1c; }
td.nowrap, .table td.nowrap { white-space: nowrap; }
.ws-section { margin-bottom: 22px; }
.ws-table td, .ws-table th { padding-top: 9px; padding-bottom: 9px; }
.ws-table tfoot td, .table tfoot td { border-top: 2px solid #111; border-bottom: 0; padding: 10px 12px; background: var(--gray-50, #f6f6f6); }
.ws-top td:first-child { font-weight: 600; color: #111; }
.ws-child td { color: #333; font-size: 14px; background: #fafafa; }
.muted-strong { color: #444; }
@media (max-width: 560px) {
  .fin-strip { grid-template-columns: repeat(2, 1fr); }
  .fs-tile, .fs-tile:nth-child(3n), .fs-tile:nth-child(n+4) { border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; }
  .fs-tile:nth-child(2n) { border-right: 0; }
  .fs-tile:nth-child(n+5) { border-bottom: 0; }
  .fs-val { font-size: 19px; }
}
.ws-table td.ws-indent-1, .table td.ws-indent-1 { padding-left: 36px; }
.ws-table td.ws-indent-2 { padding-left: 60px; }
.ws-table td.ws-indent-3 { padding-left: 84px; }
.ws-table td.ws-indent-4 { padding-left: 108px; }