/* ============================================================
   SIL PORTALS — NEXDASH-INSPIRED OVERRIDE
   Loads AFTER mentors.css / students.css.
   Same language: paper background, black pill CTAs,
   white soft cards, no neon glow. No images.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

body {
  background: #F4F2EB !important;
  color: #111412 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
h1, h2, h3, h4 { font-family: 'Space Grotesk', 'Inter', sans-serif !important; letter-spacing: -0.03em !important; color: #111412 !important; }
:focus-visible { outline: 2.5px solid #111 !important; outline-offset: 3px; }

/* ---- Login screens: light paper, centered white card ---- */
.login-screen, .m-login-screen {
  background: #F4F2EB !important;
}
.login-bg, .m-login-bg-grid, .login-particles, .m-login-particles { display: none !important; }
.login-content, .m-login-content { max-width: 460px; margin: 0 auto; }
.login-logo, .m-login-logo {
  background: #fff !important; border: 1px solid #E4E0D2 !important;
  border-radius: 100px !important; padding: 8px 18px !important;
  display: inline-flex !important; box-shadow: 0 4px 16px rgba(0,0,0,.05) !important;
}
.login-led, .m-login-led { display: none !important; }
.login-brand, .m-login-brand { color: #111 !important; }
.login-badge, .m-login-badge {
  background: #111 !important; color: #D7FF3E !important;
  border-radius: 100px !important; font-size: 11px !important;
}
.login-title, .m-login-title { color: #111 !important; letter-spacing: -0.04em !important; }
.login-subtitle, .m-login-subtitle { color: #626862 !important; }
.login-card, .m-login-card {
  background: #fff !important; border: 1px solid #E4E0D2 !important;
  border-radius: 22px !important; box-shadow: 0 16px 40px rgba(17,20,18,.08) !important;
}
.login-label, .m-login-label { color: #626862 !important; letter-spacing: .1em !important; }
.login-input, .m-login-input {
  background: #F8F7F2 !important; border: 1px solid #E4E0D2 !important;
  border-radius: 12px !important; color: #111 !important;
}
.login-input:focus, .m-login-input:focus { border-color: #111 !important; box-shadow: 0 0 0 3px rgba(17,20,18,.08) !important; }
.login-input-glow { display: none !important; }
.login-btn, .m-login-btn-primary {
  background: #111412 !important; color: #fff !important;
  border-radius: 100px !important; box-shadow: none !important; font-weight: 600 !important;
}
.login-btn:hover, .m-login-btn-primary:hover { background: #000 !important; transform: translateY(-1px) !important; }
.login-hint, .m-login-footer-hint { color: #626862 !important; }
.login-hint a { color: #111 !important; font-weight: 600 !important; }
.login-error, .m-login-error { color: #B3261E !important; }

/* ---- Two-font lockdown: Inter + Space Grotesk only ---- */
body, p, li, ul, ol, a, span, div, input, select, textarea, button,
label, option, code, pre {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
}

/* ---- Letter-code chips (badge / resource emoji replacements) ---- */
.s-badge-emoji, .m-badge-icon, .s-resource-icon {
  background: #F1EFE6 !important;
  border: 1px solid #E4E0D2 !important;
  border-radius: 8px !important;
  color: #111 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  padding: 4px 8px !important;
}

/* ---- Initials avatars ---- */
.m-mentee-avatar, .s-welcome-avatar, .m-hero-avatar {
  background: #111412 !important;
  color: #fff !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}
.s-welcome-avatar span { font-size: 22px !important; font-weight: 700 !important; }

/* ---- WhatsApp + action buttons back to ink ---- */
#m-whatsapp-invite-btn {
  background: #111412 !important;
  color: #fff !important;
  box-shadow: none !important;
}
#m-whatsapp-invite-btn:hover { background: #000 !important; }

/* ---- Light-surface contrast fixes ---- */
a[title="Switch to Mentor Portal"] {
  background: #fff !important;
  border: 1px solid #E4E0D2 !important;
  color: #111 !important;
}
.m-login-content div[style*="243,246,245"] { color: #626862 !important; }

/* ---- Portal navs: floating white pill ---- */

.s-nav, .m-nav {
  position: sticky !important; top: 14px !important; z-index: 200 !important;
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(17,20,18,.08) !important;
  border-radius: 100px !important;
  box-shadow: 0 8px 32px rgba(17,20,18,.08) !important;
  max-width: 1100px !important; margin: 14px auto 0 !important; width: calc(100% - 28px) !important;
}
.s-nav-brand-text, .m-nav-brand-text { color: #111 !important; }
.s-nav-led, .m-nav-led, .m-nav-sync-dot { display: none !important; }
.s-nav-brand-badge, .m-nav-role-badge {
  background: #111 !important; color: #fff !important; border-radius: 100px !important;
}
.s-nav-greeting { color: #333 !important; }
.s-nav-logout, .m-nav-logout-btn {
  background: #F1EFE6 !important; border: 1px solid #E4E0D2 !important;
  border-radius: 50% !important; color: #111 !important;
}
.s-nav-logout:hover, .m-nav-logout-btn:hover { background: #111 !important; color: #fff !important; }
.m-nav-sync-pill {
  background: #E9F9E4 !important; border: 1px solid #BDE5B8 !important;
  color: #1A7A2E !important; border-radius: 100px !important;
}
.m-nav-switch-btn {
  background: #fff !important; border: 1px solid #E4E0D2 !important;
  color: #111 !important; border-radius: 100px !important;
}

/* ---- Dashboard surfaces ---- */
.s-main, .m-main { background: transparent !important; }
.s-welcome, .m-hero {
  background: #111412 !important; color: #fff !important;
  border-radius: 26px !important; border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 16px 40px rgba(17,20,18,.12) !important;
}
.s-welcome-bg, .m-hero-bg-grid { display: none !important; }
.s-welcome h1, .m-hero-name { color: #fff !important; }
.s-welcome-sub, .m-hero-role { color: #A7AEA6 !important; }
.s-welcome-streak, .s-welcome-code-tag, .m-tag-pill {
  background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important; border-radius: 100px !important;
}
.s-welcome-avatar, .m-hero-avatar { background: #D7FF3E !important; color: #111 !important; }

/* Cards */
.s-card, .m-card {
  background: #fff !important; border: 1px solid #E4E0D2 !important;
  border-radius: 20px !important; box-shadow: 0 2px 12px rgba(17,20,18,.05) !important;
}
.s-card-label, .m-card-label { color: #8A8F88 !important; letter-spacing: .12em !important; }
.s-card h2, .m-card h3 { color: #111 !important; }
.s-card-desc, .m-project-desc-text { color: #626862 !important; }
.s-card-icon, .m-card-icon { background: #F1EFE6 !important; color: #111 !important; border: 1px solid #E4E0D2 !important; }
.s-card-icon--amber, .m-card-icon--amber, .s-card-icon--teal, .m-card-icon--teal,
.s-card-icon--violet, .m-card-icon--violet, .m-card-icon--blue { background: #F1EFE6 !important; color: #111 !important; }

.s-meta-item, .m-meta-badge {
  background: #F8F7F2 !important; border: 1px solid #E4E0D2 !important;
  border-radius: 12px !important; color: #333 !important;
}
.s-meta-label, .m-eval-label, .m-field-label { color: #8A8F88 !important; }
.s-meta-value--teal { color: #17402F !important; }
.s-status-badge { border-radius: 100px !important; }
.s-progress-bar { background: #EDEAE0 !important; border-radius: 100px !important; }
.s-progress-fill, .s-check-fill { background: #111 !important; border-radius: 100px !important; }
.s-progress-percent { color: #111 !important; }
.s-mentor-tip, .m-tip-box {
  background: #F8F7F2 !important; border: 1px solid #E4E0D2 !important; border-radius: 14px !important;
}
.m-tip-textarea, .m-notes-textarea, .m-field-input, .m-add-input, .m-phase-select {
  background: #fff !important; border: 1px solid #E4E0D2 !important;
  border-radius: 12px !important; color: #111 !important;
}
.m-publish-btn, .m-add-btn, #m-save-session-btn {
  background: #111412 !important; color: #fff !important; border-radius: 100px !important;
}
.m-publish-btn:hover, .m-add-btn:hover { background: #000 !important; }
.m-progress-slider { accent-color: #111 !important; }
.m-badge-shelf, .s-badges-grid { gap: 12px !important; }
.m-resource-card {
  background: #F8F7F2 !important; border: 1px solid #E4E0D2 !important; border-radius: 14px !important;
}
.m-resource-card:hover { border-color: #111 !important; transform: translateY(-2px) !important; }
.m-res-title { color: #111 !important; }
.m-res-sub { color: #626862 !important; }
.s-contact-item { color: #333 !important; }
.s-countdown-ring { border: none !important; }
.m-floating-preview-btn {
  background: #111 !important; color: #fff !important; border-radius: 100px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.2) !important;
}
.m-modal-card { background: #fff !important; border-radius: 22px !important; border: 1px solid #E4E0D2 !important; }
.m-modal-header { border-bottom: 1px solid #EDEAE0 !important; }
.s-footer, .m-footer { color: #8A8F88 !important; }

/* ---------- Aesthetic polish: motion + type ---------- */
h1, h2, h3, h4 { text-wrap: balance !important; }
.s-card, .m-card, .m-resource-card {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}
.s-card:hover, .m-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 30px rgba(17,20,18,.09) !important;
}
.s-progress-fill { transition: width .6s ease !important; }
.m-publish-btn, .m-add-btn, #m-save-session-btn, .login-btn, .m-login-btn-primary,
#m-whatsapp-invite-btn, .m-floating-preview-btn, .s-nav-logout, .m-nav-logout-btn,
.m-nav-switch-btn {
  transition: transform .2s ease, background-color .2s ease, color .2s ease !important;
}
.m-publish-btn:active, .m-add-btn:active, #m-save-session-btn:active,
.login-btn:active, .m-login-btn-primary:active, #m-whatsapp-invite-btn:active,
.m-floating-preview-btn:active {
  transform: scale(.98) !important;
}
.m-login-input, .login-input, .m-tip-textarea, .m-notes-textarea,
.m-field-input, .m-add-input, .m-phase-select {
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

/* ---------- Flat: no shadows ---------- */
body .s-nav, body .m-nav,
body .login-card, body .m-login-card, body .login-logo, body .m-login-logo,
body .s-card, body .m-card, body .s-welcome, body .m-hero,
body .m-floating-preview-btn {
  box-shadow: none !important;
}
body .s-card:hover, body .m-card:hover { box-shadow: none !important; }