/* Bullet Portal — Change Orders module (co.js). Everything is scoped to .co /
   co- / cor- classes so it cannot touch the rest of the portal. Brand Guide:
   navy text on white, off-white page, the gradient as an accent only. */
.co {
  --ground: #F7F7F7; --surface: #FFFFFF; --surface-2: #F3F5F7; --surface-3: #E7EBEF;
  --line: #E2E7EC; --line-strong: #C6D0DA; --ink: #062141; --ink-2: #2E4460; --muted: #5F7186;
  --accent: #0E92AA; --good: #158457; --warn: #92660A; --crit: #B03030;
  --good-soft: #DDF5E8; --warn-soft: #F5EBCB; --crit-soft: #F7DDDA; --accent-soft: #DCF3F7;
  --cyan: #13B3CF; --teal: #23C2B7; --green: #43E285; --focus: #23C2B7;
  --gradient: linear-gradient(90deg, #062141 0%, #13B3CF 35%, #23C2B7 65%, #43E285 100%);
  --shadow: 0 1px 2px rgba(6,33,65,.05), 0 10px 28px -18px rgba(6,33,65,.22);
  --shadow-hover: 0 2px 4px rgba(6,33,65,.06), 0 14px 34px -16px rgba(35,194,183,.35);
  color: var(--ink); font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
.co *, .co *::before, .co *::after { box-sizing: border-box; }
/* the module toggles the hidden attribute; component display rules must not override it */
.co [hidden] { display: none !important; }
.co-wrap { max-width: 1120px; margin: 0 auto; padding: 16px; }
.co h1, .co h2, .co h3 { color: var(--ink); }
:where(.co) button { font: inherit; cursor: pointer; }   /* :where keeps this below .co-btn etc. */
.co :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.co-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; box-shadow: var(--shadow); }
.co-muted { color: var(--muted); }
.co-small { font-size: .78rem; }
.co-num { text-align: right; font-variant-numeric: tabular-nums; }
.co-err { color: var(--crit); }
.co-empty { color: var(--muted); padding: 18px 4px; text-align: center; }
.co-link { background: none; border: 0; padding: 4px; color: var(--accent); font-weight: 600; font-size: .82rem; }
.co-link:hover { text-decoration: underline; }
.co-sub { color: var(--muted); font-size: .78rem; }

.co-btn, .co-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 9px 16px; border-radius: 9px;
  font-weight: 700; font-size: .86rem; text-decoration: none; transition: transform .08s ease, box-shadow .15s ease, background .15s ease; }
.co-btn { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.co-btn:hover { box-shadow: var(--shadow-hover); }
.co-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.co-ghost:hover { border-color: var(--teal); }
.co-btn:active, .co-ghost:active { transform: scale(.98); }
.co-btn[disabled], .co-ghost[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.co-ghost.co-small { min-height: 32px; padding: 5px 10px; font-size: .76rem; }
.co-busy { opacity: .75; }
.co-done { background: var(--good) !important; border-color: var(--good) !important; color: #fff !important; }
.co-fail { animation: co-shake .3s; }
@keyframes co-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .co-fail { animation: none; } }

.co-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 6px; padding: 2px 8px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.co-pill.good { background: var(--good-soft); color: var(--good); }
.co-pill.warn { background: var(--warn-soft); color: var(--warn); }
.co-pill.crit { background: var(--crit-soft); color: var(--crit); }
.co-pill.neut { background: var(--surface-3); color: var(--ink-2); }
.co-flags { display: flex; flex-direction: column; gap: 9px; }
.co-flag { display: flex; gap: 10px; align-items: baseline; font-size: .85rem; color: var(--ink-2); }
.co-flag .co-pill { flex: none; }

.co-grid.co-kpis, .co-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.co-kpi { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 12px; box-shadow: var(--shadow); }
.co-kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gradient); }
.co-kpi .k { font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.co-kpi .v { font-size: 1.5rem; font-weight: 700; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.co-kpi .s { font-size: .74rem; color: var(--muted); }
.co-kpi.warn .s { color: var(--warn); font-weight: 600; }

.co-tabs { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; flex-wrap: wrap; }
.co-tab { border: 0; background: transparent; color: var(--ink-2); padding: 6px 11px; border-radius: 7px; font-size: .82rem; display: inline-flex; gap: 6px; align-items: center; }
.co-tab[aria-selected="true"] { background: var(--surface-2); color: var(--ink); font-weight: 700; }

.co-tblwrap { overflow: auto; }
table.co-report { width: 100%; border-collapse: collapse; font-size: .84rem; }
table.co-report th { text-align: left; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
table.co-report td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
table.co-report th.co-num, table.co-report td.co-num { text-align: right; }

.co input[type="text"], .co input[type="email"], .co input[type="tel"], .co input[type="search"], .co input[type="number"], .co select, .co textarea,
.cor-drawer input[type="text"], .cor-drawer input[type="email"], .cor-drawer input[type="tel"], .cor-drawer input[type="search"], .cor-drawer input[type="number"], .cor-drawer select, .cor-drawer textarea {
  font: inherit; font-size: .9rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 9px 11px; width: 100%; }
.co input:focus, .co select:focus, .co textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--teal); }

/* drawer (appended to <body>, carries .co for the tokens) */
.co-drawer-base { position: fixed; top: 0; right: 0; height: 100vh; width: min(760px, 100%); background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: -18px 0 40px -20px rgba(6,33,65,.4); z-index: 1000; display: flex; flex-direction: column; }
.co-drawer-base::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient); }
.co-dhead { padding: 18px 20px 14px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; }
.co-dhead h2 { margin: 0 0 3px; font-size: 1.02rem; }
.co-close { margin-left: auto; flex: none; }
.co-dbody { overflow: auto; padding: 14px 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.co-scrim { position: fixed; inset: 0; background: rgba(6,33,65,.28); z-index: 999; }

.co-toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 1100; max-width: min(560px, calc(100vw - 24px));
  display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #fff; box-shadow: 0 14px 30px -12px rgba(6,33,65,.6); font-size: .86rem; }
.co-toast .co-link { color: #9fe9dd; }
.co-toast.crit { background: #7a1f1f; }
.co-toast-ico { font-weight: 800; }

.cor-signin { max-width: 560px; margin: 24px auto; display: flex; flex-direction: column; gap: 10px; }
.cor-signin h2 { margin: 0; font-size: 1.2rem; }
.cor-signin p { margin: 0; color: var(--ink-2); }
.cor-signin ol { margin: 6px 0; padding-left: 20px; color: var(--ink-2); }
.cor-signin > button { align-self: flex-start; min-height: 46px; }
@media (max-width: 720px) { .cor-signin > button { align-self: stretch; } }

/* Change Orders (web/changeorders.js). Everything under .cor / .cor-drawer, tokens only. */
.cor { display: flex; flex-direction: column; gap: 16px; }
.cor-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.cor-head h1 { margin: 0 0 4px; font-size: 1.35rem; }
.cor-head p { margin: 0; }
.cor-conn { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: 10px; background: var(--surface); }
.cor-conn .co-ghost { align-self: flex-start; }
.cor-toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.cor-search { min-width: 260px; flex: 0 1 320px; }
.cor-table td { vertical-align: top; }
.cor-row { cursor: pointer; }
.cor-row:hover td, .cor-row:focus-visible td { background: var(--surface-2); }
.cor-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.cor-num { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cor-proj { font-weight: 600; color: var(--ink); }
.cor-title { max-width: 320px; color: var(--ink-2); }
.cor .co-num, .cor-drawer .co-num { text-align: right; font-variant-numeric: tabular-nums; }

/* drawer */
.cor-drawer { width: min(760px, 100%); }
.cor-drawer .co-dbody { gap: 18px; }
.cor-sec { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.cor-sec:last-child { border-bottom: 0; }
.cor-sec h3 { margin: 0; font-size: .9rem; color: var(--ink); }
.cor-field { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--ink-2); font-weight: 600; }
.cor-in { width: 100%; box-sizing: border-box; font-weight: 400; }
textarea.cor-in { resize: vertical; min-height: 60px; }
.cor-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cor-check { display: flex; gap: 6px; align-items: center; font-size: .82rem; color: var(--ink-2); }
.cor-note { padding: 10px 12px; background: var(--accent-soft); color: var(--ink-2); border-radius: 8px; font-size: .84rem; }

/* project picker */
.cor-projlist { display: flex; flex-direction: column; max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.cor-projopt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font: inherit; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.cor-projopt:last-child { border-bottom: 0; }
.cor-projopt:hover, .cor-projopt:focus-visible { background: var(--accent-soft); outline: none; }
.cor-projname { font-weight: 600; }
.cor-projcard { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-2); }

/* line items */
.cor-items { display: flex; flex-direction: column; gap: 6px; }
.cor-item { display: grid; grid-template-columns: minmax(0, 3fr) 70px 70px 100px 110px 34px; gap: 6px; align-items: center; }
.cor-ihead span { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.cor-items > .co-ghost { align-self: flex-start; }
.cor-totalrow { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); }
.cor-total, .cor-totalrow strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.cor-money { display: flex; flex-direction: column; gap: 4px; font-size: .84rem; color: var(--ink-2); }
.cor-mrow { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.cor-mtotal { padding-top: 4px; border-top: 1px solid var(--line); font-weight: 700; color: var(--ink); }

/* signer suggestions */
.cor-suggest { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.cor-suggest > p { grid-column: 1 / -1; margin: 0; }
.cor-cand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); cursor: pointer; }
.cor-cand:hover:not([disabled]) { border-color: var(--teal); box-shadow: var(--shadow-hover); }
.cor-cand.on { border-color: var(--teal); background: var(--accent-soft); }
.cor-cand[disabled] { opacity: .55; cursor: not-allowed; }
.cor-cname { font-weight: 600; }
.cor-where { font-size: .72rem; }
.cor-src { font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; }
.cor-src-ghl { background: var(--accent-soft); color: var(--accent); }
.cor-src-monday { background: var(--good-soft); color: var(--good); }

/* actions + view */
.cor-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cor-spacer { flex: 1; }
.cor-right { text-align: right; margin: -8px 0 0; }
.cor-danger { color: var(--crit) !important; border-color: var(--crit-soft) !important; }
.cor-statusbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cor-desc { margin: 0; white-space: pre-wrap; color: var(--ink-2); }
.cor-itemtbl { font-size: .82rem; }
.cor-links { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cor-linkbtn { display: inline-flex; align-items: center; text-decoration: none; padding: 7px 12px; border-radius: 8px; align-self: flex-start; }
.cor-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: .86rem; }
.cor-kv dt { color: var(--muted); }
.cor-kv dd { margin: 0; color: var(--ink); }
.cor-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cor-history li { display: grid; grid-template-columns: 130px 110px 1fr; gap: 8px; font-size: .82rem; align-items: baseline; }
.cor-hwhen { color: var(--muted); font-variant-numeric: tabular-nums; }
.cor-hwhat { font-weight: 700; text-transform: capitalize; }

/* monday sign-in */
.cor-headacts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cor-mchip { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .8rem; color: var(--ink-2); }
.cor-mchip .co-link { font-size: .76rem; }
.cor-mdot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--good-soft); }
.cor-gate { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--cyan); border-radius: 10px; background: var(--accent-soft); font-size: .85rem; color: var(--ink-2); }
.cor-live { font-size: .74rem; font-weight: 700; color: var(--good); }
.cor-warn { padding: 9px 12px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-size: .82rem; }

/* drawer: head + scrolling body + pinned footer, sized to the visible viewport */
.cor-drawer { height: 100vh; height: 100dvh; }
.cor-drawer .co-dhead { flex: none; }
.cor-drawer .co-dbody { flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cor-dtitle { min-width: 0; }
.cor-dtitle h2 { overflow-wrap: anywhere; }
.cor-foot { flex: none; display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface);
  box-shadow: 0 -8px 20px -16px rgba(6, 33, 65, .35); }
.cor-foottotal { margin-right: auto; display: flex; flex-direction: column; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cor-foottotal strong { font-size: 1.05rem; color: var(--ink); }
.cor-foot-view { justify-content: flex-start; }
.cor-voidrow { display: flex; justify-content: flex-start; }
html.cor-lock, html.cor-lock body { overflow: hidden; }
.cor-gate-phone { margin-top: 8px; font-size: .8rem; color: var(--ink-2); }

/* ---------------- phones ---------------- */
@media (max-width: 720px) {
  .cor { gap: 12px; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .cor-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .cor-head h1 { font-size: 1.2rem; }
  .cor-head p { font-size: .82rem; }
  .cor-headacts { justify-content: space-between; }
  /* "New change order" lives at the bottom of the screen, under the thumb */
  .cor-headacts > .co-btn { position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 30;
    min-height: 50px; font-size: 1rem; border-radius: 12px; box-shadow: 0 10px 24px -10px rgba(6, 33, 65, .55); }
  .cor-mchip, .cor-mbtn { width: 100%; justify-content: center; }
  .co-kpis.cor-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cor-kpis .co-kpi { padding: 10px 12px; }
  .cor-kpis .co-kpi .v { font-size: 1.2rem; }
  .cor-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  /* filter tabs scroll sideways instead of wrapping into a wall of buttons */
  .cor-filters { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .cor-filters::-webkit-scrollbar { display: none; }
  .cor-filters .co-tab { flex: none; min-height: 38px; }
  .cor-search { min-width: 0; flex: 1 1 auto; width: 100%; }
  .cor-conn { padding: 10px 12px; }

  /* the list stacks into tappable cards */
  .cor .co-tblwrap { overflow: visible; }
  .cor-table thead { display: none; }
  .cor-table, .cor-table tbody { display: block; width: 100%; }
  .cor-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; margin-bottom: 8px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
  .cor-table td { display: block; border: 0 !important; padding: 0 !important; text-align: left !important; background: none !important;
    white-space: normal !important; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
  .cor-table tr { box-sizing: border-box; width: 100%; min-width: 0; }
  .cor-table { table-layout: fixed; }
  .cor-table td:nth-child(1) { grid-column: 1; grid-row: 1; font-size: .74rem; color: var(--muted); }
  .cor-table td:nth-child(5) { grid-column: 2; grid-row: 1; justify-self: end; }
  .cor-table td:nth-child(2) { grid-column: 1; grid-row: 2; min-width: 0; }
  .cor-table td:nth-child(4) { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; font-weight: 700; font-size: .95rem; }
  .cor-table td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; max-width: none; font-size: .85rem; color: var(--ink-2); }
  .cor-table td:nth-child(6), .cor-table td:nth-child(7) { grid-column: 1 / -1; font-size: .76rem; }
  .cor-table td:nth-child(8) { grid-column: 1 / -1; }
  .cor-row:active { background: var(--surface-2); }

  /* full-screen editor */
  .cor-drawer { width: 100vw !important; max-width: 100vw !important; left: 0 !important; right: 0 !important; border-left: 0; }
  .cor-drawer .co-dhead { padding: 14px 16px 12px; }
  .cor-drawer .co-dbody { padding: 12px 16px 20px; gap: 14px; }
  .cor-drawer .co-close { min-width: 40px; min-height: 40px; font-size: 1rem; }
  .cor-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
  .cor-foot > button { flex: 1 1 0; min-height: 46px; font-size: .9rem; }
  .cor-foot .cor-foottotal { flex: 1 0 100%; flex-direction: row; justify-content: space-between; align-items: baseline; margin: 0 0 2px; }
  .cor-foot-view > button { flex: 1 1 calc(50% - 4px); }
  /* 16px stops iOS zooming into a field on focus */
  .cor-drawer input, .cor-drawer select, .cor-drawer textarea, .cor-search { font-size: 16px !important; }
  .cor-in { min-height: 44px; }
  textarea.cor-in { min-height: 96px; }
  .cor-grid2 { grid-template-columns: 1fr; }
  .cor-projlist { max-height: 46vh; }
  .cor-projopt { padding: 12px 14px; }
  .cor-suggest { grid-template-columns: 1fr; }
  .cor-cand { padding: 12px; }
  /* each line item is a small card: description, then qty / unit / price, then amount */
  .cor-ihead { display: none; }
  .cor-item:not(.cor-ihead) { grid-template-columns: 1fr 1fr 1.3fr; grid-template-areas: "desc desc desc" "qty unit price" "amt amt rm";
    padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
  .cor-item .cor-idesc { grid-area: desc; }
  .cor-item .cor-iqty { grid-area: qty; }
  .cor-item .cor-iunit { grid-area: unit; }
  .cor-item .cor-iprice { grid-area: price; }
  .cor-item .cor-iamt { grid-area: amt; grid-column: 1 / 3; }
  .cor-item > button { grid-area: rm; justify-self: end; min-width: 44px; min-height: 44px; }
  .cor-items > .co-ghost { min-height: 44px; }
  .cor-history li { grid-template-columns: 1fr; gap: 2px; }
  .cor-gate { flex-direction: column; align-items: stretch; }
  .cor-gate > button { min-height: 46px; }
  .cor-kv { grid-template-columns: 1fr; gap: 2px; }
  .cor-kv dd { margin-bottom: 8px; }
}
.cor-foot button[disabled] { opacity: .45; cursor: not-allowed; }

/* desktop table: give the text columns room; scroll sideways rather than squash */
@media (min-width: 721px) {
  .cor-table { min-width: 1000px; }
  .cor-table td:nth-child(2) { min-width: 220px; }
  .cor-table td:nth-child(3) { min-width: 240px; max-width: 360px; }
  .cor-table td:nth-child(7) { min-width: 200px; }
  .cor-table td:nth-child(1), .cor-table td:nth-child(4), .cor-table td:nth-child(5), .cor-table td:nth-child(8) { white-space: nowrap; }
}