/* =====================================================================
   أنيس المجد — طبقة الهوية البصرية «ليل الصحراء» (0.60) — ملف مولَّد من gen_theme.py، لا يُعدَّل يدويًا
   تُحمَّل بعد app.css فتعلو عليه. التخطيط واحد، ويتغير مع المنطقة: الألوان، النقش، شريط الزخرفة.
   - html[data-theme="dark"]   → الوضع الليلي
   - html[data-region="najd|hijaz|asir|sharqia|north"] → حزمة المنطقة (الافتراضي نجد)
   أوراق الطباعة (الفواتير، الإيصالات، القسائم، الملصقات) تبقى بيضاء دائمًا.
   ===================================================================== */
@font-face { font-family: "Noto Kufi Arabic"; font-weight: 400; font-display: swap; src: url("fonts/noto-kufi-arabic-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Kufi Arabic"; font-weight: 500; font-display: swap; src: url("fonts/noto-kufi-arabic-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Kufi Arabic"; font-weight: 600; font-display: swap; src: url("fonts/noto-kufi-arabic-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Kufi Arabic"; font-weight: 700; font-display: swap; src: url("fonts/noto-kufi-arabic-700-normal.woff2") format("woff2"); }
:root {
    --primary-contrast: #ffffff;
    --success: #1f8f4e;
    --warn: #b7791f;
    --danger: #c0392b;
    --ai: #6d4ce0;
    --ai-soft: #f0ebfd;
    --warn-soft: #fff6e0;
    --warn-line: #f1d28a;
    --warn-text: #8a5a00;
    --danger-soft: #fdecec;
    --danger-line: #f0b4b4;
    --danger-text: #b42318;
    --success-soft: #eef8f1;
    --success-line: #cfe6d6;
    --side-active: rgba(255,255,255,.07);
    --side-line: rgba(255,255,255,.09);
    --radius: 14px;
    --radius-sm: 10px;
    --pill: 999px;
    --shadow: 0 1px 2px rgba(23,32,51,.05), 0 8px 24px rgba(23,32,51,.06);
    --shadow-lg: 0 14px 40px rgba(23,32,51,.16);
    --kufi: "Noto Kufi Arabic", "IBM Plex Sans Arabic", "Cairo", sans-serif;
    color-scheme: light;
    --primary: #14355f;
    --primary-dark: #0b1b33;
    --primary-soft: #e8eef7;
    --accent: #b8955a;
    --accent-dark: #8a6a2f;
    --accent-soft: #f6efe1;
    --accent-glow: #f1d9a6;
    --bg: #f4f1ea;
    --surface: #ffffff;
    --surface-2: #faf8f3;
    --border: #e6e0d2;
    --border-strong: #d2c9b5;
    --text: #172033;
    --muted: #6b6553;
    --side: #0b1b33;
    --side-2: #122a4d;
    --side-text: #cfd9ea;
    --side-muted: #8fa3c2;
    --pattern-side: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2256%22 height=%2256%22 viewBox=%220 0 56 56%22%3E%3Cg fill=%22none%22 stroke=%22%2317304f%22 stroke-width=%221%22%3E%3Cpath d=%22M28 4l6 18 18 6-18 6-6 18-6-18-18-6 18-6z%22/%3E%3Cpath d=%22M28 12l3.5 12.5L44 28l-12.5 3.5L28 44l-3.5-12.5L12 28l12.5-3.5z%22/%3E%3Ccircle cx=%2228%22 cy=%2228%22 r=%223%22/%3E%3Cpath d=%22M4 4h8M4 4v8M52 4h-8M52 4v8M4 52h8M4 52v-8M52 52h-8M52 52v-8%22/%3E%3C/g%3E%3C/svg%3E");
    --pattern-card: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2256%22 height=%2256%22 viewBox=%220 0 56 56%22%3E%3Cg fill=%22none%22 stroke=%22%23ebe4d3%22 stroke-width=%221%22%3E%3Cpath d=%22M28 4l6 18 18 6-18 6-6 18-6-18-18-6 18-6z%22/%3E%3Cpath d=%22M28 12l3.5 12.5L44 28l-12.5 3.5L28 44l-3.5-12.5L12 28l12.5-3.5z%22/%3E%3Ccircle cx=%2228%22 cy=%2228%22 r=%223%22/%3E%3Cpath d=%22M4 4h8M4 4v8M52 4h-8M52 4v8M4 52h8M4 52v-8M52 52h-8M52 52v-8%22/%3E%3C/g%3E%3C/svg%3E");
    --divider: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%228%22 viewBox=%220 0 40 8%22%3E%3Crect width=%2240%22 height=%228%22 fill=%22%230b1b33%22/%3E%3Cpath d=%22M0 4l4-4 4 4-4 4zM10 4l4-4 4 4-4 4zM20 4l4-4 4 4-4 4zM30 4l4-4 4 4-4 4z%22 fill=%22%23b8955a%22/%3E%3Cpath d=%22M4 4l2-2 2 2-2 2zM24 4l2-2 2 2-2 2z%22 fill=%22%23f4f1ea%22/%3E%3C/svg%3E");
}
html[data-theme="dark"] {
    --primary-contrast: #0a1322;
    --success: #3fbf7a;
    --warn: #e2a63a;
    --danger: #ef6b5e;
    --ai: #a58cf4;
    --ai-soft: #241c3d;
    --warn-soft: #3a2f14;
    --warn-line: #6b5320;
    --warn-text: #f3cf7a;
    --danger-soft: #3b1d22;
    --danger-line: #6e3036;
    --danger-text: #ff9d93;
    --success-soft: #16302a;
    --success-line: #25513f;
    --side-active: rgba(255,255,255,.06);
    --side-line: rgba(255,255,255,.08);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg: 0 14px 40px rgba(0,0,0,.5);
    color-scheme: dark;
    --primary: #8fb3e6;
    --primary-dark: #6f97d2;
    --primary-soft: #172b47;
    --accent: #d9b86f;
    --accent-dark: #b8955a;
    --accent-soft: #2a2416;
    --accent-glow: #f1d9a6;
    --bg: #101b2e;
    --surface: #182540;
    --surface-2: #1e2d4a;
    --border: #2b3d5e;
    --border-strong: #3a5078;
    --text: #e9eef5;
    --muted: #a3b1c6;
    --side: #060c18;
    --side-2: #0b1527;
    --side-text: #c4d0e0;
    --side-muted: #7f90a8;
    --pattern-side: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2256%22 height=%2256%22 viewBox=%220 0 56 56%22%3E%3Cg fill=%22none%22 stroke=%22%2313223a%22 stroke-width=%221%22%3E%3Cpath d=%22M28 4l6 18 18 6-18 6-6 18-6-18-18-6 18-6z%22/%3E%3Cpath d=%22M28 12l3.5 12.5L44 28l-12.5 3.5L28 44l-3.5-12.5L12 28l12.5-3.5z%22/%3E%3Ccircle cx=%2228%22 cy=%2228%22 r=%223%22/%3E%3Cpath d=%22M4 4h8M4 4v8M52 4h-8M52 4v8M4 52h8M4 52v-8M52 52h-8M52 52v-8%22/%3E%3C/g%3E%3C/svg%3E");
    --pattern-card: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2256%22 height=%2256%22 viewBox=%220 0 56 56%22%3E%3Cg fill=%22none%22 stroke=%22%231b2a44%22 stroke-width=%221%22%3E%3Cpath d=%22M28 4l6 18 18 6-18 6-6 18-6-18-18-6 18-6z%22/%3E%3Cpath d=%22M28 12l3.5 12.5L44 28l-12.5 3.5L28 44l-3.5-12.5L12 28l12.5-3.5z%22/%3E%3Ccircle cx=%2228%22 cy=%2228%22 r=%223%22/%3E%3Cpath d=%22M4 4h8M4 4v8M52 4h-8M52 4v8M4 52h8M4 52v-8M52 52h-8M52 52v-8%22/%3E%3C/g%3E%3C/svg%3E");
    --divider: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%228%22 viewBox=%220 0 40 8%22%3E%3Crect width=%2240%22 height=%228%22 fill=%22%23d9b86f%22/%3E%3Cpath d=%22M0 4l4-4 4 4-4 4zM10 4l4-4 4 4-4 4zM20 4l4-4 4 4-4 4zM30 4l4-4 4 4-4 4z%22 fill=%22%230a1322%22/%3E%3Cpath d=%22M4 4l2-2 2 2-2 2zM24 4l2-2 2 2-2 2z%22 fill=%22%23f1d9a6%22/%3E%3C/svg%3E");
}
html[data-region="hijaz"] {
    --primary: #1f5f5a;
    --primary-dark: #133f3b;
    --primary-soft: #e4f0ee;
    --accent: #a8743a;
    --accent-dark: #7d5325;
    --accent-soft: #f5ebdd;
    --accent-glow: #e6c48f;
    --bg: #f5f1e8;
    --surface: #ffffff;
    --surface-2: #faf7f1;
    --border: #e4ddcf;
    --border-strong: #cfc4ae;
    --text: #1d2a28;
    --muted: #5f6863;
    --side: #10302e;
    --side-2: #1a4542;
    --side-text: #d2e3e0;
    --side-muted: #8fb1ac;
    --pattern-side: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22 viewBox=%220 0 48 48%22%3E%3Cg fill=%22none%22 stroke=%22%231b4642%22 stroke-width=%221%22%3E%3Cpath d=%22M24 0v48M0 24h48%22/%3E%3Cpath d=%22M24 6l18 18-18 18L6 24z%22/%3E%3Ccircle cx=%2224%22 cy=%2224%22 r=%225%22/%3E%3Cpath d=%22M0 0l12 12M48 0L36 12M0 48l12-12M48 48L36 36%22/%3E%3C/g%3E%3C/svg%3E");
    --pattern-card: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22 viewBox=%220 0 48 48%22%3E%3Cg fill=%22none%22 stroke=%22%23e8e1d2%22 stroke-width=%221%22%3E%3Cpath d=%22M24 0v48M0 24h48%22/%3E%3Cpath d=%22M24 6l18 18-18 18L6 24z%22/%3E%3Ccircle cx=%2224%22 cy=%2224%22 r=%225%22/%3E%3Cpath d=%22M0 0l12 12M48 0L36 12M0 48l12-12M48 48L36 36%22/%3E%3C/g%3E%3C/svg%3E");
    --divider: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%228%22 viewBox=%220 0 24 8%22%3E%3Crect width=%2224%22 height=%228%22 fill=%22%2310302e%22/%3E%3Cpath d=%22M0 8L6 2l6 6 6-6 6 6%22 fill=%22none%22 stroke=%22%23a8743a%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%226%22 cy=%222%22 r=%221%22 fill=%22%23a8743a%22/%3E%3Ccircle cx=%2218%22 cy=%222%22 r=%221%22 fill=%22%23a8743a%22/%3E%3C/svg%3E");
}
html[data-region="hijaz"][data-theme="dark"] {
    --primary: #7fcfc6;
    --primary-dark: #5fb3aa;
    --primary-soft: #13302e;
    --accent: #d9a86a;
    --accent-dark: #b8894a;
    --accent-soft: #2a2116;
    --accent-glow: #f0d2a0;
    --bg: #0a1616;
    --surface: #102120;
    --surface-2: #152b29;
    --border: #1f3a38;
    --border-strong: #2b4e4b;
    --text: #e6efed;
    --muted: #93aaa6;
    --side: #07110f;
    --side-2: #0c1d1b;
    --side-text: #c3d8d5;
    --side-muted: #79a09b;
    --pattern-side: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22 viewBox=%220 0 48 48%22%3E%3Cg fill=%22none%22 stroke=%22%23122f2c%22 stroke-width=%221%22%3E%3Cpath d=%22M24 0v48M0 24h48%22/%3E%3Cpath d=%22M24 6l18 18-18 18L6 24z%22/%3E%3Ccircle cx=%2224%22 cy=%2224%22 r=%225%22/%3E%3Cpath d=%22M0 0l12 12M48 0L36 12M0 48l12-12M48 48L36 36%22/%3E%3C/g%3E%3C/svg%3E");
    --pattern-card: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22 viewBox=%220 0 48 48%22%3E%3Cg fill=%22none%22 stroke=%22%231a2e2c%22 stroke-width=%221%22%3E%3Cpath d=%22M24 0v48M0 24h48%22/%3E%3Cpath d=%22M24 6l18 18-18 18L6 24z%22/%3E%3Ccircle cx=%2224%22 cy=%2224%22 r=%225%22/%3E%3Cpath d=%22M0 0l12 12M48 0L36 12M0 48l12-12M48 48L36 36%22/%3E%3C/g%3E%3C/svg%3E");
    --divider: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%228%22 viewBox=%220 0 24 8%22%3E%3Crect width=%2224%22 height=%228%22 fill=%22%23d9a86a%22/%3E%3Cpath d=%22M0 8L6 2l6 6 6-6 6 6%22 fill=%22none%22 stroke=%22%230a1616%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%226%22 cy=%222%22 r=%221%22 fill=%22%230a1616%22/%3E%3Ccircle cx=%2218%22 cy=%222%22 r=%221%22 fill=%22%230a1616%22/%3E%3C/svg%3E");
}
html[data-region="asir"] {
    --primary: #1c4d8d;
    --primary-dark: #123462;
    --primary-soft: #e6eef9;
    --accent: #c8402f;
    --accent-dark: #9a2f22;
    --accent-soft: #fbe8e4;
    --accent-glow: #f3b64a;
    --bg: #f7f6f1;
    --surface: #ffffff;
    --surface-2: #fbfaf6;
    --border: #e5e3da;
    --border-strong: #cfcbbd;
    --text: #1b2230;
    --muted: #646977;
    --side: #1a2a4a;
    --side-2: #243a66;
    --side-text: #dde4f2;
    --side-muted: #9fb0cf;
    --pattern-side: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22 viewBox=%220 0 48 48%22%3E%3Cg fill=%22none%22 stroke=%22%232b3f6b%22 stroke-width=%221%22%3E%3Cpath d=%22M0 12l12-12 12 12L36 0l12 12%22/%3E%3Cpath d=%22M0 36l12-12 12 12 12-12 12 12%22/%3E%3Cpath d=%22M0 24h48%22/%3E%3C/g%3E%3Cg fill=%22%23c8402f%22%3E%3Ccircle cx=%2212%22 cy=%2224%22 r=%221.6%22/%3E%3Ccircle cx=%2236%22 cy=%2224%22 r=%221.6%22/%3E%3C/g%3E%3C/svg%3E");
    --pattern-card: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22 viewBox=%220 0 48 48%22%3E%3Cg fill=%22none%22 stroke=%22%23e9e6dc%22 stroke-width=%221%22%3E%3Cpath d=%22M0 12l12-12 12 12L36 0l12 12%22/%3E%3Cpath d=%22M0 36l12-12 12 12 12-12 12 12%22/%3E%3Cpath d=%22M0 24h48%22/%3E%3C/g%3E%3Cg fill=%22%23efc9c3%22%3E%3Ccircle cx=%2212%22 cy=%2224%22 r=%221.6%22/%3E%3Ccircle cx=%2236%22 cy=%2224%22 r=%221.6%22/%3E%3C/g%3E%3C/svg%3E");
    --divider: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%228%22 viewBox=%220 0 48 8%22%3E%3Crect x=%220%22 width=%228%22 height=%228%22 fill=%22%23c8402f%22/%3E%3Crect x=%228%22 width=%228%22 height=%228%22 fill=%22%23f3b64a%22/%3E%3Crect x=%2216%22 width=%228%22 height=%228%22 fill=%22%232a8c5a%22/%3E%3Crect x=%2224%22 width=%228%22 height=%228%22 fill=%22%231c4d8d%22/%3E%3Crect x=%2232%22 width=%228%22 height=%228%22 fill=%22%23c8402f%22/%3E%3Crect x=%2240%22 width=%228%22 height=%228%22 fill=%22%23f3b64a%22/%3E%3Cpath d=%22M0 8L4 4l4 4M16 8l4-4 4 4M32 8l4-4 4 4%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221%22/%3E%3C/svg%3E");
}
html[data-region="asir"][data-theme="dark"] {
    --primary: #8fb5ef;
    --primary-dark: #6f9be0;
    --primary-soft: #172a48;
    --accent: #ef6a58;
    --accent-dark: #c8402f;
    --accent-soft: #331a16;
    --accent-glow: #f3b64a;
    --bg: #0c111c;
    --surface: #131a29;
    --surface-2: #182135;
    --border: #243049;
    --border-strong: #324262;
    --text: #e9edf5;
    --muted: #9aa6bb;
    --side: #080d18;
    --side-2: #0f1727;
    --side-text: #c8d2e6;
    --side-muted: #8392ae;
    --pattern-side: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22 viewBox=%220 0 48 48%22%3E%3Cg fill=%22none%22 stroke=%22%231b2a48%22 stroke-width=%221%22%3E%3Cpath d=%22M0 12l12-12 12 12L36 0l12 12%22/%3E%3Cpath d=%22M0 36l12-12 12 12 12-12 12 12%22/%3E%3Cpath d=%22M0 24h48%22/%3E%3C/g%3E%3Cg fill=%22%23c8402f%22%3E%3Ccircle cx=%2212%22 cy=%2224%22 r=%221.6%22/%3E%3Ccircle cx=%2236%22 cy=%2224%22 r=%221.6%22/%3E%3C/g%3E%3C/svg%3E");
    --pattern-card: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22 viewBox=%220 0 48 48%22%3E%3Cg fill=%22none%22 stroke=%22%231e2740%22 stroke-width=%221%22%3E%3Cpath d=%22M0 12l12-12 12 12L36 0l12 12%22/%3E%3Cpath d=%22M0 36l12-12 12 12 12-12 12 12%22/%3E%3Cpath d=%22M0 24h48%22/%3E%3C/g%3E%3Cg fill=%22%234a2a26%22%3E%3Ccircle cx=%2212%22 cy=%2224%22 r=%221.6%22/%3E%3Ccircle cx=%2236%22 cy=%2224%22 r=%221.6%22/%3E%3C/g%3E%3C/svg%3E");
    --divider: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%228%22 viewBox=%220 0 48 8%22%3E%3Crect x=%220%22 width=%228%22 height=%228%22 fill=%22%23ef6a58%22/%3E%3Crect x=%228%22 width=%228%22 height=%228%22 fill=%22%23f3b64a%22/%3E%3Crect x=%2216%22 width=%228%22 height=%228%22 fill=%22%233fbf7a%22/%3E%3Crect x=%2224%22 width=%228%22 height=%228%22 fill=%22%238fb5ef%22/%3E%3Crect x=%2232%22 width=%228%22 height=%228%22 fill=%22%23ef6a58%22/%3E%3Crect x=%2240%22 width=%228%22 height=%228%22 fill=%22%23f3b64a%22/%3E%3Cpath d=%22M0 8L4 4l4 4M16 8l4-4 4 4M32 8l4-4 4 4%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221%22/%3E%3C/svg%3E");
}
html[data-region="sharqia"] {
    --primary: #0f4c81;
    --primary-dark: #093559;
    --primary-soft: #e4eef8;
    --accent: #8e9eab;
    --accent-dark: #5f7180;
    --accent-soft: #eef2f5;
    --accent-glow: #dce7ee;
    --bg: #f2f5f7;
    --surface: #ffffff;
    --surface-2: #f7f9fb;
    --border: #dfe6ec;
    --border-strong: #c4cfd8;
    --text: #14232f;
    --muted: #5d6b78;
    --side: #07253f;
    --side-2: #0d3a5e;
    --side-text: #cfe0ee;
    --side-muted: #86a6c0;
    --pattern-side: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2240%22 viewBox=%220 0 64 40%22%3E%3Cg fill=%22none%22 stroke=%22%2315476f%22 stroke-width=%221%22%3E%3Cpath d=%22M0 10c8-8 16-8 24 0s16 8 24 0 12-6 16-4%22/%3E%3Cpath d=%22M0 30c8-8 16-8 24 0s16 8 24 0 12-6 16-4%22/%3E%3C/g%3E%3Ccircle cx=%2212%22 cy=%2220%22 r=%221.5%22 fill=%22%2315476f%22/%3E%3Ccircle cx=%2244%22 cy=%2220%22 r=%221.5%22 fill=%22%2315476f%22/%3E%3C/svg%3E");
    --pattern-card: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2240%22 viewBox=%220 0 64 40%22%3E%3Cg fill=%22none%22 stroke=%22%23dfe6ec%22 stroke-width=%221%22%3E%3Cpath d=%22M0 10c8-8 16-8 24 0s16 8 24 0 12-6 16-4%22/%3E%3Cpath d=%22M0 30c8-8 16-8 24 0s16 8 24 0 12-6 16-4%22/%3E%3C/g%3E%3Ccircle cx=%2212%22 cy=%2220%22 r=%221.5%22 fill=%22%23dfe6ec%22/%3E%3Ccircle cx=%2244%22 cy=%2220%22 r=%221.5%22 fill=%22%23dfe6ec%22/%3E%3C/svg%3E");
    --divider: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%228%22 viewBox=%220 0 32 8%22%3E%3Crect width=%2232%22 height=%228%22 fill=%22%2307253f%22/%3E%3Cpath d=%22M0 5c4-4 8-4 12 0s8 4 12 0 6-3 8-2%22 fill=%22none%22 stroke=%22%239fc5e0%22 stroke-width=%221.5%22/%3E%3C/svg%3E");
}
html[data-region="sharqia"][data-theme="dark"] {
    --primary: #79b4ec;
    --primary-dark: #5a9bd8;
    --primary-soft: #102a44;
    --accent: #b7c7d3;
    --accent-dark: #8e9eab;
    --accent-soft: #1a262f;
    --accent-glow: #e3edf4;
    --bg: #08131d;
    --surface: #0f1c29;
    --surface-2: #142433;
    --border: #1f3446;
    --border-strong: #2c4760;
    --text: #e6eef5;
    --muted: #93a7b9;
    --side: #050f19;
    --side-2: #0a1a2a;
    --side-text: #c0d4e4;
    --side-muted: #7596b0;
    --pattern-side: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2240%22 viewBox=%220 0 64 40%22%3E%3Cg fill=%22none%22 stroke=%22%230f3352%22 stroke-width=%221%22%3E%3Cpath d=%22M0 10c8-8 16-8 24 0s16 8 24 0 12-6 16-4%22/%3E%3Cpath d=%22M0 30c8-8 16-8 24 0s16 8 24 0 12-6 16-4%22/%3E%3C/g%3E%3Ccircle cx=%2212%22 cy=%2220%22 r=%221.5%22 fill=%22%230f3352%22/%3E%3Ccircle cx=%2244%22 cy=%2220%22 r=%221.5%22 fill=%22%230f3352%22/%3E%3C/svg%3E");
    --pattern-card: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2240%22 viewBox=%220 0 64 40%22%3E%3Cg fill=%22none%22 stroke=%22%231a2b3b%22 stroke-width=%221%22%3E%3Cpath d=%22M0 10c8-8 16-8 24 0s16 8 24 0 12-6 16-4%22/%3E%3Cpath d=%22M0 30c8-8 16-8 24 0s16 8 24 0 12-6 16-4%22/%3E%3C/g%3E%3Ccircle cx=%2212%22 cy=%2220%22 r=%221.5%22 fill=%22%231a2b3b%22/%3E%3Ccircle cx=%2244%22 cy=%2220%22 r=%221.5%22 fill=%22%231a2b3b%22/%3E%3C/svg%3E");
    --divider: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%228%22 viewBox=%220 0 32 8%22%3E%3Crect width=%2232%22 height=%228%22 fill=%22%2379b4ec%22/%3E%3Cpath d=%22M0 5c4-4 8-4 12 0s8 4 12 0 6-3 8-2%22 fill=%22none%22 stroke=%22%2308131d%22 stroke-width=%221.5%22/%3E%3C/svg%3E");
}
html[data-region="north"] {
    --primary: #7a3b2e;
    --primary-dark: #562a20;
    --primary-soft: #f6e9e5;
    --accent: #c99a5b;
    --accent-dark: #9a7239;
    --accent-soft: #f7efe2;
    --accent-glow: #f1d6a4;
    --bg: #f6f1ea;
    --surface: #ffffff;
    --surface-2: #fbf8f3;
    --border: #e7ddd1;
    --border-strong: #d3c4b2;
    --text: #2a211c;
    --muted: #6f625a;
    --side: #3a221b;
    --side-2: #55312a;
    --side-text: #eddcd3;
    --side-muted: #c2a398;
    --pattern-side: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cg fill=%22none%22 stroke=%22%235a362d%22 stroke-width=%221.2%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M4 14l8-8 8 8M20 14l8-8 8 8M4 34l8-8 8 8M20 34l8-8 8 8%22/%3E%3Cpath d=%22M8 22h4M28 22h4%22/%3E%3C/g%3E%3C/svg%3E");
    --pattern-card: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cg fill=%22none%22 stroke=%22%23eadfd3%22 stroke-width=%221.2%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M4 14l8-8 8 8M20 14l8-8 8 8M4 34l8-8 8 8M20 34l8-8 8 8%22/%3E%3Cpath d=%22M8 22h4M28 22h4%22/%3E%3C/g%3E%3C/svg%3E");
    --divider: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%228%22 viewBox=%220 0 20 8%22%3E%3Crect width=%2220%22 height=%228%22 fill=%22%233a221b%22/%3E%3Cpath d=%22M2 6l3-4 3 4M12 6l3-4 3 4%22 fill=%22none%22 stroke=%22%23c99a5b%22 stroke-width=%221.5%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
}
html[data-region="north"][data-theme="dark"] {
    --primary: #e39a85;
    --primary-dark: #d17f68;
    --primary-soft: #3a211b;
    --accent: #e0b877;
    --accent-dark: #c99a5b;
    --accent-soft: #2d2418;
    --accent-glow: #f1d6a4;
    --bg: #140f0d;
    --surface: #1d1613;
    --surface-2: #241c18;
    --border: #352a25;
    --border-strong: #4a3b34;
    --text: #f1e9e4;
    --muted: #b09d93;
    --side: #0f0a09;
    --side-2: #1a110e;
    --side-text: #dcc8be;
    --side-muted: #a08578;
    --pattern-side: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cg fill=%22none%22 stroke=%22%232f1c17%22 stroke-width=%221.2%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M4 14l8-8 8 8M20 14l8-8 8 8M4 34l8-8 8 8M20 34l8-8 8 8%22/%3E%3Cpath d=%22M8 22h4M28 22h4%22/%3E%3C/g%3E%3C/svg%3E");
    --pattern-card: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cg fill=%22none%22 stroke=%22%232a1e1a%22 stroke-width=%221.2%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M4 14l8-8 8 8M20 14l8-8 8 8M4 34l8-8 8 8M20 34l8-8 8 8%22/%3E%3Cpath d=%22M8 22h4M28 22h4%22/%3E%3C/g%3E%3C/svg%3E");
    --divider: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%228%22 viewBox=%220 0 20 8%22%3E%3Crect width=%2220%22 height=%228%22 fill=%22%23e0b877%22/%3E%3Cpath d=%22M2 6l3-4 3 4M12 6l3-4 3 4%22 fill=%22none%22 stroke=%22%23140f0d%22 stroke-width=%221.5%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
}

/* ---------- عام ---------- */
body { background: var(--bg); color: var(--text); }
a { color: var(--primary); }
h1, h2, .kufi, .brand, .topbar-business { font-family: var(--kufi); }
/* 0.76: الأرقام الكبيرة في البطاقات بخط الأرقام (أوضح من الكوفي للأرقام) */
.stat-value, .kpi-value { font-family: var(--num-font, inherit); font-variant-numeric: tabular-nums lining-nums; }
h1 { font-size: 1.55rem; letter-spacing: 0; font-weight: 700; color: var(--primary-dark); }
h2 { font-weight: 700; color: var(--primary-dark); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2 { color: var(--text); }
::selection { background: var(--primary-soft); }
/* شريط الزخرفة (سدو/قط/روشان…) تحت عنوان الصفحة — توقيع الهوية */
.page-head h1::after, .content > h1:first-child::after, .main-plain h1:first-of-type::after { content: ""; display: block; width: 120px; height: 8px; margin-top: 8px; border-radius: 2px; background: var(--divider) repeat-x; background-size: auto 8px; }
.page-head h1 { line-height: 1.4; }

/* ---------- الشريط العلوي ---------- */
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar-business { color: var(--primary-dark); font-weight: 700; }
html[data-theme="dark"] .topbar-business { color: var(--text); }
.topbar-link { border-radius: var(--pill); color: var(--text); font-weight: 600; padding: 6px 12px; }
.topbar-link:hover { background: var(--primary-soft); color: var(--primary); }
.topbar-link.lang { border: 1px solid var(--border); }
.topbar-user { color: var(--muted); }
.brand-mark { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.theme-wrap { position: relative; }
.theme-btn { display: inline-flex; align-items: center; gap: 6px; } .theme-btn .glyph { font-size: 1.15rem; line-height: 1; }
.theme-panel { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 14px; width: 272px; z-index: 60; }
.theme-panel h4 { margin: 0 0 6px; font-size: .78rem; color: var(--muted); font-weight: 700; letter-spacing: .04em; }
.theme-row { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.theme-row button { flex: 1 1 30%; font: inherit; font-size: .84rem; font-weight: 600; padding: 7px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.theme-row button.on { background: var(--primary); color: var(--primary-contrast); border-color: var(--primary); }
.theme-sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); flex: none; }
.theme-backdrop { position: fixed; inset: 0; z-index: 55; }
.theme-note { font-size: .78rem; color: var(--muted); margin: 0; }

/* ---------- القائمة الجانبية: ليلية منقوشة مع خط ذهبي فاصل ---------- */
.sidebar { background: linear-gradient(180deg, var(--side) 0%, var(--side-2) 100%); border-inline-end: 0; box-shadow: none; color: var(--side-text); }   /* 0.78: لا نكتب position هنا حتى تبقى القائمة ثابتة (sticky) على سطح المكتب ودرجًا (fixed) على الجوال كما في app.css */
.sidebar::before { content: ""; position: absolute; inset: 0; background: var(--pattern-side); pointer-events: none; opacity: .45; }
.sidebar::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--accent) 25%, var(--accent) 75%, transparent); pointer-events: none; }
.sidebar > * { position: relative; }
.nav-item { color: var(--side-text); font-weight: 500; border-radius: var(--radius-sm); padding: 8px 12px; position: relative; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item .nav-icon, .nav-icon { color: var(--side-muted); }
.nav-item:hover .nav-icon { color: #fff; }
.nav-item.active { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)); color: #fff; font-weight: 700; box-shadow: none; }
.nav-item.active::after { content: ""; position: absolute; inset-inline-start: -13px; top: 50%; width: 9px; height: 9px; transform: translateY(-50%) rotate(45deg); background: var(--accent-glow); box-shadow: 0 0 10px var(--accent-glow); }
.nav-item.active .nav-icon { color: var(--accent-glow); }
.nav-sep { background: var(--side-line); }
.nav-group { border-radius: var(--radius-sm); }
.nav-group.open { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--side-line); }
.nav-group.has-active { background: rgba(255,255,255,.05); }
.nav-group-head { color: var(--side-text); font-weight: 600; }
.nav-group-head:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-group-head .nav-icon { color: var(--side-muted); }
.nav-group-head:hover .nav-icon { color: #fff; }
.nav-chevron { color: var(--side-muted); }
.nav-group-dot { background: var(--accent-glow); }
.nav-group-items .nav-item::before { background: rgba(255,255,255,.25); }
.nav-group-items .nav-item.active::before { background: var(--accent-glow); }
.nav-group-items .nav-item.active::after { display: none; }
.nav-bottom { border-top: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.nav-customize { color: var(--accent-glow); }
.powered-by { color: var(--side-muted); }
.powered-by:hover { color: #fff; }
.sidebar .lic-banner, .sidebar .tenant-banner { border-radius: var(--radius-sm); }
.sidebar::-webkit-scrollbar { width: 8px; } .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 8px; }
@media (max-width: 800px) { .nav-toggle { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--pill); } }

/* ---------- الأزرار: كبسولات ---------- */
.btn { border-radius: var(--pill); border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: 0 1px 1px rgba(23,32,51,.04); font-weight: 700; }
.btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border-color: transparent; color: var(--accent-glow); box-shadow: 0 6px 16px color-mix(in srgb, var(--primary-dark) 28%, transparent); }
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); border-color: transparent; color: #fff; }
html[data-theme="dark"] .btn-primary { color: var(--primary-contrast); }
html[data-theme="dark"] .btn-primary:hover:not(:disabled) { color: var(--primary-contrast); }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.btn-warn { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-mini { border-radius: var(--pill); }
.btn-ai { color: var(--ai); border: 1px solid transparent; background: var(--ai-soft); }
.btn-ai:hover { background: color-mix(in srgb, var(--ai) 18%, var(--ai-soft)); }
.ai-progress h2 { color: var(--ai); }
.chip { border-radius: var(--pill); }
.chip.on { background: var(--primary); color: var(--primary-contrast); border-color: var(--primary); }

/* ---------- البطاقات والإحصاءات ---------- */
.card { border-radius: var(--radius); box-shadow: var(--shadow); border-color: var(--border); }
.card-link:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); }
.stat { border-radius: var(--radius); position: relative; overflow: hidden; border-top: 3px solid var(--accent); padding-top: 16px; }
.stat::after { content: ""; position: absolute; inset-inline-end: -24px; top: -24px; width: 120px; height: 120px; background: var(--pattern-card); opacity: .55; pointer-events: none; -webkit-mask-image: radial-gradient(circle at 80% 20%, #000 20%, transparent 75%); mask-image: radial-gradient(circle at 80% 20%, #000 20%, transparent 75%); }
.stat:nth-child(2) { border-top-color: var(--primary); }
.stat:nth-child(3) { border-top-color: var(--success); }
.stat:nth-child(4) { border-top-color: var(--ai); }
.stat > * { position: relative; }
.stat-value { color: var(--primary-dark); font-weight: 700; }
html[data-theme="dark"] .stat-value { color: var(--text); }
.stat.warn { border-top-color: var(--warn); }
.stat.warn .stat-value { color: var(--warn); }
.card h2::before { content: ""; display: inline-block; width: 8px; height: 8px; transform: rotate(45deg); background: var(--accent); margin-inline-end: 8px; vertical-align: 2px; }

/* ---------- النماذج ---------- */
.field > span { color: var(--muted); }
input, select, textarea { background: var(--surface); color: var(--text); border-color: var(--border); border-radius: var(--radius-sm); }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
input:disabled, select:disabled, textarea:disabled, .ss-disabled .ss-input { background: var(--surface-2); }
kbd { background: var(--surface-2); }
.logo-box, .attachments { background: var(--surface-2); }
.search-box, .ss-input { background: var(--surface); }

/* ---------- الجداول ---------- */
.grid th { background: var(--surface-2); color: var(--muted); border-bottom: 2px solid var(--border); }
.grid tbody tr:hover { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.grid .row-group td { background: var(--surface-2); }
.grid .row-subtotal td { border-top-color: var(--border-strong); }
.grid tr.row-sel td, .list-table .row-sel td { background: var(--primary-soft) !important; }
.list-table th { background: var(--surface-2); border-bottom: 2px solid var(--border); }
.list-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.list-table tbody tr:hover td { background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.list-table .row-unread td { background: var(--accent-soft) !important; }
.grid .row-warn td { background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.grid .row-bad td { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.row-neg td { background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.table-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); }
.unit-line.small { color: var(--muted); }
.row-multi .unit-line:first-child { border-bottom-color: var(--border); }

/* ---------- الشارات والتنبيهات ---------- */
.badge-ok, .ok-box, .toast, .pos-flash { background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, var(--surface)); }
.badge-warn { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); color: var(--warn); }
.badge-due { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.badge-draft, .badge-off, .tag-off { background: var(--surface-2); color: var(--muted); }
.badge-ok, .badge-warn, .badge-due, .badge-draft, .badge-off { border-radius: var(--pill); }
.toast { border-radius: var(--pill); padding: 8px 16px; }
.notice, .help-tip, .doc-alerts { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, var(--surface)); }
.help-tip, .doc-alerts { border-inline-start-color: var(--accent); }
.lic-trial { background: var(--primary-soft); color: var(--primary); border-bottom-color: color-mix(in srgb, var(--primary) 30%, var(--surface)); }
.lic-warn { background: var(--accent-soft); color: var(--accent-dark); border-bottom-color: var(--accent); }
.lic-bad { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); border-bottom-color: color-mix(in srgb, var(--danger) 40%, var(--surface)); }
.lic-ok .lic-badge { background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: var(--success); }
.lic-warn .lic-badge { background: var(--accent-soft); color: var(--accent-dark); }
.lic-bad .lic-badge { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.lic-bar { background: var(--surface-2); }
.lic-bar-fill { background: linear-gradient(90deg, var(--accent-dark), var(--accent-glow)); } .lic-warn .lic-bar-fill { background: var(--warn); } .lic-bad .lic-bar-fill { background: var(--danger); }
.bulk-bar { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 25%, var(--surface)); }
.lot-btn.has { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 25%, var(--surface)); }
.bell-item.unread { background: var(--accent-soft); border-inline-start-color: var(--accent); }
.doc-insights .di-profit { background: color-mix(in srgb, var(--success) 8%, var(--surface)); border-color: color-mix(in srgb, var(--success) 25%, var(--surface)); }
.warn-card { border-color: var(--accent); }
.alerts-card { border-inline-start-color: var(--warn); } .alerts-card.alerts-ok { border-inline-start-color: var(--success); }
.doc-view { background: var(--surface-2); }
.ss-opt:hover { background: var(--primary-soft); }
.module-card.on { background: var(--primary-soft); border-color: var(--primary); }
.wiz-tile:hover { border-color: var(--accent); }
.cal-day.sel { background: var(--primary); color: var(--primary-contrast); }
.wiz-step.active .wiz-num { background: var(--primary); color: var(--primary-contrast); }
.chart .bar-b { fill: var(--accent); } .legend .sw-b { background: var(--accent); }
.hijri-line, .va-label, .label-biz { color: var(--muted); }
.reconnect-box { background: var(--surface); color: var(--text); } .reconnect-box p { color: var(--muted); }
.rc-spin { border-color: var(--border); border-top-color: var(--primary); }
.drawer, .pay-modal, .bell-panel { background: var(--surface); color: var(--text); border-color: var(--border); }
.drawer-backdrop, .nav-backdrop { background: rgba(5,12,24,.55); }
.drawer-head h2::before { display: none; }
.topbar-link.pwa-install { color: var(--accent-dark); }

/* ---------- الصفحة الرئيسية (قائمة المنشآت) والدخول: شريط علوي منقوش ---------- */
.hero-band { background: linear-gradient(180deg, var(--side), var(--side-2)); color: #fff; border-radius: var(--radius); padding: 26px 28px; position: relative; overflow: hidden; margin-bottom: 18px; }
.hero-band::before { content: ""; position: absolute; inset: 0; background: var(--pattern-side); pointer-events: none; opacity: .5; }
.hero-band > * { position: relative; }
.hero-band h1 { color: #fff; margin: 0; }
.hero-band h1::after { background: var(--divider) repeat-x; }
.hero-band p { color: var(--side-text); margin: 6px 0 0; }

/* ---------- الوضع الليلي: ما بقي بألوان فاتحة ثابتة ---------- */
html[data-theme="dark"] .nav-toggle { background: var(--surface); }
html[data-theme="dark"] .ai-steps li.done { color: var(--success); } html[data-theme="dark"] .ai-steps li.done .ai-dot { background: var(--success); border-color: var(--success); color: #0d1420; }
html[data-theme="dark"] .ai-review .row-warn td { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); }
html[data-theme="dark"] .error { color: var(--danger); }
html[data-theme="dark"] .good { color: var(--success); }
html[data-theme="dark"] img.brand-logo, html[data-theme="dark"] .powered-by img { filter: brightness(1.05); }
/* أوراق الطباعة تبقى بيضاء بالوضعين */
.invoice-sheet, .receipt, .payslip, .label { color-scheme: light; background: #fff; color: #111; }
.invoice-sheet input, .invoice-sheet select { background: #fff; color: #111; }
html[data-theme="dark"] .print-page { background: var(--bg); }
@media print { html[data-theme="dark"] body, html[data-theme="dark"] .content { background: #fff; color: #111; } .page-head h1::after, .content > h1:first-child::after { display: none; } }