From f26c80040da9b524e4eb50a3a7ec5797a876889b Mon Sep 17 00:00:00 2001
From: hamed <15238-genius.ha@users.noreply.drupalcode.org>
Date: Sun, 12 Jul 2026 22:15:03 +0330
Subject: [PATCH] style(admin): card-grid redesign for clinic-services items

Convert clinic service items from rows to a Figma-style card grid using
cp-card/tokens; drop hardcoded oklch tint. Functionality unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 assets/admin/pages/ClinicServicesPage.tsx | 53 +++++++++++------------
 1 file changed, 25 insertions(+), 28 deletions(-)

diff --git a/assets/admin/pages/ClinicServicesPage.tsx b/assets/admin/pages/ClinicServicesPage.tsx
index ff870fe1..953cdf50 100644
--- a/assets/admin/pages/ClinicServicesPage.tsx
+++ b/assets/admin/pages/ClinicServicesPage.tsx
@@ -313,60 +313,57 @@ function ClinicServicesPageInner() {
                   )}
                 </div>
               ) : (
-                <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
+                <div style={{ padding: 12, display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 12 }}>
                   {items.map((item) => (
                     <div
                       key={item.uuid}
+                      className="cp-card"
                       style={{
-                        display: 'flex', alignItems: 'center', gap: 14,
-                        padding: '12px 14px', borderRadius: 11,
-                        border: '1px solid var(--border)',
-                        background: item.active ? 'var(--bg)' : 'oklch(0.97 0.005 256)',
-                        opacity: item.active ? 1 : 0.7,
-                        transition: 'box-shadow 0.15s',
+                        padding: 14, display: 'flex', flexDirection: 'column', gap: 10,
+                        background: item.active ? 'var(--surface)' : 'var(--surface-2)',
+                        opacity: item.active ? 1 : 0.75,
                       }}
                     >
-                      <div style={{ minWidth: 0, flex: 1 }}>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
-                          <span style={{ fontWeight: 600, fontSize: 13.5 }}>{item.name}</span>
+                      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8 }}>
+                        <span style={{ fontWeight: 700, fontSize: 14, lineHeight: 1.5 }}>{item.name}</span>
+                        <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
                           {!item.active && <span className="badge gray" style={{ fontSize: 10 }}>غیرفعال</span>}
                           {item.insurance_covered && (
                             <span className="badge green" style={{ fontSize: 10 }}><span className="bdot" />بیمه</span>
                           )}
                         </div>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--text-3)' }}>
-                          {item.staff ? (
-                            <>
-                              <Avatar name={item.staff.full_name} />
-                              <span>{item.staff.full_name}</span>
-                            </>
-                          ) : (
-                            <span>بدون پرسنل مسئول</span>
-                          )}
-                        </div>
                       </div>
 
-                      <div style={{ textAlign: 'end', flexShrink: 0 }}>
-                        <div style={{ color: 'var(--primary)', fontWeight: 700, fontSize: 14 }}>{formatRial(item.price_rials)}</div>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--text-3)' }}>
+                        {item.staff ? (
+                          <>
+                            <Avatar name={item.staff.full_name} />
+                            <span>{item.staff.full_name}</span>
+                          </>
+                        ) : (
+                          <span>بدون پرسنل مسئول</span>
+                        )}
                       </div>
 
-                      <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
+                      <div style={{ color: 'var(--primary)', fontWeight: 800, fontSize: 16 }}>{formatRial(item.price_rials)}</div>
+
+                      <div style={{ display: 'flex', gap: 4, marginTop: 'auto', paddingTop: 8, borderTop: '1px solid var(--border)' }}>
                         <button className="btn sm ghost" onClick={() => openEditItem(item)} title="ویرایش">
-                          <PencilIcon style={{ width: 14 }} />
+                          <PencilIcon style={{ width: 15 }} />
                         </button>
                         <button className="btn sm ghost" onClick={() => setTariffItem(item)} title="تعرفه‌های سالانه">
-                          <BanknotesIcon style={{ width: 14 }} />
+                          <BanknotesIcon style={{ width: 15 }} />
                         </button>
                         <button className="btn sm ghost" onClick={() => setInsuranceItem(item)} title="پوشش بیمه">
-                          <ShieldCheckIcon style={{ width: 14 }} />
+                          <ShieldCheckIcon style={{ width: 15 }} />
                         </button>
                         <button
                           className="btn sm ghost"
                           onClick={() => setToggleItem(item)}
                           title={item.active ? 'غیرفعال‌کردن' : 'فعال‌کردن'}
-                          style={{ color: item.active ? 'var(--text-3)' : 'var(--primary)' }}
+                          style={{ marginInlineStart: 'auto', color: item.active ? 'var(--text-3)' : 'var(--primary)' }}
                         >
-                          {item.active ? <EyeSlashIcon style={{ width: 14 }} /> : <EyeIcon style={{ width: 14 }} />}
+                          {item.active ? <EyeSlashIcon style={{ width: 15 }} /> : <EyeIcon style={{ width: 15 }} />}
                         </button>
                       </div>
                     </div>