/* Custom styles for login panel */
.login-panel {
  background: rgba(255,255,255,0.95);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(10,20,40,0.12);
  padding: 28px;
  border: 1px solid rgba(16,24,40,0.04);
}
.login-panel .navbar-brand-image { height: 42px; }
.login-panel .form-label { font-weight: 600; }
.login-panel .form-control { padding: 12px 14px; border-radius: 8px; }
.login-panel .form-footer .btn { padding: 10px 14px; border-radius: 8px; }
.login-panel .form-footer .btn:focus { box-shadow: 0 0 0 4px rgba(6,111,209,0.12); }

/* subtle divider */
.login-panel .or-divider { height:1px; background: rgba(0,0,0,0.06); margin: 18px 0; }

/* make inputs and button full width on small screens */
@media (max-width: 576px){
  .login-panel { padding: 20px; margin: 0 12px; }
}

/* Mobile menu overlay (kept here for convenience) */
#mobile-menu-overlay { background: rgba(0,0,0,0.45); }

/* Quick-access cards */
.card.h-100.text-decoration-none { color: inherit; }
.card.h-100.text-decoration-none:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(10,20,40,0.08); transition: all .18s ease; }
.card .card-body img { border-radius: 6px; background: #fff; padding: 6px; border: 1px solid rgba(0,0,0,0.04); }

/* Institution logo responsive helper */
.inst-logo { display: inline-block; border-radius: 6px; background: #fff; padding: 6px; border: 1px solid rgba(0,0,0,0.04); object-fit: contain; }
/* Mobile: larger icons for dashboard blocks */
@media (max-width: 767.98px) {
  .inst-logo { width: 160px; height: auto; }
}
/* Tablet: larger */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .inst-logo { width: 220px; height: auto; }
}
/* Desktop: largest */
@media (min-width: 1200px) {
  .inst-logo { width: 300px; height: auto; }
}

/* ensure images scale down but keep aspect ratio */
.inst-logo { max-width: 100%; height: auto; display: inline-block; }

/* make sure card body centers large logos without overflow */
.card.h-100 .card-body { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; }

/* large variant for dashboard quick-access logos */
.inst-logo--large { width: auto; height: auto; max-width: 100%; border-radius: 8px; }
@media (min-width: 1200px) { .inst-logo--large { max-width: 300px; } }
@media (min-width: 768px) and (max-width: 1199.98px) { .inst-logo--large { max-width: 220px; } }
@media (max-width: 767.98px) { .inst-logo--large { max-width: 160px; } }

@media (max-width: 576px){
  .card.h-100.text-decoration-none { min-height: 64px; }
  .card .card-body { padding: 12px; }
}

/* Reduce brand SVG in login panel on very small screens */
@media (max-width: 576px){
  .login-panel .navbar-brand-image { height: 28px; width: auto; }
}

/* Fix header on mobile so content doesn't slip under it when using small viewports */
@media (max-width: 991.98px) {
  header.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1070;
    width: 100%;
    background: #fff; /* ensure visible over content */
  }
  /* push page content down to account for header height (approx 64px) */
  .page-wrapper {
    padding-top: 64px;
  }
  /* move sidebar down when open to avoid being under the fixed header */
  #sidebar { top: 64px; }
}

/* Dashboard shared helpers */
body{ min-height: 100vh; }
/* Mobile off-canvas sidebar */
@media (max-width: 991.98px) {
  /* place the off-canvas sidebar below the fixed header (approx 64px) */
  /* slide in using transform for smoother GPU-accelerated animation */
  #sidebar { position: fixed; top: 64px; height: calc(100vh - 64px); width: 240px; z-index: 1050; transform: translateX(-100%); transition: transform .28s cubic-bezier(.2,.9,.2,1); will-change: transform; }
  #sidebar.open { transform: translateX(0); }
  /* overlay should cover the area under the header only */
  /* overlay fades in/out; pointer-events disabled when hidden to allow interaction */
  #mobile-menu-overlay { display: block; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.45); z-index: 1040; opacity: 0; transition: opacity .22s ease; pointer-events: none; }
  #mobile-menu-overlay.show { opacity: 1; pointer-events: auto; }
  /* make main content scroll under overlay when open */
  .page-wrapper { position: relative; z-index: 1; }
}