/* CompliPath — app layer on the CostusWorx Fluent kit (Dynamics 365 look).
   Load order: assets/css/app.css (legacy) → assets/fluent-kit/fluent-core.css (synced kit, do not edit) → this file.
   PDFs (includes/RegisterPdf.php) and e-mails (AlertMailer) keep their own styling.
   Tokens only outside TOKENS: php <kit>/tools/check_layer.php assets/css/fluent.css */

/* ===== TOKENS ===== */
:root {
  /* CompliPath brand as the chrome: dark navy header, accent-blue stripe */
  --tenant-primary: #1A1A2E;
  --tenant-accent: #4FC3F7;
  /* legacy names → kit tokens */
  --cp-dark: var(--v6-t1); --cp-blue: var(--v6-action); --cp-accent: var(--tenant-accent); --cp-tint: var(--v6-sel);
  --cp-text: var(--v6-t1); --cp-success: var(--v6-ok); --cp-warning: var(--v6-warn); --cp-danger: var(--v6-bad);
}

/* ===== BASE ===== */
body, body *:not(svg):not(path) { font-family: var(--v6-font) !important; }
body { font-size: var(--v6-fs-body); line-height: var(--v6-lh-body); }
.cp-wrap { max-width: none; margin: 0; }
.v6-main > :first-child { margin-top: 16px; }
.cp-hdr-mark { height: 26px; width: auto; display: block; }
a { color: var(--v6-action); }

/* Page title (each page's h2.page) */
h2.page { margin: 16px 0; font-size: var(--v6-fs-sub1); line-height: var(--v6-lh-sub1); font-weight: 600; color: var(--v6-t1); }
h3, h4 { color: var(--v6-t1); }

/* Message bars */
.cp-flash, .cp-error { border-radius: var(--v6-r-sm); padding: 8px 12px; font-size: var(--v6-fs-body); margin-bottom: 16px; }
.cp-flash { background: var(--v6-ok-bg); border: var(--v6-line) solid var(--v6-ok); color: var(--v6-ok-h); }
.cp-error { background: var(--v6-bad-bg); border: var(--v6-line) solid var(--v6-bad-line); color: var(--v6-bad-h); }
.cp-msgbar { margin-bottom: 16px; border-radius: var(--v6-r-sm); border-width: var(--v6-line); border-style: solid; }

/* RAG status (legacy classes kept for any markup still using them) */
.compliance-green { background: var(--v6-ok-bg); color: var(--v6-ok-h); border-left: 4px solid var(--v6-ok); }
.compliance-amber { background: var(--v6-warn-bg); color: var(--v6-warn); border-left: 4px solid var(--v6-warn); }
.compliance-red   { background: var(--v6-bad-bg); color: var(--v6-bad-h); border-left: 4px solid var(--v6-bad); }

/* Grids */
.cp-table { width: 100%; border-collapse: collapse; font-size: var(--v6-fs-body); background: var(--v6-surface); }
.cp-table thead tr { background: var(--v6-surface); color: var(--v6-t2); }
.cp-table th { height: var(--v6-row-h); padding: 0 8px; font-weight: 600; color: var(--v6-t2); border-bottom: var(--v6-line) solid var(--v6-stroke); white-space: nowrap; }
.cp-table td { height: var(--v6-row-h); padding: 4px 8px; border-bottom: var(--v6-line) solid var(--v6-row); vertical-align: middle; }
.cp-table tbody tr:nth-child(even) { background: transparent; }
.cp-table tbody tr:hover td { background: var(--v6-surface-2); }
.cp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cp-table .c { text-align: center; }
.cp-pending { color: var(--v6-warn); }
.cp-cob { font-size: var(--v6-fs-cap); color: var(--v6-t2); }
.cp-row-actions { display: flex; gap: 6px; }
.cp-row-actions form { margin: 0; }

/* Pills */
.badge { font-size: var(--v6-fs-cap); line-height: var(--v6-lh-cap); font-weight: 600; border-radius: var(--v6-r-pill); padding: 2px 8px; }
.badge-green { background: var(--v6-ok-bg); color: var(--v6-ok-h); }
.badge-amber { background: var(--v6-warn-bg); color: var(--v6-warn); }
.badge-red { background: var(--v6-bad-bg); color: var(--v6-bad-h); }

/* Buttons */
.btn { font-size: var(--v6-fs-body); font-weight: 600; height: var(--v6-ctl-h); padding: 0 12px; border-radius: var(--v6-r-sm); display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1;
  background: var(--v6-action); border: var(--v6-line) solid var(--v6-action); color: var(--v6-surface); }
.btn:hover { background: var(--v6-action-h); }
.btn-light { background: var(--v6-surface); border-color: var(--v6-stroke2); color: var(--v6-t1); }
.btn-light:hover { background: var(--v6-surface-2); }
.btn-danger { background: var(--v6-surface); border-color: var(--v6-bad-line); color: var(--v6-bad); }
.btn-danger:hover { background: var(--v6-bad-bg); }
.btn-success { background: var(--v6-ok); border-color: var(--v6-ok); color: var(--v6-surface); }
.btn-success:hover { background: var(--v6-ok-h); }
.btn-sm { height: 24px; padding: 0 8px; font-size: var(--v6-fs-cap); }
.cp-form-actions { margin-top: 16px; display: flex; gap: 8px; }

/* Forms (32px fields, bottom-stroke focus) */
.form-grid { gap: 10px 16px; }
.form-grid label, .cp-card label { font-size: var(--v6-fs-body); font-weight: 400; color: var(--v6-t2); }
.form-grid input, .form-grid select, .form-grid textarea, .cp-select, .cp-login input {
  font-size: var(--v6-fs-body); color: var(--v6-t1); background: var(--v6-surface); border: var(--v6-line) solid var(--v6-stroke2); border-bottom-color: var(--v6-t3); border-radius: var(--v6-r-sm); }
.form-grid input:not([type=checkbox]):not([type=file]), .form-grid select, .cp-select, .cp-login input { height: var(--v6-ctl-h); padding: 0 8px; width: 100%; }
.form-grid input[type=checkbox] { width: auto; height: auto; accent-color: var(--v6-action); }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .cp-select:focus, .cp-login input:focus { outline: none; border-bottom: 2px solid var(--v6-action); }
.cp-select { margin-bottom: 10px; }

/* KI dashboard + rep view */
.cp-rag-tile { border-left-width: 6px; }
.cp-rag-green { border-left-color: var(--v6-ok); }
.cp-rag-amber { border-left-color: var(--v6-warn); }
.cp-rag-red { border-left-color: var(--v6-bad); }
.cp-rag-green .cp-rag-text, .cp-upcoming.cp-rag-green .cp-rag-text { color: var(--v6-ok-h); }
.cp-rag-amber .cp-rag-text, .cp-upcoming.cp-rag-amber .cp-rag-text { color: var(--v6-warn); }
.cp-rag-red .cp-rag-text, .cp-upcoming.cp-rag-red .cp-rag-text { color: var(--v6-bad-h); }
.cp-tile-sub { font-size: var(--v6-fs-body); color: var(--v6-t2); }
.cp-status-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.cp-person { margin: 0 0 2px; font-size: var(--v6-fs-sub1); line-height: var(--v6-lh-sub1); font-weight: 600; color: var(--v6-t1); }
.cp-cycle { text-align: right; }
.cp-cycle-date { font-size: var(--v6-fs-sub2); line-height: var(--v6-lh-sub2); font-weight: 600; color: var(--v6-t1); }
.cp-split { display: grid; grid-template-columns: 2fr 3fr; gap: 16px; margin-bottom: 16px; }
.cp-hero-num { font-size: var(--v6-fs-title3); line-height: var(--v6-lh-title3); font-weight: 600; color: var(--v6-t1); margin: 2px 0 8px; }
.cp-progress { display: block; width: 100%; height: 6px; margin: 0 0 8px; border: 0; border-radius: 3px; background: var(--v6-hover); accent-color: var(--v6-action); }
.cp-progress::-webkit-progress-bar { background: var(--v6-hover); border-radius: 3px; }
.cp-progress::-webkit-progress-value { background: var(--v6-action); border-radius: 3px; }
.cp-progress::-moz-progress-bar { background: var(--v6-action); border-radius: 3px; }
.cp-upcoming { display: flex; justify-content: space-between; gap: 12px; min-height: var(--v6-row-h); align-items: center; border-bottom: var(--v6-line) solid var(--v6-row); }
.cp-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.cp-card-head .v6-section-title { margin: 0; }
.cp-admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Sign-in (DealerPulse pattern: navy gradient, rounded 3D card) */
body.cp-login-page { background: linear-gradient(160deg, var(--v6-brand-deep), var(--v6-brand) 60%, var(--v6-brand-line)); min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; }
.cp-login { margin: 24px; width: min(400px, 100%); }
.cp-login .cp-card { position: relative; padding: 32px 28px 24px; border-radius: var(--v6-r-lg); border: 2px solid var(--v6-brand-ink); box-shadow: var(--v6-raise-login); color: var(--v6-brand); }
.cp-login .cp-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--v6-chrome), var(--v6-chrome-accent), var(--v6-chrome)); border-radius: var(--v6-r-lg) var(--v6-r-lg) 0 0; }
.cp-login .sub { color: var(--v6-t3); font-size: var(--v6-fs-cap); text-align: center; }
.cp-login label { color: var(--v6-brand); font-weight: 600; font-size: var(--v6-fs-body); }
.cp-login input { border-color: var(--v6-brand-soft); border-bottom-color: var(--v6-brand); color: var(--v6-brand); }
.cp-login .btn { width: 100%; height: 40px; background: var(--v6-brand); border-color: var(--v6-brand); }
.cp-login .btn:hover { background: var(--v6-brand-deep); }
.cp-login .cp-intro { font-size: var(--v6-fs-body); color: var(--v6-t2); margin: 0 0 4px; }
.cp-login-links { margin-top: 14px; text-align: center; font-size: var(--v6-fs-body); }
.cp-login-links a { color: var(--v6-action); text-decoration: none; }
.cp-login-links a:hover { text-decoration: underline; }

/* Show/hide password. padding-right must out-rank `.cp-login input` above. */
.pw-wrap { position: relative; }
.cp-login .pw-wrap input { padding-right: 38px; }
.pw-peek { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 32px; height: 28px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--v6-t3); cursor: pointer; border-radius: var(--v6-r-sm); }
.pw-peek:hover { color: var(--v6-brand); }
.pw-peek:focus-visible { outline: 2px solid var(--v6-action); outline-offset: 1px; }
.pw-peek[aria-pressed="false"] .pw-slash { display: none; }

/* Public demo role picker (login.php?demo=…). The card is white: explicit light-surface colours. */
#demo-roles{margin:0 0 18px;text-align:left}
#demo-roles .dr-head{text-align:center;margin-bottom:12px}
#demo-roles .dr-title{font-size:15px;font-weight:700;color:#152A47}
#demo-roles .dr-sub{font-size:11px;color:#5D6E88;margin-top:3px}
#demo-roles .dr-card{display:block;width:100%;text-align:left;padding:11px 13px;
  border-radius:9px;cursor:pointer;font:inherit;margin-bottom:8px;
  border:1px solid #DBE3EE;background:#F7F9FC;
  transition:border-color .15s,background .15s,transform .15s,box-shadow .15s}
#demo-roles .dr-card:hover{border-color:#2E5FA3;background:#F0F5FC;transform:translateY(-1px);
  box-shadow:0 6px 16px -8px rgba(21,42,71,.35)}
#demo-roles .dr-card:focus-visible{outline:2px solid #2E5FA3;outline-offset:2px}
#demo-roles .dr-role{display:block;font-size:13.5px;font-weight:700;color:#152A47;margin-bottom:2px}
#demo-roles .dr-desc{display:block;font-size:11px;line-height:1.35;color:#5D6E88}
#demo-roles .dr-or{position:relative;text-align:center;margin:16px 0 4px}
#demo-roles .dr-or:before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:#E1E8F1}
#demo-roles .dr-or span{position:relative;background:#fff;padding:0 10px;font-size:10px;
  text-transform:uppercase;letter-spacing:.08em;color:#8595AC}

@media (max-width: 768px) {
  .v6-tiles { grid-template-columns: 1fr 1fr; }
  .cp-split, .cp-admin-grid, .form-grid { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .cp-status-head { flex-direction: column; align-items: flex-start; }
  .cp-cycle { text-align: left; }
  .cp-card { overflow-x: auto; }
}

/* ===== COMPONENTS ===== */
/* Large block (same tokens as the kit's .v6-block) */
.cp-card {
  border: var(--v6-card-w) solid var(--v6-card-line); border-radius: var(--v6-r-md); box-shadow: var(--v6-raise); background: var(--v6-block-bg); padding: 16px; margin: 0 4px 16px 0; }
.cp-card .cp-table { background: var(--v6-surface); }