/* =========================================================
   GradMate — Base styles (layout, typography, surfaces)
   Depends on: app.tokens.css
   Goal: make Bootstrap look "app-like" without fighting it
   ========================================================= */

/* -----------------------------
   1) Global layout / body
------------------------------ */
html, body{
  height: 100%;
}

body{
  background: var(--app-bg);
  color: var(--app-text);
}

/* Make text rendering a bit nicer */
body, button, input, select, textarea{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links (Bootstrap mapping already set, this just improves readability) */
a{
  text-underline-offset: 0.18em;
}

/* A subtle max width helper if needed */
.gmMax{
  max-width: 1100px;
}

/* -----------------------------
   2) Cards / surfaces
------------------------------ */
.card{
  border-radius: var(--app-radius);
  background: var(--app-surface);
  border-color: var(--app-border);
}

.card.shadow-sm{
  box-shadow: var(--app-shadow);
}

/* Soft surface helper */
.gmSurface{
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
}

.gmSoft{
  background: var(--app-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
}

/* -----------------------------
   3) Tables (admin-friendly)
------------------------------ */
.table{
  color: var(--app-text);
}

.table thead.table-light th{
  background: rgba(15, 23, 42, 0.04);
  border-bottom-color: var(--app-border);
}

body.dark-mode .table thead.table-light th,
html[data-bs-theme="dark"] .table thead.table-light th{
  background: rgba(255, 255, 255, 0.06);
}

/* Less “busy” table borders */
.table > :not(caption) > * > *{
  border-bottom-color: var(--app-border);
}

/* =========================================================
   4) Forms — consistent inputs across the app
   ========================================================= */

.form-control,
.form-select{
  border-radius: .9rem;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-text);
}

.form-control::placeholder{
  color: rgba(100,116,139,.85);
}

.form-control:focus,
.form-select:focus{
  border-color: rgba(109,40,217,.45);
  box-shadow: 0 0 0 .18rem rgba(109,40,217,.18);
}

/* Dark mode */
body.dark-mode .form-control,
body.dark-mode .form-select,
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(226,232,240,.95);
}

body.dark-mode .form-control::placeholder,
html[data-bs-theme="dark"] .form-control::placeholder{
  color: rgba(226,232,240,.55);
}


/* -----------------------------
   5) Alerts / badges (subtle polish)
------------------------------ */
.alert{
  border-radius: var(--app-radius);
  border-color: var(--app-border);
}

.badge{
  border-radius: 999px;
}

/* -----------------------------
   6) Modals / dropdowns / offcanvas
------------------------------ */
.dropdown-menu,
.modal-content,
.offcanvas{
  border-radius: var(--app-radius);
  border-color: var(--app-border);
  background: var(--app-surface);
  color: var(--app-text);
}

body.dark-mode .dropdown-menu,
body.dark-mode .modal-content,
body.dark-mode .offcanvas,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .offcanvas{
  background: var(--app-surface);
  color: var(--app-text);
}

/* Ensure popovers/tooltips aren't hidden behind fixed UI */
.dropdown-menu{ z-index: 1100; }
.modal{ z-index: 1200; }
.offcanvas{ z-index: 1250; }

/* -----------------------------
   7) Utility helpers
------------------------------ */
.text-muted{
  color: var(--app-muted) !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end{
  border-color: var(--app-border) !important;
}

/* Soft separators */
.gmDivider{
  height: 1px;
  background: var(--app-border);
  width: 100%;
}