/* ============================================================
   زولك — نظام التصميم v1 (دفتر الحسابات)
   أربع طبقات: Primitive → Semantic → Component
   Dark-first عبر data-mode على جذر HTML
   ============================================================ */

/* ---------- الخطوط الذاتية (انسخ ملفات Cairo إلى assets/fonts) ---------- */
@font-face {
  font-family: 'Cairo';
  src: url('../fonts/Cairo-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('../fonts/Cairo-SemiBold.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}

/* ---------- الطبقة الأولى: Primitive ---------- */
:root {
  --zk-ink-900:#0d1117; --zk-ink-800:#141a22; --zk-ink-700:#1c242e; --zk-ink-600:#27313d;
  --zk-sand-100:#f5f1e8; --zk-sand-300:#d9d2c0; --zk-sand-500:#a89f8a;
  --zk-emerald-500:#18a877; --zk-emerald-700:#0e7a56;
  --zk-gold-500:#d4a943; --zk-gold-700:#a37e2a;
  --zk-red-500:#e2574c; --zk-red-700:#b03a31;
  --zk-radius:12px; --zk-radius-sm:8px;
}

/* ---------- الطبقة الثانية: Semantic (Dark أولاً) ---------- */
html[data-mode="dark"] {
  --zk-bg:var(--zk-ink-900); --zk-surface:var(--zk-ink-800); --zk-surface-2:var(--zk-ink-700);
  --zk-border:var(--zk-ink-600);
  --zk-text:var(--zk-sand-100); --zk-text-2:var(--zk-sand-300); --zk-text-3:var(--zk-sand-500);
  --zk-primary:var(--zk-emerald-500); --zk-on-primary:#fff;
  --zk-accent:var(--zk-gold-500);
  --zk-danger:var(--zk-red-500); --zk-danger-bg:rgba(226,87,76,.12);
  --zk-success:var(--zk-emerald-500); --zk-success-bg:rgba(24,168,119,.12);
  --zk-warn:var(--zk-gold-500); --zk-warn-bg:rgba(212,169,67,.14);
}
html[data-mode="light"] {
  --zk-bg:#faf8f3; --zk-surface:#fff; --zk-surface-2:#f1ede3;
  --zk-border:#e2dccb;
  --zk-text:#1c2128; --zk-text-2:#4a5361; --zk-text-3:#8a8474;
  --zk-primary:var(--zk-emerald-700); --zk-on-primary:#fff;
  --zk-accent:var(--zk-gold-700);
  --zk-danger:var(--zk-red-700); --zk-danger-bg:rgba(176,58,49,.08);
  --zk-success:var(--zk-emerald-700); --zk-success-bg:rgba(14,122,86,.08);
  --zk-warn:var(--zk-gold-700); --zk-warn-bg:rgba(163,126,42,.12);
}

/* ---------- الأساس ---------- */
* { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; }
body {
  font-family:'Cairo','Tajawal','Segoe UI',system-ui,sans-serif;
  background:var(--zk-bg); color:var(--zk-text);
  min-height:100dvh; padding-bottom:76px; /* مساحة الشريط السفلي */
  -webkit-tap-highlight-color:transparent;
}
a { color:inherit; text-decoration:none; }
input,select,textarea,button { font:inherit; color:inherit; }
input,select,textarea {
  width:100%; background:var(--zk-surface-2); border:1px solid var(--zk-border);
  border-radius:var(--zk-radius-sm); padding:.7rem .85rem; font-size:1rem;
}
input:focus,select:focus,textarea:focus { outline:2px solid var(--zk-primary); outline-offset:1px; }

/* ---------- الطبقة الثالثة: مكونات zk- ---------- */
.zk-wrap { max-width:520px; margin:0 auto; padding:0 14px; }
.zk-topbar { display:flex; justify-content:space-between; align-items:center; padding:14px 0 10px; }
.zk-topbar h1 { font-size:1.05rem; font-weight:600; }
.zk-topbar .zk-sub { font-size:.72rem; color:var(--zk-text-3); }

.zk-card { background:var(--zk-surface); border:1px solid var(--zk-border); border-radius:var(--zk-radius); padding:14px; margin-bottom:12px; }
.zk-card--flat { background:var(--zk-surface-2); border:none; }

.zk-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.zk-stat { border-radius:var(--zk-radius); padding:12px; }
.zk-stat--danger { background:var(--zk-danger-bg); color:var(--zk-danger); }
.zk-stat--success { background:var(--zk-success-bg); color:var(--zk-success); }
.zk-stat .zk-stat__label { font-size:.72rem; opacity:.9; }
.zk-stat .zk-stat__num { font-size:1.35rem; font-weight:600; line-height:1.3; }
.zk-stat .zk-stat__hint { font-size:.7rem; opacity:.8; }

.zk-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--zk-surface-2); border:1px solid var(--zk-border);
  border-radius:var(--zk-radius-sm); padding:.65rem 1rem; font-size:.9rem; cursor:pointer;
  min-height:44px; /* هدف لمس مريح */
}
.zk-btn--primary { background:var(--zk-primary); color:var(--zk-on-primary); border:none; font-weight:600; }
.zk-btn--block { width:100%; }
.zk-btn--sm { min-height:36px; padding:.35rem .7rem; font-size:.8rem; }

.zk-chip {
  display:inline-block; background:var(--zk-surface-2); border:1px solid var(--zk-border);
  border-radius:999px; padding:.35rem .8rem; font-size:.8rem; cursor:pointer;
}
.zk-chip--accent { background:var(--zk-warn-bg); color:var(--zk-accent); border-color:transparent; }
.zk-chip--primary { background:var(--zk-success-bg); color:var(--zk-success); border-color:transparent; }

.zk-badge { font-size:.65rem; padding:2px 8px; border-radius:999px; }
.zk-badge--warn { background:var(--zk-warn-bg); color:var(--zk-warn); }
.zk-badge--muted { background:var(--zk-surface-2); color:var(--zk-text-3); }

.zk-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--zk-border); }
.zk-row:last-child { border-bottom:none; }
.zk-row__body { flex:1; min-width:0; }
.zk-row__title { font-size:.9rem; }
.zk-row__meta { font-size:.72rem; color:var(--zk-text-3); }
.zk-row__amount { font-size:.9rem; font-weight:600; white-space:nowrap; }

.zk-amount--danger { color:var(--zk-danger); }
.zk-amount--success { color:var(--zk-success); }

.zk-flash { border-radius:var(--zk-radius-sm); padding:.7rem 1rem; margin:10px 0; font-size:.85rem; }
.zk-flash--success { background:var(--zk-success-bg); color:var(--zk-success); }
.zk-flash--danger { background:var(--zk-danger-bg); color:var(--zk-danger); }
.zk-flash--warn { background:var(--zk-warn-bg); color:var(--zk-warn); }

/* الشريط السفلي */
.zk-bottomnav {
  position:fixed; bottom:0; right:0; left:0; z-index:40;
  background:var(--zk-surface); border-top:1px solid var(--zk-border);
  display:flex; padding:6px 0 max(6px, env(safe-area-inset-bottom));
}
.zk-bottomnav a { flex:1; text-align:center; font-size:.68rem; color:var(--zk-text-3); padding:4px 0; }
.zk-bottomnav a.active { color:var(--zk-text); }
.zk-bottomnav .zk-ico { display:block; font-size:1.25rem; line-height:1.2; }

/* الزر العائم */
.zk-fab {
  position:fixed; bottom:78px; inset-inline-start:18px; z-index:41;
  width:56px; height:56px; border-radius:50%;
  background:var(--zk-primary); color:var(--zk-on-primary); border:none;
  font-size:1.7rem; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
}

/* البحث */
.zk-search { position:relative; margin-bottom:12px; }
.zk-search__results {
  position:absolute; top:calc(100% + 4px); right:0; left:0; z-index:30;
  background:var(--zk-surface); border:1px solid var(--zk-border);
  border-radius:var(--zk-radius); overflow:hidden; display:none;
}
.zk-search__results.open { display:block; }
.zk-search__item { display:flex; justify-content:space-between; padding:.7rem .9rem; border-bottom:1px solid var(--zk-border); cursor:pointer; }
.zk-search__item:last-child { border-bottom:none; }
.zk-search__item:hover { background:var(--zk-surface-2); }

/* اقتراحات الأصناف فوق الكيبورد */
.zk-suggest { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }

/* التبويب مفصّلة/سريعة */
.zk-toggle { display:inline-flex; border:1px solid var(--zk-border); border-radius:999px; overflow:hidden; }
.zk-toggle button { background:none; border:none; padding:.4rem 1rem; font-size:.8rem; cursor:pointer; color:var(--zk-text-3); }
.zk-toggle button.active { background:var(--zk-primary); color:var(--zk-on-primary); }
.zk-toggle button.active--warn { background:var(--zk-warn); color:#1c1608; }

/* جدول كشف الحساب */
.zk-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.zk-table th,.zk-table td { padding:.5rem .4rem; border-bottom:1px solid var(--zk-border); text-align:right; }
.zk-table th { color:var(--zk-text-3); font-weight:400; font-size:.72rem; }

.zk-hint { font-size:.72rem; color:var(--zk-text-3); }
.zk-sep { border:none; border-top:1px solid var(--zk-border); margin:12px 0; }
.zk-mt { margin-top:12px; } .zk-mb { margin-bottom:12px; }

@media (prefers-reduced-motion:no-preference) {
  .zk-fab { transition:transform .15s; }
  .zk-fab:active { transform:scale(.93); }
}