/* debugSQ.css
   Minimal debug stylesheet: position the debug toggle in the top-left corner
   and keep the debug panel in the top-right as designed.
*/
:root{
  /* centralised debug colour map - change here to update both group headers and compact summary labels */
  --dbg-color-default: #6666ff;
  --dbg-color-email: #ffffff;
  --dbg-color-username: #FFCC33;
  --dbg-color-password_login: #6699FF;
  --dbg-color-password_signup: #FF66CC;
  --dbg-color-confirm: #FF2A2A;
  --dbg-color-optional: #9966FF;
  --dbg-color-prefix: #FF6699;
  --dbg-color-other: #ffffff;
}
#debugToggle{
  position:fixed;
  top:20px;
  left:20px; /* move to top-left (was near center-left) */
  z-index:9999;
  padding:6px 10px;
  background:rgba(255,255,255,0.9);
  color:#111;
  border-radius:4px;
  border:1px solid rgba(0,0,0,0.15);
  box-shadow:0 2px 6px rgba(0,0,0,0.4);
  cursor:pointer;
  font-size:13px;
}
/* small adjustment when debug panel shown */
body.debug-visible #debugToggle{
  background:rgba(255,255,255,0.95);
}
/* ensure the debug panel sits above other content */
#debugPanel{ z-index:9998; }
/* Gold hairline border and slightly larger rounding for the debug panel */
#debugPanel {
  border-radius: 12px !important;
  border: 1px solid rgba(255,204,51,0.5) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

/* Layout for the debug panel: positioned fixed and responsive height */
#debugPanel {
  position: fixed;
  right: 40px;
  top: 30px;
  width: 280px;
  max-height: calc(100vh - 70px); /* responsive: extend downward by 50px */
  min-height: 120px;
  padding: 12px;
  overflow-y: auto;
  overflow-x: hidden; /* prefer wrap, hide horizontal scrollbar */
  box-sizing: border-box;
  font-family: Consolas, monospace;
  font-size: 14px;
}

/* Collapsible debug groups inside #debugContent */
#debugContent { font-family: Consolas, monospace; font-size: 13px; color: #9aa0a6; }
.dbg-group { border: 1px solid rgba(255,255,255,0.04); margin-bottom: 6px; border-radius: 6px; overflow: hidden; }
.dbg-group .dbg-header { display:flex; justify-content:space-between; align-items:center; padding:6px 8px; background:rgba(255,255,255,0.02); cursor:pointer; }
.dbg-group .dbg-header .title { font-weight:700; }
.dbg-group .dbg-header .meta { font-size:11px; color:#7f7; }
.dbg-group .dbg-header .preview { font-size:12px; color: #ddd; margin: 0 8px; flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbg-group .dbg-body { max-height: 0; overflow: hidden; transition: max-height 240ms ease, padding 180ms ease; padding: 0 8px; }
.dbg-group .dbg-body .dbg-entry { border-top: 0.5px solid rgba(128,128,128,0.25); padding: 6px 0; }
.dbg-group .dbg-body ul.dbg-list { list-style: disc; margin: 6px 0 0 18px; padding: 0; overflow: visible; }
.dbg-group .dbg-body ul.dbg-list li.dbg-entry { margin: 6px 0; font-family: Segoe UI, system-ui, -apple-system, 'Roboto', 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: inherit; }
.dbg-group .dbg-body .dbg-entry .dbg-entry-time { color: rgba(255,255,255,0.45); font-size:11px; margin-right:6px; }
.dbg-group .dbg-body .dbg-entry .dbg-entry-msg { color: inherit; display: inline-block; white-space: normal; word-break: break-word; max-width: calc(100% - 44px); }
.dbg-group.collapsed .dbg-body { max-height: 0; padding-top:0; padding-bottom:0; }
.dbg-group:not(.collapsed) .dbg-body { max-height: 420px; padding-top:8px; padding-bottom:8px; }

/* Subcategory summary titles (inside grouped details) - light blue for readability */
.dbg-subcat-title { color: #66bfff; font-weight:700; }
/* small right-aligned color swatch shown on each entry to indicate the input border color at that time */
.dbg-entry { position: relative; }
.dbg-entry .dbg-entry-swatch { display:inline-block; width:12px; height:12px; border-radius:2px; border:1px solid rgba(0,0,0,0.2); position: absolute; right: 6px; top: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
/* ensure nested list items have room for the swatch */
.dbg-group .dbg-body ul.dbg-list li.dbg-entry, .dbg-group .dbg-body li.dbg-entry { padding-right: 26px; }

/* Compact header hover highlight */
.dbg-group .dbg-header:hover { background: rgba(255,255,255,0.03); }

/* Fade non-selected (collapsed) groups so the active one stands out */
.dbg-group { transition: opacity 220ms ease, filter 220ms ease; }
.dbg-group.collapsed { opacity: 0.42; filter: grayscale(30%); }
.dbg-group:not(.collapsed) { opacity: 1; filter: none; }

/* Per-field color accents for header title and debug text */
/* Debug panel colors matched to border system colors */
.dbg-group .dbg-header .title { color: var(--dbg-color-default); }
#debugPanel .dbg-summary-field { color: var(--dbg-color-default); }
.dbg-group[data-field="email"] .dbg-header .title,
.dbg-group[data-field="email"] .dbg-body pre { color: var(--dbg-color-email); }
.dbg-group[data-field="email"] .dbg-header .preview { color: var(--dbg-color-email); }
.dbg-group[data-field="username"] .dbg-header .title,
.dbg-group[data-field="username"] .dbg-body pre { color: var(--dbg-color-username); }
.dbg-group[data-field="username"] .dbg-header .preview { color: var(--dbg-color-username); }
.dbg-group[data-field="password_login"] .dbg-header .title,
.dbg-group[data-field="password_login"] .dbg-body pre { color: var(--dbg-color-password_login); }
.dbg-group[data-field="password_login"] .dbg-header .preview { color: var(--dbg-color-password_login); }
.dbg-group[data-field="password_signup"] .dbg-header .title,
.dbg-group[data-field="password_signup"] .dbg-body pre { color: var(--dbg-color-password_signup); }
.dbg-group[data-field="password_signup"] .dbg-header .preview { color: var(--dbg-color-password_signup); }
.dbg-group[data-field="confirm"] .dbg-header .title,
.dbg-group[data-field="confirm"] .dbg-body pre { color: var(--dbg-color-confirm); }
.dbg-group[data-field="confirm"] .dbg-header .preview { color: var(--dbg-color-confirm); }
.dbg-group[data-field="optional"] .dbg-header .title,
.dbg-group[data-field="optional"] .dbg-body pre { color: var(--dbg-color-optional); }
.dbg-group[data-field="optional"] .dbg-header .preview { color: var(--dbg-color-optional); }
.dbg-group[data-field="prefix"] .dbg-header .title,
.dbg-group[data-field="prefix"] .dbg-body pre { color: var(--dbg-color-prefix); }
.dbg-group[data-field="prefix"] .dbg-header .preview { color: var(--dbg-color-prefix); }
.dbg-group[data-field="other"] .dbg-header .title,
.dbg-group[data-field="other"] .dbg-body pre { color: var(--dbg-color-other); }
.dbg-group[data-field="other"] .dbg-header .preview { color: var(--dbg-color-other); }

#debugPanel .dbg-summary-field { font-weight:700; }
/* Map compact summary labels to the same colors via the shared variables */
#debugPanel .dbg-summary-field.email { color: var(--dbg-color-email) !important; }
#debugPanel .dbg-summary-field.username { color: var(--dbg-color-username); }
#debugPanel .dbg-summary-field.password_login { color: var(--dbg-color-password_login); }
#debugPanel .dbg-summary-field.password_signup { color: var(--dbg-color-password_signup); }
#debugPanel .dbg-summary-field.confirm { color: var(--dbg-color-confirm); }
#debugPanel .dbg-summary-line { margin-bottom:4px; }
#debugPanel .dbg-summary-time { color: rgba(255,255,255,0.3); margin-left:6px; }
#debugPanel .dbg-summary-msg { color: rgba(255,255,255,0.6); margin-left:6px; }
/* status coloring for compact summary */
#debugPanel .dbg-summary-status.status-ok { color: #00cc00; font-weight:700; margin-left:6px; }
#debugPanel .dbg-summary-status.status-error { color: #ff2a2a; font-weight:700; margin-left:6px; }

/* Slightly brighten hovered headers even when collapsed for affordance */
.dbg-group.collapsed .dbg-header:hover { opacity: 0.95; filter: none; }

/* Reduce top padding for debug panel action buttons (copy/reset) to better align visually */
/* Reduce top padding for debug panel action buttons (copy/reset) to better align visually */
#debugPanel .debug-controls .btn-secondary{ padding-top:3px; padding-bottom:5px; }
/* small gap between debug control buttons */
#debugPanel .debug-controls .btn-secondary + .btn-secondary{ margin-left:6px; }

/* a thin separator under the debug controls */
#debugPanel .dbg-sep{ border:0; height:0.5px; background: rgba(102,153,255,0.5); margin:8px 0; border-radius:1px; }

/* Debug modal styles */
.dbg-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10000; }
.dbg-modal.hidden { display: none; }
.dbg-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.dbg-modal-content { position: relative; z-index: 10001; width: min(92vw, 1000px); max-height: 90vh; background: #0b0b0b; border: 1px solid rgba(51,51,68,0.5); border-radius: 12px; padding: 12px; box-sizing: border-box; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.dbg-modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.dbg-modal-body pre { background: transparent; border-radius: 6px; padding: 8px; }

/* Themed slim scrollbar for debug panel (WebKit) */
#debugPanel::-webkit-scrollbar { width: 8px; height: 8px; }
#debugPanel::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); border-radius: 8px; }
#debugPanel::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#6666FF, #3344FF); border-radius: 8px; border: 2px solid rgba(0,0,0,0.18); }
#debugPanel::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#7f7fff,#3f5bff); }

/* Firefox scrollbar theming: use only when supported - disabled to avoid compatibility warnings */
/* If you want Firefox-specific scrollbar styling, re-enable via a scoped @supports rule or vendor-only stylesheet. */