/* =====================================================================================
   مظهر عائلة الاطرقجي — Atrakchi Family Style  (v1 — Smart Sales 16.3.4 — 30 أكتوبر 2026)
   -------------------------------------------------------------------------------------
   نفس ملف Expenses 16.9 (دفتر حسابات حديث: خلفية عاجية، نص فحمي، خطوط فاصلة بدل البطاقات والظلال،
   أرقام كبيرة مفتوحة) مع لون Sales: خمري #875343 (الليلي #D7A08E)، وأجزاء خاصة ببرنامج المبيعات في آخر الملف.
   الخط IBM Plex Sans Arabic معرَّف داخل sales.html (fonts/plex-arabic-*.woff2).
   مظهران فقط: «ورقي» paper (الافتراضي) و«ليلي» night — localStorage['fx-theme'].
   ===================================================================================== */

/* ---------- الألوان ---------- */
html[data-theme]{
  --af-font:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Geneva,Arial,sans-serif;
  --af-radius:7px;
}
html[data-theme="paper"], html[data-theme="paper"] body, html[data-theme="paper"] body.dark-mode{
  /* أسماء المتغيرات القديمة تبقى كما هي حتى تتبع كل أجزاء البرنامج المظهر الجديد */
  --bg:#F2EEE5; --surface:#FBF9F4; --surface-2:#ECE7DC; --ink:#292B27; --muted:#66655E;
  --line:#DDD6C8; --line-strong:#C6BEAE; --ph:#9C978C;
  --green-900:#292B27; --green-800:#33352F; --green-700:#875343; --green-600:#9C6553;
  --gold:#875343; --gold-dark:#6E4235; --accent-soft:#EBDDD6;
  --tint:#F1E6E0; --tint-2:#E8D7CF; --soft:#C9A496; --ok:#3F6B4E; --ok-bg:#DFE8DC; --surface-3:#FFFFFF; --clay:#8A5A2E;
  --k-blue:#3E5A6B; --k-pocket:#8A5A2E; --danger:#A33A2C; --danger-dark:#8A2F23;
  --on-accent:#FFFFFF; --nav-active-bg:transparent;
  --shadow:none;
  /* عائلة الاطرقجي */
  --af-accent:#875343; --af-accent-ink:#6E4235; --af-ring:rgba(135,83,67,.22);
  --af-field:#FFFDF8; --af-copper:#C99A70; --af-due:#8A5A2E; --af-ok:#3F6B4E; --af-bad:#A33A2C;
  --af-owed-bg:#F3E2D9; --af-owed:#8A3A2A; --af-over-bg:#DFE8DC; --af-over:#3F6B4E;
  /* (16.9.1) أشرطة داكنة تفصل الأجزاء: الترويسة، التنقل، ورأس الجدول */
  --af-band:#292B27; --af-band-2:#34362F; --af-band-ink:#F2EEE5; --af-band-muted:#C2BCAF; --af-band-line:rgba(242,238,229,.22); --af-band-accent:#D7A08E;
  --af-head:#E0D8C8; --af-head-hover:#D6CDBB; --af-head-ink:#2F312C;
  color-scheme:light;
}
@media screen{
html[data-theme="night"], html[data-theme="night"] body, html[data-theme="night"] body.dark-mode{
  --bg:#1E1F1C; --surface:#252622; --surface-2:#2C2D29; --ink:#ECE7DC; --muted:#A6A196;
  --line:#3A3B36; --line-strong:#4A4B45; --ph:#7C786F;
  --green-900:#141513; --green-800:#1A1B18; --green-700:#D7A08E; --green-600:#E3B5A5;
  --gold:#D7A08E; --gold-dark:#E3B5A5; --accent-soft:#3A2F2B; --clay:#DDAE7E;
  --tint:#2F2724; --tint-2:#3A2F2B; --soft:#E3B5A5; --ok:#A9CDB2; --ok-bg:#2D3530;
  --danger:#E08A7B; --danger-dark:#C96F60; --on-accent:#1E1F1C;
  color-scheme:dark;
  --af-accent:#D7A08E; --af-accent-ink:#E3B5A5; --af-ring:rgba(215,160,142,.25);
  --af-field:#2C2D29; --af-copper:#C99A70; --af-due:#DDAE7E; --af-ok:#A9CDB2; --af-bad:#E08A7B;
  --af-owed-bg:#3A2824; --af-owed:#E6A497; --af-over-bg:#2D3530; --af-over:#A9CDB2;
  --af-band:#141513; --af-band-2:#1A1B18; --af-band-ink:#ECE7DC; --af-band-muted:#A6A196; --af-band-line:#3A3B36; --af-band-accent:#D7A08E;
  --af-head:#34362F; --af-head-hover:#3C3E37; --af-head-ink:#E2DDD1;
  --nav-active-bg:transparent; --shadow:none;
}
}

/* (16.3.5) «ليلي» = أسود وإطارات خضراء (اختيار المالك، مثل برامج الكاشير) — آخر الخيارات الثلاثة */
@media screen{
html[data-theme="black"], html[data-theme="black"] body, html[data-theme="black"] body.dark-mode{
  --bg:#09090b; --surface:#111113; --surface-2:#18181b; --ink:#fafafa; --muted:#a1a1aa; --line:#27272a; --line-strong:#3f3f46; --ph:#71717a;
  --green-900:#0b0b0d; --green-800:#0b7a48; --green-700:#0e9f5e; --green-600:#12b26b; --gold:#0e9f5e; --gold-dark:#12b26b; --accent-soft:#0a2418; --clay:#e8a33d;
  --tint:#0a2418; --tint-2:#103522; --soft:#1f5a3c; --ok:#12b26b; --ok-bg:#0a2418; --danger:#f87171; --danger-dark:#ef4444; --on-accent:#04170d;
  color-scheme:dark; --shadow:none; --nav-active-bg:transparent;
  --af-accent:#0e9f5e; --af-accent-ink:#22c27a; --af-ring:rgba(14,159,94,.3); --af-field:#18181b; --af-copper:#e8a33d; --af-due:#e8a33d; --af-ok:#12b26b; --af-bad:#f87171;
  --af-owed-bg:#2b1212; --af-owed:#FCA5A5; --af-over-bg:#0a2418; --af-over:#6EE7B7;
  --af-band:#0b0b0d; --af-band-2:#111113; --af-band-ink:#fafafa; --af-band-muted:#a1a1aa; --af-band-line:#27272a; --af-band-accent:#12b26b;
  --af-head:#18181b; --af-head-hover:#202024; --af-head-ink:#e4e4e7; --af-grid:rgba(250,250,250,.04);
}
}

/* ---------- الخط والأرقام ---------- */
html[data-theme] body{font-family:var(--af-font); line-height:1.55; background:var(--bg); color:var(--ink);}
html[data-theme] table, html[data-theme] .card p.value, html[data-theme] .total-preview, html[data-theme] .dd-v,
html[data-theme] input[type=number], html[data-theme] #fx-keypad{font-variant-numeric:tabular-nums;}

/* ---------- الترويسة: عاجية بخط فاصل بدل التدرّج الأخضر ---------- */
html[data-theme] #app-header{background:var(--af-band); color:var(--af-band-ink); border-bottom:1px solid var(--af-band-line);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 14px; padding:10px 16px; text-align:start;}
html[data-theme] #app-header .brandline{justify-content:flex-start; gap:10px; flex-wrap:nowrap;}
html[data-theme] #app-header img.brandmark{height:32px; width:32px;}
html[data-theme] #app-header h1{font-size:1.12rem; font-weight:600; letter-spacing:0; color:var(--af-band-ink); line-height:1.3;}
html[data-theme] #app-header .sub{color:var(--af-band-muted);}
html[data-theme] #header-tools{padding:0; justify-content:flex-end; gap:6px;}
html[data-theme] #header-tools button, html[data-theme] #header-tools select{background:transparent; border:1px solid var(--af-band-line);
  color:var(--af-band-ink); border-radius:6px; font-weight:500; font-size:.78rem; padding:6px 10px; min-height:34px;}
html[data-theme] #header-tools button:hover{background:rgba(242,238,229,.10); border-color:var(--af-band-muted);}
html[data-theme] #header-tools select{background:var(--af-band-2); color:var(--af-band-ink);}
@media (max-width:600px){
  html[data-theme] #app-header{padding:8px 12px; justify-content:center;}
  html[data-theme] #header-tools{justify-content:center;}
}

/* ---------- شريط التنقل: شريط داكن يفصل الترويسة عن الصفحة، كلمات بخط فاتح تحت الصفحة المفتوحة ---------- */
html[data-theme] nav{background:var(--af-band-2); border-bottom:1px solid var(--af-band-line); padding:0 10px; gap:0 2px;
  justify-content:center; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
html[data-theme] nav::-webkit-scrollbar{display:none;}
html[data-theme] nav button{background:transparent; border:0; border-bottom:3px solid transparent; border-radius:0; color:var(--af-band-muted);
  font-weight:500; font-size:.9rem; padding:12px 12px 9px; white-space:nowrap; flex:0 0 auto;}
html[data-theme] nav button:hover{background:transparent; color:var(--af-band-ink); border-color:transparent; border-bottom-color:var(--af-band-line);}
html[data-theme] nav button.active, html[data-theme] nav button.active:hover{background:transparent; color:var(--af-band-ink); font-weight:600; border-color:transparent; border-bottom-color:var(--af-band-accent);}
@media (max-width:700px){ html[data-theme] nav{justify-content:flex-start;} html[data-theme] nav button{padding:12px 10px 9px; font-size:.86rem;} }

/* ---------- عناوين الصفحات ---------- */
html[data-theme] h2.page-title{font-size:1.35rem; font-weight:600; color:var(--ink); letter-spacing:0;}
html[data-theme] h2.page-title::before{display:none;}
html[data-theme] main{padding-top:20px;}

/* ---------- الأرقام الرئيسية: أعمدة مفتوحة بخطوط فاصلة بدل البطاقات المظلّلة ---------- */
html[data-theme] .card-grid{display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:20px;}
html[data-theme] .card, html[data-theme] body:not(.lang-ar) .card{background:transparent; box-shadow:none; border:0; border-radius:0; padding:14px 16px 14px;}
html[data-theme] .card:not(:first-child){border-inline-start:1px solid var(--line);}
html[data-theme] .card-grid .card:first-child{padding-inline-start:0;}
html[data-theme] .card p.title{font-size:.8rem; font-weight:500; color:var(--muted);}
html[data-theme] .card p.value, html[data-theme] .card.blue p.value, html[data-theme] .card.gold p.value, html[data-theme] .card.clay p.value{
  font-size:1.65rem; font-weight:500; color:var(--ink); letter-spacing:-.3px; margin-top:4px; line-height:1.2; overflow-wrap:anywhere;}
html[data-theme] #tab-dash .card-grid .card:first-child p.value{font-size:2.1rem;}
html[data-theme] #tab-duesdash .card.blue p.value{color:var(--af-ok);}
html[data-theme] #tab-duesdash .card.clay p.value{color:var(--af-due);}
@media (max-width:520px){
  html[data-theme] .card{padding:10px 8px;}
  html[data-theme] .card p.title{font-size:.72rem;}
  html[data-theme] .card p.value, html[data-theme] .card.blue p.value, html[data-theme] .card.gold p.value, html[data-theme] .card.clay p.value{font-size:1.12rem;}
  html[data-theme] #tab-dash .card-grid .card:first-child p.value{font-size:1.4rem;}
}

/* ---------- الأقسام: بلا صندوق ولا ظل — خط فاصل فوقها فقط ---------- */
html[data-theme] .panel, html[data-theme] main .panel{background:transparent; box-shadow:none; border-radius:0; border-top:1px solid var(--line);
  padding:16px 0 8px; margin-bottom:14px;}
html[data-theme] .card-grid + .panel{border-top:0; padding-top:4px;}
html[data-theme] .panel h3{font-size:.98rem; font-weight:600; color:var(--ink);}
html[data-theme] .help-text{color:var(--muted);}
html[data-theme] .result-badge{background:transparent; border:1px solid var(--line-strong); border-radius:6px; color:var(--ink); font-weight:500;}
html[data-theme] .cash-scope{background:transparent; border-inline-start:3px solid var(--af-copper); border-radius:0; color:var(--ink);}

/* ---------- الجداول: مباشرة على الصفحة، عناوين رمادية وخط فحمي تحتها ---------- */
html[data-theme] thead th{background:var(--af-head); color:var(--af-head-ink); font-weight:600; font-size:.8rem; border-bottom:1.5px solid var(--ink); padding:10px 10px;}
html[data-theme] thead th.sortable:hover{background:var(--af-head-hover);}
html[data-theme] tbody td{border-bottom:1px solid var(--line); font-weight:400;}
html[data-theme] td.num{font-weight:500; color:var(--ink);}
html[data-theme] td.total-cell{font-weight:600; color:var(--ink);}
html[data-theme] tbody tr:hover{background:var(--surface-2);}
html[data-theme] tfoot td{background:transparent; border-top:1.5px solid var(--ink); font-weight:600; color:var(--ink);}
html[data-theme] td.due-owed, html[data-theme] tfoot td.due-owed{background:var(--af-owed-bg); color:var(--af-owed);}
html[data-theme] td.due-over, html[data-theme] tfoot td.due-over{background:var(--af-over-bg); color:var(--af-over);}
html[data-theme] .net-tag.net-income{background:var(--af-over-bg); color:var(--af-over);}
html[data-theme] .net-tag.net-expense{background:var(--af-owed-bg); color:var(--af-owed);}
html[data-theme] #tab-dues{--dg-tint:rgba(138,90,46,.05); --pg-tint:rgba(74,107,84,.06); --dg-head:rgba(138,90,46,.08); --pg-head:rgba(74,107,84,.08);}
html[data-theme="night"] #tab-dues{--dg-tint:rgba(221,174,126,.05); --pg-tint:rgba(143,179,154,.06); --dg-head:rgba(221,174,126,.08); --pg-head:rgba(143,179,154,.08);}

/* ---------- الأزرار ---------- */
html[data-theme] .btn{background:var(--af-accent); color:var(--on-accent); border:1px solid transparent; border-radius:var(--af-radius); font-weight:600;}
html[data-theme] .btn:hover{background:var(--af-accent-ink);}
html[data-theme] .btn-gold, html[data-theme] .btn-gold:hover{background:var(--af-accent); color:var(--on-accent);}
html[data-theme] .btn-gold:hover{background:var(--af-accent-ink);}
html[data-theme] .btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line-strong);}
html[data-theme] .btn-ghost:hover{background:var(--surface-2); border-color:var(--ink);}
html[data-theme] .btn-danger{background:transparent; color:var(--af-bad); border:1px solid var(--af-bad);}
html[data-theme] .btn-danger:hover{background:var(--af-bad); color:#fff;}
html[data-theme] .btn:focus-visible, html[data-theme] nav button:focus-visible, html[data-theme] .dd-tab:focus-visible{outline:2px solid var(--af-accent); outline-offset:2px;}
html[data-theme] .fab-add, html[data-theme] .fab-add:hover{background:var(--af-accent); color:var(--on-accent); box-shadow:0 4px 14px rgba(0,0,0,.18); font-weight:500;}
html[data-theme] .entry-toggle{gap:0; border:1px solid var(--line-strong); border-radius:var(--af-radius); overflow:hidden;}
html[data-theme] .entry-toggle-btn{border:0; border-radius:0; background:transparent; color:var(--muted); font-weight:500;}
html[data-theme] .entry-toggle-btn + .entry-toggle-btn{border-inline-start:1px solid var(--line-strong);}
html[data-theme] .entry-toggle-btn.active{background:var(--af-accent); color:var(--on-accent); font-weight:600;}

/* ---------- الخانات ---------- */
html[data-theme] .select, html[data-theme] select, html[data-theme] input[type=text], html[data-theme] input[type=date], html[data-theme] input[type=number],
html[data-theme] input[type=password], html[data-theme] input[type=email], html[data-theme] input[type=search], html[data-theme] input[type=tel], html[data-theme] textarea{
  background:var(--af-field); border:1px solid var(--line-strong); border-radius:6px; color:var(--ink);}
html[data-theme] select{font-weight:600; color:var(--ink);}
html[data-theme] .select:focus, html[data-theme] select:focus, html[data-theme] input:focus, html[data-theme] textarea:focus{outline:none; border-color:var(--af-accent); box-shadow:0 0 0 3px var(--af-ring);}
html[data-theme] .crop-select-lg{border:1px solid var(--line-strong); border-radius:var(--af-radius);}
html[data-theme] .crop-select-label, html[data-theme] .form-group label, html[data-theme] .filter-bar label{color:var(--muted); font-weight:500;}
html[data-theme] input[type=checkbox], html[data-theme] input[type=radio]{accent-color:var(--af-accent);}

/* ---------- النوافذ والقائمة الجانبية ---------- */
html[data-theme] .modal-overlay{background:rgba(32,33,30,.45);}
html[data-theme] .modal-box{background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:0 18px 48px rgba(0,0,0,.18);}
html[data-theme] .modal-head{background:var(--surface); color:var(--ink); border-bottom:1px solid var(--line); border-radius:10px 10px 0 0;}
html[data-theme] .modal-head h3{font-weight:600; font-size:1rem;}
html[data-theme] .modal-head button{color:var(--muted);}
html[data-theme] .modal-foot{border-top-color:var(--line);}
html[data-theme] .total-preview{background:transparent; border-top:1px solid var(--line); border-radius:0; color:var(--ink); font-weight:600;}
html[data-theme] #side-drawer-overlay{background:rgba(32,33,30,.4);}
html[data-theme] #side-drawer{background:var(--surface); box-shadow:none; border-inline-end:1px solid var(--line);}
html[data-theme] #side-drawer .sd-head{background:var(--af-band); color:var(--af-band-ink); border-bottom:1px solid var(--af-band-line);}
html[data-theme] #side-drawer .sd-head button{color:var(--af-band-ink);}
html[data-theme] #side-drawer a, html[data-theme] #side-drawer button.sd-item{color:var(--ink); font-weight:500;}
html[data-theme] #side-drawer a:hover, html[data-theme] #side-drawer button.sd-item:hover{background:var(--surface-2);}
html[data-theme] #side-drawer button.sd-item.active{background:var(--surface-2); color:var(--ink); border-inline-start:3px solid var(--af-accent);}
html[data-theme] .backup-row{border-color:var(--line); border-radius:6px;}
html[data-theme] .backup-row .meta{color:var(--ink);}
html[data-theme] .ps-card{background:var(--surface); color:var(--ink); border:1px solid var(--line);}
html[data-theme] #fx-guide-ov .fx-guide-box{background:var(--surface);}
html[data-theme] #fx-guide-ov .fx-guide-bar{background:var(--af-band); color:var(--af-band-ink); border-bottom:1px solid var(--af-band-line);}
html[data-theme] #fx-guide-ov .fx-guide-bar a, html[data-theme] #fx-guide-ov .fx-guide-bar button{color:var(--af-band-ink); background:transparent; border-color:var(--af-band-line);}

/* ---------- التذييل ---------- */
html[data-theme] footer{background:var(--bg); color:var(--muted); border-top:1px solid var(--line);}
html[data-theme] footer strong{color:var(--ink);}

/* ---------- رسائل، الحاسبة، اختيار المظهر ---------- */
html[data-theme] #fx-toast .fx-toast-box{background:#292B27; color:#F2EEE5; border:1px solid #3A3B36;}
html[data-theme] #fx-toast button{background:var(--af-accent); color:var(--on-accent);}
html[data-theme="paper"] #fx-toast button{background:#D7A08E; color:#1A1C18;}
html[data-theme] #fx-keypad{background:var(--surface-2); border-top:1px solid var(--line-strong);}
html[data-theme] #fx-keypad .kp-grid button{background:var(--surface); border:1px solid var(--line-strong); color:var(--ink);}
html[data-theme] #fx-keypad .kp-grid button.op{background:var(--bg);}
html[data-theme] #fx-keypad .kp-grid button.go{background:var(--af-accent); border-color:var(--af-accent); color:var(--on-accent);}
html[data-theme] .fx-eq{color:var(--af-accent-ink);}
html[data-theme] .fx-ver{color:var(--af-due);}
html[data-theme] .due-dir-chip.to{color:var(--af-ok); background:var(--af-over-bg);}
html[data-theme] .due-dir-chip.from{color:var(--af-due); background:transparent;}
html[data-theme] .usetype-btn{background:var(--surface); border:1px solid var(--line-strong); border-radius:8px; color:var(--ink); font-weight:600;}
html[data-theme] .usetype-btn:hover, html[data-theme] .usetype-btn.sel{border-color:var(--af-accent); background:var(--surface-2); box-shadow:0 0 0 1px var(--af-accent) inset;}
html[data-theme] .fx-theme-opt{background:var(--surface); border:1px solid var(--line-strong); border-radius:8px; color:var(--ink); font-weight:500;}
html[data-theme] .fx-theme-opt.on{border-color:var(--af-accent); box-shadow:0 0 0 1px var(--af-accent) inset; background:var(--surface-2);}
html[data-theme] .fx-theme-opt .ck{color:var(--af-accent);}

html[data-theme] .wz-progress{background:var(--line);}
html[data-theme] #wz-bar{background:var(--af-accent);}

/* ---------- شاشة البداية والقفل: غلاف فحمي دافئ مثل غلاف الدفتر ---------- */
html[data-theme="paper"] #splash-screen, html[data-theme="paper"] #quick-lock-screen{background:radial-gradient(circle at 50% 38%, #33352F, #232521 75%);}
html[data-theme="paper"] #splash-screen .ex-sl-tile{background:#875343; box-shadow:0 18px 50px rgba(0,0,0,.25);}
html[data-theme="paper"] #splash-screen .ex-sl p{color:#EBDDD6;}
html[data-theme="paper"] .ql-dot{border-color:#E3C5B9;} html[data-theme="paper"] .ql-dot.filled{background:#E3C5B9;}
html[data-theme="paper"] .ql-link{color:#E3C5B9;}
html[data-theme] .ql-title{font-weight:600;}

/* ---------- الطباعة وملفات PDF: فحمي ورمادي دافئ بدل الأخضر ---------- */
#print-report .pr-head{border-bottom-color:#292B27;}
#print-report .pr-issuer, #print-report .pr-app, #print-report h1.pr-title, #print-report .pr-closing, #print-report .pr-text h3, #print-report .pr-box b{color:#292B27;}
#print-report .pr-note{border-inline-start-color:#C99A70; background:#F7F1E8;}
#print-report.pr-rtl .pr-note{border-right-color:#C99A70;} #print-report.pr-ltr .pr-note{border-left-color:#C99A70;}
#print-report .pr-box{border-color:#CFC8BA; background:#F7F4EE;}
#print-report table.pr-table th{background:#EFEAE0; color:#292B27; border-color:#B9B1A2;}
#print-report table.pr-table td{border-color:#CFC8BA;}
#print-report table.pr-table tbody tr:nth-child(even) td{background:#FAF8F3;}
#print-report table.pr-table tfoot td{background:#EFEAE0; border-top-color:#292B27;}
#print-report table.pr-table td.due-owed{background:#F3E2D9; color:#8A3A2A;}
#print-report table.pr-table td.due-over{background:#DFE8DC; color:#3F6B4E;}
#print-report{font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;}

/* ---------- (16.9.2) التعليمات والخصوصية والشروط داخل البرنامج: فقرات مفصولة بخطوط وعناوين واضحة ---------- */
html[data-theme] #help-content, html[data-theme] #privacy-content, html[data-theme] #terms-content{border-top:0; padding-top:0; line-height:1.85;}
html[data-theme] #help-content h3, html[data-theme] #privacy-content h3, html[data-theme] #terms-content h3{font-size:1.05rem; font-weight:600; color:var(--ink);
  margin:22px 0 6px; padding-top:16px; border-top:1px solid var(--line); display:flex; align-items:center; gap:8px;}
html[data-theme] #help-content p, html[data-theme] #privacy-content p, html[data-theme] #terms-content p{margin:6px 0; max-width:68ch;}
html[data-theme] #help-content ul, html[data-theme] #privacy-content ul, html[data-theme] #terms-content ul{padding-inline-start:22px; margin:6px 0;}
html[data-theme] .af-remember{border:1px solid var(--line-strong); border-inline-start:4px solid var(--af-accent); border-radius:8px; padding:4px 18px 10px; margin:4px 0 8px;
  background-color:var(--surface);
  background-image:linear-gradient(var(--af-grid) 1px, transparent 1px), linear-gradient(90deg, var(--af-grid) 1px, transparent 1px); background-size:22px 22px;}
html[data-theme] #help-content .af-remember h3{border-top:0; padding-top:8px; margin:6px 0 4px;}
html[data-theme] .af-remember ol{margin:4px 0; padding-inline-start:24px;}
html[data-theme] .af-remember li{margin:6px 0; font-weight:500;}
html[data-theme] .af-remember li::marker{color:var(--af-accent); font-weight:600;}
html[data-theme="paper"]{--af-grid:rgba(41,43,39,.055);}
html[data-theme="night"]{--af-grid:rgba(236,231,220,.05);}
html[data-theme] #fx-guide-card{border-top:0; padding-top:0;}

/* =====================================================================================
   أجزاء خاصة ببرنامج المبيعات (Smart Sales 16.3.4)
   ===================================================================================== */
/* الصفحة الرئيسية: أقسام بخط علوي بدل الصناديق المظللة، ومربعات مسطّحة */
html[data-theme] .p3-home-top{background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; padding:4px 0 14px;}
html[data-theme] .p54-card, html[data-theme] .p3-grp{background:transparent; border:0; border-top:1.5px solid var(--ink); border-radius:0; box-shadow:none; padding:12px 2px 14px;}
html[data-theme] .p3-grp h3, html[data-theme] .p54-card h3{border-inline-start:0; padding-inline-start:0; display:flex; align-items:center; gap:8px; font-weight:600; font-size:.95rem; color:var(--ink);}
html[data-theme] .p3-grp h3::before{content:""; width:10px; height:10px; background:var(--af-accent); flex:0 0 auto;}
html[data-theme] .p3-tile{background:var(--surface); border:1px solid var(--line); border-radius:6px; box-shadow:none; color:var(--ink); font-weight:500;}
html[data-theme] .p3-tile:hover{border-color:var(--ink); background:var(--surface); transform:none;}
html[data-theme] .p3-tile.p3-cta, html[data-theme] .p3-tile.p3-cta:hover{background:var(--af-accent); border-color:var(--af-accent); color:var(--on-accent);}
html[data-theme] .p3-tile.p3-cta *{color:inherit;}
html[data-theme] .p3-lang, html[data-theme] .p3-tool, html[data-theme] .p54-pill{border-radius:6px; background:transparent; border:1px solid var(--line-strong); color:var(--ink); box-shadow:none;}
html[data-theme] .p3-lang.on{background:var(--af-accent); border-color:var(--af-accent); color:var(--on-accent);}
html[data-theme] .p3-lang:hover, html[data-theme] .p3-tool:hover{border-color:var(--ink);}
html[data-theme] .p54-steps button, html[data-theme] .p54-att button{border-radius:0; background:transparent; border:0; border-bottom:1px solid var(--line); box-shadow:none;}
html[data-theme] .p54-steps button:hover, html[data-theme] .p54-att button:hover{background:var(--surface-2);}
html[data-theme] .p54-bar{border-radius:0; height:4px; background:var(--line);}
html[data-theme] .p54-bar > *{border-radius:0; background:var(--af-accent);}
/* الإعدادات */
html[data-theme] .settings-list{background:transparent; border:0; border-top:1.5px solid var(--ink); border-radius:0; box-shadow:none;}
html[data-theme] .settings-section{box-shadow:none; border-radius:0;}
html[data-theme] .toggle-slider{background:var(--line-strong);}
html[data-theme] input:checked + .toggle-slider{background:var(--af-accent);}
html[data-theme] .toggle-slider:before{box-shadow:none;}
html[data-theme] .lm-photo-preview{border-radius:6px; box-shadow:none;}
html[data-theme] .fx-theme-opt{border-radius:6px;}
/* البيع والشراء: مربعات المواد وشاراتها */
html[data-theme] .grid-tile, html[data-theme] .material-tile, html[data-theme] .qi-tile, html[data-theme] .lm-tile{background:var(--surface); border:1px solid var(--line); border-radius:6px; box-shadow:none;}
html[data-theme] .grid-tile:hover, html[data-theme] .material-tile:hover, html[data-theme] .qi-tile:hover{border-color:var(--ink);}
html[data-theme] .grid-tile.selected, html[data-theme] .material-tile.selected, html[data-theme] .material-tile.mip-selected{background:var(--tint); color:var(--ink); box-shadow:0 0 0 1px var(--af-accent) inset; border-color:var(--af-accent);}
html[data-theme] .stock-badge{background:var(--ink); color:var(--bg); border-radius:3px; font-weight:600;}
html[data-theme] .stock-badge-low{background:var(--af-due); color:#fff;}
html[data-theme] .stock-badge-out{background:var(--af-bad); color:#fff;}
html[data-theme] .price-badge, html[data-theme] .sell-price-badge{background:var(--af-accent); color:var(--on-accent); border-radius:3px; font-weight:600;}
html[data-theme] .mip-qty-badge{border-radius:3px;}
/* أزرار الدفع وإجمالي الفاتورة */
html[data-theme] .fx-total, html[data-theme] .invoice-total, html[data-theme] #invoice-total{color:var(--ink);}
html[data-theme] .result-badge, html[data-theme] .sx-badge, html[data-theme] .p3-badge{border-radius:4px;}
/* شريط الإنترنت والتخزين في الترويسة */
html[data-theme] #header-tools .p54-ok{border-color:var(--af-band-line);}
/* أيقونة اللون في الترويسة: مربع صغير بدل الدائرة */
html[data-theme] .s631-sw{border-radius:2px !important;}
/* النوافذ والقوائم العامة: بلا ظلال ثقيلة */
html[data-theme] .card{box-shadow:none;}
html[data-theme] .panel{box-shadow:none;}
/* الحقول: عنوان الخانة العائم بلون البرنامج عند الكتابة */
html[data-theme] .form-group:focus-within > label{color:var(--af-accent-ink);}
/* شاشة البداية والنوم والقفل في «ليلي»: فحمي دافئ */
html[data-theme="night"] #splash-screen, html[data-theme="night"] #p54-sleep, html[data-theme="night"] #quick-lock-screen, html[data-theme="night"] #pin-setup-screen{background:radial-gradient(circle at 50% 40%, #2A2B27, #141513 75%);}
html[data-theme="night"] #splash-screen .p54-sl-tile, html[data-theme="night"] #p54-sleep .p54-sl-tile{background:#875343; color:#fff;}
html[data-theme] .ql-key{border-radius:8px;}
html[data-theme="night"] .ql-key{background:#252622; border:1px solid #4A4B45; color:#ECE7DC;}
html[data-theme="night"] .ql-key:hover{border-color:#D7A08E;}
html[data-theme="night"] .ql-dot{border-color:#D7A08E;} html[data-theme="night"] .ql-dot.filled{background:#D7A08E;}
html[data-theme="night"] .ql-link{color:#E3B5A5;}
/* «ليلي»: ألوان الوضع الداكن القديمة (أخضر زمردي وأزرق فاتح مكتوبة في البرنامج) → ألوان العائلة */
html[data-theme="night"] body.dark-mode .invoice-line-amount, html[data-theme="night"] body.dark-mode .autocomplete-item.ac-new,
html[data-theme="night"] body.dark-mode .lm-tile.lm-add-tile, html[data-theme="night"] body.dark-mode .filter-toggle-btn:hover,
html[data-theme="night"] body.dark-mode .form-group.fg-active>label:not(.grid-picker-label):not(:has(input)),
html[data-theme="night"] body.dark-mode .form-group.search-date-field.fg-active>label, html[data-theme="night"] body.dark-mode #mip-qty-group>label:not(.grid-picker-label),
html[data-theme="night"] body.dark-mode #side-drawer button.sd-item.active, html[data-theme="night"] body.dark-mode .p3n-pair>#p3n-btn{color:var(--af-accent-ink)!important;}
html[data-theme="night"] body.dark-mode .fx-ver{color:var(--af-due)!important;}
html[data-theme="night"] body.dark-mode .p3-su-status.ok, html[data-theme="night"] body.dark-mode .p3s-ok,
html[data-theme="night"] body.dark-mode .card.gold p.value{color:var(--af-ok)!important;}
html[data-theme="night"] body.dark-mode .card p.value, html[data-theme="night"] body.dark-mode td.total-cell,
html[data-theme="night"] body.dark-mode .sx-all-done, html[data-theme="night"] body.dark-mode .card.blue p.value{color:var(--ink);}
html[data-theme="night"] body.dark-mode .grid-tile.selected, html[data-theme="night"] body.dark-mode .material-tile.selected,
html[data-theme="night"] body.dark-mode .material-tile.mip-selected, html[data-theme="night"] body.dark-mode .mip-summary-box,
html[data-theme="night"] body.dark-mode .st-addsub{background:var(--tint-2)!important; color:var(--ink)!important;}
html[data-theme="night"] body.dark-mode .material-tile.selected .tile-label-overlay, html[data-theme="night"] body.dark-mode .material-tile.mip-selected .tile-label-overlay,
html[data-theme="night"] body.dark-mode .grid-tile.selected .tile-label-overlay{color:var(--ink)!important;}
html[data-theme="night"] body.dark-mode [style^="color:var(--green-800)"], html[data-theme="night"] body.dark-mode [style^="color:var(--green-900)"],
html[data-theme="night"] body.dark-mode [style^="color:var(--green-700)"]{color:var(--af-accent-ink)!important;}
html[data-theme="night"] body.dark-mode [style*=" color:var(--gold-dark)"], html[data-theme="night"] body.dark-mode [style^="color:var(--gold-dark)"]{color:var(--af-accent-ink)!important;}
html[data-theme="night"] body.dark-mode .ai-rep-date, html[data-theme="night"] body.dark-mode .ai-q, html[data-theme="night"] body.dark-mode .fx-qty-next{color:var(--af-accent-ink);}
html[data-theme="night"] body.dark-mode .ai-card{border-color:var(--line-strong);}
html[data-theme="paper"] .ai-card{border:1px solid var(--line-strong); background:var(--surface);}
/* الورقي: الزمردي والأزرق القديمان → ألوان العائلة */
html[data-theme] .card.blue{border-color:var(--line);}
html[data-theme] .card.blue p.value{color:var(--ink);}
html[data-theme] #first-lang-bar .flb-x{background:var(--af-accent);}
html[data-theme] .sx-sum-big .green b, html[data-theme] .sx-sum-cmp.up{color:var(--af-ok);}
html[data-theme] .ai-busy{color:var(--af-accent-ink);}
/* التحليلات: نفس الألوان الهادئة للرسوم، وبطاقات مفتوحة */
html[data-theme="paper"] #tab-analytics{--an-sales:#3E5A6B; --an-cost:#C99A70; --an-profit:#3F6B4E; --an-good:#3F6B4E; --an-bad:#A33A2C; --an-neutral:#66655E; --an-grid:#E4DDCF; --an-axis:#8A857A; --an-soft:#ECE7DC; --an-track:#E4DDCF;}
html[data-theme="night"] body.dark-mode #tab-analytics, html[data-theme="night"] #tab-analytics{--an-sales:#8FAFC2; --an-cost:#DDAE7E; --an-profit:#A9CDB2; --an-good:#A9CDB2; --an-bad:#E08A7B; --an-neutral:#A6A196; --an-grid:#3A3B36; --an-axis:#7C786F; --an-soft:#2C2D29; --an-track:#34362F;}
html[data-theme] #tab-analytics .an-filters, html[data-theme] #tab-analytics .an-card, html[data-theme] #tab-analytics .an-insights{background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; padding-inline:0;}
html[data-theme] #tab-analytics .an-kpi, html[data-theme] #tab-analytics .an-kpi.hero{background:transparent; border:0; border-top:1.5px solid var(--ink); border-radius:0; box-shadow:none;}
html[data-theme] .an-kpi .an-dot{border-radius:0;}
html[data-theme] #tab-analytics .an-chip{border-radius:6px; background:transparent; border-color:var(--line-strong);}
html[data-theme] #tab-analytics .an-chip.on, html[data-theme] body.dark-mode #tab-analytics .an-chip.on{background:var(--af-accent); border-color:var(--af-accent); color:var(--on-accent);}
html[data-theme] .an-tip{border-radius:6px;}
html[data-theme] .ai-card{border-radius:0; border-width:0; border-top:1px solid var(--line-strong); background:transparent;}
html[data-theme] #tab-analytics .an-kpis{gap:0 18px;}
html[data-theme] #tab-analytics .an-kpi .k-v{font-weight:500;}
/* (16.3.5) «ليلي» الأسود: شاشة البداية والنوم والقفل سوداء */
html[data-theme="black"] #splash-screen, html[data-theme="black"] #p54-sleep, html[data-theme="black"] #quick-lock-screen, html[data-theme="black"] #pin-setup-screen{background:#09090b;}
html[data-theme="black"] #splash-screen .p54-sl-tile, html[data-theme="black"] #p54-sleep .p54-sl-tile{background:#0b7a48; color:#fff;}
html[data-theme="black"] #splash-screen p, html[data-theme="black"] #p54-sleep p{color:#a1a1aa;}