/* ==========================================================================
   Utility Classes
   Single-purpose, token-backed classes. All use !important by convention.
   ========================================================================== */

/* ── Spacing ───────────────────────────────────────────────────────────── */

.m-0  { margin: var(--dq-space-0) !important; }
.m-1  { margin: var(--dq-space-1) !important; }
.m-2  { margin: var(--dq-space-2) !important; }
.m-3  { margin: var(--dq-space-3) !important; }
.m-4  { margin: var(--dq-space-4) !important; }
.m-5  { margin: var(--dq-space-5) !important; }
.m-6  { margin: var(--dq-space-6) !important; }
.m-8  { margin: var(--dq-space-8) !important; }
.m-10 { margin: var(--dq-space-10) !important; }
.m-12 { margin: var(--dq-space-12) !important; }

.mt-0  { margin-top: var(--dq-space-0) !important; }
.mt-1  { margin-top: var(--dq-space-1) !important; }
.mt-2  { margin-top: var(--dq-space-2) !important; }
.mt-3  { margin-top: var(--dq-space-3) !important; }
.mt-4  { margin-top: var(--dq-space-4) !important; }
.mt-5  { margin-top: var(--dq-space-5) !important; }
.mt-6  { margin-top: var(--dq-space-6) !important; }
.mt-8  { margin-top: var(--dq-space-8) !important; }
.mt-10 { margin-top: var(--dq-space-10) !important; }
.mt-12 { margin-top: var(--dq-space-12) !important; }

.mb-0  { margin-bottom: var(--dq-space-0) !important; }
.mb-1  { margin-bottom: var(--dq-space-1) !important; }
.mb-2  { margin-bottom: var(--dq-space-2) !important; }
.mb-3  { margin-bottom: var(--dq-space-3) !important; }
.mb-4  { margin-bottom: var(--dq-space-4) !important; }
.mb-5  { margin-bottom: var(--dq-space-5) !important; }
.mb-6  { margin-bottom: var(--dq-space-6) !important; }
.mb-8  { margin-bottom: var(--dq-space-8) !important; }
.mb-10 { margin-bottom: var(--dq-space-10) !important; }
.mb-12 { margin-bottom: var(--dq-space-12) !important; }

.p-0  { padding: var(--dq-space-0) !important; }
.p-1  { padding: var(--dq-space-1) !important; }
.p-2  { padding: var(--dq-space-2) !important; }
.p-3  { padding: var(--dq-space-3) !important; }
.p-4  { padding: var(--dq-space-4) !important; }
.p-5  { padding: var(--dq-space-5) !important; }
.p-6  { padding: var(--dq-space-6) !important; }
.p-8  { padding: var(--dq-space-8) !important; }
.p-10 { padding: var(--dq-space-10) !important; }
.p-12 { padding: var(--dq-space-12) !important; }

.pt-0  { padding-top: var(--dq-space-0) !important; }
.pt-1  { padding-top: var(--dq-space-1) !important; }
.pt-2  { padding-top: var(--dq-space-2) !important; }
.pt-3  { padding-top: var(--dq-space-3) !important; }
.pt-4  { padding-top: var(--dq-space-4) !important; }
.pt-5  { padding-top: var(--dq-space-5) !important; }
.pt-6  { padding-top: var(--dq-space-6) !important; }
.pt-8  { padding-top: var(--dq-space-8) !important; }
.pt-10 { padding-top: var(--dq-space-10) !important; }
.pt-12 { padding-top: var(--dq-space-12) !important; }

.pb-0  { padding-bottom: var(--dq-space-0) !important; }
.pb-1  { padding-bottom: var(--dq-space-1) !important; }
.pb-2  { padding-bottom: var(--dq-space-2) !important; }
.pb-3  { padding-bottom: var(--dq-space-3) !important; }
.pb-4  { padding-bottom: var(--dq-space-4) !important; }
.pb-5  { padding-bottom: var(--dq-space-5) !important; }
.pb-6  { padding-bottom: var(--dq-space-6) !important; }
.pb-8  { padding-bottom: var(--dq-space-8) !important; }
.pb-10 { padding-bottom: var(--dq-space-10) !important; }
.pb-12 { padding-bottom: var(--dq-space-12) !important; }

/* ── Text ──────────────────────────────────────────────────────────────── */

.text-primary   { color: var(--dq-primary) !important; }
.text-secondary { color: var(--dq-secondary) !important; }
.text-accent    { color: var(--dq-accent) !important; }
.text-warning   { color: var(--dq-warning-dark) !important; }
.text-danger    { color: var(--dq-danger) !important; }
.text-success   { color: var(--dq-secondary) !important; }
.text-info      { color: var(--dq-accent) !important; }
.text-muted     { color: var(--dq-text-muted) !important; }
.text-light     { color: var(--dq-gray-400) !important; }
.text-dark      { color: var(--dq-text) !important; }

.text-center  { text-align: center !important; }
.text-left    { text-align: left !important; }
.text-right   { text-align: right !important; }
.text-justify { text-align: justify !important; }

.font-light    { font-weight: var(--dq-font-weight-light) !important; }
.font-normal   { font-weight: var(--dq-font-weight-normal) !important; }
.font-medium   { font-weight: var(--dq-font-weight-medium) !important; }
.font-semibold { font-weight: var(--dq-font-weight-semibold) !important; }
.font-bold     { font-weight: var(--dq-font-weight-bold) !important; }

/* ── Display ───────────────────────────────────────────────────────────── */

.d-none        { display: none !important; }
.d-inline      { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block       { display: block !important; }
.d-flex        { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid        { display: grid !important; }

/* ── Flexbox ───────────────────────────────────────────────────────────── */

.flex-row       { flex-direction: row !important; }
.flex-column    { flex-direction: column !important; }
.flex-wrap      { flex-wrap: wrap !important; }
.flex-nowrap    { flex-wrap: nowrap !important; }
.justify-start  { justify-content: flex-start !important; }
.justify-end    { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.align-start    { align-items: flex-start !important; }
.align-end      { align-items: flex-end !important; }
.align-center   { align-items: center !important; }
.align-baseline { align-items: baseline !important; }
.align-stretch  { align-items: stretch !important; }

/* ── Background ────────────────────────────────────────────────────────── */

.bg-primary        { background-color: var(--dq-primary) !important; }
.bg-primary-light  { background-color: var(--dq-primary-light) !important; }
.bg-primary-50     { background-color: var(--dq-primary-50) !important; }
.bg-secondary      { background-color: var(--dq-secondary) !important; }
.bg-secondary-light { background-color: var(--dq-secondary-light) !important; }
.bg-secondary-50   { background-color: var(--dq-secondary-50) !important; }
.bg-success        { background-color: var(--dq-secondary) !important; }
.bg-accent         { background-color: var(--dq-accent) !important; }
.bg-accent-50      { background-color: var(--dq-accent-50) !important; }
.bg-warning        { background-color: var(--dq-warning) !important; }
.bg-warning-50     { background-color: var(--dq-warning-50) !important; }
.bg-danger         { background-color: var(--dq-danger) !important; }
.bg-danger-50      { background-color: var(--dq-danger-50) !important; }
.bg-white          { background-color: var(--dq-white) !important; }
.bg-light          { background-color: var(--dq-bg) !important; }
.bg-dark           { background-color: var(--dq-gray-800) !important; }

/* ── Border ────────────────────────────────────────────────────────────── */

.border        { border: 1px solid var(--dq-border) !important; }
.border-0      { border: 0 !important; }
.border-top    { border-top: 1px solid var(--dq-border) !important; }
.border-bottom { border-bottom: 1px solid var(--dq-border) !important; }
.border-left   { border-left: 1px solid var(--dq-border) !important; }
.border-right  { border-right: 1px solid var(--dq-border) !important; }

.border-primary   { border-color: var(--dq-primary) !important; }
.border-secondary { border-color: var(--dq-secondary) !important; }
.border-success   { border-color: var(--dq-secondary) !important; }
.border-accent    { border-color: var(--dq-accent) !important; }
.border-warning   { border-color: var(--dq-warning) !important; }
.border-danger    { border-color: var(--dq-danger) !important; }
.border-light     { border-color: var(--dq-border) !important; }
.border-dark      { border-color: var(--dq-gray-600) !important; }

.rounded     { border-radius: var(--dq-radius) !important; }
.rounded-sm  { border-radius: var(--dq-radius-sm) !important; }
.rounded-md  { border-radius: var(--dq-radius-md) !important; }
.rounded-lg  { border-radius: var(--dq-radius-lg) !important; }
.rounded-xl  { border-radius: var(--dq-radius-xl) !important; }
.rounded-2xl { border-radius: var(--dq-radius-2xl) !important; }
.rounded-full { border-radius: var(--dq-radius-full) !important; }

/* ── Shadow ────────────────────────────────────────────────────────────── */

.shadow-sm   { box-shadow: var(--dq-shadow-sm) !important; }
.shadow      { box-shadow: var(--dq-shadow) !important; }
.shadow-md   { box-shadow: var(--dq-shadow-md) !important; }
.shadow-lg   { box-shadow: var(--dq-shadow-lg) !important; }
.shadow-xl   { box-shadow: var(--dq-shadow-xl) !important; }
.shadow-2xl  { box-shadow: var(--dq-shadow-2xl) !important; }
.shadow-none { box-shadow: none !important; }

/* ── Position ──────────────────────────────────────────────────────────── */

.position-static   { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed    { position: fixed !important; }
.position-sticky   { position: sticky !important; }

/* ── Sizing ────────────────────────────────────────────────────────────── */

.w-100    { width: 100% !important; }
.w-auto   { width: auto !important; }
.h-100    { height: 100% !important; }
.h-auto   { height: auto !important; }
.min-vh-75 { min-height: 75vh !important; }

/* ── Overflow ──────────────────────────────────────────────────────────── */

.overflow-auto    { overflow: auto !important; }
.overflow-hidden  { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll  { overflow: scroll !important; }

/* ── Cursor ────────────────────────────────────────────────────────────── */

.cursor-pointer     { cursor: pointer !important; }
.cursor-default     { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* ── Layout helpers ────────────────────────────────────────────────────── */

.content-with-navbar {
  padding-top: var(--dq-space-6) !important;
}

/* ── Bootstrap success color overrides ─────────────────────────────────
   Forces Bootstrap's green to our --dq-secondary across all component
   types. Loaded here so utilities win over Bootstrap defaults.
   ──────────────────────────────────────────────────────────────────── */

.btn-success {
  background-color: var(--dq-secondary) !important;
  border-color: var(--dq-secondary) !important;
}
.btn-success:hover {
  background-color: var(--dq-secondary-dark) !important;
  border-color: var(--dq-secondary-dark) !important;
}
.btn-success:focus {
  background-color: var(--dq-secondary-dark) !important;
  border-color: var(--dq-secondary-dark) !important;
  box-shadow: 0 0 0 0.2rem rgba(53, 225, 70, 0.25) !important;
}

.progress-bar.bg-success { background-color: var(--dq-secondary) !important; }
.progress-bar.bg-success.bg-opacity-50 {
  background-color: var(--dq-secondary-light) !important;
  opacity: 0.7 !important;
}

.badge.bg-success { background-color: var(--dq-secondary) !important; }

.alert-success {
  background-color: var(--dq-secondary-50) !important;
  border-color: var(--dq-secondary-light) !important;
  color: var(--dq-secondary-dark) !important;
}

/* ── Accessibility ─────────────────────────────────────────────────────── */

/* Visually hide content while keeping it in the accessibility tree.
   Used on labels that are redundant with placeholders but required for
   screen readers. Matches Bootstrap 5's .visually-hidden. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}