/* My Salah - Emerald Mosque theme
   Loaded after Tailwind so these tokens + small overrides win. */

:root{
  --bg:      #f7f5ef;
  --panel:   #eef2ea;
  --surface: #ffffff;
  --line:    #dfe4d6;
  --text:    #2b3a2e;
  --heading: #173b2c;
  --muted:   #6d7a6a;
  --accent:  #1f6f54;
  --accent-dark: #173b2c;
  --gold:    #c9a227;
  --chip-bg: #e7d9a8;

  --ok-bg:#dcecdf;   --ok-text:#1f6f54;
  --mid-bg:#e6e2d2;  --mid-text:#8a7a3d;
  --warn-bg:#f3e3c4; --warn-text:#9c6a1f;
  --bad-bg:#efe6e0;  --bad-text:#9a8b80;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Mada', system-ui, sans-serif;
}
.font-display{ font-family:'Reem Kufi', system-ui, sans-serif; }

.app-shell{ max-width:960px; margin:0 auto; padding:24px 16px 64px; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px;
}
.topbar .brand{ font-family:'Reem Kufi', system-ui, sans-serif; font-size:22px; color:var(--heading); }
.topbar .brand span{ color:var(--accent); }
.topbar nav a{
  font-size:14px; color:var(--muted); text-decoration:none; margin-left:18px;
}
.topbar nav a.active, .topbar nav a:hover{ color:var(--heading); font-weight:600; }

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px;
}

.points-row{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--panel); border-radius:14px; padding:16px 18px;
}
.points-value{ font-variant-numeric:tabular-nums; font-weight:700; font-size:30px; color:var(--accent); line-height:1; }
.points-value span{ display:block; font-family:'Mada',sans-serif; font-weight:400; font-size:12px; color:var(--muted); margin-top:4px; }
.streak-pill{ font-size:13px; color:var(--heading); background:var(--chip-bg); padding:6px 12px; border-radius:100px; white-space:nowrap; }

.prayer-row{
  display:grid; grid-template-columns:1fr auto auto auto; align-items:center; gap:10px;
  padding:12px; border-radius:12px;
}
.prayer-row + .prayer-row{ margin-top:6px; }
.prayer-row:nth-child(odd){ background:var(--panel); }
.prayer-name{ font-family:'Reem Kufi', system-ui, sans-serif; font-size:15px; color:var(--heading); }
.prayer-time{ font-size:12px; font-variant-numeric:tabular-nums; color:var(--muted); }

.chip{ font-size:11px; font-weight:600; padding:4px 10px; border-radius:100px; white-space:nowrap; border:none; cursor:pointer; }
.chip-jamaah{ background:var(--ok-bg); color:var(--ok-text); }
.chip-on_time{ background:var(--mid-bg); color:var(--mid-text); }
.chip-late{ background:var(--warn-bg); color:var(--warn-text); }
.chip-missed{ background:var(--bad-bg); color:var(--bad-text); }
.chip-unselected{ background:transparent; color:var(--muted); border:1px dashed var(--line); }

.prayer-pts{ font-size:13px; font-variant-numeric:tabular-nums; color:var(--muted); text-align:right; min-width:28px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; font-weight:600; font-size:14px;
  padding:10px 18px; border-radius:10px; border:none; cursor:pointer; text-decoration:none;
}
.btn:hover{ background:var(--accent-dark); }
.btn-ghost{ background:transparent; color:var(--accent); border:1px solid var(--line); }

input, select{
  border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  font-family:'Mada',sans-serif; font-size:14px; background:#fff; color:var(--text); width:100%;
}
label{ font-size:13px; color:var(--muted); margin-bottom:4px; display:block; }

.section-title{ font-family:'Reem Kufi', system-ui, sans-serif; color:var(--heading); font-size:18px; margin:0 0 12px; }

.flash{ padding:10px 14px; border-radius:10px; font-size:14px; margin-bottom:16px; }
.flash-error{ background:var(--bad-bg); color:#7a3b2e; }
.flash-ok{ background:var(--ok-bg); color:var(--ok-text); }

.period-btn.active{ background:var(--accent); color:#fff; border-color:var(--accent); }