/* =========================================================
   css/qc-audit.css — QA / THEME VERIFICATION OVERLAY

   Purpose
   - Lets admins visually verify that theme tokens + classes are applied
     across the whole site (admin + account + accessibility + public pages).
   - Enabled via body classes set by localStorage:
       qc-palette  -> forces loud "audit" colours via CSS variables
       qc-outline  -> adds outlines to key UI blocks
       qc-inspect  -> JS-driven hover inspector (see /js/hd-header.js)
   ========================================================= */

body.qc-palette{
  /* Loud palette to quickly reveal where tokens are used */
  --page: #FF00FF;
  --site-bg: var(--page);
  --surface: #00FFFF;
  --alt: #FFFF00;
  --border: #FF0000;

  --text: #000000;
  --muted: #111111;
  --heading: #000000;

  --primary: #00FF00;
  --primary-hover: #00CC00;
  --primary-active: #009900;
  --primary-disabled: #66FF66;

  --accent: #FF7A00;
  --accent-hover: #E06600;
  --accent-text: #000000;

  --link: #0000FF;
  --link-hover: #000099;
  --visited: #6A00FF;
  --link-visited: var(--visited);

  --focus: #00A3FF;

  --btn-primary-bg: #00FF00;
  --btn-primary-hover: #00CC00;
  --btn-primary-active: #009900;
  --btn-primary-text: #000000;

  --secondary: #FFFFFF;
  --secondary-hover: #F3F3F3;
  --secondary-active: #E6E6E6;
  --secondary-border: #FF0000;
  --secondary-text: #000000;

  --nav-btn-bg: #00FF00;
  --nav-btn-hover: #00CC00;
  --nav-btn-active: #009900;
  --nav-btn-text: #000000;

  --toolnav-btn-bg: #00FF00;
  --toolnav-btn-hover: #00CC00;
  --toolnav-btn-active: #009900;
  --toolnav-btn-text: #000000;

  --footer-bg: #000000;
  --footer-text: #FFFFFF;
}

/* Outline mode — keep lightweight: target the common building blocks */
body.qc-outline header,
body.qc-outline footer,
body.qc-outline main,
body.qc-outline nav,
body.qc-outline .nav-buttons,
body.qc-outline .nav-dropdown,
body.qc-outline .dropdown-menu,
body.qc-outline .outputdata_default,
body.qc-outline .outputdata_wide,
body.qc-outline .hd-card,
body.qc-outline .hd-alert,
body.qc-outline .hd-table,
body.qc-outline table,
body.qc-outline form,
body.qc-outline fieldset,
body.qc-outline .form-control,
body.qc-outline input,
body.qc-outline select,
body.qc-outline textarea,
body.qc-outline button,
body.qc-outline .hd-btn,
body.qc-outline .nav-btn,
body.qc-outline .brand-auth-btn{
  outline: 2px dashed rgba(0,0,0,.55);
  outline-offset: 2px;
}

/* Inspector highlight target (JS adds .qc-hit on the hovered element) */
.qc-hit{
  outline: 3px solid rgba(0,0,0,.75) !important;
  outline-offset: 2px !important;
}

/* =========================================================
   Layout QA modes
   - Compact / Spacious quickly exaggerate spacing/radii so you can
     confirm elements are consuming the layout tokens.
   ========================================================= */

body.qc-layout-compact{
  --radius-card: 6px;
  --radius-btn: 6px;
  --radius-input: 6px;

  --card-pad: 10px;
  --card-gap: 8px;

  --field-gap: 6px;
  --input-pad-y: 6px;
  --input-pad-x: 10px;

  --btn-pad-y: 6px;
  --btn-pad-x: 10px;
  --btn-min-h: 34px;

  --table-cell-pad-y: 6px;
  --table-cell-pad-x: 8px;
}

body.qc-layout-spacious{
  --radius-card: 26px;
  --radius-btn: 18px;
  --radius-input: 18px;

  --card-pad: 26px;
  --card-gap: 18px;

  --field-gap: 14px;
  --input-pad-y: 14px;
  --input-pad-x: 18px;

  --btn-pad-y: 14px;
  --btn-pad-x: 18px;
  --btn-min-h: 48px;

  --table-cell-pad-y: 14px;
  --table-cell-pad-x: 16px;
}

/* Visual guide for shell vs content width (helps QA the container model) */
body.qc-outline header .hd-container,
body.qc-outline footer .hd-container,
body.qc-outline main .hd-page-inner{
  outline: 3px dashed rgba(255,0,0,.55);
  outline-offset: 4px;
}