/* assets/styles.css — Modern, Responsive, Stylish UI */

/* Import Fonts */
@import url('https://fonts.cdnfonts.com/css/sf-pro-display');
@font-face {
  font-family: 'Kohinoor Bangla';
  src: url('https://app.eidhl.com/assets/kohinoor-bangla-regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --bg:#0b1220;
  --card:#121a2b;
  --muted:#97a3b6;
  --text:#e6edf6;
  --accent:#7aa2ff;
  --accent2:#2de1d1;
  --border:#1f2a44;
  --danger:#ff6b6b;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
  --radius:24px;
}

/* Reset + Base */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background: radial-gradient(1200px 600px at 10% -10%, rgba(122,162,255,.18), transparent),
              radial-gradient(1000px 500px at 110% 10%, rgba(45,225,209,.12), transparent),
              var(--bg);
  color:var(--text);
  font-family: 'SF Pro Display', 'Kohinoor Bangla', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Layout */
.app{ 
  min-height:100%; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  padding:1.5rem;
}

.card{
  width:min(460px, 95vw);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) , var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:2rem;
  animation: fadeInUp .6s ease;
}

/* Brand Section */
.brand{ text-align:center; }
.brand .logo img{ width:50px; }
h1{ font-size:1.8rem; font-weight:700; margin-bottom:.3rem; }
.muted{ color:var(--muted); font-size:.95rem; margin-bottom:1.5rem; }

/* Google Sign-in */
.google-btn{
  display:flex; align-items:center; gap:.75rem;
  justify-content:center; text-decoration:none;
  width:100%; padding:1rem 1.25rem;
  border:1px solid var(--border);
  background:#0f1729; 
  color:#fff; 
  border-radius:14px;
  font-weight:600; font-size:1rem;
  transition:.25s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.google-btn img{ width:20px; height:20px; }
.google-btn:hover{ transform: translateY(-2px); border-color:#2b3b66; box-shadow:0 4px 14px rgba(0,0,0,.35); }

/* Buttons */
.btn,.btn-outline{
  display:inline-block; padding:.85rem 1.1rem; 
  border-radius:12px; text-decoration:none; cursor:pointer;
  font-weight:600; font-size:.95rem;
  border:1px solid transparent;
  transition:.25s ease;
}
.btn{ 
  background:linear-gradient(90deg, var(--accent), var(--accent2)); 
  color:#0b1220; 
  font-weight:700;
}
.btn:hover{ transform: translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,.35); }
.btn-outline{ 
  background:transparent; 
  border-color:var(--border); 
  color:#c9d6e6; 
}
.btn-outline:hover{ border-color:#425685; background:#10192e; }

/* Already signed-in */
.already{ display:grid; gap:.9rem; text-align:center; }
.already p{ margin-bottom:.4rem; }
.logout-inline{ margin-top:.35rem; }

/* Footer */
footer{ margin-top:1.5rem; color:var(--muted); text-align:center; font-size:.85rem; }

/* Responsive Tweaks */
@media (max-width:600px){
  .card{ padding:1.5rem; border-radius:18px; }
  h1{ font-size:1.55rem; }
  .google-btn{ padding:.85rem 1rem; font-size:.95rem; }
  .btn,.btn-outline{ padding:.7rem 1rem; font-size:.9rem; }
}

/* Dashboard (keep structure, improve responsiveness) */
.dash{ display:grid; grid-template-columns:260px 1fr; min-height:100vh; }
@media(max-width:900px){
  .dash{ grid-template-columns:1fr; }
  .sidebar{ position:fixed; left:0; top:0; bottom:0; width:220px; transform:translateX(-100%); transition:.3s ease; z-index:999; }
  .sidebar.open{ transform:translateX(0); }
}

.sidebar{
  border-right:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) , #0e1627;
  padding:1rem;
}
.side-brand{ display:flex; gap:.5rem; align-items:center; font-weight:800; margin-bottom:1rem; }
.side-brand .logo{ font-size:1.4rem; }
.sidebar nav{ display:grid; gap:.5rem; margin-bottom:auto; }
.sidebar nav a{
  display:block; padding:.65rem .85rem; border-radius:10px; 
  color:#c9d6e6; text-decoration:none; font-weight:500;
}
.sidebar nav a.active, .sidebar nav a:hover{ background:#0b1220; border:1px solid var(--border); }
.logout-box{ position:sticky; bottom:1rem; }

/* Dashboard Content */
.content{ padding:1.5rem; }
.topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.profile{ display:flex; gap:.75rem; align-items:center; font-family:"Kohinoor Bangla", "SF Pro Display", sans-serif; }
.avatar{ width:44px; height:44px; border-radius:50%; border:1px solid var(--border); }

/* Panels & Stats */
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) , var(--card);
  border:1px solid var(--border); border-radius:20px; padding:1.25rem; box-shadow:var(--shadow);
  margin-bottom:1rem;
}
.panel h2{ margin:.25rem 0 1rem 0; font-weight:700; }
.stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap:.85rem; }
.stat{ background:#0f1729; border:1px solid var(--border); border-radius:16px; padding:1rem; text-align:center; }
.stat-num{ font-weight:900; font-size:1.25rem; }
.stat-label{ color:var(--muted); font-size:.9rem; }

/* Animations */
@keyframes fadeInUp{
  0%{ opacity:0; transform:translateY(20px); }
  100%{ opacity:1; transform:translateY(0); }
}