/* Oasis brand layer on top of Tailwind (loaded via CDN in each page). */

html { color-scheme: light; }
input, textarea, select { color: #0F172A; background-color: #FFFFFF; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #0F172A;
}

.font-heading { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; }

.card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
}
.card-elevated {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.btn-primary {
  background: #041E42; color: #fff; padding: .6rem 1rem;
  border: none; border-radius: 10px; font-weight: 600; font-size: .875rem;
  cursor: pointer; transition: background .15s;
}
.btn-primary:hover { background: #1E3D95; }
.btn-primary:active { background: #021029; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-secondary {
  background: #fff; color: #041E42; border: 1px solid #041E42;
  padding: .55rem 1rem; border-radius: 10px; font-weight: 600; font-size: .875rem;
  cursor: pointer;
}
.btn-secondary:hover { background: #F3F4F6; }

.btn-ghost {
  background: transparent; color: #475569; border: none;
  padding: .5rem .85rem; border-radius: 10px; font-weight: 500; font-size: .8125rem;
  cursor: pointer;
}
.btn-ghost:hover { background: #F3F4F6; }
.btn-ghost:disabled { opacity: .4; cursor: not-allowed; }

.input {
  width: 100%; padding: .6rem .75rem;
  border: 1px solid #E5E7EB; border-radius: 10px;
  font-size: .9rem; background: #fff; color: #0F172A;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus { outline: none; border-color: #497FD9; box-shadow: 0 0 0 3px rgba(73,127,217,0.15); }

.label {
  display: block; font-size: .8125rem; font-weight: 600;
  color: #0F172A; margin-bottom: .35rem;
}

.pill {
  display: inline-block; padding: .15rem .6rem; border-radius: 9999px;
  font-size: .75rem; font-weight: 600;
}
.pill-success { background: #DCFCE7; color: #16A34A; }
.pill-error   { background: #FEE2E2; color: #DC2626; }
/* Secondary marker for grantable-but-not-yet-enforced module columns —
   deliberately quieter than pill-success/pill-error (dashed border, no
   fill, muted text, smaller type) so it reads as informational, not a
   status the admin needs to act on. */
.pill-muted {
  background: transparent; border: 1px dashed #CBD5E1; color: #94A3B8;
  font-size: .65rem; font-weight: 500; text-transform: none; letter-spacing: normal;
}

.tile {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid #E5E7EB; border-radius: 16px;
  padding: 1.1rem 1.25rem; text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: border-color .15s, transform .15s;
}
.tile:hover { border-color: #497FD9; transform: translateY(-1px); }
.tile-label { font-weight: 600; color: #0F172A; }
.tile-chevron { width: 18px; height: 18px; color: #94A3B8; flex-shrink: 0; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 40; padding: 1rem;
}
.modal-card {
  background: #fff; border-radius: 16px; padding: 1.75rem;
  width: 100%; max-width: 26rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.toast {
  padding: .6rem 1.1rem; border-radius: 10px;
  font-size: .8125rem; font-weight: 600; color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.toast-success { background: #041E42; }
.toast-error   { background: #DC2626; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #497FD9;
  outline-offset: 2px;
  border-radius: 6px;
}