:root{
  --muted:#333333;
  --accent:#0077B6;
  --surface:#ffffff;
  --shadow:0 10px 24px rgba(0,0,0,0.08);

  --brand-purple:#7A39FF;
  --brand-purple-900:#33204f;
  --brand-purple-700:#4b2c86;
  --brand-purple-500:#6d31ff;
  --brand-blue-500:#2e79ff;
}

/* -------------------------------------------------- */
/* BASE                                               */
/* -------------------------------------------------- */

html,body{overflow-x:hidden}
body{
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin:0; padding:0; min-height:100vh; position:relative;

  /* pastel background (all pages) */
  background:
    radial-gradient(55% 60% at 12% 5%, rgba(194,164,255,0.80) 0%, rgba(194,164,255,0.18) 48%, rgba(194,164,255,0) 68%),
    radial-gradient(60% 70% at 88% 70%, rgba(171,215,236,0.70) 0%, rgba(171,215,236,0.18) 52%, rgba(171,215,236,0) 70%),
    linear-gradient(180deg,#fff 0%, #f7f6fb 36%, #f2f0fa 60%, #efeafb 100%);
  background-attachment: fixed;
  color:var(--muted);
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:rgba(255,255,255,0.12);
  backdrop-filter: blur(6px) saturate(110%);
}
.page-container{ position:relative; z-index:1; }

/* -------------------------------------------------- */
/* HEADER                                              */
/* -------------------------------------------------- */

.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 28px;
  background:linear-gradient(180deg, #fcfdfe, #fbfcfd);
  border-bottom:1px solid rgba(0,0,0,0.04);
  position:relative;
  z-index: 3;
  backdrop-filter:none;
}

/* BIGGER like the original */
.site-title{
  font-weight:800;
  font-size:1.9rem;
  margin:0;
  letter-spacing:.3px;
}

.brand{display:flex; align-items:center; gap:14px}
.header-logo{height:40px}

/* Nav buttons */
nav ul{list-style:none; margin:0; padding:0; display:flex; gap:14px}
.nav-btn{
  padding:10px 18px;
  border-radius:999px;
  text-decoration:none;
  display:inline-block;
  font-weight:600;
}
.nav-btn-outline{border:1px solid rgba(0,0,0,.12); color:#111; background:#fff}
.nav-btn-outline:hover{background:#f7f7fb}


/* === NAV ALIGNMENT FIX === 11/8/25 */
.site-header nav a.nav-btn,
.site-header nav button.nav-btn {
  height: 41.8px;
  line-height: 41.8px;
  font-size: 15px;
  padding: 0 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  box-sizing: border-box;
}

/* Make logout <button> behave like a link */
.site-header nav button.nav-btn {
  font: inherit;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  color: #111;
  cursor: pointer;
}

/* Normalize Sign Up button to same size too */
.site-header nav a.btn-primary-purple,
.site-header nav button.btn-primary-purple {
    background: var(--brand-purple-500) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 15px !important;

    /* sizing */
    height: 41.8px !important;
    padding: 0 20px !important;
    line-height: 41.8px !important;

    /* shape & layout */
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;

    /* glow */
    box-shadow: 0 6px 18px rgba(109,49,255,0.22) !important;
    border: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.site-header nav a.btn-primary-purple:hover,
.site-header nav button.btn-primary-purple:hover {
    background: var(--brand-purple-600) !important;
    box-shadow: 0 6px 22px rgba(109,49,255,0.35) !important;
    transform: translateY(-1px);
}

.site-header nav a.btn-primary-purple:active,
.site-header nav button.btn-primary-purple:active {
    transform: translateY(0);
    box-shadow: 0 4px 14px rgba(109,49,255,0.28);
}


.btn-outline-dark{
  background:rgba(255,255,255,.08);
  color:#000;
  border:1px solid rgba(0,0,0,.35);
  padding:10px 18px;
  border-radius:999px;
  font-weight:600;
}
.btn-outline-dark:hover{
  background:rgba(255,255,255,.16);
  color:#000;
}

/* -------------------------------------------------- */
/* LOGIN CARD / LOGO                                   */
/* -------------------------------------------------- */

.landing-viewport{
  max-width:980px;
  margin:0 auto;
  padding:36px 16px 120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}

/* Reduce login-logo so it matches proportion on screenshot */
.logo-wrap{
  position:relative;
  width:min(360px, 80vw);
  margin: 10px auto 8px;
}
.logo-wrap::before{
  content:""; position:absolute; inset:-16% -18% -18%;
  background:
    radial-gradient(80% 80% at 15% 10%, rgba(192,158,255,.70) 0%, rgba(192,158,255,0) 65%),
    radial-gradient(90% 90% at 95% 80%, rgba(152,209,231,.55) 0%, rgba(152,209,231,0) 60%);
  filter: blur(22px);
  z-index:0;
}
.logo-large{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:auto;
  mix-blend-mode:multiply;
}
/* -------------------------------------------------- */
/* LOGIN FORM / REMEMBER ME FIX                        */
/* -------------------------------------------------- */

.login-form{
  width:100%; 
  max-width:420px;   /* ✅ back to correct width */
  background:linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.74));
  backdrop-filter:blur(6px) saturate(110%);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 18px 45px rgba(20,16,40,.18);
  border-radius:14px;
  padding:28px;
  margin-top:14px;
}

.login-form input:not([type="checkbox"]),
.login-form select{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:14px 16px;
  margin:12px 0;
  border:1px solid #e6e6e6;
  border-radius:10px;
  font-size:15px;
}
.login-form input:focus,
.login-form select:focus{
  outline:3px solid rgba(0,119,182,0.12);
  border-color:var(--accent);
}

/* Checkbox formatting */
.login-form input[type="checkbox"]{
  width:auto;
  height:auto;
  margin:0 6px 0 0;
}

/* Remember me label */
.remember-label{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  font-size:0.95rem;
  color:#333;
}

/* Forgot link centered below */
.forgot-line{
  text-align:center;
  margin:10px 0 0;
  width:100%;
}

/* Buttons */
.btn{
  display:inline-block;
  text-decoration:none;
  border-radius:12px;
  padding:12px 20px;
  font-weight:700;
  border:0;
  cursor:pointer;
}

.btn-primary-blue{
  background:var(--accent);
  color:#fff;
  box-shadow:0 10px 22px rgba(0,119,182,.18);
}
.btn-primary-blue:hover{
  transform:translateY(-2px);
}

/* -------------------------------------------------- */
/* FOOTER                                              */
/* -------------------------------------------------- */

.footer{
  text-align:center;
  color: rgba(0,0,0,.55);
  padding:16px;
  margin:24px 0;
  position: relative;
  z-index: 3;
}

/* -------------------------------------------------- */
/* HOME HERO (GRADIENT VISIBILITY FIX)                 */
/* -------------------------------------------------- */

.hero-wrap{
  padding:42px 18px 72px;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  min-height:calc(100vh - 120px);
}

.hero-box{
  width:min(1100px, 92vw);
  border-radius:22px;
  padding:48px 40px;
  margin:0 auto;
  color:#fff;

  /* make gradient SOFTER under text */
  background:
    radial-gradient(60% 70% at 80% 20%, rgba(26,166,255,0.12) 0%, rgba(26,166,255,0) 60%),
    linear-gradient(135deg, #2B1C45 0%, #4B2C86 45%, #1E2C4F 100%);
  box-shadow:
    0 30px 60px rgba(0,0,0,.35),
    inset 0 0 120px rgba(255,255,255,.06);
}

.hero-title{
  font-weight:800;
  font-size: clamp(30px, 4.8vw, 48px);
  line-height:1.12;
  margin:0 0 22px;
  text-shadow:0 12px 40px rgba(0,0,0,.5);
}

.hero-kicker{
  font-size:17px;
  font-weight:600;
  margin:0 0 18px;
  color:#eae8ff;
}

.hero-body{
  max-width:780px;
  line-height:1.65;
  margin:0 0 26px;
  color:#f1efff;
}

.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

@media (max-width:720px){
  .login-form{max-width:92vw;}
  .hero-box{padding:32px 22px}
}


/* --- PATCH: Home paragraph width (friend style) --- */
.hero-body,
.home-body,
.home-sub {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

/* --- FINAL PATCH: Center login button correctly --- */
.login-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* checkbox stays left */
    justify-content: flex-start !important;
    width: 100%;
}
.login-actions .btn-primary-blue {
    align-self: center !important;  /* login button centered */
    margin-top: 12px;
}

/* Base style for Sign Up pill (missing before) */
/* Final visual balance tweak */
/* FINAL REAL SIGN UP BUTTON FIX */
.btn-primary-purple {
    background: var(--brand-purple-500) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(109,49,255,0.25) !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 25px !important;        /* matches Home / Log In */
    padding: 30px 32px !important;   /* reduced from 10px */
    font-size: 15px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    margin-top: 2px !important;     /* visual nudge down */
}

/* --- FINAL PERFECT FIX: match height to Home/Log in --- */
.site-header nav a.btn-primary-purple {
    background: var(--brand-purple-500) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 15px !important;

    /* sizing */
    height: 41.8px !important;
    padding: 0 20px !important;   /* tighter left/right */
    line-height: 41.8px !important; /* vertically centers text in same way as others */

    /* shape & layout */
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;

    /* glow */
    box-shadow: 0 6px 18px rgba(109,49,255,0.22) !important;
}

/* ==========================
   Session Timeout Modal Styles
   ========================== */

#session-timeout-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 999;
}

#session-timeout-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: min(92vw, 360px);
  font-family: 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

#session-timeout-modal .modal-content {
  background: #fff;
  border-radius: 12px;
  padding: 24px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  text-align: center;
}

#session-timeout-modal h2 {
  margin: 0 0 8px 0;
  font-size: 20px;
}

#session-timeout-modal p {
  margin: 6px 0;
  line-height: 1.4;
}

#timeout-countdown {
  font-weight: 700;
}

#stay-logged-in {
  margin-top: 14px;
  padding: 10px 16px;
  background: #5A5DF0;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

#stay-logged-in:hover {
  opacity: 0.9;
}

/* ==========================
   Session Timeout Modal Animation & Blur
   ========================== */

#session-timeout-overlay {
  backdrop-filter: blur(3px); /* background blur for premium UI */
}

/* fade + scale animation */
@keyframes modalFadeScale {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

#session-timeout-modal .modal-content {
  animation: modalFadeScale 0.25s ease-out;
}

/* ==========================================================
   Student Prefill Panel Styling
   ========================================================== */

.student-prefill-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  border: 1px solid #e2e2e2;
  max-width: 450px;
}

.student-prefill-card h3 {
  margin-top: 0;
  font-size: 1.2rem;
  margin-bottom: 16px;
  color: #333;
  font-weight: 600;
}

.student-prefill-card .form-group {
  margin-bottom: 12px;
}

.student-prefill-card label {
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
  color: #444;
}

.student-prefill-card input[readonly] {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  cursor: not-allowed;
}


.flash-container {
  margin-bottom: 20px;
}

.alert {
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 600;
  margin-bottom: 10px;
}

.alert-error {
  background-color: #ffe5e5;
  color: #a40000;
  border-left: 4px solid #d60000;
}

.alert-success {
  background-color: #eaffea;
  color: #0a7a0a;
  border-left: 4px solid #0f9c0f;
}


.flash-container { margin: 15px 0; }
.flash {
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  font-weight: bold;
}
.flash-error {
  background: #ffdddd;
  color: #a00000;
  border-left: 4px solid #a00000;
}
.flash-warning {
  background: #fff3cd;
  color: #8a6d00;
  border-left: 4px solid #8a6d00;
}
.flash-message, .flash-success {
  background: #ddffdd;
  color: #006600;
  border-left: 4px solid #006600;
}


.action-btn {
  background: #E8E8E8;
  border: 1px solid #ccc;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.15s ease;
  font-size: 0.85rem;
}

.action-btn:hover {
  background: #d7d7d7;
}


.btn-action {
    background: #f0f0f0;
    border: 1px solid #ccc;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s ease;
}

.btn-action:hover {
    background: #e4e4e4;
}

.btn-cancel, .btn-reschedule {
    background: #f0f0f0;
}

.reset-link {
    color: #6a0dad;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    padding: 6px 10px;
}

.reset-link:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* Unified cancel/reschedule buttons */
.btn-action {
    background: #f0f0f0;
    border: 1px solid #ccc;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s ease;
}

.btn-action:hover {
    background: #e4e4e4;
}

.btn-cancel,
.btn-reschedule {
    background: #f0f0f0 !important; /* ensure matching color */
}


/* Student page Reset link style */
.reset-link {
    color: #6a0dad;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    padding: 6px 10px;
}

.reset-link:hover {
    text-decoration: underline;
    opacity: 0.8;
}


/* Modal buttons */
.modal-buttons button {
    cursor: pointer;
}

#cancelNo {
    background: #e0e0e0;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
}

#cancelYes {
    background: #b00020;
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
}

/* ============================================================
   ACTION BUTTONS (Cancel + Reschedule)
============================================================ */
.btn-action {
    background: #f3f3f3 !important;
    border: 1px solid #ccc !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    color: #222 !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    box-shadow: none !important;
}

/* Cancel / Reschedule should look the SAME */
.btn-action.btn-cancel,
.btn-action.btn-reschedule {
    border-color: #ccc !important;
    background-color: #f3f3f3 !important;
    color: #222 !important;
}

/* Hover */
.btn-action:hover {
    background: #e6e6e6 !important;
}


.btn-primary-purple {
    background: linear-gradient(90deg, #7c3aed, #9333ea);
    color: white;
    padding: 12px 26px;
    border-radius: 40px;
    border: none;
    font-size: 1.1rem;
    cursor: pointer; /* ← FIX */
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary-purple:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}


.btn-link {
    background: none;
    border: none;
    color: #5A2CA0;
    font-size: 1rem;
    cursor: pointer;
    padding: 10px 14px;
}

.btn-link:hover {
    text-decoration: underline;
    color: #3c1a75;
}