@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Rubik:wght@300;400;500;700&display=swap");

:root{
  --bg: #0f1724; /* deep navy */
  --card: #ffffff;
  --muted: #6b7280;
  --accent: #0ea5a7; /* teal */
  --glass: rgba(255,255,255,0.06);
  --radius: 12px;
}

*{box-sizing:border-box}
html{height:100%;scroll-behavior:smooth}
body{min-height:100%;font-family:Inter, Rubik, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background: #eef2ff; color:#0f1724; margin:0}

main{padding:2.5rem}

/* Make layout use full viewport and keep footer at bottom when content is short */
html, body {height:100%;}
body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1}

.navbar{background:rgba(255,255,255,0.95);box-shadow:0 6px 18px rgba(15,23,36,0.06);backdrop-filter: blur(4px);position:relative;z-index:1050}
.navbar .nav-link{color:var(--muted);padding:.5rem .75rem}
.navbar .nav-link.active{color:var(--accent);font-weight:600}
.navbar .navbar-brand{color:var(--accent)}

/* Remove underlines globally */
a, a:link, a:visited, a:hover, a:active {text-decoration: none !important}

/* Remove focus outline/box shadows globally (visual only) */
a:focus, a:active, button:focus, button:active, input:focus, textarea:focus, select:focus {outline: none !important; box-shadow: none !important}
/* For accessibility later, consider using :focus-visible to show a subtle indicator instead of removing outlines */

/* Ensure dropdown menus sit above cards */
.dropdown-menu{z-index:2000}

/* Make cards stretch to equal heights in grid */
.card{border:none;background:var(--card);border-radius:var(--radius);box-shadow:0 10px 30px rgba(2,6,23,0.08);overflow:hidden;display:flex;flex-direction:column}
.card.h-100{height:100%}
.card .card-body{flex:1 1 auto}
.card .card-footer{margin-top:auto}

/* Lower card stacking so dropdown appears above */
.card{z-index:0}
.navbar-brand{font-weight:700;letter-spacing:0.2px}

/* Cards */
.card{border:none;background:var(--card);border-radius:var(--radius);box-shadow:0 10px 30px rgba(2,6,23,0.08);overflow:hidden}
.card-header{background:linear-gradient(90deg,var(--accent),#38bdf8);color:white;border-bottom:none}
.card-img-top{object-fit:cover;width:100%;height:200px}

/* Utilities */
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.btn-primary{background:var(--accent);border:none}
.btn-primary:hover{filter:brightness(.95)}

/* Outline primary variant matching site accent */
.btn-outline-primary{color:var(--accent);border-color:rgba(14,165,167,0.25)}
.btn-outline-primary:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

.content-section{padding:1.25rem;border-radius:10px;background:linear-gradient(180deg, #fff, #fbfdff)}

.account-img{width:120px;height:120px;border-radius:999px;object-fit:cover}
.account-heading{font-size:1.8rem;font-weight:600}

/* Responsive tweaks */
@media (max-width:768px){main{padding:1rem}.card-img-top{height:160px}}

/* Subtle hover */
.card:hover{transform:translateY(-6px);transition:transform .18s ease}

/* Alerts */
.alert{border-radius:10px}

/* Simple dark footer */
footer{background:#0b1220;color:#d1d5db;padding:0.75rem 1rem}
footer .container{max-width:1140px}
footer p{margin:0}

/* Footer brand */
.footer-brand{font-weight:700;color:#ffffff;letter-spacing:0.4px;text-transform:none}

/* Footer link colors */
footer a{color:rgba(255,255,255,0.75)}
footer a:hover{color:rgba(255,255,255,0.95)}

/* Accessibility: focus states */
a:focus,.btn:focus{outline:3px solid rgba(14,165,167,.15);outline-offset:3px}