/* ============================================================
   Surya Namaskar Tracker — Global Styles
   ============================================================ */
:root{
  --bg:#0d0d1a; --card:#181830; --border:rgba(255,255,255,.08);
  --a:#ff6b35; --a2:#ffb347; --green:#4caf82; --red:#ff4444; --blue:#5b9bd5;
  --txt:#ffffff; --muted:rgba(255,255,255,.5);
  --sidebar-w:230px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:var(--txt); line-height:1.5;
}
a{color:var(--a2); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}

/* ── Auth pages (login/register) ─────────────────────────────── */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#1a0e00,#0d0d1a 60%); padding:20px;
}
.auth-box{
  background:var(--card); border:1px solid var(--border); border-radius:18px;
  padding:32px 28px; max-width:440px; width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.auth-logo{text-align:center; margin-bottom:6px; font-size:26px; font-weight:800; color:var(--a2);}
.auth-sub{text-align:center; color:var(--muted); font-size:13px; margin-bottom:24px;}
.form-group{margin-bottom:14px;}
.form-group label{display:block; font-size:12px; color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.5px;}
.form-control{
  width:100%; padding:11px 13px; border-radius:10px; border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06); color:var(--txt); font-size:14px;
}
.form-control:focus{outline:none; border-color:var(--a);}
select.form-control option{background:#1a1a2e;}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
@media(max-width:520px){.row-2,.row-3{grid-template-columns:1fr;}}

.btn{
  display:inline-block; padding:11px 22px; border-radius:10px; border:none;
  font-size:14px; font-weight:700; cursor:pointer; text-align:center; transition:.2s;
}
.btn-block{display:block; width:100%;}
.btn-primary{background:linear-gradient(90deg,var(--a),var(--a2)); color:#fff; box-shadow:0 6px 20px rgba(255,107,53,.35);}
.btn-primary:hover{opacity:.92;}
.btn-outline{background:transparent; border:1px solid rgba(255,255,255,.2); color:var(--muted);}
.btn-outline:hover{border-color:var(--a); color:var(--a2);}
.btn-green{background:var(--green); color:#fff;}
.btn-red{background:var(--red); color:#fff;}
.btn-sm{padding:6px 14px; font-size:12px; border-radius:8px;}

.auth-foot{text-align:center; margin-top:18px; font-size:13px; color:var(--muted);}

.alert{padding:11px 14px; border-radius:10px; font-size:13px; margin-bottom:14px;}
.alert-success{background:rgba(76,175,130,.15); border:1px solid rgba(76,175,130,.4); color:#7be0b3;}
.alert-error{background:rgba(255,82,82,.15); border:1px solid rgba(255,82,82,.4); color:#ff9a9a;}
.alert-info{background:rgba(255,179,71,.12); border:1px solid rgba(255,179,71,.35); color:var(--a2);}

/* ── App layout: sidebar + topbar + content ──────────────────── */
.app-wrap{display:flex; min-height:100vh;}
.sidebar{
  width:var(--sidebar-w); background:#11111f; border-right:1px solid var(--border);
  position:fixed; top:0; left:0; height:100vh; overflow-y:auto; z-index:100;
  transition:transform .25s;
}
.sidebar-logo{
  padding:20px 18px; font-size:17px; font-weight:800; color:var(--a2);
  border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px;
}
.sidebar-logo span.sub{display:block; font-size:10px; color:var(--muted); font-weight:400; margin-top:2px;}
.sidebar-user{
  padding:16px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px;
}
.sidebar-user img{width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--a);}
.sidebar-user .uname{font-size:13px; font-weight:700;}
.sidebar-user .uplan{font-size:10px; color:var(--muted);}
.sidebar-nav{padding:10px 0;}
.sidebar-nav a{
  display:flex; align-items:center; gap:10px; padding:11px 18px; font-size:13px;
  color:rgba(255,255,255,.65); border-left:3px solid transparent;
}
.sidebar-nav a:hover{background:rgba(255,255,255,.04); text-decoration:none; color:#fff;}
.sidebar-nav a.active{
  background:rgba(255,107,53,.1); border-left-color:var(--a); color:var(--a2); font-weight:700;
}
.sidebar-nav .badge{
  background:var(--a); color:#fff; font-size:10px; padding:1px 7px; border-radius:10px; margin-left:auto;
}
.sidebar-nav .divider{height:1px; background:var(--border); margin:10px 18px;}

.main{margin-left:var(--sidebar-w); flex:1; min-height:100vh; display:flex; flex-direction:column;}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; border-bottom:1px solid var(--border);
  background:linear-gradient(160deg,#1a0e00,var(--bg));
  position:sticky; top:0; z-index:50;
}
.topbar h1{font-size:18px; font-weight:800; color:var(--a2);}
.topbar-right{display:flex; align-items:center; gap:14px;}
.menu-toggle{display:none; background:none; border:none; color:#fff; font-size:22px; cursor:pointer;}
.content{padding:24px; flex:1;}

@media(max-width:900px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;}
  .menu-toggle{display:block;}
}

/* ── Cards / grid ─────────────────────────────────────────────── */
.cards-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px;}
@media(max-width:1100px){.cards-row{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.cards-row{grid-template-columns:1fr;}}
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px;
}
.stat-card .si{font-size:24px; margin-bottom:6px; display:block;}
.stat-card .sv{font-size:28px; font-weight:800; color:var(--a2); display:block;}
.stat-card .sl{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-top:4px; display:block;}

.card{
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px; margin-bottom:20px;
}
.card h2, .card h3{color:var(--a2); margin-bottom:14px; font-size:16px;}

table{width:100%; border-collapse:collapse; font-size:13px;}
table th, table td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--border);}
table th{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.5px;}
table tr:hover{background:rgba(255,255,255,.02);}

.badge-pill{padding:3px 10px; border-radius:14px; font-size:11px; font-weight:700;}
.badge-green{background:rgba(76,175,130,.15); color:var(--green); border:1px solid rgba(76,175,130,.4);}
.badge-red{background:rgba(255,82,82,.15); color:#ff9a9a; border:1px solid rgba(255,82,82,.4);}
.badge-orange{background:rgba(255,107,53,.15); color:var(--a2); border:1px solid rgba(255,107,53,.4);}
.badge-blue{background:rgba(91,155,213,.15); color:var(--blue); border:1px solid rgba(91,155,213,.4);}

/* ── Profile page ─────────────────────────────────────────────── */
.profile-header{display:flex; align-items:center; gap:20px; margin-bottom:24px; flex-wrap:wrap;}
.profile-avatar{width:90px; height:90px; border-radius:50%; object-fit:cover; border:3px solid var(--a);}
.profile-name{font-size:20px; font-weight:800;}
.profile-meta{color:var(--muted); font-size:13px;}

/* ── Heatmap ──────────────────────────────────────────────────── */
.heatmap-wrap{overflow-x:auto; padding-bottom:8px;}
.heatmap{display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,12px); gap:3px;}
.heatmap .hcell{width:12px; height:12px; border-radius:2px; background:rgba(255,255,255,.06);}
.hcell[data-l="1"]{background:rgba(255,107,53,.25);}
.hcell[data-l="2"]{background:rgba(255,107,53,.45);}
.hcell[data-l="3"]{background:rgba(255,107,53,.7);}
.hcell[data-l="4"]{background:#ff6b35;}
.heatmap-legend{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); margin-top:8px;}
.heatmap-legend .hcell{width:11px; height:11px;}

/* ── Chat ─────────────────────────────────────────────────────── */
.chat-box{height:420px; overflow-y:auto; background:rgba(255,255,255,.03); border-radius:12px; padding:14px; margin-bottom:14px; display:flex; flex-direction:column; gap:8px;}
.chat-msg{max-width:75%; padding:9px 13px; border-radius:12px; font-size:13px; line-height:1.5;}
.chat-msg.user{align-self:flex-end; background:var(--a); color:#fff; border-bottom-right-radius:3px;}
.chat-msg.admin{align-self:flex-start; background:rgba(255,255,255,.08); border-bottom-left-radius:3px;}
.chat-msg .time{display:block; font-size:9px; opacity:.6; margin-top:4px;}
.chat-input-row{display:flex; gap:8px;}
.chat-input-row input{flex:1;}

/* ── Forms util ───────────────────────────────────────────────── */
.form-actions{margin-top:18px; display:flex; gap:10px;}

/* ── Misc ─────────────────────────────────────────────────────── */
.text-muted{color:var(--muted);}
.flex-between{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.mb-0{margin-bottom:0!important;}
.mt-2{margin-top:16px;}