/* =====================================================================
   SSBAPP — نظام الألوان الموحّد
   لكل معنى مالي لون واحد يُستخدم في: التبويبات، البطاقات، المؤشرات،
   الاختصارات، الجداول، شاشة التقارير، ملفات PDF، والدليل.
     رصيد السنة السابقة ........ بنفسجي
     مدفوعات الأشهر / مسدد ...... أخضر
     مدفوعات أخرى .............. أزرق
     المصروفات / غير مسدد ....... أحمر
     الإجمالي والمجاميع ......... ذهبي
     الرصيد المتوفر ............ صنوبري غامق
     العدّ والمعلومات العامة .... صنوبري فاتح
   ===================================================================== */
:root{
  --c-prev:#5b4691;  --c-prev-bg:#ece6f7; --c-prev-bd:#bfb0e0;
  --c-pay:#1f6e3d;   --c-pay-bg:#d3ecdc;  --c-pay-bd:#8fc9a5;
  --c-other:#215d86; --c-other-bg:#dbe9f5;--c-other-bd:#9cc0dd;
  --c-exp:#a3361f;   --c-exp-bg:#f8dcd3;  --c-exp-bd:#e39e8b;
  --c-exp-alt:#fbe9e3;--c-exp-alt2:#fff6f2;
  --c-total:#7a5410; --c-total-bg:#f5e5c1;--c-total-bd:#d9b56b;
  --c-bal:#0f3a36;   --c-bal-2:#0b2b28;   --c-bal-ink:#ffffff;
  --c-info:#155049;  --c-info-bg:#e1efe9; --c-info-bd:#a9cfc1;

  /* ربط متغيرات الجداول بالنظام الموحّد */
  --paid-bg:var(--c-pay-bg);   --paid-ink:var(--c-pay);
  --unpaid-bg:var(--c-exp-bg); --unpaid-ink:#7f1d1d;
  --other-bg:var(--c-other-bg);--other-ink:var(--c-other);
  --sum-bg:var(--c-total-bg);  --sum-ink:var(--c-total);
  --tone-blue:var(--c-exp-alt);--tone-green:var(--c-exp-alt2);
}

@media screen{

/* ---------- البطاقات المالية في التطبيق ---------- */
.main .cards .card{border-width:1.5px!important;}
.main .cards .card.c-prev {background:var(--c-prev-bg)!important; border-color:var(--c-prev-bd)!important; color:var(--c-prev)!important; --card-accent:var(--c-prev); --card-ink:var(--c-prev);}
.main .cards .card.c-pay  {background:var(--c-pay-bg)!important;  border-color:var(--c-pay-bd)!important;  color:var(--c-pay)!important;  --card-accent:var(--c-pay);  --card-ink:var(--c-pay);}
.main .cards .card.c-other{background:var(--c-other-bg)!important;border-color:var(--c-other-bd)!important;color:var(--c-other)!important;--card-accent:var(--c-other);--card-ink:var(--c-other);}
.main .cards .card.c-exp  {background:var(--c-exp-bg)!important;  border-color:var(--c-exp-bd)!important;  color:var(--c-exp)!important;  --card-accent:var(--c-exp);  --card-ink:var(--c-exp);}
.main .cards .card.c-total{background:var(--c-total-bg)!important;border-color:var(--c-total-bd)!important;color:var(--c-total)!important;--card-accent:var(--c-total);--card-ink:var(--c-total);}
.main .cards .card.c-bal  {background:radial-gradient(240px 120px at 0% 0%,rgba(184,134,47,.28),transparent 70%),linear-gradient(140deg,var(--pine-700),var(--c-bal-2))!important;border-color:var(--c-bal)!important;color:#d6ebe2!important;--card-accent:var(--brass);--card-ink:#fff;}

/* ---------- المؤشرات الذكية ---------- */
.smart-metric:nth-child(1):before{background:var(--c-info)!important;}
.smart-metric:nth-child(2):before{background:var(--c-pay)!important;}
.smart-metric:nth-child(3):before{background:var(--c-pay)!important;}
.smart-metric:nth-child(4):before{background:var(--c-total)!important;}
.smart-metric:nth-child(1) b{color:var(--c-info)!important;}
.smart-metric:nth-child(2) b,.smart-metric:nth-child(3) b{color:var(--c-pay)!important;}
.smart-metric:nth-child(4) b{color:var(--c-total)!important;}
.smart-metric:before{height:5px!important;}

/* ---------- التبويبات (نفس لون معناها) ---------- */
.nav-overview{--tab:var(--c-info);--tab-bg:var(--c-info-bg);--tab-bd:var(--c-info-bd);--tab-light:#bfe3d6;}
.nav-payments{--tab:var(--c-pay);--tab-bg:var(--c-pay-bg);--tab-bd:var(--c-pay-bd);--tab-light:#9fdbb5;}
.nav-expenses{--tab:var(--c-exp);--tab-bg:var(--c-exp-bg);--tab-bd:var(--c-exp-bd);--tab-light:#f2ab98;}
.view-tabs .nav-item::before{background:var(--tab)!important;}
.view-tabs .nav-item{color:var(--ink-2)!important;}
.view-tabs .nav-item.active{
  background:var(--tab-bg)!important;border-color:var(--tab-bd)!important;color:var(--tab)!important;
  box-shadow:inset 0 -3px 0 var(--tab),0 4px 12px -6px rgba(22,35,31,.25)!important;
}
.view-tabs .nav-item.active::before{background:var(--tab)!important;}
/* القائمة الجانبية والشريط السفلي: الأيقونة بلون القسم */
.side .nav-item::before,.bottom-nav .nav-item.nav-overview::before,.bottom-nav .nav-item.nav-payments::before,.bottom-nav .nav-item.nav-expenses::before{background:var(--tab-light)!important;}
.side .nav-item.active{border-color:var(--tab-light)!important;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.12))!important;box-shadow:inset -4px 0 0 var(--tab-light)!important;}
.bottom-nav .nav-item.active{background:rgba(255,255,255,.12)!important;box-shadow:inset 0 -3px 0 var(--tab-light)!important;}

/* ---------- الاختصارات السريعة ---------- */
.ql-payments{--q:var(--c-pay);--q-bg:var(--c-pay-bg);--q-bd:var(--c-pay-bd);}
.ql-expenses{--q:var(--c-exp);--q-bg:var(--c-exp-bg);--q-bd:var(--c-exp-bd);}
.ql-receipt {--q:var(--c-total);--q-bg:var(--c-total-bg);--q-bd:var(--c-total-bd);}
.ql-reports {--q:var(--c-info);--q-bg:var(--c-info-bg);--q-bd:var(--c-info-bd);}
.quick-link{border-inline-start:5px solid var(--q)!important;}
.quick-link::before{background-color:var(--q-bg)!important;box-shadow:inset 0 0 0 1.5px var(--q-bd)!important;}
.quick-link>b::before{background:var(--q)!important;}
.quick-link b{color:var(--q)!important;}

/* ---------- وسائل الإيضاح ---------- */
.lg-paid::before{background:var(--c-pay-bg)!important;box-shadow:inset 0 0 0 1.5px var(--c-pay-bd)!important;}
.lg-unpaid::before{background:var(--c-exp-bg)!important;box-shadow:inset 0 0 0 1.5px var(--c-exp-bd)!important;}
.lg-other::before{background:var(--c-other-bg)!important;box-shadow:inset 0 0 0 1.5px var(--c-other-bd)!important;}
.lg-sum::before{background:var(--c-total-bg)!important;box-shadow:inset 0 0 0 1.5px var(--c-total-bd)!important;}
.lg-blue::before{background:var(--c-exp-alt)!important;box-shadow:inset 0 0 0 1.5px var(--c-exp-bd)!important;}
.lg-green::before{background:var(--c-exp-alt2)!important;box-shadow:inset 0 0 0 1.5px var(--c-exp-bd)!important;}

/* ---------- جداول التطبيق ---------- */
#paymentsWrap .month-total-row td{background:var(--c-total-bg)!important;color:var(--c-total)!important;}
#paymentsWrap .month-total-row td:first-child{background:var(--c-bal)!important;color:#fff!important;}
#expensesWrap .expense-table tbody tr.expense-tone-blue td:first-child,
#expensesWrap .expense-table tbody tr.expense-tone-green td:first-child{box-shadow:inset -4px 0 0 var(--c-exp-bd)!important;}

/* ---------- حساب الساكن ---------- */
.resident-account-cards>div.resident-summary-total{background:var(--c-total-bg)!important;border-color:var(--c-total-bd)!important;}
.resident-account-cards>div.resident-summary-total span,.resident-account-cards>div.resident-summary-total b{color:var(--c-total)!important;}
.resident-account-cards>div.resident-summary-months{background:var(--c-pay-bg)!important;border-color:var(--c-pay-bd)!important;}
.resident-account-cards>div.resident-summary-months span,.resident-account-cards>div.resident-summary-months b{color:var(--c-pay)!important;}
.resident-account-cards>div.resident-summary-other{background:var(--c-other-bg)!important;border-color:var(--c-other-bd)!important;}
.resident-account-cards>div.resident-summary-other span,.resident-account-cards>div.resident-summary-other b{color:var(--c-other)!important;}
.resident-account-cards>div.resident-summary-paid{background:var(--c-info-bg)!important;border-color:var(--c-info-bd)!important;}
.resident-account-cards>div.resident-summary-paid span,.resident-account-cards>div.resident-summary-paid b{color:var(--c-info)!important;}
.resident-month.paid{background:var(--c-pay-bg)!important;border-color:var(--c-pay-bd)!important;}
.resident-month.paid span,.resident-month.paid b,.resident-month.paid small{color:var(--c-pay)!important;}
.resident-month.unpaid{background:var(--c-exp-bg)!important;border-color:var(--c-exp-bd)!important;}
.resident-month.unpaid span,.resident-month.unpaid b,.resident-month.unpaid small{color:#7f1d1d!important;}
.resident-month.other{background:var(--c-other-bg)!important;border-color:var(--c-other-bd)!important;}
.resident-month.other span,.resident-month.other b,.resident-month.other small{color:var(--c-other)!important;}
} /* end @media screen */

/* =====================================================================
   التقارير والسندات (شاشة + طباعة + PDF المأخوذ من HTML)
   ===================================================================== */
.report-card{border-width:1.5px!important;font-weight:800!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.report-card-prev   {background:var(--c-prev-bg)!important; border-color:var(--c-prev-bd)!important; color:var(--c-prev)!important;}
.report-card-pay    {background:var(--c-pay-bg)!important;  border-color:var(--c-pay-bd)!important;  color:var(--c-pay)!important;}
.report-card-other  {background:var(--c-other-bg)!important;border-color:var(--c-other-bd)!important;color:var(--c-other)!important;}
.report-card-exp    {background:var(--c-exp-bg)!important;  border-color:var(--c-exp-bd)!important;  color:var(--c-exp)!important;}
.report-card-income {background:var(--c-total-bg)!important;border-color:var(--c-total-bd)!important;color:var(--c-total)!important;}
.report-card-balance{background:var(--c-bal)!important;     border-color:var(--c-bal-2)!important;    color:#ffffff!important;}
.report-card-count  {background:var(--c-info-bg)!important; border-color:var(--c-info-bd)!important; color:var(--c-info)!important;}
.report-card b{color:inherit!important;}
@media print{
  .report-card-prev{background:var(--c-prev-bg)!important}.report-card-pay{background:var(--c-pay-bg)!important}
  .report-card-other{background:var(--c-other-bg)!important}.report-card-exp{background:var(--c-exp-bg)!important}
  .report-card-income{background:var(--c-total-bg)!important}.report-card-balance{background:var(--c-bal)!important}
  .report-card-count{background:var(--c-info-bg)!important}
}
.report-payments-table td.rp-paid{background:var(--c-pay-bg)!important;color:var(--c-pay)!important;}
.report-payments-table td.rp-unpaid{background:var(--c-exp-bg)!important;color:#7f1d1d!important;}
.report-payments-table td.rp-other{background:var(--c-other-bg)!important;color:var(--c-other)!important;}
.report-payments-table td.rp-total{background:var(--c-total-bg)!important;color:var(--c-total)!important;}
.report-payments-total-row th,.report-expenses-total-row th,.resident-report-year-summary tfoot th{background:var(--c-total-bg)!important;color:var(--c-total)!important;}
.report-expenses-table tbody tr.report-expense-tone-blue td{background:var(--c-exp-alt)!important;}
.report-expenses-table tbody tr.report-expense-tone-green td{background:var(--c-exp-alt2)!important;}
.report-expense-tone-blue .report-expense-month-label,.report-expense-tone-green .report-expense-month-label{color:var(--c-exp)!important;border-color:var(--c-exp)!important;}
.resident-payment-positive{background:var(--c-pay-bg)!important;color:var(--c-pay)!important;}
.resident-payment-zero{background:var(--c-exp-bg)!important;color:#7f1d1d!important;}
.resident-payment-other{background:var(--c-other-bg)!important;color:var(--c-other)!important;}
.resident-payment-total{background:var(--c-total-bg)!important;color:var(--c-total)!important;}

/* ===== جدول مدفوعات السكان: عمود اسم الساكن ثابت أثناء التمرير الأفقي ===== */
@media screen{
  #paymentsWrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #paymentsWrap tbody td.name-cell,
  #paymentsWrap thead th:first-child,
  #paymentsWrap .month-total-row td:first-child{
    position:sticky;right:0;
    box-shadow:inset -2px 0 0 #1f2a24,-6px 0 10px -6px rgba(15,35,25,.35);
  }
  #paymentsWrap tbody td.name-cell{z-index:2;background-clip:padding-box;}
  #paymentsWrap .month-total-row td:first-child{z-index:2;}
  #paymentsWrap thead th:first-child{z-index:5;}
}
@media screen and (max-width:760px){
  #paymentsWrap col.name-col{width:158px;}
  #paymentsWrap table{min-width:1440px;}
}

/* ===== تطبيق الموبايل فقط: البطاقات التعريفية في لوحة المتابعة فقط ===== */
html.is-native-app body:not([data-current-view="overview"]) #summaryCards{display:none!important;}

/* ===== شاشة الدخول على الجوال: مضغوطة لتظهر كاملة بلا تمرير ===== */
@media screen and (max-width:620px){
  #loginView{min-height:100vh;min-height:100dvh;padding:calc(10px + var(--sa-top,0px)) 12px calc(10px + var(--sa-bottom,0px))!important;place-items:center;}
  .login-split{width:100%;}
  .login-brand{min-height:0!important;height:clamp(96px,17vh,150px);padding:12px 16px!important;justify-content:flex-end!important;}
  .login-brand h2{font-size:22px!important;margin:0!important;}
  .login-split .login-card{padding:14px 16px 12px!important;}
  .login-split .login-card h1{font-size:16px!important;padding-bottom:10px!important;margin-bottom:0!important;}
  .login-split .login-card h1::before{width:36px!important;height:36px!important;}
  .login-lead{margin:8px 0 4px!important;font-size:13px!important;}
  .login-label{margin:6px 0 0!important;font-size:12.5px!important;}
  .login-split .login-card input:not([type=checkbox]){height:44px!important;min-height:44px!important;margin:3px 0!important;padding-block:6px!important;}
  .login-split .remember-login-row{margin:6px 0 0!important;padding:7px 12px!important;min-height:0!important;}
  .login-actions-grid{margin-top:10px!important;gap:8px!important;}
  .login-actions-grid button{height:42px!important;min-height:42px!important;}
  .login-split .login-version{margin-top:8px!important;padding-top:6px!important;font-size:12px!important;}
}
/* شاشات قصيرة جدًا: نخفي عناوين الحقول (العنوان مكتوب داخل الحقل) */
@media screen and (max-width:620px) and (max-height:700px){
  .login-label{display:none!important;}
  .login-brand{height:84px;}
  .login-lead{display:none!important;}
}