/**
 * braceai.utils.css  — Design System v3.0
 * ─────────────────────────────────────────────────────────────
 * BraceAI — Utility classes
 * Single-purpose classes that pull directly from token values.
 * Replaces hardcoded inline style="" colour attributes.
 * Import AFTER tokens and shared, BEFORE page-specific CSS.
 * ─────────────────────────────────────────────────────────────
 */

/* ════════════════════════════════════════════════════════════
   GHOST BUTTON — for outline buttons sitting on dark backgrounds
   (hero, CTA band, dark cards)
   ════════════════════════════════════════════════════════════ */
.u-ghost-dark {
  color:        rgba(255,255,255,.75) !important;
  border-color: rgba(255,255,255,.20) !important;
}
.u-ghost-dark:hover {
  color:        #fff !important;
  border-color: rgba(255,255,255,.50) !important;
  background:   rgba(255,255,255,.08) !important;
}

/* ════════════════════════════════════════════════════════════
   INLINE LINK BUTTON — <button> that looks like a text link
   ════════════════════════════════════════════════════════════ */
.u-link-btn {
  background:  none;
  border:      none;
  color:       var(--braceai-brand);
  font-weight: 700;
  cursor:      pointer;
  font-family: var(--braceai-font-body);
  font-size:   inherit;
  padding:     0;
  display:     inline;
}
.u-link-btn:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════
   ICON BACKGROUND TINTS
   Arm-aligned — mirrors the 4 agent arm accent colours plus
   semantic additions. Use on icon wrapper elements.
   ════════════════════════════════════════════════════════════ */

/* Arm colours — non-negotiable */
.u-icon-bg-career  { background: rgba(232,93,4,0.10);   }   /* Career Agent */
.u-icon-bg-purple  { background: rgba(139,92,246,0.10); }   /* Personal Branding */
.u-icon-bg-green   { background: rgba(16,185,129,0.10); }   /* Course Engine */
.u-icon-bg-blue    { background: rgba(62,115,250,0.10); }   /* Business / brand blue */

/* Semantic additions */
.u-icon-bg-red     { background: rgba(239,68,68,0.10);  }
.u-icon-bg-amber   { background: rgba(245,158,11,0.10); }
.u-icon-bg-pink    { background: rgba(236,72,153,0.10); }
.u-icon-bg-brand   { background: rgba(84,34,186,0.10);  }   /* Core brand purple */
.u-icon-bg-teal    { background: rgba(6,182,212,0.10);  }
.u-icon-bg-gray    { background: rgba(100,116,139,0.10);}

/* ════════════════════════════════════════════════════════════
   TEXT COLOURS
   ════════════════════════════════════════════════════════════ */
.u-text-brand    { color: var(--braceai-brand-light);  }
.u-text-purple   { color: var(--braceai-navy-500);     }
.u-text-muted    { color: var(--braceai-gray);         }
.u-text-body     { color: var(--braceai-body);         }
.u-text-white    { color: #fff;                         }
.u-text-white-75 { color: rgba(255,255,255,.75);        }
.u-text-white-52 { color: rgba(255,255,255,.52);        }
.u-text-white-35 { color: rgba(255,255,255,.35);        }

/* ════════════════════════════════════════════════════════════
   BACKGROUND FILLS
   ════════════════════════════════════════════════════════════ */
.u-bg-hero       { background: var(--grad-hero);           }
.u-bg-hero-rich  { background: var(--grad-hero-rich);      }
.u-bg-purple     { background: var(--grad-purple);         }
.u-bg-blue       { background: var(--grad-blue);           }
.u-bg-sweep      { background: var(--grad-brand-sweep);    }
.u-bg-cta        { background: var(--grad-cta);            }
.u-bg-surface    { background: var(--braceai-surface);     }
.u-bg-page       { background: var(--braceai-bg);          }

/* ════════════════════════════════════════════════════════════
   ADMIN UTILITY — loading screen logo mark
   ════════════════════════════════════════════════════════════ */
.u-adm-mark {
  width:           44px;
  height:          44px;
  background:      linear-gradient(135deg, var(--braceai-navy-500), var(--braceai-navy-400));
  border-radius:   12px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--braceai-font-display);
  font-weight:     900;
  font-size:       20px;
  color:           #fff;
  box-shadow:      var(--braceai-shadow-purple);
  flex-shrink:     0;
}

.u-adm-mark-sm {
  width:        30px;
  height:       30px;
  font-size:    13px;
  border-radius: 8px;
}

/* ════════════════════════════════════════════════════════════
   ADMIN UTILITY — progress / loading bar
   ════════════════════════════════════════════════════════════ */
.u-adm-progress-track {
  width:         40px;
  height:        3px;
  background:    rgba(255,255,255,.08);
  border-radius: 999px;
  overflow:      hidden;
}
.u-adm-progress-bar {
  height:        100%;
  width:         60%;
  background:    var(--grad-blue);
  border-radius: 999px;
}

/* ════════════════════════════════════════════════════════════
   ADMIN UTILITY — access-denied CTA button
   ════════════════════════════════════════════════════════════ */
.u-adm-denied-btn {
  background:    var(--grad-cta);
  color:         #fff;
  border:        none;
  border-radius: 999px;
  padding:       12px 28px;
  font-family:   var(--braceai-font-display);
  font-weight:   700;
  font-size:     14px;
  cursor:        pointer;
  margin-top:    4px;
  box-shadow:    var(--braceai-shadow-cta);
  transition:    filter .2s, transform .2s;
}
.u-adm-denied-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ════════════════════════════════════════════════════════════
   ADMIN UTILITY — code / SQL block on dark background
   ════════════════════════════════════════════════════════════ */
.u-code-block {
  background:    var(--braceai-navy-900);
  color:         var(--braceai-navy-200);
  padding:       16px;
  border-radius: 12px;
  font-size:     11px;
  font-family:   var(--braceai-font-mono);
  overflow-x:    auto;
  white-space:   pre-wrap;
  line-height:   1.6;
}

/* ════════════════════════════════════════════════════════════
   MODAL OVERLAY — dark-tinted full-screen backdrop
   ════════════════════════════════════════════════════════════ */
.u-modal-overlay {
  position:        fixed;
  inset:           0;
  z-index:         500;
  background:      rgba(22,8,56,.60);
  backdrop-filter: blur(4px);
  display:         flex;
  align-items:     center;
  justify-content: center;
}