/* ══════════════════════════════════════════════════════════════════════════
   Client portal (js/customer.js)
   ══════════════════════════════════════════════════════════════════════════
   The portal is its own page, mounted at #cpRoot while the internal app
   shell is hidden. Everything is scoped under .cp with its own tokens, so
   the internal themes never reach it; light by default, dark on request.
*/

body.cp-active > :not(#cpRoot):not(#cpPrint):not(.toast):not(.modal-overlay):not(script) { display: none !important; }
/* The app scrolls inside its shell (html, body are fixed at the viewport);
   the portal is an ordinary page that scrolls the window. */
html.cp-on { height: auto; overflow-y: auto; }
html.cp-on body.cp-active { height: auto; overflow: visible; background: #f4f6f9; }

.cp {
  --cp-bg: #f4f6f9;
  --cp-surface: #ffffff;
  --cp-surface-2: #f8fafc;
  --cp-sunken: #eef2f6;
  --cp-border: #e2e8f0;
  --cp-border-2: #cbd5e1;
  --cp-text: #0f172a;
  --cp-text-2: #334155;
  --cp-muted: #5b6b80;
  --cp-faint: #94a3b8;
  --cp-accent: #1e5bb8;
  --cp-accent-hover: #174a96;
  --cp-accent-soft: #e8f0fb;
  --cp-accent-text: #1d4f9c;
  --cp-on-accent: #ffffff;
  --cp-green: #15803d; --cp-green-soft: #e6f5ec; --cp-green-dot: #22a55a;
  --cp-amber: #a85b07; --cp-amber-soft: #fdf2df; --cp-amber-dot: #f0a020;
  --cp-red: #b91c1c;   --cp-red-soft: #fdeaea;   --cp-red-dot: #e5484d;
  --cp-grey: #5b6b80;  --cp-grey-soft: #eef1f5;  --cp-grey-dot: #a3adbb;
  --cp-blue: #1d4f9c;  --cp-blue-soft: #e8f0fb;  --cp-blue-dot: #3b7be0;
  --cp-violet: #6d28d9; --cp-violet-soft: #f1ebfd;
  --cp-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --cp-shadow: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
  --cp-shadow-lg: 0 16px 40px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .06);
  --cp-radius-sm: 6px;
  --cp-radius: 10px;
  --cp-radius-lg: 14px;
  --cp-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
  background: var(--cp-bg);
  color: var(--cp-text);
  font-family: var(--cp-font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}
.cp[data-cp-theme="dark"] {
  --cp-bg: #0b111c;
  --cp-surface: #121a28;
  --cp-surface-2: #162031;
  --cp-sunken: #0e1622;
  --cp-border: #223047;
  --cp-border-2: #33445f;
  --cp-text: #e8eef7;
  --cp-text-2: #c4cfdf;
  --cp-muted: #93a1b6;
  --cp-faint: #66758c;
  --cp-accent: #4c8dff;
  --cp-accent-hover: #6aa1ff;
  --cp-accent-soft: rgba(76, 141, 255, .14);
  --cp-accent-text: #8db6ff;
  --cp-on-accent: #06101f;
  --cp-green: #4ade80; --cp-green-soft: rgba(34, 197, 94, .14);  --cp-green-dot: #22c55e;
  --cp-amber: #fbbf24; --cp-amber-soft: rgba(245, 158, 11, .15); --cp-amber-dot: #f59e0b;
  --cp-red: #f87171;   --cp-red-soft: rgba(239, 68, 68, .15);    --cp-red-dot: #ef4444;
  --cp-grey: #9aa8bc;  --cp-grey-soft: rgba(148, 163, 184, .13); --cp-grey-dot: #64748b;
  --cp-blue: #8db6ff;  --cp-blue-soft: rgba(76, 141, 255, .14);  --cp-blue-dot: #4c8dff;
  --cp-violet: #c4b5fd; --cp-violet-soft: rgba(139, 92, 246, .16);
  --cp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --cp-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  --cp-shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);
  color-scheme: dark;
}
html.cp-on body.cp-active:has(.cp[data-cp-theme="dark"]) { background: #0b111c; }
.cp input[type="date"] { color-scheme: light; }
.cp[data-cp-theme="dark"] input[type="date"] { color-scheme: dark; }
.cp select option, .cp select optgroup { background-color: var(--cp-surface); color: var(--cp-text); }
.cp *, .cp *::before, .cp *::after { box-sizing: border-box; }
.cp h1, .cp h2, .cp h3, .cp h4, .cp p { margin: 0; }
.cp a { color: var(--cp-accent-text); text-decoration: none; }
.cp a:hover { text-decoration: underline; }
.cp button { font-family: inherit; }
.cp :focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 2px; border-radius: 4px; }
.cp .cp-num { font-variant-numeric: tabular-nums; }
.cp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cp-ico { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.cp-header { position: sticky; top: 0; z-index: 40; background: var(--cp-surface); border-bottom: 1px solid var(--cp-border); box-shadow: var(--cp-shadow-sm); padding-top: env(safe-area-inset-top, 0px); }
.cp-header-in { max-width: 1280px; margin: 0 auto; height: 64px; padding: 0 28px; display: flex; align-items: center; gap: 28px; }
.cp-brand { display: flex; align-items: center; gap: 14px; flex: none; color: var(--cp-text); }
.cp-brand:hover { text-decoration: none; }
.cp-brand img { height: 30px; width: auto; display: block; }
.cp-brand .cp-logo-dark { display: none; }
.cp[data-cp-theme="dark"] .cp-brand .cp-logo-light { display: none; }
.cp[data-cp-theme="dark"] .cp-brand .cp-logo-dark { display: block; }
.cp-brand-sep { width: 1px; height: 26px; background: var(--cp-border-2); }
.cp-brand-label { font-size: 13px; font-weight: 600; color: var(--cp-muted); letter-spacing: .01em; white-space: nowrap; }
.cp-nav { display: flex; align-items: stretch; gap: 4px; height: 100%; flex: 1; min-width: 0; }
.cp-nav-link { appearance: none; border: 0; background: none; padding: 0 12px; height: 100%; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--cp-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.cp-nav-link:hover { color: var(--cp-text); }
.cp-nav-link[aria-current="page"] { color: var(--cp-text); font-weight: 600; border-bottom-color: var(--cp-accent); }
.cp-nav-link .cp-ico { opacity: .75; }
.cp-header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.cp-user { position: relative; }
.cp-user-btn { appearance: none; border: 1px solid transparent; background: none; display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border-radius: 999px; cursor: pointer; color: var(--cp-text); }
.cp-user-btn:hover { background: var(--cp-sunken); }
.cp-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--cp-accent); color: var(--cp-on-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: .02em; flex: none; }
.cp-user-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.cp-user-text b { font-size: 13px; font-weight: 600; }
.cp-user-text small { font-size: 11px; color: var(--cp-muted); }
.cp-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 260px; background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius); box-shadow: var(--cp-shadow-lg); padding: 6px; z-index: 60; }
.cp-menu[hidden] { display: none; }
.cp-menu-who { padding: 10px 12px 12px; border-bottom: 1px solid var(--cp-border); margin-bottom: 6px; }
.cp-menu-who b { display: block; font-size: 14px; }
.cp-menu-who span { display: block; font-size: 12px; color: var(--cp-muted); word-break: break-all; }
.cp-menu-item { appearance: none; border: 0; background: none; width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--cp-radius-sm); font-size: 13px; color: var(--cp-text-2); cursor: pointer; text-align: left; }
.cp-menu-item:hover { background: var(--cp-sunken); color: var(--cp-text); }
.cp-menu-sep { height: 1px; background: var(--cp-border); margin: 6px 0; }

.cp-preview-bar { background: #fff4d6; color: #6b4a00; border-bottom: 1px solid #f1d38a; font-size: 13px; }
.cp[data-cp-theme="dark"] .cp-preview-bar { background: #3a2e0c; color: #f5d98a; border-color: #5d4a12; }
.cp-preview-bar > div { max-width: 1280px; margin: 0 auto; padding: 8px 28px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cp-preview-bar button { margin-left: auto; }

/* ── Buttons, inputs ────────────────────────────────────────────────────── */
.cp-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--cp-border-2); background: var(--cp-surface); color: var(--cp-text); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.cp-btn:hover { background: var(--cp-surface-2); border-color: var(--cp-faint); text-decoration: none; }
.cp-btn-primary { background: var(--cp-accent); border-color: var(--cp-accent); color: var(--cp-on-accent); }
.cp-btn-primary:hover { background: var(--cp-accent-hover); border-color: var(--cp-accent-hover); }
.cp-btn-ghost { background: transparent; border-color: transparent; color: var(--cp-accent-text); }
.cp-btn-ghost:hover { background: var(--cp-accent-soft); border-color: transparent; }
.cp-btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
.cp-btn:disabled { opacity: .55; cursor: default; }
.cp-icon-btn { appearance: none; width: 36px; height: 36px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--cp-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.cp-icon-btn:hover { background: var(--cp-sunken); color: var(--cp-text); }
.cp-icon-btn .cp-ico { width: 18px; height: 18px; }
.cp-input, .cp-select, .cp-textarea { height: 36px; border: 1px solid var(--cp-border-2); background: var(--cp-surface); color: var(--cp-text); border-radius: 8px; padding: 0 12px; font-size: 13.5px; font-family: inherit; min-width: 0; }
.cp-textarea { height: auto; min-height: 120px; padding: 10px 12px; resize: vertical; line-height: 1.5; width: 100%; }
.cp-input:focus, .cp-select:focus, .cp-textarea:focus { outline: none; border-color: var(--cp-accent); box-shadow: 0 0 0 3px var(--cp-accent-soft); }
.cp-select { padding-right: 30px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; }
.cp-search { position: relative; flex: 1 1 240px; max-width: 340px; }
.cp-search .cp-ico { position: absolute; left: 11px; top: 10px; color: var(--cp-faint); }
.cp-search .cp-input { width: 100%; padding-left: 34px; }
.cp-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cp-text-2); }
.cp-field .cp-input, .cp-field .cp-select { width: 100%; }
.cp-field small { font-weight: 400; color: var(--cp-muted); }
.cp-seg { display: inline-flex; background: var(--cp-sunken); border-radius: 9px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.cp-seg button { appearance: none; border: 0; background: none; height: 30px; padding: 0 12px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--cp-muted); cursor: pointer; white-space: nowrap; }
.cp-seg button:hover { color: var(--cp-text); }
.cp-seg button[aria-pressed="true"] { background: var(--cp-surface); color: var(--cp-text); font-weight: 600; box-shadow: var(--cp-shadow); }
.cp-seg button .cp-count { color: var(--cp-faint); font-weight: 500; margin-left: 4px; }

/* ── Page layout ────────────────────────────────────────────────────────── */
.cp-main { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 28px 28px 56px; }
.cp-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.cp-page-head h1 { font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
.cp-page-head p { margin-top: 6px; color: var(--cp-muted); font-size: 14px; }
.cp-page-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cp-fresh { display: inline-flex; align-items: center; gap: 6px; color: var(--cp-muted); font-size: 12.5px; }
.cp-grid-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.cp-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cp-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.cp-toolbar-end { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.cp-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cp-muted); margin-bottom: 14px; cursor: pointer; background: none; border: 0; padding: 0; }
.cp-back:hover { color: var(--cp-text); }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.cp-card { background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); box-shadow: var(--cp-shadow-sm); min-width: 0; }
.cp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--cp-border); }
.cp-card-head h2 { font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.cp-card-head p { font-size: 12.5px; color: var(--cp-muted); margin-top: 2px; }
.cp-card-body { padding: 16px 20px; }
.cp-card-body.cp-flush { padding: 0; }
.cp-card-foot { padding: 12px 20px; border-top: 1px solid var(--cp-border); font-size: 12.5px; color: var(--cp-muted); }
.cp-link-btn { appearance: none; border: 0; background: none; padding: 0; color: var(--cp-accent-text); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cp-link-btn:hover { text-decoration: underline; }

/* ── Stats ──────────────────────────────────────────────────────────────── */
.cp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.cp-stat { appearance: none; text-align: left; font: inherit; color: inherit; background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); padding: 16px 18px; box-shadow: var(--cp-shadow-sm); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
button.cp-stat { cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
button.cp-stat:hover { border-color: var(--cp-border-2); box-shadow: var(--cp-shadow); }
.cp-stat-label { font-size: 12.5px; font-weight: 600; color: var(--cp-muted); display: flex; align-items: center; gap: 8px; }
.cp-stat-value { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cp-stat-sub { display: block; font-size: 12.5px; color: var(--cp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-stat.is-warn .cp-stat-value { color: var(--cp-amber); }
.cp-stat.is-bad .cp-stat-value { color: var(--cp-red); }
.cp-stat.is-good .cp-stat-value { color: var(--cp-green); }

/* ── Badges, dots, health ───────────────────────────────────────────────── */
.cp-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--cp-grey-soft); color: var(--cp-grey); }
.cp-badge.t-green { background: var(--cp-green-soft); color: var(--cp-green); }
.cp-badge.t-amber { background: var(--cp-amber-soft); color: var(--cp-amber); }
.cp-badge.t-red { background: var(--cp-red-soft); color: var(--cp-red); }
.cp-badge.t-blue { background: var(--cp-blue-soft); color: var(--cp-blue); }
.cp-badge.t-violet { background: var(--cp-violet-soft); color: var(--cp-violet); }
.cp-badge.t-outline { background: transparent; border: 1px solid var(--cp-border-2); color: var(--cp-muted); }
.cp-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: var(--cp-grey-dot); }
.cp-dot.t-green { background: var(--cp-green-dot); }
.cp-dot.t-amber { background: var(--cp-amber-dot); }
.cp-dot.t-red { background: var(--cp-red-dot); }
.cp-dot.t-blue { background: var(--cp-blue-dot); }
.cp-ratings { display: inline-flex; gap: 6px; align-items: center; }
.cp-rating-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--cp-muted); white-space: nowrap; }
.cp-rating-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cp-rating-tile { border: 1px solid var(--cp-border); border-radius: var(--cp-radius); padding: 12px 14px; background: var(--cp-surface-2); }
.cp-rating-tile span { display: block; font-size: 12px; font-weight: 600; color: var(--cp-muted); }
.cp-rating-tile b { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 15px; font-weight: 650; }
.cp-rating-tile.t-green { border-color: color-mix(in srgb, var(--cp-green-dot) 35%, var(--cp-border)); background: var(--cp-green-soft); }
.cp-rating-tile.t-amber { border-color: color-mix(in srgb, var(--cp-amber-dot) 45%, var(--cp-border)); background: var(--cp-amber-soft); }
.cp-rating-tile.t-red { border-color: color-mix(in srgb, var(--cp-red-dot) 45%, var(--cp-border)); background: var(--cp-red-soft); }
.cp-rating-tile.t-green b { color: var(--cp-green); }
.cp-rating-tile.t-amber b { color: var(--cp-amber); }
.cp-rating-tile.t-red b { color: var(--cp-red); }
.cp-callout { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--cp-radius); background: var(--cp-surface-2); border: 1px solid var(--cp-border); font-size: 13.5px; color: var(--cp-text-2); line-height: 1.55; margin-top: 12px; }
.cp-callout.t-amber { background: var(--cp-amber-soft); border-color: transparent; }
.cp-callout.t-red { background: var(--cp-red-soft); border-color: transparent; }
.cp-callout .cp-ico { margin-top: 2px; color: var(--cp-muted); }

/* ── Progress and timeline ──────────────────────────────────────────────── */
.cp-bar { height: 6px; border-radius: 999px; background: var(--cp-sunken); overflow: hidden; }
.cp-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--cp-accent); }
.cp-bar > i.t-green { background: var(--cp-green-dot); }
.cp-span { position: relative; height: 6px; border-radius: 999px; background: var(--cp-sunken); margin: 10px 0 6px; }
.cp-span > i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; background: color-mix(in srgb, var(--cp-accent) 55%, transparent); }
.cp-span > b { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--cp-text); border-radius: 1px; }
.cp-span-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--cp-muted); gap: 8px; }

/* ── Lists ──────────────────────────────────────────────────────────────── */
.cp-list { list-style: none; margin: 0; padding: 0; }
.cp-list > li { border-top: 1px solid var(--cp-border); }
.cp-list > li:first-child { border-top: 0; }
.cp-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; }
button.cp-row { cursor: pointer; }
button.cp-row:hover { background: var(--cp-surface-2); }
.cp-row-main { flex: 1; min-width: 0; display: block; }
.cp-row-sub, .cp-row-text { display: block; }
.cp-row-badges { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 320px; }
.cp-row-title { font-weight: 600; font-size: 14px; color: var(--cp-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-row-sub { font-size: 12.5px; color: var(--cp-muted); margin-top: 2px; }
.cp-row-text { font-size: 13.5px; color: var(--cp-text-2); margin-top: 6px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.cp-row-end { flex: none; text-align: right; font-size: 12.5px; color: var(--cp-muted); white-space: nowrap; }
.cp-row .cp-dot { margin-top: 6px; }
.cp-date-box { flex: none; width: 46px; text-align: center; border: 1px solid var(--cp-border); border-radius: 8px; overflow: hidden; background: var(--cp-surface); }
.cp-date-box span { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 0; background: var(--cp-sunken); color: var(--cp-muted); }
.cp-date-box b { display: block; font-size: 17px; font-weight: 700; padding: 3px 0 4px; font-variant-numeric: tabular-nums; }
.cp-date-box.is-late span { background: var(--cp-red-soft); color: var(--cp-red); }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.cp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cp-table th { text-align: left; text-transform: none; letter-spacing: 0; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--cp-muted); padding: 10px 16px; border-bottom: 1px solid var(--cp-border); background: var(--cp-surface-2); white-space: nowrap; }
.cp-table td { padding: 12px 16px; border-bottom: 1px solid var(--cp-border); vertical-align: middle; color: var(--cp-text-2); }
.cp-table tr:last-child td { border-bottom: 0; }
.cp-table tbody tr:hover { background: none; }
.cp-table tbody tr.is-link { cursor: pointer; }
.cp-table tbody tr.is-link:hover td { background: var(--cp-surface-2); }
.cp-table .cp-t-name { font-weight: 600; color: var(--cp-text); }
.cp-table .cp-t-sub { font-size: 12px; color: var(--cp-muted); }
.cp-table .cp-t-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-table .cp-t-proj { min-width: 190px; }
.cp-table .cp-t-dot { text-align: center; padding-left: 6px; padding-right: 6px; width: 64px; }
.cp-table .cp-t-nowrap { white-space: nowrap; }

/* ── Project cards ──────────────────────────────────────────────────────── */
.cp-proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.cp-proj { appearance: none; text-align: left; font: inherit; color: inherit; background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); box-shadow: var(--cp-shadow-sm); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; min-width: 0; }
.cp-proj:hover { border-color: var(--cp-border-2); box-shadow: var(--cp-shadow); transform: translateY(-1px); }
.cp-proj-pf { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--cp-muted); }
.cp-proj-pf i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.cp-proj-name { font-size: 16px; font-weight: 650; line-height: 1.3; color: var(--cp-text); margin-top: 4px; }
.cp-proj-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.cp-proj-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; font-size: 12.5px; }
.cp-proj-facts > div { min-width: 0; }
.cp-proj-facts span { display: block; color: var(--cp-muted); }
.cp-proj-facts b { display: block; font-weight: 600; color: var(--cp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-proj-facts b.is-late { color: var(--cp-red); }
.cp-proj-update { border-top: 1px solid var(--cp-border); padding-top: 12px; font-size: 13px; color: var(--cp-text-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cp-proj-update em { font-style: normal; color: var(--cp-muted); font-size: 12px; }

/* ── Project page ───────────────────────────────────────────────────────── */
.cp-proj-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.cp-proj-head h1 { font-size: 28px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; margin: 4px 0 10px; }
.cp-proj-meta { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; font-size: 13.5px; color: var(--cp-muted); }
.cp-proj-meta .cp-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--cp-faint); }
.cp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--cp-border); margin-bottom: 22px; overflow-x: auto; scrollbar-width: none; }
.cp-tabs::-webkit-scrollbar { display: none; }
.cp-tab { appearance: none; border: 0; background: none; padding: 10px 12px; font-size: 14px; font-weight: 500; color: var(--cp-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.cp-tab:hover { color: var(--cp-text); }
.cp-tab[aria-selected="true"] { color: var(--cp-text); font-weight: 600; border-bottom-color: var(--cp-accent); }
.cp-tab .cp-count { font-size: 12px; font-weight: 600; color: var(--cp-muted); background: var(--cp-sunken); border-radius: 999px; padding: 0 7px; line-height: 18px; }
.cp-dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; font-size: 13.5px; }
.cp-dl dt { color: var(--cp-muted); }
.cp-dl dd { margin: 0; color: var(--cp-text); font-weight: 500; text-align: right; word-break: break-word; }
.cp-contact { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--cp-border); }
.cp-contact:first-child { border-top: 0; padding-top: 0; }
.cp-contact .cp-avatar { width: 34px; height: 34px; background: var(--cp-accent-soft); color: var(--cp-accent-text); }
.cp-contact-text span { display: block; font-size: 12px; color: var(--cp-muted); }
.cp-contact-text b { display: block; font-size: 13.5px; font-weight: 600; word-break: break-word; }
.cp-prose { font-size: 14px; line-height: 1.65; color: var(--cp-text-2); white-space: pre-wrap; word-break: break-word; }
.cp-section + .cp-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--cp-border); }
.cp-section h3 { font-size: 13px; font-weight: 650; color: var(--cp-text); margin-bottom: 6px; }
.cp-report-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--cp-muted); margin-bottom: 14px; }

/* Weekly reports: list of weeks beside the selected report */
.cp-weeks { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.cp-week { appearance: none; width: 100%; text-align: left; font: inherit; color: inherit; border: 0; background: none; padding: 12px 16px; border-left: 3px solid transparent; cursor: pointer; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--cp-border); }
.cp-week:first-child { border-top: 0; }
.cp-week:hover { background: var(--cp-surface-2); }
.cp-week[aria-current="true"] { background: var(--cp-accent-soft); border-left-color: var(--cp-accent); }
.cp-week b { display: block; font-size: 13.5px; font-weight: 600; }
.cp-week small { display: block; font-size: 12px; color: var(--cp-muted); }

/* Schedule: phases on the project's calendar */
.cp-gantt { font-size: 13px; }
.cp-gantt-row { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); align-items: center; border-top: 1px solid var(--cp-border); min-height: 52px; }
.cp-gantt-row.is-head { border-top: 0; min-height: 48px; }
.cp-gantt-label { padding: 8px 16px; min-width: 0; }
.cp-gantt-label b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-gantt-label span { display: block; font-size: 12px; color: var(--cp-muted); white-space: nowrap; }
.cp-gantt-track { position: relative; height: 100%; min-height: inherit; border-left: 1px solid var(--cp-border); }
.cp-gantt-month { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--cp-border); }
.cp-gantt-month span { position: absolute; top: 9px; left: 6px; font-size: 11.5px; font-weight: 600; color: var(--cp-muted); white-space: nowrap; }
.cp-gantt-bar { position: absolute; top: 50%; height: 18px; margin-top: -9px; border-radius: 5px; background: var(--cp-grey-soft); border: 1px solid var(--cp-border-2); min-width: 6px; }
.cp-gantt-bar.is-done { background: var(--cp-green-dot); border-color: var(--cp-green-dot); opacity: .85; }
.cp-gantt-bar.is-active { background: var(--cp-accent); border-color: var(--cp-accent); }
.cp-gantt-bar.is-late { background: var(--cp-red-soft); border: 1.5px solid var(--cp-red-dot); }
.cp-gantt-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--cp-red-dot); z-index: 2; pointer-events: none; }
.cp-gantt-today span { position: absolute; bottom: 5px; left: 4px; font-size: 11px; font-weight: 700; color: var(--cp-red); background: var(--cp-surface); padding: 0 4px; border-radius: 3px; white-space: nowrap; }
.cp-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--cp-muted); }
.cp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cp-legend i { width: 14px; height: 8px; border-radius: 3px; display: inline-block; }

/* Updates feed */
.cp-feed-month { font-size: 12px; font-weight: 700; color: var(--cp-muted); text-transform: uppercase; letter-spacing: .06em; padding: 18px 20px 8px; }
.cp-feed-month:first-child { padding-top: 14px; }
.cp-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 5px; font-size: 11.5px; font-weight: 600; background: var(--cp-grey-soft); color: var(--cp-grey); white-space: nowrap; }
.cp-tag.t-milestone { background: var(--cp-green-soft); color: var(--cp-green); }
.cp-tag.t-risk, .cp-tag.t-blocker { background: var(--cp-red-soft); color: var(--cp-red); }
.cp-tag.t-status, .cp-tag.t-report { background: var(--cp-blue-soft); color: var(--cp-blue); }
.cp-tag.t-client { background: var(--cp-violet-soft); color: var(--cp-violet); }

/* Work log */
.cp-log-summary { display: flex; gap: 24px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--cp-border); background: var(--cp-surface-2); }
.cp-log-summary div { display: flex; flex-direction: column; }
.cp-log-summary span { font-size: 12px; color: var(--cp-muted); font-weight: 600; }
.cp-log-summary b { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cp-log-week { display: flex; justify-content: space-between; gap: 12px; padding: 10px 20px; background: var(--cp-surface-2); border-top: 1px solid var(--cp-border); border-bottom: 1px solid var(--cp-border); font-size: 12.5px; font-weight: 600; color: var(--cp-text-2); }
.cp-log-week:first-child { border-top: 0; }
.cp-log-row { display: grid; grid-template-columns: 92px 170px 64px minmax(0, 1fr); gap: 16px; padding: 12px 20px; border-top: 1px solid var(--cp-border); font-size: 13.5px; align-items: start; }
.cp-log-week + .cp-log-row { border-top: 0; }
.cp-log-row .cp-log-date { color: var(--cp-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-log-row .cp-log-who { font-weight: 600; color: var(--cp-text); min-width: 0; }
.cp-log-row .cp-log-who small { display: block; font-weight: 400; font-size: 12px; color: var(--cp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-log-row .cp-log-hours { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--cp-text); }
.cp-log-row .cp-log-note { color: var(--cp-text-2); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.cp-log-src { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--cp-muted); background: var(--cp-sunken); border-radius: 4px; padding: 0 6px; vertical-align: 1px; }
.cp-range { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cp-muted); }
.cp-range .cp-input { width: 150px; }
.cp-footnote { font-size: 12.5px; color: var(--cp-muted); line-height: 1.55; }

/* ── Empty, loading, errors ─────────────────────────────────────────────── */
.cp-empty { text-align: center; padding: 40px 24px; color: var(--cp-muted); }
.cp-empty .cp-empty-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--cp-sunken); color: var(--cp-muted); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.cp-empty .cp-empty-ico .cp-ico { width: 22px; height: 22px; }
.cp-empty b { display: block; font-size: 15px; color: var(--cp-text); margin-bottom: 4px; }
.cp-empty p { font-size: 13.5px; max-width: 420px; margin: 0 auto; }
.cp-empty .cp-btn { margin-top: 16px; }
.cp-empty.is-compact { padding: 22px 20px; }
.cp-skel { background: linear-gradient(90deg, var(--cp-sunken) 25%, var(--cp-surface-2) 50%, var(--cp-sunken) 75%); background-size: 200% 100%; animation: cp-shimmer 1.4s ease infinite; border-radius: 8px; }
@keyframes cp-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.cp-good { display: flex; align-items: center; gap: 12px; padding: 18px 20px; color: var(--cp-text-2); font-size: 13.5px; }
.cp-good i { width: 34px; height: 34px; border-radius: 50%; background: var(--cp-green-soft); color: var(--cp-green); display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* ── Modal and toast ────────────────────────────────────────────────────── */
.cp-modal-bg { position: fixed; inset: 0; z-index: 200; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 20px; animation: cp-fade .15s ease; }
.cp-modal { width: 100%; max-width: 540px; max-height: calc(100vh - 40px); overflow-y: auto; background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); box-shadow: var(--cp-shadow-lg); animation: cp-rise .18s ease; }
.cp-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 4px; }
.cp-modal-head h2 { font-size: 18px; font-weight: 700; }
.cp-modal-head p { font-size: 13.5px; color: var(--cp-muted); margin-top: 4px; }
.cp-modal-body { padding: 16px 22px; display: flex; flex-direction: column; gap: 14px; }
.cp-modal-foot { padding: 14px 22px 20px; display: flex; justify-content: flex-end; gap: 8px; }
.cp-form-error { color: var(--cp-red); font-size: 13px; }
.cp-sent { text-align: center; padding: 8px 0 4px; }
.cp-sent i { width: 48px; height: 48px; border-radius: 50%; background: var(--cp-green-soft); color: var(--cp-green); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.cp-sent i .cp-ico { width: 24px; height: 24px; }
.cp-sent b { display: block; font-size: 16px; margin-bottom: 4px; }
.cp-sent p { color: var(--cp-muted); font-size: 13.5px; }
.cp-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; z-index: 300; background: #0f172a; color: #fff; padding: 11px 18px; border-radius: 10px; font-size: 13.5px; font-weight: 500; box-shadow: var(--cp-shadow-lg); transition: opacity .2s ease, transform .2s ease; pointer-events: none; max-width: calc(100vw - 32px); }
.cp-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.cp-toast.is-error { background: #b91c1c; }
@keyframes cp-fade { from { opacity: 0; } }
@keyframes cp-rise { from { opacity: 0; transform: translateY(8px); } }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.cp-footer { border-top: 1px solid var(--cp-border); background: var(--cp-surface); }
.cp-footer > div { max-width: 1280px; margin: 0 auto; padding: 18px 28px calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--cp-muted); }

/* Staff: choose a customer to preview (inside the internal app) */
.cp-pick { max-width: 860px; }
.cp-pick-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border-light); }
.cp-pick-row:first-child { border-top: 0; }
.cp-pick-row div { flex: 1; min-width: 0; }
.cp-pick-row b { display: block; color: var(--white); font-size: 13px; }
.cp-pick-row span { display: block; color: var(--text-dim); font-size: 12px; }

/* ── Smaller screens ────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .cp-grid-main { grid-template-columns: minmax(0, 1fr); }
  .cp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-user-text { display: none; }
}
@media (max-width: 860px) {
  .cp-header-in { height: auto; flex-wrap: wrap; padding: 10px 16px 0; gap: 8px 12px; }
  .cp-brand-sep, .cp-brand-label { display: none; }
  .cp-header-actions { margin-left: auto; }
  .cp-nav { order: 3; flex: 1 0 100%; height: 44px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 8px; }
  .cp-nav::-webkit-scrollbar { display: none; }
  .cp-main { padding: 20px 16px 48px; }
  .cp-weeks { grid-template-columns: minmax(0, 1fr); }
  .cp-rating-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-preview-bar > div, .cp-footer > div { padding-left: 16px; padding-right: 16px; }
  .cp-log-row { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .cp-log-row .cp-log-date { order: 1; }
  .cp-log-row .cp-log-hours { order: 2; }
  .cp-log-row .cp-log-who { order: 3; grid-column: 1 / -1; }
  .cp-log-row .cp-log-note { order: 4; grid-column: 1 / -1; }
  .cp-head-contact-label { display: none; }
}
@media (max-width: 560px) {
  .cp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cp-stat { padding: 12px 14px; }
  .cp-stat-value { font-size: 24px; }
  .cp-stat-sub { white-space: normal; }
  .cp-row { flex-wrap: wrap; padding: 12px 16px; }
  .cp-row-badges { flex-basis: 100%; justify-content: flex-start; max-width: none; padding-left: 20px; }
  .cp-hide-sm { display: none; }
  .cp-proj-meta .cp-sep { display: none; }
  .cp-proj-head .cp-page-head-actions { width: 100%; }
  .cp-proj-head .cp-page-head-actions .cp-btn { flex: 1; }
  .cp-proj-grid { grid-template-columns: minmax(0, 1fr); }
  .cp-page-head h1, .cp-proj-head h1 { font-size: 22px; }
  .cp-gantt-row { grid-template-columns: 120px minmax(0, 1fr); }
  .cp-search { max-width: none; }
  .cp-toolbar-end { margin-left: 0; }
}

/* ── Print: the project report (cpPrintProject) ─────────────────────────── */
#cpPrint { display: none; }
@media print {
  body.cp-printing > :not(#cpPrint) { display: none !important; }
  body.cp-printing #cpPrint { display: block !important; }
  body.cp-printing { background: #fff !important; }
}
#cpPrint { font-family: 'Inter', system-ui, sans-serif; color: #0f172a; font-size: 11pt; line-height: 1.45; }
#cpPrint .pr-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #0f172a; padding-bottom: 10px; margin-bottom: 16px; }
#cpPrint .pr-head img { height: 34px; }
#cpPrint .pr-head div { text-align: right; font-size: 9pt; color: #475569; }
#cpPrint h1 { font-size: 20pt; margin: 0 0 4px; }
#cpPrint h2 { font-size: 12.5pt; margin: 18px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #cbd5e1; break-after: avoid; }
#cpPrint .pr-meta { color: #475569; font-size: 10pt; margin-bottom: 12px; }
#cpPrint table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
#cpPrint th { text-align: left; text-transform: none; letter-spacing: 0; font-size: 9pt; font-weight: 700; color: #0f172a; background: #f1f5f9; padding: 5px 7px; border: 1px solid #cbd5e1; }
#cpPrint td { padding: 5px 7px; border: 1px solid #e2e8f0; vertical-align: top; white-space: pre-wrap; }
#cpPrint tr { break-inside: avoid; }
#cpPrint .pr-rag { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
#cpPrint .pr-text { white-space: pre-wrap; margin: 0 0 8px; }
#cpPrint .pr-label { font-weight: 700; font-size: 10pt; margin: 8px 0 2px; }
#cpPrint .pr-foot { margin-top: 18px; font-size: 8.5pt; color: #64748b; }