/* =========================================================
   GradMate — Buttons (readable in LIGHT + DARK)
   Depends on: app.tokens.css
   Goal:
   - Consistent sizing, padding, radius
   - No invisible outline buttons in dark mode
   - Keep Bootstrap doing 95% of the work
   ========================================================= */

/* -----------------------------
   1) Global Bootstrap button polish
------------------------------ */
.btn{
  border-radius: 0.9rem;
  font-weight: 600;
  letter-spacing: .1px;
}

.btn-lg{
  padding: .75rem 1.25rem;
}

.btn-sm{
  padding: .45rem .85rem;
}

/* Make icons align nicely */
.btn i{
  vertical-align: -0.05em;
}

/* -----------------------------
   2) Primary button: a bit more "app"
   (keeps Bootstrap primary but adds subtle depth)
------------------------------ */
.btn-primary{
  box-shadow: var(--cta-glow);
}

.btn-primary:hover{
  transform: translateY(-1px);
}

.btn-primary:active{
  transform: translateY(0px);
}

/* -----------------------------
   3) GradMate unified button sizing (use in views)
   Example:
   - class="btn btn-primary gmBtn gmBtn--solid"
   - class="btn btn-dark gmBtn gmBtn--dark"
   - class="btn gmBtn gmBtn--ghost"
------------------------------ */
.gmBtn{
  font-weight: 650;
  padding: .50rem 1.05rem;
  border-radius: .85rem;
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

.gmBtn:hover{
  transform: translateY(-1px);
}

.gmBtn:active{
  transform: translateY(0px);
  box-shadow: 0 .2rem .55rem rgba(0,0,0,.08);
}

/* Keep shadows subtle on light backgrounds */
html:not([data-bs-theme="dark"]) .gmBtn,
body:not(.dark-mode) .gmBtn{
  box-shadow: 0 .25rem .75rem rgba(2, 6, 23, .08);
}

/* -----------------------------
   4) Dark button: always readable
------------------------------ */
.gmBtn--dark{
  border-color: rgba(255,255,255,.12);
}

body.dark-mode .gmBtn--dark,
html[data-bs-theme="dark"] .gmBtn--dark{
  box-shadow: 0 .35rem 1rem rgba(0,0,0,.35);
}

/* -----------------------------
   5) Ghost button (best replacement for outline-secondary)
   - visible in dark mode
   - not "everything is black"
------------------------------ */
.gmBtn--ghost{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}

.gmBtn--ghost:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}

html:not([data-bs-theme="dark"]) .gmBtn--ghost,
body:not(.dark-mode) .gmBtn--ghost{
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.12);
  color: var(--app-text);
}

html:not([data-bs-theme="dark"]) .gmBtn--ghost:hover,
body:not(.dark-mode) .gmBtn--ghost:hover{
  background: rgba(15,23,42,.07);
  border-color: rgba(15,23,42,.18);
  color: var(--app-text);
}

/* -----------------------------
   6) Safer outlines (optional)
   If you still use btn-outline-secondary anywhere,
   this keeps it readable in dark mode.
------------------------------ */
body.dark-mode .btn-outline-secondary,
html[data-bs-theme="dark"] .btn-outline-secondary{
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.18);
}

body.dark-mode .btn-outline-secondary:hover,
html[data-bs-theme="dark"] .btn-outline-secondary:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.26);
  color: #fff;
}