/* ===== App Top Navigation (FIXED + SPACING) ===== */
.app-nav {
position: fixed !important;
top: 0 !important;
left: 0;
right: 0;
z-index: 1030 !important;
/* darker / more contrast */
background: linear-gradient(90deg, #cfe8ff 0%, #d9eeff 40%, #e7e0ff 100%);
border-bottom: 1px solid rgba(0,0,0,.12);
box-shadow: 0 10px 24px rgba(0,0,0,.10);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Make sure navbar has a consistent height */
.app-nav.navbar {
padding-top: .45rem;
padding-bottom: .45rem;
}
/* nav link styling */
.app-nav .navbar-brand,
.app-nav .nav-link {
color: #0f172a !important;
}
.app-nav .nav-link {
font-weight: 600;
padding: .70rem .90rem;
border-radius: 10px;
transition: background .15s ease, transform .15s ease;
}
.app-nav .nav-link:hover {
background: rgba(15, 23, 42, 0.10);
transform: translateY(-1px);
}
/* optional: ensure header doesn't add weird spacing */
header {
padding: 0;
margin: 0;
}
/* ==================================================
App Shell (Sticky Footer - ALWAYS BOTTOM)
Works with your layout:
...
================================================== */
html {
height: 100%;
overflow-y: scroll; /* always reserve scrollbar gutter */
}
body.app-shell {
/* fixed header spacing */
padding-top: 88px;
scroll-padding-top: 100px;
/* kill template overlap behavior */
margin: 0 !important;
margin-bottom: 0 !important;
/* flex column layout */
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* ✅ THIS is what pushes footer down */
main.app-main {
flex: 1 0 auto;
display: block;
}
/* ==================================================
Footer (Themed + Appealing + ALWAYS BOTTOM)
================================================== */
footer.app-footer,
footer.footer {
margin-top: auto; /* ✅ key: footer goes to bottom on short pages */
flex-shrink: 0;
padding: 14px 0;
color: rgba(15, 23, 42, .75);
border-top: 1px solid rgba(0,0,0,.08);
background: linear-gradient(90deg, #e8f6ff 0%, #eef7ff 45%, #f5f0ff 100%);
box-shadow: 0 -6px 18px rgba(0,0,0,.05);
}
/* Footer link style */
footer.app-footer a,
footer.footer a {
color: rgba(15, 23, 42, .85);
text-decoration: none;
font-weight: 600;
}
footer.app-footer a:hover,
footer.footer a:hover {
text-decoration: underline;
}
/* Kill any old template footer positioning if present */
.footer {
position: static !important;
height: auto !important;
line-height: normal !important;
}
/* IMPORTANT: overrides default template rule if it exists */
body {
margin-bottom: 0 !important;
overflow-x: hidden;
}