/*
 * 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 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 { color: #9bbcff !important; }
html body .cp-breadcrumb a, html body .profile-note a, html body .profile-card a { color: #1558c0; }
html[data-theme="dark"] body .cp-breadcrumb a, html[data-theme="dark"] body .profile-note a, html[data-theme="dark"] body .profile-card a { color: #8ab4ff; }
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; } }

/* ---------- 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; }
}