/* ==================================================
   sun_student/assets/css/portal.css
   Student portal — Green/Emerald theme matching login page
   ================================================== */

:root {
  /* ── Sidebar — matches student login left panel gradient ── */
  --sidebar-bg-rk:          #052e16;
  --sidebar-border:         rgba(255,255,255,0.08);
  --sidebar-color:          #a7f3d0;
  --sidebar-muted-color:    #6ee7b7;
  --sidebar-hover-bg:       rgba(16,185,129,0.15);
  --sidebar-active-bg:      rgba(52,211,153,0.20);
  --sidebar-active-color:   #34d399;

  /* ── Accent & buttons ── */
  --portal-accent:          #059669;
  --captcha-color-a:        #065f46;
  --captcha-color-b:        #10b981;

  /* ── Legacy vars ── */
  --portal-sidebar-bg:      #052e16;
  --portal-sidebar-text:    #a7f3d0;
  --portal-sidebar-active:  #34d399;
}

/* Login page brand panel */
.auth-split-brand {
  background: linear-gradient(150deg, #052e16 0%, #065f46 50%, #10b981 100%);
}
.auth-split-form { background: #f0fdf9; }

.btn-primary { background: linear-gradient(135deg,#065f46,#10b981); border:none; }
.btn-primary:hover { background: linear-gradient(135deg,#052e16,#065f46); }

/* Active nav icon tint — green */
.sidebar .nav-item>.nav-link.active .nav-icon {
  background: rgba(52,211,153,0.18);
}
.sidebar-logo-icon { background: rgba(52,211,153,0.18); }

/* Active left-edge accent bar */
.sidebar .nav-item>.nav-link.active::before {
  background: #34d399;
}

/* ── Sidebar logo — full vs collapsed ─────────────────────────────────────── */
.sidebar-logo-icon { display: none !important; }

.sidebar-logo .logo-full {
  height: 36px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: opacity 0.2s ease;
}

.sidebar-logo .logo-collapsed {
  height: 42px;
  width: 42px;
  object-fit: contain;
  display: none;
  transition: opacity 0.2s ease;
}

.sidebar-collapsed .sidebar-logo .logo-full     { display: none; }
.sidebar-collapsed .sidebar-logo .logo-collapsed { display: block; }
.sidebar-collapsed .sidebar-logo {
  justify-content: center;
  width: 100%;
}

/* ── Collapsed sidebar scrolling fix ──────────────────────────────────────── */
.sidebar-collapsed .sidebar-nav {
  overflow-y: auto !important;
  overflow-x: visible !important;
}

/* Flyout submenu — CSS hover + JS flyout-open class */
.sidebar-collapsed .sidebar .nav-item.has-submenu:hover > .nav-submenu,
.sidebar-collapsed .sidebar .nav-item.has-submenu.flyout-open > .nav-submenu {
  display: block !important;
  background: var(--sidebar-bg-rk) !important;
  border-color: var(--sidebar-border) !important;
}

/* ── Certificate-specific styles ──────────────────────────────────────────── */
.cert-download-btn {
  background: #065f46;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 10px 28px;
  font-size: 14px;
  cursor: pointer;
}
.cert-pending-notice {
  background: #fef9c3;
  border-left: 4px solid #ca8a04;
  padding: 12px 16px;
  border-radius: 4px;
}

/* ── Auth split-panel layout ───────────────────────────────────────────────── */
html, body { height: 100%; margin: 0; }

.auth-split { display: flex; min-height: 100vh; }

.auth-split-brand {
  flex: 0 0 44%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
}

.auth-split-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}

.auth-split-brand-content {
  position: relative;
  z-index: 1;
  color: #fff;
  max-width: 360px;
}

.logo-wipe { overflow: hidden; display: inline-block; margin-bottom: 28px; }

.auth-brand-logo img.logo-slide {
  height: 40px; width: auto;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  transform: translateX(-120px);
  animation: logoSlideIn 0.6s ease-out 0.2s forwards;
}

@keyframes logoSlideIn {
  0%   { opacity: 0; transform: translateX(-120px); }
  100% { opacity: 1; transform: translateX(0); }
}

.auth-brand-text    { margin-bottom: 32px; }
.auth-brand-heading { font-size:23px; font-weight:700; line-height:1.3; margin-bottom:10px; }
.auth-brand-desc    { font-size:13.5px; opacity:.82; line-height:1.65; margin:0; }

.auth-brand-features { display:flex; flex-direction:column; gap:12px; }
.auth-brand-feature  { display:flex; align-items:center; gap:12px; font-size:13px; opacity:.92; }
.auth-brand-feature i {
  font-size:17px; background:rgba(255,255,255,.15);
  width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.auth-split-form {
  flex:1; display:flex; align-items:center;
  justify-content:center; padding:48px 32px;
}

.auth-container { width:100%; max-width:420px; }

.auth-card {
  background:#fff; border-radius:20px;
  padding:36px 32px; box-shadow:0 4px 32px rgba(0,0,0,.08);
}

.auth-card-header { margin-bottom:24px; }
.auth-title   { font-size:22px; font-weight:700; color:#1a1a2e; margin-bottom:4px; }
.auth-subtitle { font-size:13px; color:#8898aa; margin:0; }
.form-group   { margin-bottom:18px; }
.form-label   { font-size:13px; font-weight:600; color:#374151; margin-bottom:6px; }

.auth-tabs {
  display:flex; background:#f3f4f6;
  border-radius:12px; padding:4px;
}
.auth-tab {
  flex:1; text-align:center; padding:9px 12px;
  border-radius:9px; font-size:13px; font-weight:600;
  text-decoration:none; transition:all .15s; color:#6b7280;
}
.auth-tab.active {
  background:var(--portal-accent); color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.auth-tab:not(.active):hover { color:var(--portal-accent); }

.forgot-link { font-size:12px; font-weight:400; color:var(--portal-accent); text-decoration:none; }
.forgot-link:hover { text-decoration:underline; }

.form-control:focus {
  border-color:var(--portal-accent);
  box-shadow:0 0 0 3px rgba(0,0,0,.06);
}

.footer-centered { text-align:center; font-size:12px; color:#aaa; margin-top:16px; }
.footer-centered a { color:#888; text-decoration:none; }
.footer-centered a:hover { color:var(--portal-accent); }
.footer-copyright, .credits { line-height:1.8; }

@media (max-width:768px) {
  .auth-split { flex-direction:column; }
  .auth-split-brand { flex:none; padding:28px 24px; min-height:200px; }
  .auth-brand-desc, .auth-brand-features { display:none; }
  .auth-split-form { padding:28px 20px; background:#fff !important; }
}

/* Captcha */
.captcha-question-box {
  padding:9px 16px; border-radius:10px; font-weight:700;
  font-size:1.1rem; letter-spacing:2px; font-family:monospace;
  color:#fff;
  background:linear-gradient(135deg, var(--captcha-color-a,#065f46), var(--captcha-color-b,#10b981));
  user-select:none; white-space:nowrap; min-width:100px; text-align:center;
}

.captcha-refresh-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:8px;
  border:1.5px solid #dee2e6; background:#f8f9fa; color:#6c757d;
  flex-shrink:0; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.captcha-refresh-btn:hover {
  border-color:var(--portal-accent);
  color:var(--portal-accent);
  background:color-mix(in srgb, var(--portal-accent) 8%, white);
}

.spin { animation:spinOnce .4s linear; }
@keyframes spinOnce { to { transform:rotate(360deg); } }