/*
 * Client portal and client workspace styles (Admin > Clients > Workspace, and the
 * client.kawachtech.com pages).
 *
 * One set of colour tokens for light and dark mode. Dark mode follows the Admin's own
 * switch (html[data-theme="dark"], saved in localStorage "theme"); the standalone sign-in
 * pages set the same attribute from the saved choice or the device setting.
 *
 * Contrast: every text/background pair below is at least 4.5:1 (AA) in both modes. The
 * dark palette avoids pure white on pure black on purpose, so text stays comfortable to read.
 */

:root {
  --kp-card: #ffffff;
  --kp-card-alt: #f5f7fc;
  --kp-border: #d9e0ee;
  --kp-text: #101828;      /* headings */
  --kp-body: #344054;      /* normal text */
  --kp-muted: #566176;     /* secondary text */
  --kp-link: #1d4ed8;
  --kp-primary: #2563eb;
  --kp-on-primary: #ffffff;
  --kp-field: #ffffff;
  --kp-shadow: 0 2px 12px rgba(37, 99, 235, .08);

  --kp-ok-bg: #e3f6ec;     --kp-ok: #05603a;
  --kp-warn-bg: #fff2d6;   --kp-warn: #84490a;
  --kp-info-bg: #e6eeff;   --kp-info: #1e3a8a;
  --kp-danger-bg: #fdecea; --kp-danger: #b42318;
  --kp-wait-bg: #fff8e5;   --kp-wait-border: #efd08a;
}

html[data-theme="dark"] {
  --kp-card: #1e293b;
  --kp-card-alt: #172033;
  --kp-border: #3b4a63;
  --kp-text: #f1f5fb;
  --kp-body: #d0d9e8;
  --kp-muted: #a8b5cb;
  --kp-link: #9bbcff;
  --kp-primary: #2563eb;
  --kp-on-primary: #ffffff;
  --kp-field: #0f172a;
  --kp-shadow: 0 2px 16px rgba(0, 0, 0, .35);

  --kp-ok-bg: rgba(52, 211, 153, .16);   --kp-ok: #7ee8bd;
  --kp-warn-bg: rgba(251, 191, 36, .16); --kp-warn: #fcd34d;
  --kp-info-bg: rgba(96, 165, 250, .18); --kp-info: #c2d8ff;
  --kp-danger-bg: rgba(248, 113, 113, .16); --kp-danger: #fecaca;
  --kp-wait-bg: rgba(251, 191, 36, .10); --kp-wait-border: rgba(251, 191, 36, .38);
}

/* ---------- page frame ---------- */
.kp-page { font-family: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; padding: 28px 24px; max-width: 1100px; margin: 0 auto; color: var(--kp-body); }
.kp-page.kp-wide { max-width: 1240px; }
.kp-page.kp-narrow { max-width: 760px; }
.kp-crumb { font-size: .74rem; color: var(--kp-muted); margin-bottom: 6px; }
.kp-crumb a, .kp-page a.kp-a { color: var(--kp-link); text-decoration: none; font-weight: 600; }
.kp-crumb a:hover, .kp-page a.kp-a:hover { text-decoration: underline; }
.kp-title { font-size: 1.4rem; font-weight: 800; color: var(--kp-text); margin: 0 0 6px; letter-spacing: -.3px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kp-title i { color: var(--kp-link); font-size: 1.1rem; }
.kp-sub { font-size: .84rem; color: var(--kp-muted); margin: 0 0 20px; line-height: 1.65; }
.kp-h2 { font-size: .95rem; font-weight: 800; color: var(--kp-text); margin: 0 0 10px; }
.kp-muted { color: var(--kp-muted); font-size: .76rem; line-height: 1.55; }
.kp-strong { color: var(--kp-text); font-weight: 700; }

/* ---------- messages ---------- */
.kp-alert { border-radius: 8px; padding: 11px 16px; margin-bottom: 16px; font-size: .84rem; line-height: 1.55; border: 1px solid transparent; }
.kp-alert.ok { background: var(--kp-ok-bg); color: var(--kp-ok); border-color: color-mix(in srgb, var(--kp-ok) 35%, transparent); }
.kp-alert.err { background: var(--kp-danger-bg); color: var(--kp-danger); border-color: color-mix(in srgb, var(--kp-danger) 35%, transparent); }
.kp-alert ul { margin: 0; padding-left: 18px; }

/* ---------- cards ---------- */
.kp-card { background: var(--kp-card); border: 1px solid var(--kp-border); border-radius: 12px; box-shadow: var(--kp-shadow); margin-bottom: 20px; overflow: hidden; }
.kp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px; background: var(--kp-card-alt); border-bottom: 1px solid var(--kp-border); }
.kp-card-head h2 { margin: 0; font-size: .95rem; font-weight: 800; color: var(--kp-text); }
.kp-card-head h2 i { color: var(--kp-link); margin-right: 7px; }
.kp-card-body { padding: 18px 20px; }
.kp-card-body.alt { background: var(--kp-card-alt); border-bottom: 1px solid var(--kp-border); }
.kp-box { background: var(--kp-card); border: 1px solid var(--kp-border); border-radius: 12px; padding: 18px 20px; box-shadow: var(--kp-shadow); margin-bottom: 18px; }

/* ---------- stats ---------- */
.kp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kp-stat { background: var(--kp-card); border: 1px solid var(--kp-border); border-radius: 12px; padding: 14px 16px; }
.kp-stat small { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--kp-muted); }
.kp-stat b { display: block; margin-top: 4px; font-size: 1.25rem; font-weight: 800; color: var(--kp-text); }
.kp-stat span { font-size: .74rem; color: var(--kp-muted); }

/* ---------- tables ---------- */
.kp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kp-table { width: 100%; border-collapse: collapse; font-size: .82rem; color: var(--kp-body); }
.kp-table th { padding: 10px 14px; text-align: left; font-size: .68rem; font-weight: 700; color: var(--kp-muted); text-transform: uppercase; letter-spacing: .4px; background: var(--kp-card-alt); white-space: nowrap; }
.kp-table td { padding: 12px 14px; border-top: 1px solid var(--kp-border); vertical-align: top; }
.kp-table td strong { color: var(--kp-text); }
.kp-empty { padding: 30px 20px; text-align: center; color: var(--kp-muted); font-size: .85rem; }

/* ---------- pills ---------- */
.kp-pill { display: inline-block; padding: 3px 11px; border-radius: 20px; font-size: .68rem; font-weight: 700; line-height: 1.5; background: var(--kp-card-alt); color: var(--kp-muted); }
.kp-pill.ok { background: var(--kp-ok-bg); color: var(--kp-ok); }
.kp-pill.warn { background: var(--kp-warn-bg); color: var(--kp-warn); }
.kp-pill.info { background: var(--kp-info-bg); color: var(--kp-info); }
.kp-pill.danger { background: var(--kp-danger-bg); color: var(--kp-danger); }

/* ---------- forms ---------- */
.kp-label { display: block; font-size: .74rem; font-weight: 700; color: var(--kp-text); margin-bottom: 5px; }
.kp-input, .kp-select, .kp-textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--kp-border); border-radius: 8px; font-size: .86rem; background: var(--kp-field); color: var(--kp-text); box-sizing: border-box; font-family: inherit; }
.kp-input::placeholder, .kp-textarea::placeholder { color: var(--kp-muted); opacity: .85; }
.kp-input:focus, .kp-select:focus, .kp-textarea:focus { outline: 3px solid color-mix(in srgb, var(--kp-primary) 35%, transparent); border-color: var(--kp-primary); }
.kp-file { font-size: .8rem; color: var(--kp-body); max-width: 100%; }
.kp-check { display: flex; gap: 8px; align-items: center; font-size: .8rem; color: var(--kp-body); }
.kp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.kp-field { margin-bottom: 14px; }

/* ---------- buttons ---------- */
.kp-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 8px; border: 1.5px solid transparent; font-size: .8rem; font-weight: 700; cursor: pointer; text-decoration: none; font-family: inherit; line-height: 1.3; }
.kp-btn.primary { background: var(--kp-primary); color: var(--kp-on-primary); }
.kp-btn.primary:hover { filter: brightness(1.08); }
.kp-btn.outline { background: transparent; border-color: var(--kp-link); color: var(--kp-link); }
.kp-btn.outline:hover { background: var(--kp-info-bg); }
.kp-btn.danger { background: transparent; border-color: var(--kp-danger); color: var(--kp-danger); }
.kp-btn.ok { background: transparent; border-color: var(--kp-ok); color: var(--kp-ok); }
.kp-btn.plain { background: var(--kp-card); border-color: var(--kp-border); color: var(--kp-link); }
.kp-btn:focus-visible, .kp-linkbtn:focus-visible { outline: 3px solid color-mix(in srgb, var(--kp-primary) 45%, transparent); outline-offset: 2px; }
.kp-linkbtn { border: 0; background: none; padding: 0; font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; color: var(--kp-muted); }
.kp-linkbtn.danger { color: var(--kp-danger); }
.kp-linkbtn.link { color: var(--kp-link); }
.kp-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- request / waiting blocks ---------- */
.kp-req { border: 1px solid var(--kp-border); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; background: var(--kp-card); }
.kp-req-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.kp-wait { background: var(--kp-wait-bg); border: 1px solid var(--kp-wait-border); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; }
.kp-note { margin-top: 10px; padding: 10px 12px; background: var(--kp-card-alt); border-left: 3px solid var(--kp-primary); border-radius: 6px; font-size: .8rem; color: var(--kp-body); }
.kp-rule { border: 0; border-top: 1px dashed var(--kp-border); margin: 14px 0; }
.kp-files a { color: var(--kp-link); text-decoration: none; font-weight: 600; }
.kp-file-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 5px; font-size: .8rem; }

/* ---------- dashboard strip (waiting for you + investment) ---------- */
.kp-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 0 0 20px; }
.kp-sum h3 { margin: 0 0 12px; font-size: .9rem; font-weight: 800; color: var(--kp-text); }
.kp-sum h3 i { color: var(--kp-link); margin-right: 7px; }
.kp-act { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 10px; text-decoration: none; margin-bottom: 8px; border: 1px solid var(--kp-border); color: var(--kp-text); background: var(--kp-card); }
.kp-act.warn { background: var(--kp-wait-bg); border-color: var(--kp-wait-border); }
.kp-act.danger { background: var(--kp-danger-bg); border-color: color-mix(in srgb, var(--kp-danger) 35%, transparent); }
.kp-act.info { background: color-mix(in srgb, var(--kp-primary) 10%, var(--kp-card)); }
.kp-act strong { font-size: .84rem; color: var(--kp-text); }
.kp-act span { font-size: .76rem; color: var(--kp-muted); }
.kp-act b { color: var(--kp-link); font-size: .78rem; white-space: nowrap; }
.kp-money { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.kp-money small { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--kp-muted); }
.kp-money b { display: block; margin-top: 3px; font-size: 1.05rem; font-weight: 800; color: var(--kp-text); }
.kp-money b.good { color: var(--kp-ok); }
.kp-money b.owed { color: var(--kp-warn); }
.kp-bar { height: 7px; background: var(--kp-card-alt); border: 1px solid var(--kp-border); border-radius: 10px; overflow: hidden; margin-top: 12px; }
.kp-bar div { height: 100%; background: var(--kp-primary); }

/* ---------- agreement paper (NDA, SOW, MSA ...) ----------
   Same design as the PDF. The paper stays white with dark text in BOTH modes, like a printed page. */
.ag-paper-wrap { background: var(--kp-card-alt); border: 1px solid var(--kp-border); border-radius: 16px; padding: clamp(8px, 3vw, 28px); overflow-x: auto; }
.ag-sheet { max-width: 820px; margin: 0 auto; background: #ffffff; color: #1b2433; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 34px rgba(11, 26, 51, .22); font-family: Georgia, 'Times New Roman', serif; font-size: 15px; line-height: 1.65; }
.ag-band { display: flex; align-items: center; gap: 18px; padding: 22px clamp(18px, 4vw, 40px); color: #dbe7fb; background: radial-gradient(120% 160% at 0% 0%, #1f3f93 0%, #11295c 45%, #0a1630 100%); font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
.ag-logo { width: 62px; height: auto; flex: 0 0 auto; display: block; }
.ag-brand { flex: 1 1 auto; min-width: 0; }
.ag-brand strong { display: block; color: #ffffff; font-size: 1.2rem; letter-spacing: 1.8px; font-weight: 800; }
.ag-brand em { display: block; font-style: normal; color: #8fd0ff; font-size: .62rem; letter-spacing: 1.4px; margin-top: 3px; }
.ag-brand span { display: block; color: #b9c8e0; font-size: .74rem; line-height: 1.55; margin-top: 8px; }
.ag-tag { flex: 0 0 auto; border: 1px solid #8fd0ff; color: #8fd0ff; font-size: .62rem; letter-spacing: 1.6px; padding: 5px 11px; }
.ag-accent { height: 4px; background: #1a8fe0; }
.ag-inner { padding: clamp(18px, 4vw, 44px); }
.ag-kind { font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: .7rem; font-weight: 800; letter-spacing: 2.2px; color: #1a6fd0; margin: 2px 0 4px; }
.ag-title { font-size: clamp(1.45rem, 4vw, 2.05rem); line-height: 1.2; color: #0b1a33; margin: 0 0 6px; font-weight: 700; }
.ag-parties { margin: 0 0 18px; color: #475569; font-size: .95rem; }
.ag-ref { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #d5dce8; background: #f3f6fb; margin-bottom: 8px; font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
.ag-ref > div { padding: 9px 14px; border: 1px solid #d5dce8; margin: -1px 0 0 -1px; font-weight: 700; font-size: .86rem; color: #0b1a33; overflow-wrap: anywhere; }
.ag-ref span { display: block; font-weight: 500; font-size: .62rem; letter-spacing: .9px; text-transform: uppercase; color: #5b6778; margin-bottom: 1px; }
.ag-body { margin-top: 14px; }
.ag-body h2 { font-size: 1.12rem; color: #0b1a33; margin: 26px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #d5dce8; font-weight: 700; }
.ag-body h3 { font-size: 1rem; color: #0b1a33; margin: 16px 0 4px; font-weight: 700; }
.ag-body p { margin: 0 0 11px; }
.ag-body ul, .ag-body ol { margin: 0 0 11px; padding-left: 24px; }
.ag-body li { margin-bottom: 4px; }
/* real table layout so the table always spans the full text width; wide tables scroll inside .ag-body on phones */
.ag-body { overflow-x: auto; }
.ag-body table { display: table; width: 100%; min-width: 420px; table-layout: auto; border-collapse: collapse; margin: 10px 0 16px; border: 1px solid #b9c4d6; font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
.ag-body th { background: #0b1a33; color: #ffffff; font-size: .74rem; letter-spacing: .4px; text-align: left; padding: 8px 11px; border: 1px solid #0b1a33; }
.ag-body td { border: 1px solid #c3ccdb; padding: 8px 11px; font-size: .86rem; text-align: left; vertical-align: top; }
.ag-exec { margin-top: 34px; }
.ag-exec-title { font-size: 1.12rem; color: #0b1a33; margin: 0 0 4px; padding-bottom: 4px; border-bottom: 1px solid #d5dce8; }
.ag-exec-note { font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: .75rem; color: #5b6778; margin: 8px 0 14px; line-height: 1.55; }
.ag-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 4%; }
.ag-box { border: 1px solid #b9c4d6; background: #ffffff; min-width: 0; }
.ag-box-head { background: #0b1a33; color: #ffffff; font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: .66rem; letter-spacing: 1.1px; text-transform: uppercase; padding: 8px 12px; overflow-wrap: anywhere; }
.ag-box-body { padding: 12px 14px 14px; }
.ag-sig { font-family: 'Segoe Script', 'Brush Script MT', 'Snell Roundhand', cursive; font-size: 1.75rem; color: #0b1a33; min-height: 46px; line-height: 1.4; overflow-wrap: anywhere; }
.ag-pending { font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: .85rem; color: #5b6778; min-height: 46px; padding-top: 14px; }
.ag-line { border-top: 1px solid #0b1a33; margin: 4px 0 7px; }
.ag-sig-name { font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 700; font-size: .9rem; color: #0b1a33; }
.ag-sig-role { font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: .8rem; color: #475569; }
.ag-sig-meta { font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: .68rem; color: #5b6778; line-height: 1.6; margin-top: 7px; }
.ag-foot { font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; margin: 22px 0 0; font-size: .64rem; color: #5b6778; word-break: break-all; line-height: 1.5; }
.ag-footer { border-top: 1px solid #c9d3e3; padding: 10px clamp(18px, 4vw, 40px); font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: .68rem; color: #5b6778; }
@media (max-width: 640px) {
  .ag-band { flex-wrap: wrap; gap: 12px; }
  .ag-tag { order: 3; }
  .ag-ref { grid-template-columns: 1fr 1fr; }
  .ag-sign { grid-template-columns: 1fr; gap: 14px; }
}
@media print { .ag-paper-wrap { padding: 0; border: 0; background: none; } .ag-sheet { box-shadow: none; } }

/* ---------- messages (client and admin) ---------- */
.kp-thread-row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--kp-border); text-decoration: none; color: var(--kp-body); background: var(--kp-card); }
.kp-thread-row:hover { background: var(--kp-card-alt); }
.kp-thread-row.unread { border-left: 4px solid var(--kp-primary); }
.kp-thread-row strong { color: var(--kp-text); font-size: .92rem; }
.kp-thread-row p { margin: 3px 0 0; font-size: .82rem; color: var(--kp-muted); overflow-wrap: anywhere; }
.kp-chat { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; }
.kp-bubble { max-width: min(640px, 92%); padding: 11px 14px; border-radius: 12px; border: 1px solid var(--kp-border); background: var(--kp-card-alt); color: var(--kp-body); font-size: .88rem; line-height: 1.6; overflow-wrap: anywhere; }
.kp-msg-text { white-space: pre-wrap; }
.kp-bubble.mine { align-self: flex-end; background: var(--kp-info-bg); border-color: color-mix(in srgb, var(--kp-info) 30%, transparent); color: var(--kp-text); }
.kp-bubble small { display: block; margin-top: 6px; font-size: .68rem; color: var(--kp-muted); }
.kp-bubble b { display: block; font-size: .74rem; color: var(--kp-text); margin-bottom: 2px; }
.kp-textarea { min-height: 110px; resize: vertical; font-family: inherit; }

/* filter chips (stay compact on phones) */
.kp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.kp-tabs .kp-btn { flex: 0 0 auto; }

/* ---------- agreement editor and steps ---------- */
.kp-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.kp-steps li { padding: 6px 14px; border-radius: 20px; font-size: .74rem; font-weight: 700; border: 1px solid var(--kp-border); background: var(--kp-card); color: var(--kp-muted); }
.kp-steps li.done { background: var(--kp-ok-bg); color: var(--kp-ok); border-color: transparent; }
.kp-steps li.now { background: var(--kp-info-bg); color: var(--kp-info); border-color: color-mix(in srgb, var(--kp-info) 40%, transparent); }
.kp-choice { display: block; padding: 12px 14px; border: 1.5px solid var(--kp-border); border-radius: 10px; background: var(--kp-card); cursor: pointer; }
.kp-choice input { margin-right: 8px; }
.kp-choice strong { color: var(--kp-text); font-size: .88rem; }
.kp-choice span { display: block; margin: 3px 0 0 22px; font-size: .78rem; color: var(--kp-muted); }
.kp-choice:has(input:checked) { border-color: var(--kp-primary); background: var(--kp-info-bg); }
.kp-ed-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; background: var(--kp-card-alt); border: 1px solid var(--kp-border); border-radius: 8px 8px 0 0; position: sticky; top: 0; z-index: 5; }
.kp-ed-bar button { padding: 6px 10px; border: 1px solid var(--kp-border); border-radius: 6px; background: var(--kp-card); color: var(--kp-text); font-size: .76rem; font-weight: 700; cursor: pointer; }
.kp-ed-bar button:hover { background: var(--kp-info-bg); }
.kp-ed-bar .sep { width: 1px; background: var(--kp-border); margin: 0 2px; }
.kp-ed-area { min-height: 460px; padding: clamp(14px, 3vw, 32px); background: #ffffff; color: #1b2433; border: 1px solid var(--kp-border); border-top: 0; border-radius: 0 0 8px 8px; font-family: Georgia, 'Times New Roman', serif; font-size: 15px; line-height: 1.65; outline: none; }
.kp-ed-area:focus { outline: 3px solid color-mix(in srgb, var(--kp-primary) 35%, transparent); }
.kp-ed-area h2 { font-size: 1.1rem; font-weight: 700; color: #0b1a33; margin: 20px 0 6px; }
.kp-ed-area h3 { font-size: 1rem; font-weight: 700; margin: 14px 0 4px; }
.kp-ed-area p { margin: 0 0 10px; }
.kp-ed-area table { border-collapse: collapse; width: 100%; margin: 8px 0 14px; }
.kp-ed-area th, .kp-ed-area td { border: 1px solid #c3ccdb; padding: 6px 9px; text-align: left; vertical-align: top; min-width: 60px; }
.kp-ed-area th { background: #eef2f8; }
/* input boxes for the parts the team still has to answer, and row buttons */
.kp-ed-area .fill-chip { display: inline-block; vertical-align: baseline; }
.kp-ed-area .fill-chip input, .kp-ed-area .fill-chip textarea { font: inherit; font-size: .92em; color: #0b1a33; background: #fff6d6; border: 1.5px dashed #c58b00; border-radius: 6px; padding: 2px 8px; max-width: 100%; box-sizing: border-box; }
.kp-ed-area .fill-chip input:focus, .kp-ed-area .fill-chip textarea:focus { outline: 3px solid rgba(37, 99, 235, .35); background: #ffffff; border-style: solid; border-color: #2563eb; }
.kp-ed-area .fill-chip input::placeholder, .kp-ed-area .fill-chip textarea::placeholder { color: #7a5a00; opacity: 1; }
.kp-ed-area .fill-chip.long { display: block; margin: 4px 0; }
.kp-ed-area .fill-chip.long textarea { width: 100%; resize: vertical; }
.kp-ed-area .row-ctl { white-space: nowrap; width: 1%; padding: 2px 4px !important; border-style: dashed !important; background: #f3f6fb !important; text-align: center; }
.kp-ed-area li .row-ctl { margin-left: 10px; background: transparent !important; }
.kp-ed-area .row-ctl button { width: 26px; height: 26px; margin: 0 2px; border: 1px solid #b9c4d6; border-radius: 6px; background: #ffffff; color: #1d4ed8; font-size: 15px; line-height: 1; cursor: pointer; }
.kp-ed-area .row-ctl button[data-act="delrow"] { color: #b42318; }
.kp-ed-area .row-ctl button:hover { background: #eef2ff; }
.kp-ed-source { width: 100%; min-height: 460px; font-family: Consolas, Menlo, monospace; font-size: .8rem; }

/* =====================================================================
   PREMIUM LAYER
   A calmer, more polished look for the client portal and the client screens in Admin:
   gradient hero headers, layered cards, rounded controls, soft motion, a messenger-style chat.
   One accent colour (blue). Every colour pair keeps AA contrast in light and dark mode.
   Motion respects "reduce motion".
   ===================================================================== */

:root {
  --kp-grad: linear-gradient(135deg, #1d4ed8 0%, #2563eb 60%, #2f6df0 100%);
  --kp-shadow-1: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px -12px rgba(30, 58, 138, .18);
  --kp-shadow-2: 0 2px 4px rgba(16, 24, 40, .06), 0 18px 40px -18px rgba(30, 58, 138, .32);
  --kp-glass: rgba(255, 255, 255, .72);
  --kp-bubble-them: #ffffff;
  --kp-day: #566176;
}
html[data-theme="dark"] {
  --kp-shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .6);
  --kp-shadow-2: 0 2px 6px rgba(0, 0, 0, .45), 0 22px 44px -18px rgba(0, 0, 0, .7);
  --kp-glass: rgba(30, 41, 59, .72);
  --kp-bubble-them: #243247;
  --kp-day: #a8b5cb;
}

/* page entrance */
@keyframes kp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.kp-page > * { animation: kp-rise .5s cubic-bezier(.2, .7, .2, 1) both; }
.kp-page > *:nth-child(2) { animation-delay: .05s; }
.kp-page > *:nth-child(3) { animation-delay: .1s; }
.kp-page > *:nth-child(4) { animation-delay: .15s; }
.kp-page > *:nth-child(n+5) { animation-delay: .2s; }

/* hero header */
.kp-hero { position: relative; overflow: hidden; border-radius: 22px; padding: clamp(20px, 3.4vw, 34px) clamp(20px, 3.6vw, 38px); margin-bottom: 24px; color: #dbe7fb;
  background: radial-gradient(120% 150% at 0% 0%, #1f3f93 0%, #11295c 42%, #0a1630 100%); box-shadow: var(--kp-shadow-2); isolation: isolate; }
.kp-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 38px 38px; -webkit-mask-image: radial-gradient(90% 120% at 100% 0%, #000, transparent 70%); mask-image: radial-gradient(90% 120% at 100% 0%, #000, transparent 70%); }
.kp-hero::after { content: ''; position: absolute; z-index: -1; width: 340px; height: 340px; right: -90px; top: -150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 160, 255, .55), transparent 68%); filter: blur(8px); }
.kp-hero .kp-crumb, .kp-hero .kp-crumb a { color: #a9c6f5; }
.kp-hero .kp-title { color: #ffffff; font-size: clamp(1.45rem, 3.2vw, 2rem); letter-spacing: -.5px; margin-bottom: 8px; }
.kp-hero .kp-title i { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 12px; font-size: 1rem; color: #cfe2ff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); }
.kp-hero .kp-sub, .kp-hero .kp-muted { color: #c3d4ec; max-width: 70ch; line-height: 1.65; }
.kp-hero .kp-actions { margin-top: 16px; }
.kp-hero strong, .kp-hero b, .kp-hero .kp-strong, .kp-hero a.kp-a { color: #ffffff; }
.kp-hero .kp-btn.primary { background: #ffffff; color: #0b2a6b; box-shadow: none; }
.kp-hero .kp-btn.plain, .kp-hero .kp-btn.outline { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: #ffffff; }
.kp-hero .kp-pill { background: rgba(255, 255, 255, .14); color: #eaf1ff; }

/* cards */
.kp-card, .kp-box, .kp-stat { border-radius: 18px; border-color: color-mix(in srgb, var(--kp-border) 80%, transparent); box-shadow: var(--kp-shadow-1); }
.kp-card-head { border-radius: 18px 18px 0 0; }
.kp-wait { border-radius: 18px; box-shadow: var(--kp-shadow-1); }
.kp-act, a.kp-thread-row, .kp-choice { transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.kp-act:hover { transform: translateY(-1px); box-shadow: var(--kp-shadow-1); }
.kp-stat { transition: transform .2s ease, box-shadow .2s ease; }
.kp-stat:hover { transform: translateY(-2px); box-shadow: var(--kp-shadow-2); }

/* buttons and fields */
.kp-btn { border-radius: 11px; padding: 10px 18px; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease; }
.kp-btn.primary { background: var(--kp-grad); box-shadow: 0 8px 20px -8px rgba(37, 99, 235, .65); }
.kp-btn.primary:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 12px 26px -10px rgba(37, 99, 235, .75); }
.kp-btn:active { transform: translateY(0); }
.kp-input, .kp-select, .kp-textarea { border-radius: 11px; padding: 11px 14px; transition: border-color .15s ease, box-shadow .15s ease; }

/* tables */
.kp-table th { font-size: .68rem; letter-spacing: .8px; text-transform: uppercase; }
.kp-table tbody tr { transition: background .15s ease; }
.kp-table tbody tr:hover { background: color-mix(in srgb, var(--kp-card-alt) 80%, transparent); }
.kp-pill { padding: 4px 12px; letter-spacing: .1px; }

/* =====================================================================
   CHAT (.kc-*): conversation screen
   ===================================================================== */
.kp-chatpage { max-width: 980px; }
.kc-shell { position: relative; display: flex; flex-direction: column; height: clamp(520px, calc(100vh - 150px), 780px); border-radius: 22px; overflow: hidden;
  background: var(--kp-card); border: 1px solid var(--kp-border); box-shadow: var(--kp-shadow-2); }

.kc-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: #e8f0ff; position: relative; z-index: 2;
  background: radial-gradient(130% 220% at 0% 0%, #1f3f93 0%, #11295c 45%, #0a1630 100%); }
.kc-back { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #dbe7fb; background: rgba(255, 255, 255, .1); text-decoration: none; flex: 0 0 auto; transition: background .15s ease; }
.kc-back:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.kc-avatar { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 15px; display: grid; place-items: center; font-weight: 800; font-size: .95rem; color: #fff; letter-spacing: .5px;
  background: linear-gradient(135deg, #2563eb, #7c3aed); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6); }
.kc-who { min-width: 0; flex: 1 1 auto; }
.kc-who h1 { margin: 0; font-size: 1.02rem; font-weight: 800; color: #ffffff; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-who p { margin: 2px 0 0; font-size: .76rem; color: #b6c8e6; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kc-dot { opacity: .6; }
.kc-live { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 2px 9px 2px 8px; border-radius: 20px; font-size: .68rem; font-weight: 700; background: rgba(52, 211, 153, .16); color: #8ff0c8; }
.kc-live i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: kc-pulse 2s infinite; }
.kc-live[data-state="off"] { background: rgba(251, 191, 36, .16); color: #fcd34d; }
.kc-live[data-state="off"] i { background: #fbbf24; animation: none; }
@keyframes kc-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
.kc-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.kc-ghost { padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); color: #ffffff; font-weight: 700; font-size: .78rem; cursor: pointer; transition: background .15s ease; }
.kc-ghost:hover { background: rgba(255, 255, 255, .18); }

/* message area */
.kc-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 18px clamp(12px, 3vw, 26px) 10px; display: flex; flex-direction: column; gap: 3px; scroll-behavior: smooth;
  background:
    radial-gradient(60% 50% at 100% 0%, color-mix(in srgb, var(--kp-primary) 9%, transparent), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, color-mix(in srgb, #7c3aed 7%, transparent), transparent 70%),
    var(--kp-card-alt); }
.kc-day { align-self: center; margin: 14px 0 8px; }
.kc-day span { display: inline-block; padding: 4px 14px; border-radius: 20px; font-size: .68rem; font-weight: 700; letter-spacing: .4px; color: var(--kp-day); background: var(--kp-glass); border: 1px solid var(--kp-border); backdrop-filter: blur(6px); }
.kc-row { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; max-width: 100%; animation: kc-in .28s cubic-bezier(.2, .7, .2, 1) both; }
.kc-row.grouped { margin-top: 2px; }
.kc-row.mine { justify-content: flex-end; }
@keyframes kc-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.kc-mini { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 10px; display: grid; place-items: center; font-size: .64rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); }
.kc-mini.ghost { background: transparent; }
.kc-bub { position: relative; max-width: min(560px, 80%); padding: 9px 13px 6px; border-radius: 18px; font-size: .92rem; line-height: 1.55; overflow-wrap: anywhere; box-shadow: var(--kp-shadow-1); }
.kc-row.them .kc-bub { background: var(--kp-bubble-them); color: var(--kp-text); border: 1px solid var(--kp-border); border-bottom-left-radius: 6px; }
.kc-row.them.grouped .kc-bub { border-top-left-radius: 8px; }
.kc-row.mine .kc-bub { background: var(--kp-grad); color: #ffffff; border-bottom-right-radius: 6px; box-shadow: 0 10px 24px -12px rgba(37, 99, 235, .7); }
.kc-row.mine.grouped .kc-bub { border-top-right-radius: 8px; }
.kc-name { font-size: .72rem; font-weight: 800; color: var(--kp-link); margin-bottom: 1px; }
.kc-text { white-space: pre-wrap; }
.kc-meta { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin-top: 2px; font-size: .64rem; opacity: .8; }
.kc-row.them .kc-meta { color: var(--kp-muted); opacity: 1; }
.kc-row.mine .kc-meta { color: #dbe7ff; opacity: 1; }
.kc-tick { display: inline-flex; color: #c5d6f7; }
.kc-tick.read { color: #8ff0c8; }
.kc-row.pending .kc-bub { opacity: .72; }
.kc-row.failed .kc-bub { background: var(--kp-danger-bg); color: var(--kp-danger); border: 1px solid var(--kp-danger); box-shadow: none; }
.kc-row.failed .kc-meta { color: var(--kp-danger); }
.kc-retry { display: block; margin-top: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: .74rem; font-weight: 800; text-decoration: underline; cursor: pointer; }
.kc-empty { margin: auto; text-align: center; color: var(--kp-muted); display: grid; gap: 4px; padding: 30px 10px; }
.kc-empty strong { color: var(--kp-text); font-size: 1rem; }

.kc-jump { position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 22px; border: 0; cursor: pointer;
  background: var(--kp-grad); color: #fff; font-weight: 700; font-size: .78rem; box-shadow: 0 10px 24px -8px rgba(37, 99, 235, .8); z-index: 3; animation: kc-in .25s ease both; }
.kc-jump[hidden] { display: none; }

/* composer */
.kc-composer { display: flex; align-items: flex-end; gap: 10px; padding: 12px clamp(12px, 3vw, 22px) 6px; background: var(--kp-card); border-top: 1px solid var(--kp-border); }
.kc-composer textarea { flex: 1 1 auto; min-height: 46px; max-height: 170px; resize: none; padding: 12px 16px; border-radius: 24px; border: 1.5px solid var(--kp-border); background: var(--kp-field); color: var(--kp-text); font: inherit; font-size: .92rem; line-height: 1.45; transition: border-color .15s ease, box-shadow .15s ease; }
.kc-composer textarea::placeholder { color: var(--kp-muted); opacity: .9; }
.kc-composer textarea:focus { outline: none; border-color: var(--kp-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kp-primary) 22%, transparent); }
.kc-send { position: relative; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; background: var(--kp-grad);
  box-shadow: 0 10px 22px -8px rgba(37, 99, 235, .75); transition: transform .16s ease, filter .16s ease, opacity .16s ease; }
.kc-send:hover:not(:disabled) { transform: translateY(-1px) scale(1.04); filter: brightness(1.07); }
.kc-send:active:not(:disabled) { transform: scale(.96); }
.kc-send:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.kc-send:focus-visible { outline: 3px solid color-mix(in srgb, var(--kp-primary) 45%, transparent); outline-offset: 2px; }
.kc-spin { display: none; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: kc-turn .7s linear infinite; }
@keyframes kc-turn { to { transform: rotate(360deg); } }
.kc-hint { display: flex; justify-content: space-between; gap: 10px; padding: 2px 24px 12px; font-size: .68rem; color: var(--kp-muted); background: var(--kp-card); }
.kc-hint .bad { color: var(--kp-danger); font-weight: 700; }
.kc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 640px) {
  .kc-shell { height: calc(100vh - 120px); height: calc(100svh - 120px); min-height: 460px; border-radius: 18px; }
  .kc-head { padding: 12px; }
  .kc-avatar { width: 40px; height: 40px; border-radius: 13px; }
  .kc-bub { max-width: 86%; }
  .kc-hint { display: none; }
  .kc-jump { bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .kp-page > *, .kc-row, .kc-jump { animation: none; }
  .kc-live i { animation: none; }
  .kc-body { scroll-behavior: auto; }
}


/* ---------- dashboard polish (#clientPortal) ---------- */
html body #clientPortal .cp-title { font-size: clamp(1.5rem, 3vw, 1.9rem); letter-spacing: -.5px; }
html body #clientPortal .welcome-banner { border-radius: 22px; padding: clamp(22px, 3.4vw, 36px) clamp(22px, 3.6vw, 40px); box-shadow: var(--kp-shadow-2); isolation: isolate;
  background: radial-gradient(120% 160% at 0% 0%, #1f3f93 0%, #11295c 45%, #0a1630 100%); }
html body #clientPortal .welcome-banner::before { background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 38px 38px; opacity: .55; -webkit-mask-image: radial-gradient(90% 120% at 100% 0%, #000, transparent 70%); mask-image: radial-gradient(90% 120% at 100% 0%, #000, transparent 70%); }
html body #clientPortal .welcome-banner::after { right: -80px; top: -140px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(90,160,255,.5), transparent 68%); filter: blur(8px); }
html body #clientPortal .wb-greeting { color: #a9c6f5; letter-spacing: 1.4px; }
html body #clientPortal .wb-name { font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: -.6px; }
html body #clientPortal .wb-sub { color: #c3d4ec; font-size: .9rem; max-width: 60ch; }
html body #clientPortal .stat-card, html body #clientPortal .cp-card, html body #clientPortal .project-card { border-radius: 18px; box-shadow: var(--kp-shadow-1); }
html body #clientPortal .stat-card:hover { box-shadow: var(--kp-shadow-2); }
html body #clientPortal .stat-icon { border-radius: 14px; width: 52px; height: 52px; }
html body #clientPortal .stat-val { font-size: 1.9rem; letter-spacing: -.5px; }
html body #clientPortal .btn-cp { border-radius: 11px; }
html body #clientPortal .btn-cp.btn-primary { background: var(--kp-grad); box-shadow: 0 8px 20px -8px rgba(37, 99, 235, .65); }

/* "Built by Kawach" card */
.kp-showcase { position: relative; overflow: hidden; border-radius: 18px; padding: 22px 22px 20px; margin-bottom: 18px; color: #dbe7fb; isolation: isolate; box-shadow: var(--kp-shadow-2);
  background: radial-gradient(130% 150% at 0% 0%, #2a2f9e 0%, #14226b 45%, #0a1630 100%); }
.kp-showcase::after { content: ''; position: absolute; z-index: -1; right: -70px; bottom: -90px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 58, 237, .55), transparent 68%); }
.kp-showcase-badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 20px; font-size: .68rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #cfe2ff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); }
.kp-showcase h3 { margin: 12px 0 6px; font-size: 1.05rem; font-weight: 800; color: #ffffff; letter-spacing: -.2px; }
.kp-showcase p { margin: 0 0 14px; font-size: .82rem; line-height: 1.65; color: #c3d4ec; }
.kp-showcase-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 11px; background: #ffffff; color: #0b2a6b; font-weight: 800; font-size: .8rem; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.kp-showcase-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .6); color: #0b2a6b; }


/* =====================================================================
   COLLAPSIBLE SIDEBAR (desktop). html.sb-collapsed shrinks the menu to icons.
   The width variable drives the top bar and the page margin, so everything follows.
   ===================================================================== */
.sidebar { transition: transform .3s cubic-bezier(.4, 0, .2, 1), width .25s ease; }
.sb-collapse { position: absolute; top: 22px; right: -14px; z-index: 5; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); cursor: pointer;
  display: grid; place-items: center; color: #ffffff; background: #1f3f93; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); transition: transform .25s ease, background .15s ease; }
.sb-collapse:hover { background: #2563eb; }
.sb-collapse:focus-visible { outline: 3px solid #9ed4ff; outline-offset: 2px; }
.brand-short { display: none; }

@media (min-width: 992px) {
  html.sb-collapsed { --sidebar-width: 76px; }
  html.sb-collapsed .sb-collapse { transform: rotate(180deg); }
  html.sb-collapsed .sidebar-brand { padding: 18px 0 14px; text-align: center; }
  html.sb-collapsed .brand-main, html.sb-collapsed .brand-sub { display: none; }
  html.sb-collapsed .brand-short { display: block; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.5rem; color: #ffffff; line-height: 1.5; }
  html.sb-collapsed .nav-link-item { font-size: 0; justify-content: center; gap: 0; padding: 12px 0; }
  html.sb-collapsed .nav-link-item i { font-size: 1.1rem; width: auto; margin: 0; }
  html.sb-collapsed .nav-link-item.active { margin: 2px 10px; padding: 12px 0; }
  html.sb-collapsed .nav-link-item .nav-arrow, html.sb-collapsed .nav-submenu { display: none !important; }
  /* unread badges become small dots on the corner of the icon */
  html.sb-collapsed .nav-link-item > span { position: absolute; top: 4px; right: 12px; margin: 0 !important; padding: 1px 5px !important; font-size: .6rem !important; }
  html.sb-collapsed .btn-logout { font-size: 0; justify-content: center; gap: 0; padding: 10px 0; }
  html.sb-collapsed .btn-logout i { font-size: 1rem; }
}
@media (max-width: 991px) { .sb-collapse { display: none; } }
@media (prefers-reduced-motion: reduce) { .sidebar, .sb-collapse { transition: none; } }


/* =====================================================================
   READABILITY OVERRIDES (light and dark)
   The older client pages (dashboard, approvals, designs, bugs, change requests, billing) each
   carried their own pale status pills and bright buttons. These rules give every one of them an
   AA contrast pair in light mode and a calm tinted pair in dark mode. Checked with an automated
   contrast audit of every page in both modes.
   ===================================================================== */

/* status and priority pills */
html body .status-badge.badge-active, html body .status-badge.pri-low, html body .inv-badge.inv-paid, html body .badge-active:not(.nav-link-item) { background: #d4f5ec !important; color: #05603a !important; }
html body .status-badge.badge-onhold, html body .status-badge.pri-urgent, html body .inv-badge.inv-overdue, html body .badge-onhold { background: #ffe2e8 !important; color: #b42318 !important; }
html body .status-badge.badge-review, html body .status-badge.pri-high, html body .inv-badge.inv-due, html body .badge-review { background: #fff4d6 !important; color: #7a4a00 !important; }
html body .status-badge.badge-inprogress, html body .status-badge.pri-medium, html body .badge-inprogress { background: #e4eeff !important; color: #1e40af !important; }
html body .status-badge.badge-completed, html body .badge-completed { background: #e6ebf3 !important; color: #3d4a63 !important; }
html[data-theme="dark"] body .status-badge.badge-active, html[data-theme="dark"] body .status-badge.pri-low, html[data-theme="dark"] body .inv-badge.inv-paid, html[data-theme="dark"] body .badge-active:not(.nav-link-item) { background: rgba(52, 211, 153, .16) !important; color: #7ee8bd !important; }
html[data-theme="dark"] body .status-badge.badge-onhold, html[data-theme="dark"] body .status-badge.pri-urgent, html[data-theme="dark"] body .inv-badge.inv-overdue, html[data-theme="dark"] body .badge-onhold { background: rgba(248, 113, 113, .16) !important; color: #fecaca !important; }
html[data-theme="dark"] body .status-badge.badge-review, html[data-theme="dark"] body .status-badge.pri-high, html[data-theme="dark"] body .inv-badge.inv-due, html[data-theme="dark"] body .badge-review { background: rgba(251, 191, 36, .16) !important; color: #fcd34d !important; }
html[data-theme="dark"] body .status-badge.badge-inprogress, html[data-theme="dark"] body .status-badge.pri-medium, html[data-theme="dark"] body .badge-inprogress { background: rgba(96, 165, 250, .18) !important; color: #c2d8ff !important; }
html[data-theme="dark"] body .status-badge.badge-completed, html[data-theme="dark"] body .badge-completed { background: rgba(148, 163, 184, .18) !important; color: #d3dbe8 !important; }

/* action buttons */
html body .btn-cp.btn-success { background: #047857 !important; border-color: #047857 !important; color: #ffffff !important; }
html body .btn-cp.btn-danger, html body summary.btn-cp.btn-danger { background: #c81e45 !important; border-color: #c81e45 !important; color: #ffffff !important; }
html body .btn-cp.btn-primary { color: #ffffff !important; }
html[data-theme="dark"] body .btn-cp.btn-outline, html[data-theme="dark"] body summary.btn-cp.btn-outline { color: #9bbcff !important; border-color: #4a6fb5 !important; }

/* links in breadcrumbs and small text links */
html body [class*="breadcrumb"] a, html body .cp-back, html body .cp-link { color: #1558c0; }
html[data-theme="dark"] body [class*="breadcrumb"] a, html[data-theme="dark"] body .cp-back, html[data-theme="dark"] body .cp-link { color: #8ab4ff; }
html[data-theme="dark"] body #clientPortal a:not(.btn-cp):not(.kp-showcase-cta):not(.nav-link-item) { color: #9bbcff; }

/* notification counters on the top bar */
html body .badge-dot.badge-red { background: #d1264a; color: #ffffff; }
html body .badge-dot.badge-blue { background: #1558c0; color: #ffffff; }

/* rating stars that are not chosen yet */
html body .rating-stars .star { color: #75839c; }
html body .rating-stars .star.active { color: #d98a00; }
html[data-theme="dark"] body .rating-stars .star { color: #8b9ab3; }
html[data-theme="dark"] body .rating-stars .star.active { color: #fbbf24; }


/* approvals page: plain status pill, inline form toggles, breadcrumb and profile links */
html body #clientApprovals .status-badge:not([class*="badge-"]) { background: #fff4d6 !important; color: #7a4a00 !important; }
html[data-theme="dark"] body #clientApprovals .status-badge:not([class*="badge-"]) { background: rgba(251, 191, 36, .16) !important; color: #fcd34d !important; }
html[data-theme="dark"] body #clientApprovals details.inline-form summary:not(.btn-danger) { color: #9bbcff !important; }
html body .cp-breadcrumb a, html body [class*="breadcrumb"] a, html body .profile-note a, html body .profile-card a { color: #1558c0 !important; }
html[data-theme="dark"] body .cp-breadcrumb a, html[data-theme="dark"] body [class*="breadcrumb"] a, html[data-theme="dark"] body .profile-note a, html[data-theme="dark"] body .profile-card a { color: #8ab4ff !important; }
html[data-theme="dark"] body #clientPortal .cp-breadcrumb a, html[data-theme="dark"] body .cp-topbar a:not(.btn-cp) { color: #8ab4ff; }


/* ---------- modal dialog (.kp-modal): opens in the browser's top layer, so nothing can cover it ---------- */
.kp-modal { width: min(540px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--kp-border); border-radius: 20px; background: var(--kp-card); color: var(--kp-body); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55); overflow: hidden; }
.kp-modal[open] { display: flex; flex-direction: column; animation: kp-rise .25s ease both; margin: auto; }
.kp-modal::backdrop { background: rgba(8, 16, 36, .62); backdrop-filter: blur(3px); }
.kp-modal form { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 34px); }
.kp-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; color: #e8f0ff; background: radial-gradient(130% 220% at 0% 0%, #1f3f93 0%, #11295c 45%, #0a1630 100%); }
.kp-modal-head h2 { margin: 0; font-size: 1rem; font-weight: 800; color: #ffffff; }
.kp-modal-x { width: 34px; height: 34px; border-radius: 10px; border: 0; cursor: pointer; font-size: 1.4rem; line-height: 1; color: #ffffff; background: rgba(255, 255, 255, .12); }
.kp-modal-x:hover { background: rgba(255, 255, 255, .24); }
.kp-modal-body { padding: 20px; overflow-y: auto; }
.kp-modal-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--kp-border); background: var(--kp-card-alt); }
@media (max-width: 480px) { .kp-modal-foot .kp-btn { flex: 1 1 100%; justify-content: center; } }


/* ---------- chat on phones (iPhone Safari and Android Chrome) ----------
   The conversation is pinned under the top bar and sized to the VISIBLE area (portal-chat.js sets
   --kc-top and --kc-h from the visual viewport), so the keyboard shrinks the chat instead of
   pushing the whole page up. The text box is 16px: smaller text makes iOS zoom into it. */
@media (max-width: 767px) {
  html.kc-chat-open, html.kc-chat-open body { overflow: hidden; overscroll-behavior: none; }
  .kp-chatpage { padding: 0; max-width: none; }
  /* the "message sent" notice fades away by itself and never blocks the conversation */
  .kp-chatpage > .kp-alert { position: fixed; left: 10px; right: 10px; bottom: 96px; top: auto; z-index: 60; margin: 0; pointer-events: none; box-shadow: var(--kp-shadow-2); animation: kc-flash 4.2s ease forwards; }
  .kp-chatpage .kc-shell { position: fixed; left: 0; right: 0; top: var(--kc-top, var(--navbar-h, 70px)); height: var(--kc-h, calc(100vh - var(--navbar-h, 70px))); min-height: 0; max-height: none;
    border-radius: 0; border-left: 0; border-right: 0; z-index: 50; box-shadow: none; }
  .kc-composer textarea { font-size: 16px; }
  .kc-composer { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}


/* =====================================================================
   ADMIN CLIENT SCREENS (.kx-*): attention strip, client list, workspace, project files
   ===================================================================== */
.kp-progress { background: var(--kp-card-alt); border: 1px solid var(--kp-border); border-radius: 10px; height: 8px; overflow: hidden; min-width: 90px; }
.kp-progress div { height: 100%; background: var(--kp-grad); }

/* "Needs your attention" strip */
.kx-attn { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 18px; margin-bottom: 18px; border-radius: 16px; border: 1px solid var(--kp-border); background: var(--kp-card); box-shadow: var(--kp-shadow-1); }
.kx-attn.has { background: var(--kp-wait-bg); border-color: var(--kp-wait-border); }
.kx-attn-title { font-weight: 800; font-size: .86rem; color: var(--kp-text); display: flex; align-items: center; gap: 8px; }
.kx-attn-title.ok { color: var(--kp-ok); font-weight: 700; }
.kx-attn.has .kx-attn-title i { color: var(--kp-warn); }
.kx-attn-items { display: flex; gap: 8px; flex-wrap: wrap; }
.kx-attn-items a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 20px; font-size: .78rem; font-weight: 600; text-decoration: none; color: var(--kp-text); background: var(--kp-card); border: 1px solid var(--kp-border); transition: transform .15s ease, box-shadow .15s ease; }
.kx-attn-items a:hover { transform: translateY(-1px); box-shadow: var(--kp-shadow-1); }
.kx-attn-items a i { color: var(--kp-link); }

/* chips */
.kx-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.kx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 20px; font-size: .72rem; font-weight: 700; text-decoration: none; background: var(--kp-info-bg); color: var(--kp-info); white-space: nowrap; }
.kx-chip.up { background: var(--kp-info-bg); color: var(--kp-info); }
.kx-chip.msg { background: var(--kp-ok-bg); color: var(--kp-ok); }
.kx-chip.req { background: var(--kp-warn-bg); color: var(--kp-warn); }
.kx-chip.agr { background: var(--kp-danger-bg); color: var(--kp-danger); }
.kp-hero .kx-chip { background: rgba(255, 255, 255, .16); color: #ffffff; }

/* client list */
.kx-table td { vertical-align: middle; }
.kx-right { text-align: right; }
.kx-hot td:first-child { box-shadow: inset 4px 0 0 var(--kp-primary); }
.kx-person { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.kx-person strong { display: block; color: var(--kp-text); font-size: .92rem; }
.kx-person small { display: block; color: var(--kp-muted); font-size: .74rem; overflow-wrap: anywhere; }
.kx-av { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: #ffffff; font-weight: 800; font-size: .85rem; letter-spacing: .3px; }
.kx-av.big { width: 64px; height: 64px; border-radius: 20px; font-size: 1.15rem; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
.kx-proj { display: block; font-size: .8rem; font-weight: 700; color: var(--kp-link); text-decoration: none; margin-bottom: 3px; }
.kx-proj i { font-style: normal; font-weight: 500; color: var(--kp-muted); font-size: .68rem; text-transform: uppercase; margin-left: 5px; }
.kx-actions { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.kp-btn.kx-sm { padding: 6px 12px; font-size: .74rem; border-radius: 9px; }

/* workspace hero and jump bar */
.kx-herorow { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.kx-heroinfo { flex: 1 1 320px; min-width: 0; }
.kx-heroactions { margin-top: 0 !important; }
.kx-tabs { position: sticky; top: 74px; z-index: 40; display: flex; gap: 6px; overflow-x: auto; padding: 8px; margin: -8px 0 18px; border-radius: 14px; background: var(--kp-glass); border: 1px solid var(--kp-border); backdrop-filter: blur(10px); box-shadow: var(--kp-shadow-1); scrollbar-width: none; }
.kx-tabs::-webkit-scrollbar { display: none; }
.kx-tabs a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 10px; font-size: .78rem; font-weight: 700; text-decoration: none; color: var(--kp-body); transition: background .15s ease; }
.kx-tabs a:hover { background: var(--kp-info-bg); color: var(--kp-text); }
.kx-tabs a i { color: var(--kp-link); }
.kx-tabs em { font-style: normal; font-size: .68rem; font-weight: 800; padding: 1px 8px; border-radius: 10px; background: var(--kp-card-alt); color: var(--kp-muted); }
.kx-tabs em.hot { background: var(--kp-primary); color: #ffffff; }
section[id] { scroll-margin-top: 140px; }

/* files the client sent */
.kx-new { border-color: color-mix(in srgb, var(--kp-primary) 45%, var(--kp-border)); }
.kx-file { display: flex; align-items: center; gap: 14px; padding: 13px 20px; border-bottom: 1px solid var(--kp-border); }
.kx-file:last-child { border-bottom: 0; }
.kx-fileicon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--kp-info-bg); color: var(--kp-info); }
.kx-fileinfo { flex: 1 1 auto; min-width: 0; }
.kx-fileinfo a strong { color: var(--kp-text); overflow-wrap: anywhere; }
.kx-fileinfo small { display: block; color: var(--kp-muted); font-size: .74rem; line-height: 1.5; }
.kx-fileactions { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.kx-fileactions form { display: inline; }

/* project cards */
.kx-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; padding: 18px 20px; }
.kx-project { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; border: 1px solid var(--kp-border); background: var(--kp-card-alt); transition: transform .18s ease, box-shadow .18s ease; }
.kx-project:hover { transform: translateY(-2px); box-shadow: var(--kp-shadow-2); }
.kx-project.hot { border-color: var(--kp-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kp-primary) 18%, transparent); }
.kx-project header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.kx-project header strong { display: block; color: var(--kp-text); font-size: .95rem; }
.kx-project header small { color: var(--kp-muted); font-size: .74rem; }
.kx-projmeta { display: flex; justify-content: space-between; gap: 8px; font-size: .74rem; color: var(--kp-muted); }
.kx-project footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.kx-project footer span { font-size: .72rem; }

/* plain fields on the older admin forms follow the light/dark theme too */
.kp-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]), .kp-page select, .kp-page textarea { background-color: var(--kp-field); color: var(--kp-text); }
@media (min-width: 900px) { .kx-actions { flex-wrap: nowrap; } }

@media (max-width: 640px) {
  .kx-tabs { top: 70px; }
  .kx-file { flex-wrap: wrap; }
  .kx-fileactions { width: 100%; }
  .kx-heroactions .kp-btn { flex: 1 1 auto; justify-content: center; }
  .kx-table thead { display: none; }
  .kx-table, .kx-table tbody, .kx-table tr, .kx-table td { display: block; width: 100%; }
  .kx-table tr { padding: 14px 16px; border-bottom: 1px solid var(--kp-border); }
  .kx-table td { padding: 6px 0; border: 0; }
  .kx-right { text-align: left; }
  .kx-actions { justify-content: flex-start; }
  /* cells that carry a data-label show it above their content (used by the Countries & Currencies lists) */
  .kx-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: .66rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--kp-muted); }
  .kx-table td[data-label=""]::before { display: none; }
  .kx-table td .kp-input, .kx-table td .kp-select { width: 100%; }
  /* Support Hours work list on phones: Date, work and hours only, so nothing needs a sideways swipe */
  .sh-tbl { min-width: 0 !important; }
  .sh-tbl th:nth-child(3), .sh-tbl td:nth-child(3) { display: none; }
  /* Admin tables on phones: keep the columns that matter (amount, hours, actions) on screen without a sideways swipe */
  .pay-tbl, .sh-tbl-admin, .mp-terms { min-width: 0 !important; }
  .pay-tbl th:nth-child(3), .pay-tbl td:nth-child(3) { display: none; }
  .sh-tbl-admin th:nth-child(4), .sh-tbl-admin td:nth-child(4), .sh-tbl-admin th:nth-child(5), .sh-tbl-admin td:nth-child(5) { display: none; }
  .mp-terms th:nth-child(1), .mp-terms td:nth-child(1), .mp-terms th:nth-child(5), .mp-terms td:nth-child(5) { display: none; }
  .pay-tbl td, .sh-tbl-admin td, .mp-terms td { padding-left: 10px; padding-right: 10px; }
}


/* ---------- top bar search results (client portal) ---------- */
.kp-search-panel { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 500; min-width: min(380px, 92vw); max-height: 70vh; overflow-y: auto; border-radius: 14px; border: 1px solid var(--kp-border); background: var(--kp-card); color: var(--kp-body); box-shadow: var(--kp-shadow-2); padding: 6px; }
.kp-search-panel[hidden] { display: none; }
.kp-search-group { padding: 8px 10px 4px; font-size: .66rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--kp-muted); }
.kp-search-item { display: block; padding: 8px 10px; border-radius: 9px; text-decoration: none; color: var(--kp-text); }
.kp-search-item:hover, .kp-search-item:focus { background: var(--kp-info-bg); outline: none; }
.kp-search-item strong { display: block; font-size: .86rem; overflow-wrap: anywhere; }
.kp-search-item small { display: block; font-size: .74rem; color: var(--kp-muted); overflow-wrap: anywhere; }
.kp-search-none { padding: 14px; text-align: center; color: var(--kp-muted); font-size: .84rem; }

html body #clientPortal .activity-item, html body #clientPortal .activity-content { min-width: 0; overflow-wrap: anywhere; }

/* tables on phones: always scroll sideways instead of being cut off */
.kp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kp-scroll > table { min-width: 560px; }
.kp-scroll > .kx-table { min-width: 0; }
@media (max-width: 640px) { .kp-scroll > .kx-table { min-width: 0; } }

/* phase editor rows on the project page */
.kx-phase { display: grid; grid-template-columns: 28px minmax(0, 1fr) 150px auto auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.kx-phase-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--kp-info-bg); color: var(--kp-info); font-size: .72rem; font-weight: 800; }
@media (max-width: 640px) { .kx-phase { grid-template-columns: 28px minmax(0, 1fr) auto auto auto; } .kx-phase select { grid-column: 2 / -1; } }


/* =====================================================================
   CLIENT GUIDE (.gd-*): picture-by-picture tour. The drawings are plain HTML and CSS and use the
   portal colour tokens, so they follow light and dark mode.
   ===================================================================== */
.gd-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 20px; }
.gd-q { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--kp-card); border: 1px solid var(--kp-border); box-shadow: var(--kp-shadow-1); }
.gd-q b { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--kp-grad); color: #fff; font-size: .9rem; }
.gd-q strong { display: block; color: var(--kp-text); font-size: .86rem; }
.gd-q small { color: var(--kp-muted); font-size: .76rem; }
.gd-intro-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 26px; align-items: center; }
.gd-bullets { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; font-size: .84rem; color: var(--kp-body); }
.gd-bullets li { display: flex; gap: 10px; align-items: flex-start; }
.gd-bullets i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--kp-info-bg); color: var(--kp-info); font-size: .75rem; flex: 0 0 auto; }
.gd-nav { top: 74px; }

.gd-topic { padding: 0; overflow: hidden; }
.gd-topic-head { display: flex; gap: 16px; align-items: flex-start; padding: 20px 24px 6px; }
.gd-badge { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.3rem; color: #fff; background: var(--kp-grad); box-shadow: 0 10px 22px -10px rgba(37, 99, 235, .8); }
.gd-topic-head small { color: var(--kp-muted); font-size: .72rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.gd-topic-head h2 { margin: 2px 0 4px; font-size: 1.2rem; font-weight: 800; color: var(--kp-text); letter-spacing: -.3px; }
.gd-topic-head p { margin: 0; color: var(--kp-body); font-size: .9rem; line-height: 1.6; max-width: 70ch; }
.gd-topic-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; padding: 18px 24px 24px; align-items: start; }
.gd-visual { min-width: 0; }
.gd-how { min-width: 0; }
.gd-steps { list-style: none; counter-reset: gd; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.gd-steps li { counter-increment: gd; position: relative; padding: 0 0 0 38px; font-size: .88rem; line-height: 1.6; color: var(--kp-body); }
.gd-steps li::before { content: counter(gd); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 800; background: var(--kp-info-bg); color: var(--kp-info); }
.gd-tip { display: flex; gap: 10px; padding: 12px 14px; margin-bottom: 16px; border-radius: 12px; background: var(--kp-wait-bg); border: 1px solid var(--kp-wait-border); font-size: .82rem; color: var(--kp-body); }
.gd-tip i { color: var(--kp-warn); margin-top: 3px; }
.gd-tip p { margin: 0 0 4px; line-height: 1.55; }
.gd-help { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* mock screens */
.gd-mock { position: relative; border-radius: 16px; border: 1px solid var(--kp-border); background: var(--kp-card); box-shadow: var(--kp-shadow-2); overflow: hidden; font-size: .76rem; color: var(--kp-body); pointer-events: none; user-select: none; }
.gd-chrome { display: flex; gap: 6px; padding: 9px 12px; background: var(--kp-card-alt); border-bottom: 1px solid var(--kp-border); }
.gd-chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--kp-border); }
.gd-chrome i:first-child { background: #f87171; } .gd-chrome i:nth-child(2) { background: #fbbf24; } .gd-chrome i:nth-child(3) { background: #34d399; }
.gd-body { padding: 14px; display: grid; gap: 10px; background: var(--kp-card-alt); }
.gd-card { padding: 12px; border-radius: 12px; background: var(--kp-card); border: 1px solid var(--kp-border); display: grid; gap: 8px; }
.gd-card.warn { background: var(--kp-wait-bg); border-color: var(--kp-wait-border); }
.gd-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.gd-row strong, .gd-card strong { color: var(--kp-text); }
.gd-pill { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .66rem; font-weight: 700; background: var(--kp-card-alt); color: var(--kp-muted); border: 1px solid var(--kp-border); font-style: normal; }
.gd-pill.ok { background: var(--kp-ok-bg); color: var(--kp-ok); border-color: transparent; }
.gd-pill.warn { background: var(--kp-warn-bg); color: var(--kp-warn); border-color: transparent; }
.gd-pill.info { background: var(--kp-info-bg); color: var(--kp-info); border-color: transparent; }
.gd-btn { display: inline-block; padding: 6px 12px; border-radius: 8px; font-weight: 700; font-size: .72rem; background: var(--kp-grad); color: #fff; }
.gd-btn.sm { padding: 4px 10px; font-size: .68rem; }
.gd-btn.ok { background: #047857; } .gd-btn.danger { background: #c81e45; }
.gd-btn.ghost { background: transparent; color: var(--kp-link); border: 1px solid var(--kp-border); }
.gd-btn.locked { opacity: .55; }
.gd-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.gd-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.gd-flow em { font-style: normal; color: var(--kp-muted); font-weight: 800; }
.gd-bar { height: 7px; border-radius: 8px; background: var(--kp-card-alt); border: 1px solid var(--kp-border); overflow: hidden; }
.gd-bar i { display: block; height: 100%; background: var(--kp-grad); }
.gd-phases { display: flex; gap: 4px; }
.gd-phases span { flex: 1; text-align: center; padding: 4px 2px; font-size: .6rem; font-weight: 700; border-radius: 6px; background: var(--kp-card-alt); color: var(--kp-muted); border: 1px solid var(--kp-border); }
.gd-phases .done { background: var(--kp-ok-bg); color: var(--kp-ok); border-color: transparent; }
.gd-phases .now { background: var(--kp-primary); color: #fff; border-color: transparent; }
.gd-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gd-tiles div { padding: 8px; border-radius: 10px; background: var(--kp-card); border: 1px solid var(--kp-border); text-align: center; }
.gd-tiles b { display: block; font-size: 1.05rem; color: var(--kp-text); }
.gd-tiles small { color: var(--kp-muted); font-size: .62rem; }
.gd-tiles .hot { background: var(--kp-wait-bg); border-color: var(--kp-wait-border); }
.gd-call { position: absolute; padding: 3px 9px; border-radius: 20px; font-size: .64rem; font-weight: 800; background: #0b1a33; color: #fff; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6); white-space: nowrap; }
.gd-call::before { content: ''; position: absolute; left: 14px; top: -4px; width: 8px; height: 8px; background: inherit; transform: rotate(45deg); }
.gd-call.c1 { right: 14px; top: 62px; } .gd-call.c2 { right: 14px; bottom: 14px; } .gd-call.c3 { right: 16px; bottom: 56px; } .gd-call.c4 { right: 16px; bottom: 12px; }
.gd-cap { padding: 8px 12px; text-align: center; font-size: .7rem; font-weight: 700; color: var(--kp-muted); background: var(--kp-card); border-top: 1px solid var(--kp-border); }
.gd-chat { gap: 6px; }
.gd-day { justify-self: center; padding: 1px 10px; border-radius: 20px; font-size: .6rem; background: var(--kp-card); border: 1px solid var(--kp-border); color: var(--kp-muted); }
.gd-bubble { max-width: 78%; padding: 7px 10px; border-radius: 14px; line-height: 1.45; font-size: .74rem; }
.gd-bubble b { display: block; color: var(--kp-link); font-size: .64rem; }
.gd-bubble small { display: block; text-align: right; font-size: .58rem; opacity: .8; }
.gd-bubble.them { background: var(--kp-card); border: 1px solid var(--kp-border); border-bottom-left-radius: 4px; color: var(--kp-text); }
.gd-bubble.me { justify-self: end; background: var(--kp-grad); color: #fff; border-bottom-right-radius: 4px; }
.gd-tick { color: #8ff0c8; font-weight: 800; }
.gd-composer { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 20px; background: var(--kp-card); border: 1px solid var(--kp-border); color: var(--kp-muted); margin-top: 4px; }
.gd-send { width: 22px; height: 22px; border-radius: 50%; background: var(--kp-grad); display: block; }
.gd-doc { padding: 12px; border-radius: 6px; background: #fff; color: #1b2433; border: 1px solid #d5dce8; display: grid; gap: 6px; }
.gd-doc-h { font-weight: 800; color: #0b1a33; font-size: .82rem; }
.gd-doc i { display: block; height: 6px; border-radius: 3px; background: #dbe2ee; } .gd-doc i.s { width: 60%; }
.gd-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.gd-sign div { padding: 6px 8px; border: 1px solid #b9c4d6; } .gd-sign small { display: block; font-size: .56rem; text-transform: uppercase; color: #5b6778; }
.gd-sign .sig { font-family: 'Segoe Script', 'Brush Script MT', cursive; font-size: .95rem; color: #0b1a33; } .gd-sign .sig.dim { color: #94a3b8; font-family: inherit; font-size: .7rem; }
.gd-sign .you { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, .25); }
.gd-drop { padding: 12px; border: 2px dashed var(--kp-border); border-radius: 10px; text-align: center; background: var(--kp-card-alt); }
.gd-drop b { display: block; color: var(--kp-link); } .gd-drop small { color: var(--kp-muted); font-size: .64rem; }
.gd-file { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--kp-card-alt); border: 1px solid var(--kp-border); }
.gd-file .ic { width: 16px; height: 16px; border-radius: 4px; background: var(--kp-info-bg); border: 1px solid var(--kp-border); } .gd-file .gd-pill { margin-left: auto; }
.gd-thumb { height: 54px; border-radius: 8px; background: linear-gradient(135deg, var(--kp-info-bg), var(--kp-card-alt)); border: 1px solid var(--kp-border); }
.gd-design { grid-template-columns: 1.5fr 1fr; align-items: start; }
.gd-canvas { position: relative; min-height: 170px; border-radius: 10px; background: #fff; border: 1px solid #d5dce8; overflow: hidden; padding: 10px; }
.gd-nav { display: flex; gap: 6px; align-items: center; } .gd-nav i { width: 28px; height: 6px; border-radius: 3px; background: #dbe2ee; } .gd-nav span { margin-left: auto; width: 34px; height: 10px; border-radius: 5px; background: #2563eb; }
.gd-hero2 { margin-top: 16px; display: grid; gap: 6px; justify-items: start; } .gd-hero2 b { width: 70%; height: 12px; border-radius: 4px; background: #0b1a33; } .gd-hero2 i { width: 90%; height: 6px; border-radius: 3px; background: #dbe2ee; } .gd-hero2 i.s { width: 55%; }
.gd-pin { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #2563eb; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .66rem; line-height: 1; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(37, 99, 235, .55); }
.gd-pin.on { background: #d97706; }
.gd-cursor { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #d97706; background: rgba(217, 119, 6, .18); transform: translate(-50%, -50%); }
.gd-side { display: grid; gap: 6px; }
.gd-note { display: flex; gap: 6px; align-items: flex-start; padding: 6px 8px; border-radius: 8px; background: var(--kp-card); border: 1px solid var(--kp-border); font-size: .66rem; line-height: 1.35; color: var(--kp-text); }
.gd-note b { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; background: #2563eb; color: #fff; display: grid; place-items: center; font-size: .58rem; }
.gd-note.new { border-color: #d97706; } .gd-note.new b { background: #d97706; }
.gd-steps4 { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 4px; align-items: stretch; }
.gd-steps4 > div { padding: 8px; border-radius: 10px; background: var(--kp-card); border: 1px solid var(--kp-border); display: grid; gap: 2px; align-content: start; text-align: center; }
.gd-steps4 > div.now { border-color: var(--kp-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--kp-primary) 22%, transparent); }
.gd-steps4 b { justify-self: center; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--kp-info-bg); color: var(--kp-info); font-size: .64rem; }
.gd-steps4 strong { font-size: .68rem; } .gd-steps4 small { font-size: .6rem; color: var(--kp-muted); line-height: 1.35; }
.gd-steps4 em { align-self: center; font-style: normal; color: var(--kp-muted); font-weight: 800; }
.gd-note-line { text-align: center; font-weight: 700; color: var(--kp-ok); font-size: .72rem; }
.gd-field { display: grid; gap: 2px; } .gd-field small { color: var(--kp-muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .4px; } .gd-field span { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--kp-border); background: var(--kp-card-alt); color: var(--kp-text); }
.gd-table { border-radius: 10px; overflow: hidden; border: 1px solid var(--kp-border); background: var(--kp-card); }
.gd-table > div { display: grid; grid-template-columns: 1fr 1.2fr .9fr .7fr; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--kp-border); align-items: center; }
.gd-table > div:last-child { border-bottom: 0; } .gd-table .th { background: var(--kp-card-alt); font-size: .6rem; text-transform: uppercase; letter-spacing: .5px; color: var(--kp-muted); font-weight: 800; }
.gd-lock { width: 38px; height: 38px; border-radius: 12px; background: var(--kp-info-bg); display: grid; place-items: center; } .gd-lock i { width: 14px; height: 11px; border-radius: 3px; background: var(--kp-info); position: relative; display: block; } .gd-lock i::before { content: ''; position: absolute; left: 2px; top: -8px; width: 6px; height: 7px; border: 2px solid var(--kp-info); border-bottom: 0; border-radius: 6px 6px 0 0; }
.gd-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; } .gd-rules li { color: var(--kp-body); } .gd-rules li::before { content: '\2713'; color: var(--kp-ok); font-weight: 800; margin-right: 6px; }

/* the picture of the client's own menu */
.gd-menu { border-radius: 16px; border: 1px solid var(--kp-border); overflow: hidden; background: var(--kp-card-alt); box-shadow: var(--kp-shadow-2); pointer-events: none; }
.gd-topbar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #0b1a33; }
.gd-search { flex: 1; padding: 5px 12px; border-radius: 20px; font-size: .68rem; color: #a9bad6; background: rgba(255, 255, 255, .1); }
.gd-ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .62rem; color: #fff; background: rgba(255, 255, 255, .14); } .gd-ic.moon { background: #f59e0b; }
.gd-menu-body { display: grid; grid-template-columns: 170px 1fr; min-height: 230px; }
.gd-side-list { padding: 10px 8px; background: #0d1b3e; display: grid; gap: 2px; align-content: start; }
.gd-side-list div { padding: 6px 9px; border-radius: 7px; font-size: .68rem; color: #a9bad6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gd-side-list i { width: 14px; margin-right: 6px; text-align: center; }
.gd-side-list .on { background: #2563eb; color: #fff; }
.gd-menu-main { padding: 12px; display: grid; align-content: start; } .gd-menu-main small { color: var(--kp-muted); }

@media (max-width: 900px) {
  .gd-quick { grid-template-columns: 1fr 1fr; }
  .gd-intro-grid, .gd-topic-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .gd-quick { grid-template-columns: 1fr; }
  .gd-topic-head { padding: 16px 16px 4px; } .gd-topic-grid { padding: 14px 16px 18px; }
  .gd-menu-body { grid-template-columns: 138px 1fr; }
  .gd-design { grid-template-columns: 1fr; }
  .gd-steps4 { grid-template-columns: 1fr 1fr; } .gd-steps4 em { display: none; }
  .gd-call { display: none; }
}


/* the Guide item: amber and pulsing until the client opens it once */
.nav-link-item.nav-new { margin: 4px 10px; border-radius: 8px; padding: 10px 12px; color: #1a1a2e; background: linear-gradient(135deg, #fbbf24, #f59e0b); font-weight: 800; box-shadow: 0 0 0 0 rgba(251, 191, 36, .55); animation: nav-pulse 2.4s infinite; }
.nav-link-item.nav-new:hover { color: #1a1a2e; filter: brightness(1.05); background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.nav-link-item.nav-new i { color: #1a1a2e; }
.nav-link-item.nav-new.active { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.nav-new-tag { margin-left: auto; padding: 1px 7px; border-radius: 10px; font-size: .6rem; font-weight: 900; letter-spacing: .5px; background: #1a1a2e; color: #fbbf24; }
@keyframes nav-pulse { 0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, .55); } 70% { box-shadow: 0 0 0 9px rgba(251, 191, 36, 0); } 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); } }
@media (prefers-reduced-motion: reduce) { .nav-link-item.nav-new { animation: none; } }
html.sb-collapsed .nav-new-tag { display: none; }

/* phase circles on the project card: the strip scrolls sideways, which clipped the top of the glowing
   active circle. Room above and below keeps every circle whole. */
html body #clientPortal .phase-steps { padding: 12px 20px 16px; }
html body #clientPortal .phase-dot { flex: 0 0 auto; line-height: 1; }
html body #clientPortal .phase-dot i { line-height: 1; display: block; }

@keyframes kc-flash { 0%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(8px); visibility: hidden; } }
/* on wide screens the same notice is a normal alert above the conversation, also fading out */
@media (min-width: 768px) { .kp-chatpage > .kp-alert { animation: kc-flash-wide 6s ease forwards; } }
@keyframes kc-flash-wide { 0%, 85% { opacity: 1; max-height: 80px; } 100% { opacity: 0; max-height: 0; padding: 0; margin: 0; border-width: 0; visibility: hidden; } }

/* ---------- Support Hours: hours meter and pack facts ---------- */
.sh-meter { --sh-tone: var(--kp-primary); }
.sh-meter.ok { --sh-tone: var(--kp-ok); }
.sh-meter.warn { --sh-tone: var(--kp-warn); }
.sh-meter.danger { --sh-tone: var(--kp-danger); }
.sh-left { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.sh-left b { font-size: 2rem; line-height: 1; font-weight: 800; color: var(--sh-tone); }
.sh-left span { font-size: .8rem; color: var(--kp-muted); font-weight: 600; }
.sh-track { height: 10px; border-radius: 999px; background: var(--kp-border); overflow: hidden; }
.sh-track i { display: block; height: 100%; max-width: 100%; border-radius: 999px; background: var(--sh-tone); transition: width .4s ease; }
.sh-nums { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: .74rem; color: var(--kp-muted); }
.sh-over { margin-top: 8px; font-size: .78rem; font-weight: 700; color: var(--kp-danger); }
.sh-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.sh-facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.sh-facts dt { font-size: .68rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--kp-muted); }
.sh-facts dd { margin: 2px 0 0; font-size: .88rem; color: var(--kp-text); overflow-wrap: anywhere; }
@media (max-width: 767px) { .sh-grid { grid-template-columns: 1fr; gap: 16px; } .sh-left b { font-size: 1.7rem; } }

.kp-flag { display: inline-block; vertical-align: -2px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); object-fit: cover; }

/* ---------- Phones, tablets, all browsers: forms, dropdowns and dialogs never overflow or overlap ---------- */
.kp-input, .kp-select, .kp-textarea { max-width: 100%; min-width: 0; -webkit-appearance: none; appearance: none; }
.kp-select { background-image: linear-gradient(45deg, transparent 50%, var(--kp-muted) 50%), linear-gradient(135deg, var(--kp-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; text-overflow: ellipsis; }
input[type="date"].kp-input, input[type="number"].kp-input { min-width: 0; min-height: 42px; }
.kp-grid > *, .kp-field { min-width: 0; }
.kp-stat b, .kp-stat span, .sh-facts dd { overflow-wrap: anywhere; }
.kp-pill { white-space: normal; }
.wb-local, .kp-card-head { flex-wrap: wrap; }
.kp-modal { max-height: calc(100dvh - 24px); }
.kp-modal form { max-height: calc(100dvh - 26px); }
.kp-modal-body { overscroll-behavior: contain; }
.kp-table td form { margin: 0; }
.kp-table .kp-input, .kp-table .kp-select { min-width: 120px; }
@media (max-width: 767px) {
  /* 16px stops iPhones from zooming into a field; roomy tap targets for thumbs */
  .kp-input, .kp-select, .kp-textarea { font-size: 16px; min-height: 44px; }
  .kp-btn, .kp-tabs .kp-btn { min-height: 40px; }
  .kp-grid { grid-template-columns: 1fr; }
  .kp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kp-stat { padding: 12px; }
  .kp-stat b { font-size: 1.05rem; }
  .kp-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .kp-modal { width: calc(100vw - 16px); border-radius: 16px; }
  .kp-modal-body { padding: 16px; }
  .kp-modal-foot .kp-btn { flex: 1 1 100%; justify-content: center; }
  .kp-act { flex-wrap: wrap; }
  .kp-act b { margin-left: auto; }
  .kp-card-head .kp-btn, .kp-card-head form { flex: 0 0 auto; }
  .kp-scroll > table { min-width: 620px; }
  .kp-scroll > .kx-table { min-width: 0; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .kp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-grid { grid-template-columns: 1fr; }
}

/* ---------- Work lines with a breakdown (Support Development Hours and Monthly Plans) ---------- */
.sh-open { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; text-align: left; padding: 0; border: 0; background: none; color: var(--kp-link); font: inherit; font-weight: 700; cursor: pointer; }
.sh-open i { font-size: .7rem; transition: transform .15s ease; }
.sh-open.on i { transform: rotate(90deg); }
.sh-open:focus-visible { outline: 3px solid color-mix(in srgb, var(--kp-primary) 45%, transparent); outline-offset: 2px; border-radius: 4px; }
.sh-hint { display: block; margin-top: 2px; font-size: .68rem; }
.sh-subrow > td { background: var(--kp-card-alt); border-top: 0 !important; padding-top: 4px !important; }
.sh-sublist { list-style: none; margin: 0; padding: 0 0 6px; display: grid; gap: 6px; }
.sh-sublist li { display: flex; justify-content: space-between; gap: 14px; padding: 7px 12px; border-radius: 8px; background: var(--kp-card); border: 1px solid var(--kp-border); font-size: .8rem; }
.sh-sublist li b { white-space: nowrap; color: var(--kp-text); }
.sh-past { padding: 0 18px 14px; }
.sh-past summary { cursor: pointer; font-weight: 700; font-size: .82rem; color: var(--kp-link); padding: 4px 0 10px; }
/* breakdown editor: a row per step, plus and minus buttons */
.sh-bd { margin: 4px 0 14px; padding: 12px; border: 1px dashed var(--kp-border); border-radius: 12px; background: var(--kp-card-alt); }
.sh-bd-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; font-size: .84rem; color: var(--kp-text); }
.sh-bd-head .kp-muted { font-size: .74rem; }
.sh-bd-rows { display: grid; gap: 8px; margin-bottom: 10px; }
.sh-bd-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; gap: 8px; align-items: center; }
.sh-bd-sum { margin-top: 8px; font-size: .78rem; font-weight: 700; color: var(--kp-muted); }
.sh-bd-sum.bad { color: var(--kp-danger); }
.sh-bd-x { height: 40px; padding: 0; justify-content: center; }
@media (max-width: 480px) { .sh-bd-row { grid-template-columns: minmax(0, 1fr) 84px 40px; } }
/* monthly plans */
.mp-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mp-tasks li { flex-wrap: wrap; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--kp-border); border-radius: 10px; background: var(--kp-card); }
.mp-tasks li > div:first-child { flex: 1 1 200px; min-width: 0; }
.mp-tasks li.done strong { text-decoration: line-through; color: var(--kp-muted); }
.mp-plan { white-space: pre-line; line-height: 1.7; color: var(--kp-body); }

/* ---------- Big pager and day filter (activity lists) ---------- */
.kp-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.kp-pager-info { font-size: .84rem; font-weight: 600; color: var(--kp-muted); }
.kp-pager-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.kp-pager-list a, .kp-pager-list span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 14px; border: 1.5px solid var(--kp-border); border-radius: 12px; background: var(--kp-card); color: var(--kp-text); font-size: .92rem; font-weight: 700; text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.kp-pager-list a:hover { border-color: var(--kp-primary); color: var(--kp-link); }
.kp-pager-list a:focus-visible { outline: 3px solid color-mix(in srgb, var(--kp-primary) 45%, transparent); outline-offset: 2px; }
.kp-pager-list li.on span { background: var(--kp-primary); border-color: var(--kp-primary); color: #fff; }
.kp-pager-list li.off span { opacity: .4; cursor: not-allowed; }
.kp-pager-list li.gap span { border: 0; background: transparent; min-width: 20px; padding: 0; }
.kp-pager-list b { font-weight: 700; }
@media (max-width: 640px) { .kp-pager { justify-content: center; } .kp-pager-info { width: 100%; text-align: center; } .kp-pager-list li.num:not(.on) { display: none; } .kp-pager-list { justify-content: center; } }
.kp-range { display: grid; gap: 12px; margin-top: 4px; }
.kp-range-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kp-range-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; max-width: 460px; }
.kp-range-dates .kp-input { min-width: 0; width: 100%; }
.act-tbl td { vertical-align: top; }
@media (max-width: 640px) { .act-tbl { min-width: 0 !important; } .act-tbl th:nth-child(5), .act-tbl td:nth-child(5) { display: none; } }

/* ---------- theme switch on standalone pages ---------- */
.kp-theme-btn { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--kp-border); background: var(--kp-card); color: var(--kp-text); cursor: pointer; font-size: 1rem; display: grid; place-items: center; }
.kp-theme-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--kp-primary) 45%, transparent); outline-offset: 2px; }

@media (max-width: 640px) {
  .kp-page { padding: 18px 12px; }
  .kp-card-head, .kp-card-body { padding-left: 14px; padding-right: 14px; }
  .kp-money { grid-template-columns: 1fr; text-align: left; }
  .kp-actions .kp-btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .kp-btn { transition: none; }
}

/* Messages list: a hint that a conversation opens on click, and an arrow on every row */
.kp-opennote { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .8rem; }
.kp-opennote i { color: var(--kp-link); }
.kp-rowgo { margin-left: 8px; color: var(--kp-link); font-size: .75rem; }
.kp-thread-row { cursor: pointer; }
.kp-thread-row:hover .kp-rowgo { transform: translateX(3px); }
.kp-rowgo { transition: transform .15s ease; }

/* Healthcare Website editor: repeatable rows, image pickers, image library (uses the portal colour tokens, so light and dark both work) */
.hcx-form .hcx-group { border: 1px solid var(--kp-border); border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; background: var(--kp-card-alt); }
.hcx-rows { margin: 0 0 16px; }
.hcx-rows-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.hcx-list { display: grid; gap: 10px; margin-bottom: 10px; }
.hcx-row { border: 1px solid var(--kp-border); border-radius: 10px; background: var(--kp-card); overflow: hidden; }
.hcx-row-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; background: var(--kp-card-alt); border-bottom: 1px solid var(--kp-border); }
.hcx-row-title { font-size: .78rem; font-weight: 700; color: var(--kp-body); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcx-row-btns { display: flex; gap: 6px; flex-shrink: 0; }
.hcx-row-btns button { border: 1px solid var(--kp-border); background: var(--kp-card); color: var(--kp-body); border-radius: 8px; width: 32px; height: 32px; cursor: pointer; }
.hcx-row-btns button:hover { border-color: var(--kp-link); color: var(--kp-link); }
.hcx-row-body { padding: 12px; display: grid; gap: 10px; }
.hcx-icon { display: flex; align-items: center; gap: 10px; }
.hcx-icon-prev { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--kp-border); border-radius: 9px; color: var(--kp-link); flex-shrink: 0; }
.hcx-img-box { border: 1px dashed var(--kp-border); border-radius: 10px; padding: 12px; margin-bottom: 14px; background: var(--kp-card-alt); }
.hcx-img-cur { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.hcx-img-cur img { max-width: 180px; max-height: 110px; width: auto; height: auto; border-radius: 8px; border: 1px solid var(--kp-border); object-fit: cover; }
.hcx-img-ctl { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.hcx-thumb { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--kp-border); display: block; }
.hcx-save { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 12px 16px; margin-top: 8px; background: var(--kp-card); border: 1px solid var(--kp-border); border-radius: 12px; box-shadow: 0 -6px 18px rgba(15,23,42,.10); z-index: 5; }
.hcx-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.hcx-card { margin: 0; border: 1px solid var(--kp-border); border-radius: 12px; background: var(--kp-card); overflow: hidden; box-shadow: var(--kp-shadow); }
.hcx-card img { width: 100%; height: 150px; object-fit: cover; display: block; background: var(--kp-card-alt); }
.hcx-card figcaption { padding: 10px 12px 12px; }
.hcx-copy .kp-input { font-size: .7rem; margin-top: 6px; }
@media (max-width: 560px) { .hcx-row-bar { flex-wrap: wrap; } .hcx-img-cur img { max-width: 100%; } .hcx-save .kp-btn { flex: 1 1 100%; justify-content: center; } }
.hcx-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 12px; }
.hcx-gal-item { display: grid; gap: 6px; font-size: .74rem; }
.hcx-gal-item img { width: 100%; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--kp-border); }

/* Initiatives screen: cards with a big power switch */
.ini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; margin-bottom: 20px; }
.ini-card { overflow: hidden; border-top: 4px solid var(--kp-border); transition: border-color .2s, opacity .2s; }
.ini-card.is-on { border-top-color: var(--kp-ok); }
.ini-card.is-off { opacity: .85; }
.ini-top { display: flex; align-items: center; gap: 14px; padding: 18px 20px 6px; flex-wrap: wrap; }
.ini-ic { width: 52px; height: 52px; flex-shrink: 0; display: grid; place-items: center; border-radius: 14px; background: var(--kp-card-alt); border: 1px solid var(--kp-border); color: var(--kp-link); font-size: 1.3rem; }
.ini-id { flex: 1; min-width: 160px; }
.ini-id h2 { margin: 0 0 2px; font-size: 1.08rem; font-weight: 800; color: var(--kp-text); }
.ini-id p { margin: 0; }
.ini-line { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.ini-switch-form { margin: 0; }
.ini-switch { display: inline-flex; align-items: center; gap: 10px; border: 0; background: transparent; cursor: pointer; padding: 4px; border-radius: 40px; color: var(--kp-text); font-weight: 800; font-size: .8rem; letter-spacing: .6px; }
.ini-switch:focus-visible { outline: 3px solid color-mix(in srgb, var(--kp-primary) 40%, transparent); outline-offset: 2px; }
.ini-track { position: relative; width: 64px; height: 34px; border-radius: 34px; background: var(--kp-border); transition: background .25s; flex-shrink: 0; }
.ini-knob { position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--kp-muted); display: grid; place-items: center; font-size: .78rem; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .25s, color .25s; }
.ini-switch[aria-checked="true"] .ini-track { background: var(--kp-ok); }
.ini-switch[aria-checked="true"] .ini-knob { transform: translateX(30px); color: var(--kp-ok); }
.ini-state { min-width: 30px; }
@media (max-width: 420px) { .ini-grid { grid-template-columns: minmax(0, 1fr); } }