/* Homepage styles */
:root{
  --bg: #f7fafc;
  --card: #ffffff;
  --muted: #6b7280;
  --accent: #0f172a;
  --accent-contrast: #ffffff;
  --success: #10b981;
  --danger: #ef4444;
}

*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; padding:0; background:var(--bg); color:#0f172a}
.site-header{background:var(--accent); color:var(--accent-contrast); padding:1rem 2rem; display:flex; align-items:center; justify-content:space-between}
.site-header h1{margin:0; font-size:1.1rem}

.user-info{display:flex; align-items:center; gap:.6rem; font-weight:600}
.user-chip{display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .55rem; border-radius:999px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14)}
.user-sub{max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.user-role{font-size:.8rem; opacity:0.85}
.user-info .logout-btn{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);color:#fff;padding:6px 10px;border-radius:8px;cursor:pointer;font-weight:700}
.user-info .logout-btn:hover{opacity:0.9}
.user-info .login-link{color:#fff; text-decoration:underline; font-weight:700}

.status-badge{position:fixed; top:1rem; right:1rem; padding:.4rem .75rem; border-radius:8px; background:var(--danger); color:white; font-weight:600; box-shadow:0 6px 18px rgba(2,6,23,0.12); cursor:pointer; z-index:1000; transition:transform .12s ease}
.status-badge.online{background:var(--success)}
.status-badge:hover{transform:translateY(-2px)}

/* Logout button inside badge */
.status-badge .logout-btn{margin-left:.5rem;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:#fff;padding:4px 8px;border-radius:6px;cursor:pointer;font-weight:600}
.status-badge .logout-btn:hover{opacity:0.9}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; padding:2rem; max-width:1100px; margin:2rem auto}
.card{background:var(--card); padding:1.25rem; border-radius:12px; box-shadow:0 8px 22px rgba(2,6,23,0.06); text-decoration:none; color:inherit; transition:transform .16s cubic-bezier(.2,.9,.3,1), box-shadow .16s ease; display:flex; align-items:flex-start; gap:.8rem}
.card .icon{flex:0 0 48px;height:48px;width:48px;border-radius:10px;background:linear-gradient(135deg, rgba(5,64,122,0.1), rgba(5,64,122,0.03));display:inline-flex;align-items:center;justify-content:center;color:var(--accent-2);box-shadow:inset 0 -2px 6px rgba(2,6,23,0.02);object-fit:contain}
.card .content{flex:1}
.card h2{margin:0 0 .25rem 0;font-size:1.05rem}
.card p{margin:0;color:var(--muted);font-size:0.95rem}
.card:hover{transform:translateY(-8px); box-shadow:0 18px 46px rgba(2,6,23,0.12)}

footer.muted{display:block; text-align:center; color:var(--muted); padding:1rem}

@media (max-width:520px){
  .site-header{padding: .75rem 1rem}
  .grid{padding:1rem}
}

/* Additional polished styles */
:root{
  --bg:#f8fafc;
  --muted:#6b7280;
  --card:#ffffff;
  --accent:#0f172a;
  --accent-2:#05407a;
  --radius:12px;
}

.container{max-width:1100px;margin:0 auto;padding:1rem}
.hero{margin-top:1rem;background:linear-gradient(90deg, rgba(5,64,122,0.06), rgba(5,64,122,0.03)); padding:1.6rem;border-radius:var(--radius); box-shadow:0 10px 30px rgba(2,6,23,0.06); display:flex; gap:1rem; align-items:center}
.hero h2{margin:0;font-size:1.4rem}
.hero p{margin:0;color:var(--muted)}
.cta{margin-top:.6rem}

.btn{display:inline-block; padding:0.75rem 1.5rem; margin-right:0.5rem; border-radius:8px; font-weight:600; text-decoration:none; transition:all 0.2s ease; cursor:pointer}
.btn-primary{background:#05407a; color:#ffffff}
.btn-primary:hover{background:#0f172a; transform:translateY(-2px)}
.btn-ghost{background:transparent; color:#05407a; border:2px solid #05407a}
.btn-ghost:hover{background:#05407a; color:#ffffff; transform:translateY(-2px)}

.grid{margin-top:1rem}

/* Prevent flash of unauthorized content: hide service grid until JS reveals allowed items */
.services-loading{display:block;text-align:center;color:var(--muted);padding:0.75rem 0;margin-top:.6rem}
#services{visibility:hidden;opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease}
#services.visible{visibility:visible;opacity:1;transform:none}

@media (max-width:640px){
  .hero{flex-direction:column;align-items:flex-start}
}