/* Theme: Islamic Green */
:root{
  --bg:#f6faf7; --card:#ffffff; --text:#0e2a1b; --muted:#4b6b59; --border:#e2efe7;
  --accent:#16a34a; --accent2:#0ea5e9; --radius:16px; --shadow:0 8px 24px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html{font-family:"Cairo","Noto Kufi Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif}
html[dir="rtl"] body{direction:rtl}
body{margin:0;background:var(--bg);color:var(--text)}
.container{max-width:1160px;margin:0 auto;padding:18px}
.header{padding:6px 0 2px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:44px;height:44px;border-radius:14px;background:var(--accent);display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:var(--shadow)}
h1{margin:0;font-size:30px}
.sub{margin:4px 0 0 0;color:var(--muted)}
.search{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
input[type="search"]{flex:1;min-width:260px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#fff}
button{padding:12px 16px;border:1px solid var(--border);background:linear-gradient(#fff,#fbfffd);border-radius:12px;cursor:pointer}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-top:16px}
.location{font-size:24px;font-weight:900}
.dates{margin-top:4px;color:var(--muted)}
.remain{margin-top:8px;font-weight:900;color:#0d3b26}

.prayers{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:16px}
.p{border:1px solid var(--border);border-radius:14px;padding:14px;text-align:center;background:#ffffff}
.p .name{color:var(--muted);font-size:14px}
.p .time{font-size:22px;font-weight:900;margin-top:6px;color:#0d3b26}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:14px}
.kpi{background:#ffffff;border:1px dashed var(--border);border-radius:14px;padding:12px}
.kpi .title{color:var(--muted);font-size:13px}
.kpi .value{font-weight:900;margin-top:4px}

.table-wrap{overflow-x:auto;margin-top:16px}
table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--border);border-radius:14px;text-align:center}
th,td{padding:12px 10px;border-bottom:1px solid var(--border)}
th{background:#f2f8f5;color:#0e2a1b;font-weight:900}
tbody tr:last-child td{border-bottom:0}

.list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.list a{display:block;background:#fff;border:1px solid var(--border);padding:12px;border-radius:14px;text-decoration:none;color:var(--text)}
.footer{font-size:14px;color:var(--muted);margin:16px 0}