/* ==========================================================================
   THE PROJECT MBBS - MODALS, DIALOGS & POPOVERS
   ========================================================================== */

/* Topbar notifications popover */
.topbar{overflow:visible !important;}
.top-actions{position:relative !important;overflow:visible !important;}
.notif-btn{position:relative}
.notif-ping{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:#f43f5e;border:2px solid var(--surface)}
.top-dropdown{position:absolute !important;top:calc(100% + 10px) !important;right:0 !important;width:290px !important;max-width:calc(100vw - 24px) !important;background:var(--surface) !important;border:1px solid var(--line) !important;border-radius:16px !important;box-shadow:0 18px 44px rgba(0,0,0,.22) !important;z-index:99999 !important;overflow:hidden !important;}
.top-dropdown[hidden]{display:none}
.top-dropdown-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.top-dropdown-head strong{font-size:13px;color:var(--ink)}
.notif-item{display:flex;gap:11px;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);padding:13px 16px;cursor:pointer;font-family:inherit;transition:background .15s}
.notif-item:last-child{border-bottom:0}
.notif-item:hover{background:var(--surface-2)}
.notif-item .notif-dot{width:8px;height:8px;border-radius:50%;background:#f43f5e;flex-shrink:0;margin-top:5px}
.notif-item.read .notif-dot{background:var(--line)}
.notif-item strong{display:block;font-size:12px;color:var(--ink)}
.notif-item p{font-size:11px;color:var(--muted);line-height:1.6;margin-top:3px}
.notif-item small{font-size:10px;color:var(--muted);opacity:.75}
.profile-menu-head{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--line)}
.profile-dot-lg{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg, #2dd4bf, #14343d);color:#ffffff;border:1px solid rgba(45,212,191,.35);display:grid;place-items:center;font-weight:700;font-size:14px;flex-shrink:0}
.profile-menu-head strong{display:block;font-size:13px;color:var(--ink)}
.profile-menu-head p{font-size:11px;color:var(--muted);margin-top:2px}
.profile-menu-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);padding:13px 16px;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;transition:background .15s}
.profile-menu-item:last-child{border-bottom:0}
.profile-menu-item:hover{background:var(--surface-2)}
.profile-menu-item svg{width:17px;height:17px;color:var(--muted);flex-shrink:0}

/* Auth modal & guest vs logged in visibility */
/* Auth: guest vs logged-in visibility */
body.auth-guest #profileBtn{display:none}
body.auth-logged-in #signInBtn{display:none}
.side-guest{display:none !important}
.side-profile{display:flex !important}
body.auth-logged-in .year-tab{display:none}
body.auth-logged-in .year-tab.active{display:inline-flex}
.top-signin-btn{background:#14343d;color:#bef0d9;border:1px solid rgba(190,240,217,.3);border-radius:10px;padding:10px 18px;font-size:12px;font-weight:700;cursor:pointer;transition:.2s;white-space:nowrap}
.top-signin-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.side-guest{display:flex;flex-direction:column;gap:6px;padding:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px}
.side-guest strong{font-size:13px;color:var(--ink)}
.side-guest span{font-size:11px;color:var(--muted);line-height:1.5}
.side-guest-btn{align-self:flex-start;margin-top:6px;background:#14343d;color:#bef0d9;border:1px solid rgba(190,240,217,.3);border-radius:9px;padding:9px 14px;font-size:12px;font-weight:700;cursor:pointer}
.auth-wrap{display:flex;justify-content:center;padding:20px 0 40px}
.auth-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:32px;box-shadow:var(--shadow)}
.auth-card h1{font-size:30px;margin:6px 0 4px}
.auth-sub{color:var(--muted);font-size:13px;margin-bottom:24px}
.auth-label{display:block;font-size:12px;font-weight:600;color:var(--ink);margin:14px 0 6px}
.auth-optional{font-weight:400;color:var(--muted)}
.auth-input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font-size:13px}
.auth-input:focus{outline:2px solid var(--teal);outline-offset:0;border-color:transparent}
.password-wrap{position:relative !important;width:100% !important;display:block !important}
.password-wrap .auth-input{padding-right:44px !important;width:100% !important;box-sizing:border-box !important}
.password-toggle-btn{position:absolute !important;right:8px !important;top:50% !important;transform:translateY(-50%) !important;background:transparent !important;border:none !important;padding:7px !important;cursor:pointer !important;color:var(--muted, #64748b) !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;border-radius:8px !important;transition:color 0.18s ease, background 0.18s ease !important;z-index:2 !important;line-height:1 !important}
.password-toggle-btn:hover{color:var(--ink, #0f172a) !important;background:rgba(0,0,0,0.06) !important}
.theme-dark .password-toggle-btn:hover{color:#f8fafc !important;background:rgba(255,255,255,0.09) !important}
.password-toggle-btn svg{width:18px !important;height:18px !important;pointer-events:none !important}
.password-toggle-btn .eye-show{display:block !important}
.password-toggle-btn .eye-hide{display:none !important}
.password-toggle-btn.is-revealed .eye-show{display:none !important}
.password-toggle-btn.is-revealed .eye-hide{display:block !important}
.auth-note{margin:18px 0 0;background:var(--teal-soft);border:1px solid var(--line);border-radius:10px;padding:13px 14px;font-size:12px;line-height:1.7;color:var(--ink)}
.auth-bottom-note{margin-top:20px;display:flex;align-items:flex-start;gap:10px;text-align:left;font-size:12px;line-height:1.6}
.auth-bottom-note svg{flex-shrink:0;width:16px;height:16px;margin-top:2px;color:var(--teal-deep, #0f766e)}
.theme-dark .auth-bottom-note svg,
html[data-portal-theme="dark"] .auth-bottom-note svg,
[data-theme="dark"] .auth-bottom-note svg{color:#2dd4bf}
.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--muted);font-size:12px}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-google-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#1f2937;border:1px solid var(--line);border-radius:10px;padding:12px;font-size:14px;font-weight:600;cursor:pointer}
.auth-google-btn:hover{box-shadow:0 4px 14px rgba(0,0,0,.08)}
.auth-google-btn svg{width:20px;height:20px;flex:none}
.auth-urdu{font-family:'Jameel Noori Nastaleeq','Jameel Noori Nastaliq','Noto Nastaliq Urdu','Urdu Typesetting','Alvi Nastaliq',serif;direction:rtl;text-align:right;font-size:14px;line-height:2.1;color:var(--ink);margin:10px 0 0;background:var(--teal-soft);border:1px solid var(--line);border-radius:10px;padding:8px 12px 12px;white-space:nowrap;overflow:hidden}
.signup-sub{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.5}
.auth-sub-accent{color:#f43f5e;font-weight:800}
.auth-noaccount{margin:16px 0 0;background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;padding:13px 14px}
.auth-noaccount p{font-size:13px;line-height:1.6;margin:0 0 10px;color:#7c2d12}
.auth-switch{margin:16px 0 0;text-align:center;font-size:13px;color:var(--muted)}
.auth-switch .text-btn{font-weight:700}
.college-combo{position:relative}
.college-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.12);max-height:220px;overflow-y:auto;padding:6px}
.college-item{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 10px;border-radius:8px;font-size:13px;color:var(--ink);cursor:pointer}
.college-item:hover{background:var(--teal-soft)}
.college-manual{border-top:1px solid var(--line);color:#0f766e;font-weight:600}
.auth-error{margin:14px 0 0;background:#fde8e8;border:1px solid #f5c6c6;border-radius:10px;padding:11px 13px;font-size:12px;color:#9b1c1c}.auth-match{font-size:11px;margin:6px 0 0}.auth-match.ok{color:var(--green)}.auth-match.bad{color:#e11d48}.google-step{margin-top:2px}.google-step .auth-submit{margin-top:14px}.google-back{margin-top:10px}.google-email-shown{font-weight:650;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 13px;font-size:13px;margin:0 0 14px;word-break:break-all}
.auth-submit{width:100%;justify-content:center;margin-top:18px;padding:13px}
.auth-demo{width:100%;justify-content:center;margin-top:10px;padding:12px}
.auth-guest-link{margin:16px auto 0;display:block}
select.auth-input:disabled{opacity:.6;cursor:not-allowed}
select:disabled{opacity:.6;cursor:not-allowed}

/* Profile Photo Uploader Styles (Desktop & Mobile Responsive, Dual Theme) */
.avatar-upload-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px;
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: 14px;
  margin-bottom: 16px;
  transition: background 0.2s, border-color 0.2s;
}
.avatar-preview-box {
  flex-shrink: 0;
}
.avatar-preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 800;
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.28);
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.avatar-upload-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.avatar-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 8px 15px;
  background: var(--brand);
  color: var(--brand-contrast);
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}
.avatar-upload-btn:hover {
  background: var(--brand-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.avatar-upload-btn svg {
  width: 15px;
  height: 15px;
}
.avatar-remove-btn {
  background: none;
  border: none;
  color: var(--rose);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  width: fit-content;
}
.avatar-note {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}

/* Theme Adaptation for Dark & Light Mode on Profile Settings */
.theme-dark #view-settings .auth-card,
html[data-portal-theme="dark"] #view-settings .auth-card,
[data-theme="dark"] #view-settings .auth-card {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}
.theme-dark #view-settings .avatar-upload-wrap,
html[data-portal-theme="dark"] #view-settings .avatar-upload-wrap,
[data-theme="dark"] #view-settings .avatar-upload-wrap {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(51, 65, 85, 0.8);
}
.theme-dark #view-settings .avatar-upload-btn,
html[data-portal-theme="dark"] #view-settings .avatar-upload-btn,
[data-theme="dark"] #view-settings .avatar-upload-btn {
  background: #2dd4bf;
  color: #0f172a;
  border: 1px solid rgba(45, 212, 191, 0.4);
}
.theme-dark #view-settings .avatar-upload-btn:hover,
html[data-portal-theme="dark"] #view-settings .avatar-upload-btn:hover,
[data-theme="dark"] #view-settings .avatar-upload-btn:hover {
  background: #14b8a6;
}
.theme-dark #view-settings .auth-input,
html[data-portal-theme="dark"] #view-settings .auth-input,
[data-theme="dark"] #view-settings .auth-input {
  background: #0b1120;
  border-color: #334155;
  color: #f1f5f9;
}
.theme-dark #view-settings .auth-input:focus,
html[data-portal-theme="dark"] #view-settings .auth-input:focus,
[data-theme="dark"] #view-settings .auth-input:focus {
  outline-color: #2dd4bf;
  border-color: #2dd4bf;
}

@media (max-width: 640px) {
  #view-settings .auth-wrap {
    padding: 12px 14px 32px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  #view-settings .auth-card {
    width: 100% !important;
    max-width: 350px !important;
    margin: 0 auto !important;
    padding: 20px 16px 22px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important;
  }
  #view-settings h1 {
    font-size: 22px !important;
    margin-top: 2px !important;
  }
  #view-settings .auth-sub {
    font-size: 12.5px !important;
    margin-bottom: 16px !important;
    line-height: 1.45 !important;
  }
  .avatar-upload-wrap {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
  }
  .avatar-preview {
    width: 50px !important;
    height: 50px !important;
    font-size: 16px !important;
  }
  .avatar-upload-btn {
    padding: 6px 12px !important;
    font-size: 11px !important;
  }
  #view-settings .auth-input {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
}

/* Image background rendering for topbar and sidebar profile dots */
.profile-dot.has-photo,
.side-profile-dot.has-photo,
.profile-dot-lg.has-photo,
#profileBtn.has-photo,
#homeProfileBtn.has-photo,
#sideProfileDot.has-photo,
#profileMenuDot.has-photo,
#stAvatarPreview.has-photo {
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  background-color: transparent !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* ==========================================================================
   GOOGLE SIGN-IN ONBOARDING MODAL (Year & College Selection)
   ========================================================================== */
.google-onboard-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99998 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  animation: fadeInModal 0.22s ease-out;
}
@keyframes fadeInModal {
  from { opacity: 0; }
  to { opacity: 1; }
}
.google-onboard-card {
  position: relative !important;
  width: 100% !important;
  max-width: 460px !important;
  max-height: calc(100vh - 32px) !important;
  overflow-y: auto !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--line, #e2e8f0) !important;
  border-radius: 22px !important;
  padding: 30px 26px !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.35) !important;
  animation: slideUpModal 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box !important;
}
@keyframes slideUpModal {
  from { transform: translateY(18px) scale(0.97); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.google-onboard-avatar-wrap {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
}
.google-onboard-avatar {
  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #2dd4bf, #0f766e) !important;
  color: #ffffff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 8px 24px -4px rgba(13, 148, 136, 0.38) !important;
  background-size: cover !important;
  background-position: center !important;
}
.google-onboard-card .eyebrow {
  text-align: center !important;
  color: var(--teal, #0d9488) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.8px !important;
  margin: 0 !important;
}
.google-onboard-card h3 {
  font-size: 22px !important;
  font-weight: 850 !important;
  color: var(--ink, #0f172a) !important;
  margin: 6px 0 8px !important;
  letter-spacing: -0.3px !important;
  text-align: center !important;
}
.google-onboard-sub {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--muted, #64748b) !important;
  text-align: center !important;
  margin-bottom: 20px !important;
}
.google-onboard-card .auth-label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ink, #0f172a) !important;
  margin: 14px 0 6px !important;
}
.google-onboard-card .req {
  color: #f43f5e !important;
}
.google-onboard-card .auth-input {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1px solid var(--line, #e2e8f0) !important;
  border-radius: 12px !important;
  background: var(--surface-2, #f8fafc) !important;
  color: var(--ink, #0f172a) !important;
  font-size: 13.5px !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.google-onboard-card .auth-input:focus {
  border-color: var(--teal, #0d9488) !important;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15) !important;
}
.google-onboard-card .college-combo {
  position: relative !important;
}
.google-onboard-card .college-list {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--line, #e2e8f0) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
}
.google-onboard-card .college-item {
  width: 100% !important;
  text-align: left !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line, #f1f5f9) !important;
  background: transparent !important;
  color: var(--ink, #0f172a) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}
.google-onboard-card .college-item:hover {
  background: var(--surface-2, #f8fafc) !important;
  color: var(--teal, #0d9488) !important;
}
.google-onboard-card .college-manual {
  font-weight: 700 !important;
  color: var(--teal, #0d9488) !important;
  border-bottom: 0 !important;
}
.google-onboard-card .auth-error {
  color: #f43f5e !important;
  font-size: 12px !important;
  margin-top: 10px !important;
  text-align: center !important;
  font-weight: 600 !important;
}

.gob-field-hint {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  color: #64748b !important;
  margin: 6px 0 2px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}
.gob-field-hint svg {
  flex-shrink: 0 !important;
  color: #0d9488 !important;
}

/* Dark Theme Onboard Modal */
.theme-dark .google-onboard-card {
  background: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8) !important;
}
.theme-dark .google-onboard-card h3 {
  color: #f8fafc !important;
}
.theme-dark .google-onboard-card .auth-label {
  color: #f1f5f9 !important;
}
.theme-dark .google-onboard-card .auth-input {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
.theme-dark .gob-field-hint {
  color: #94a3b8 !important;
}
.theme-dark .gob-field-hint svg {
  color: #2dd4bf !important;
}
.theme-dark .google-onboard-card .college-list {
  background: #1e293b !important;
  border-color: #334155 !important;
}
.theme-dark .google-onboard-card .college-item {
  border-bottom-color: #334155 !important;
  color: #f1f5f9 !important;
}
.theme-dark .google-onboard-card .college-item:hover {
  background: #0f172a !important;
  color: #2dd4bf !important;
}
.theme-dark .google-onboard-avatar {
  border-color: #1e293b !important;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 820px) {
  .top-dropdown {
    position: fixed !important;
    top: 72px !important;
    right: 12px !important;
    left: auto !important;
    width: 260px !important;
    max-width: calc(100vw - 24px) !important;
    z-index: 99999 !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35) !important;
  }
}