/* ===== تحديث 39: تفاصيل احترافية ===== */

/* 1) القائمة الجانبية على الجوال: مربعات بثلاثة أعمدة وخط مناسب، دون كسر الكلمات */
@media (max-width:980px){
  html body #appView .side .side-actions,html body #appView .side .side-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  html body #appView .side .side-btn,html body #appView .side .nav-item{font-size:12.5px!important;line-height:1.35!important;font-weight:700!important;word-break:keep-all!important;overflow-wrap:normal!important;hyphens:none!important;padding-inline:2px!important;}
  html body #appView .side .side-btn .lbl-short{font-size:12.5px!important;}
  /* العنصر الخامس في قسم الأقسام يأخذ الصف كاملًا بتخطيط أفقي، فلا يبقى وحيدًا */
  html body #appView .side .side-nav .nav-item:last-child:nth-child(5){grid-column:1/-1!important;flex-direction:row!important;justify-content:center!important;gap:10px!important;min-height:50px!important;font-size:13.5px!important;}
}

/* 2) أيقونة الفاتورة: صورة فاتورة واضحة مع نص قصير بدل مشبك الورق */
html body .clip{width:16px!important;height:16px!important;display:inline-block;background:currentColor!important;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%273%27/%3E%3Ccircle%20cx%3D%278.5%27%20cy%3D%278.5%27%20r%3D%271.6%27/%3E%3Cpath%20d%3D%27M21%2015l-5-5L5%2021%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%273%27/%3E%3Ccircle%20cx%3D%278.5%27%20cy%3D%278.5%27%20r%3D%271.6%27/%3E%3Cpath%20d%3D%27M21%2015l-5-5L5%2021%27/%3E%3C/svg%3E") center/contain no-repeat;flex:0 0 auto;}
html body #expensesWrap .exp-att-btn{position:relative!important;width:36px!important;height:34px!important;min-width:36px!important;padding:0!important;margin:0!important;border-radius:10px!important;}
html body #expensesWrap .exp-att-btn:not(.has){border-style:dashed!important;}
html body #expensesWrap .exp-att-btn .att-count{position:absolute;top:-7px;inset-inline-end:-7px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#155049;color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--surface,#fff);}
html body #expensesWrap .exp-att-btn b{font-size:inherit;}
html body #expensesWrap td.exp-actions-cell{white-space:nowrap;}
html body #expensesWrap td.exp-actions-cell .delete-expense{margin:0!important;}

/* 3) زر الحذف: سلة واضحة بدل علامة × */
html body #expensesWrap .delete-expense{font-size:0!important;line-height:0!important;color:#b42318!important;background:#fbeae6!important;border:1px solid #efc3b9!important;}
html body #expensesWrap .delete-expense::before{content:"";display:inline-block;width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%206h18%27/%3E%3Cpath%20d%3D%27M8%206V4h8v2%27/%3E%3Cpath%20d%3D%27M6%206l1%2014h10l1-14%27/%3E%3Cpath%20d%3D%27M10%2011v6M14%2011v6%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%206h18%27/%3E%3Cpath%20d%3D%27M8%206V4h8v2%27/%3E%3Cpath%20d%3D%27M6%206l1%2014h10l1-14%27/%3E%3Cpath%20d%3D%27M10%2011v6M14%2011v6%27/%3E%3C/svg%3E") center/contain no-repeat;}
html body #expensesWrap .delete-expense:hover{background:#f6d3ca!important;}
html[data-theme="dark"] body #expensesWrap .delete-expense{background:#3a1d18!important;border-color:#6b2d24!important;color:#ffb4a6!important;}

/* 4) مصروفات العمارة على الجوال: كل مصروف بطاقة واضحة (التاريخ والمبلغ والإجراءات، ثم التفاصيل) دون تمرير أفقي */
@media (max-width:720px){
  html body #expensesWrap .expense-table{min-width:0!important;width:100%!important;display:block!important;border:0!important;}
  html body #expensesWrap .expense-table thead{display:none!important;}
  html body #expensesWrap .expense-table tbody{display:block!important;}
  html body #expensesWrap .expense-table tr.expense-month-head{display:block!important;}
  html body #expensesWrap .expense-table tr.expense-month-head td{display:block!important;width:auto!important;}
  html body #expensesWrap .expense-table tr.expense-row{display:grid!important;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) auto;align-items:center;margin:6px 0 2px!important;border-radius:14px!important;overflow:hidden;}
  html body #expensesWrap .expense-table tr.expense-row td{display:block!important;width:auto!important;min-width:0!important;padding:8px 10px!important;border:0!important;}
  html body #expensesWrap .expense-table tr.expense-row td:nth-child(3){grid-column:1/-1;grid-row:2;border-top:1px dashed var(--hair,#d9d0bd)!important;}
  html body #expensesWrap .expense-table tr.expense-row td:nth-child(4){grid-column:3;grid-row:1;padding-inline:6px!important;}
  html body #expensesWrap .expense-table tr.expense-row td:nth-child(1)::before,html body #expensesWrap .expense-table tr.expense-row td:nth-child(2)::before,html body #expensesWrap .expense-table tr.expense-row td:nth-child(3)::before{content:attr(data-lbl);display:block;font-size:11.5px;font-weight:700;color:var(--muted,#5d6763);margin-bottom:3px;}
  html body #expensesWrap .expense-table tr.expense-row.expense-tone-blue{background:#eff6ff!important;}
  html body #expensesWrap .expense-table tr.expense-row.expense-tone-green{background:#f0fdf4!important;}
  html body #expensesWrap .expense-table tr.expense-row.expense-tone-neutral{background:#f8fafc!important;}
  html[data-theme="dark"] body #expensesWrap .expense-table tr.expense-row.expense-tone-blue{background:#16283a!important;}
  html[data-theme="dark"] body #expensesWrap .expense-table tr.expense-row.expense-tone-green{background:#13302b!important;}
  html body #expensesWrap .expense-table tr.expense-row td{background:transparent!important;}
  html body #expensesWrap .expense-table tr.expense-row td input{background:#fff!important;}
  html body #expensesWrap .expense-table tr.expense-row td input{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box;font-size:16px!important;padding:7px 9px!important;}
  html body #expensesWrap .expense-table tr.expense-row td:nth-child(1) input{font-size:14px!important;padding-inline:6px!important;}
  html body #expensesWrap .expense-table td.exp-actions-cell{display:flex!important;gap:6px;justify-content:flex-end;align-items:center;}
  html body #expensesWrap .expense-table td.exp-actions-cell .exp-att-btn{margin:0!important;}
}

html body #expensesWrap .expense-table tbody tr.expense-row td.exp-actions-cell{background:transparent!important;}

/* عمود الإجراءات في جدول المصروفات: مكان ثابت لزر الفاتورة وزر الحذف على كل الشاشات */
html body #expensesWrap .expense-table th.action-col,
html body #expensesWrap .expense-table td.exp-actions-cell{width:118px!important;min-width:118px!important;text-align:center!important;white-space:nowrap!important;padding-inline:6px!important;}
html body #expensesWrap td.exp-actions-cell{display:flex!important;justify-content:center;align-items:center;gap:6px;}
html body #expensesWrap td.exp-actions-cell .exp-att-btn{margin:0!important;}

/* ===== تمييز القائمة: زر القائمة الذي ضغطه المستخدم يبقى مميزًا، ولا يتنقل التمييز إلا عند الانتقال إلى قائمة أخرى ===== */
html body #appView #appSidebar .side-btn.menu-current{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.07))!important;border-color:rgba(236,214,168,.55)!important;color:#fff!important;box-shadow:inset 0 -3px 0 #ecd6a8,0 0 0 1px rgba(236,214,168,.25)!important;}
html body #appView #appSidebar .side-btn.menu-current::before{opacity:1!important;}
/* عند وجود زر قائمة مختار تُلغى علامة التبويب الحالية داخل القائمة الجانبية حتى لا يظهر تمييزان */
html body[data-menu-pick] #appView #appSidebar .nav-item.active{background:transparent!important;box-shadow:none!important;border-color:rgba(255,255,255,.08)!important;}
html body[data-menu-pick] #appView #appSidebar .nav-item.active::after{display:none!important;}

/* ===== تحديث 42: قائمة جانبية موحّدة — كل الأزرار بنفس النمط والألوان والتنسيق ===== */
html body #appView #appSidebar .side-btn:not(#subscriptionBtn),
html body #appView #appSidebar .side-btn:not(#subscriptionBtn).purple,
html body #appView #appSidebar .side-btn:not(#subscriptionBtn).teal,
html body #appView #appSidebar .side-btn:not(#subscriptionBtn).secondary,
html body #appView #appSidebar .side-btn:not(#subscriptionBtn).danger,
html body #appView #appSidebar .side-btn:not(#subscriptionBtn).theme-toggle{
  background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.08)!important;color:#eef4f0!important;
  box-shadow:none!important;border-radius:12px!important;font-weight:700!important;
}
html body #appView #appSidebar .side-btn:not(#subscriptionBtn):hover{background:rgba(255,255,255,.10)!important;color:#fff!important;}
html body #appView #appSidebar .side-btn:not(#subscriptionBtn)::before{color:#e6efe9!important;}

/* زر الاشتراك: بطاقة مستقلة أسفل الأقسام والعمليات، بتمييز ذهبي واضح لا يشبه أزرار الإجراءات */
html body #appView #appSidebar .side-plan{margin:12px 0 10px;}
html body #appView #appSidebar #subscriptionBtn{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;width:100%!important;min-height:58px!important;padding:10px 14px!important;border-radius:14px!important;
  background:linear-gradient(135deg,#e7c96a 0%,#c9a227 55%,#a9841c 100%)!important;border:1px solid #f1d98a!important;color:#1b1606!important;box-shadow:0 6px 16px rgba(201,162,39,.28),inset 0 1px 0 rgba(255,255,255,.35)!important;text-align:center!important;}
html body #appView #appSidebar #subscriptionBtn::before{display:none!important;}
html body #appView #appSidebar #subscriptionBtn .sp-title{font-size:15px;font-weight:800;line-height:1.3;}
html body #appView #appSidebar #subscriptionBtn .sp-sub{font-size:12px;font-weight:600;opacity:.82;line-height:1.3;}
html body #appView #appSidebar #subscriptionBtn:hover{filter:brightness(1.05);background:linear-gradient(135deg,#eed77e 0%,#d3ad34 55%,#b48f22 100%)!important;color:#1b1606!important;}
html body #appView #appSidebar #subscriptionBtn.menu-current{box-shadow:0 0 0 2px #fff,0 6px 16px rgba(201,162,39,.35)!important;}
html:is(.is-native-app,.is-mobile-view) #appView #appSidebar .side-plan{display:none!important;}

/* بطاقات الأقسام في القائمة الجانبية: نفس نمط أزرار العمليات والحساب تمامًا */
html body #appView #appSidebar .nav-item{
  background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.08)!important;color:#eef4f0!important;
  box-shadow:none!important;border-radius:12px!important;font-weight:700!important;
}
html body #appView #appSidebar .nav-item:hover{background:rgba(255,255,255,.10)!important;color:#fff!important;}
html body #appView #appSidebar .nav-item::before{color:#e6efe9!important;}
/* التبويب الحالي يُميَّز بنفس أسلوب الزر المختار */
html body #appView #appSidebar .nav-item.active{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.07))!important;border-color:rgba(236,214,168,.55)!important;color:#fff!important;box-shadow:inset 0 -3px 0 #ecd6a8,0 0 0 1px rgba(236,214,168,.25)!important;}
html body[data-menu-pick] #appView #appSidebar .nav-item.active{background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.08)!important;box-shadow:none!important;color:#eef4f0!important;}