/* =====================================================================
   سفينكس للحسابات (Sphinx Accounting) — تنسيقات الواجهة العربية RTL
   خط Cairo محمّل محليًا (لا اعتماد على الإنترنت وقت التشغيل)
   ===================================================================== */

/* ---- خط Cairo (متغيّر الوزن 400-700) ---- */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cairo-1.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cairo-2.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cairo-3.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113;
}

:root {
  --sphinx-primary: #0f766e;        /* أخضر مُزرقّ هادئ — مظهر محاسبى محترف */
  --sphinx-primary-dark: #115e59;
  --sphinx-primary-darker: #134e4a;
  --sphinx-sidebar-bg: #102733;     /* كحلى داكن */
  --sphinx-sidebar-hover: #17384a;
  --sphinx-sidebar-active: #0f766e;
  --sphinx-sidebar-text: #b7cdd9;
  --sphinx-topbar-h: 60px;
  --sphinx-content-bg: #f2f5f7;
}

html, body {
  font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
  background: var(--sphinx-content-bg);
}

/* ---------- الهيكل العام ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 264px;
  min-width: 264px;
  background: var(--sphinx-sidebar-bg);
  color: var(--sphinx-sidebar-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2c4a5c transparent;
}

.sidebar-brand {
  display: flex; align-items: center; gap: .65rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand .brand-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, var(--sphinx-primary), #14b8a6);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1.05rem;
}
.sidebar-brand .brand-name { color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.2; }
.sidebar-brand .brand-sub  { font-size: .72rem; color: var(--sphinx-sidebar-text); }

.sidebar-nav { padding: .75rem .7rem 1.5rem; }
.nav-section-title {
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  color: #6f92a5; padding: .9rem .5rem .35rem;
  text-transform: uppercase;
}
.nav-item-link {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .65rem; margin-bottom: 2px;
  border-radius: .5rem;
  color: var(--sphinx-sidebar-text);
  text-decoration: none;
  font-size: .9rem;
  transition: background .15s, color .15s;
}
.nav-item-link:hover { background: var(--sphinx-sidebar-hover); color: #fff; }
.nav-item-link.active { background: var(--sphinx-sidebar-active); color: #fff; font-weight: 600; }
.nav-item-link .nav-ico { display: inline-flex; opacity: .9; }
.nav-item-link.disabled {
  color: #5d7d90; cursor: default;
}
.nav-item-link.disabled:hover { background: transparent; color: #5d7d90; }
.badge-soon {
  font-size: .62rem; font-weight: 600;
  background: rgba(255,255,255,.09); color: #8fb0c2;
  border-radius: 99px; padding: .1rem .5rem;
  margin-inline-start: auto;
}

/* ---------- الشريط العلوى ---------- */
.main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: var(--sphinx-topbar-h);
  background: #fff;
  border-bottom: 1px solid #e4e9ee;
  display: flex; align-items: center;
  padding: 0 1.25rem;
  gap: 1rem;
  position: sticky; top: 0; z-index: 1020;
}
.topbar .page-title { font-weight: 700; font-size: 1.05rem; color: #23323d; margin: 0; }
.topbar .user-chip {
  display: flex; align-items: center; gap: .55rem;
  background: #f2f5f7; border-radius: 99px; padding: .3rem .85rem .3rem .45rem;
  border: 1px solid #e4e9ee;
}
.topbar .user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--sphinx-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700;
}

.content { padding: 1.4rem 1.5rem 3rem; max-width: 1400px; width: 100%; margin: 0 auto; }

/* ---------- بطاقات الإحصاءات ---------- */
.stat-card {
  background: #fff; border: 1px solid #e4e9ee; border-radius: .9rem;
  padding: 1.05rem 1.15rem;
  display: flex; align-items: center; gap: .9rem;
  height: 100%;
}
.stat-card .stat-ico {
  width: 46px; height: 46px; border-radius: .75rem;
  display: flex; align-items: center; justify-content: center;
  background: #e6f4f2; color: var(--sphinx-primary);
  flex-shrink: 0;
}
.stat-card .stat-value { font-size: 1.45rem; font-weight: 700; color: #1d2b36; line-height: 1.1; }
.stat-card .stat-label { font-size: .8rem; color: #66788a; }

/* ---------- عناصر عامة ---------- */
.card { border: 1px solid #e4e9ee; border-radius: .9rem; }
.card-header { background: #fff; border-bottom: 1px solid #eef1f4; font-weight: 700; }

.btn-primary {
  --bs-btn-bg: var(--sphinx-primary);
  --bs-btn-border-color: var(--sphinx-primary);
  --bs-btn-hover-bg: var(--sphinx-primary-dark);
  --bs-btn-hover-border-color: var(--sphinx-primary-dark);
  --bs-btn-active-bg: var(--sphinx-primary-darker);
  --bs-btn-active-border-color: var(--sphinx-primary-darker);
  --bs-btn-disabled-bg: var(--sphinx-primary);
  --bs-btn-disabled-border-color: var(--sphinx-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--sphinx-primary);
  --bs-btn-border-color: var(--sphinx-primary);
  --bs-btn-hover-bg: var(--sphinx-primary);
  --bs-btn-hover-border-color: var(--sphinx-primary);
  --bs-btn-active-bg: var(--sphinx-primary-dark);
  --bs-btn-active-border-color: var(--sphinx-primary-dark);
}
a { color: var(--sphinx-primary); }
.form-check-input:checked { background-color: var(--sphinx-primary); border-color: var(--sphinx-primary); }
.form-control:focus, .form-select:focus {
  border-color: #7cc4bd;
  box-shadow: 0 0 0 .2rem rgba(15, 118, 110, .15);
}

/* شارات الحالة */
.badge-active { background: #e7f6ec; color: #16794c; }
.badge-inactive { background: #f1f3f5; color: #6c757d; }
.badge-role { background: #eef2ff; color: #3f51b5; font-weight: 600; }
.badge-nature-debit { background: #e8f0fe; color: #1a56db; }
.badge-nature-credit { background: #fdf2e9; color: #b45309; }
.badge-clearing { background: #fff4e5; color: #92400e; }
.badge-subledger { background: #f0e9ff; color: #6d28d9; }

/* ---------- الجداول ---------- */
.table thead th {
  background: #f7f9fa; color: #55666f; font-size: .78rem; font-weight: 700;
  border-bottom: 1px solid #e4e9ee; white-space: nowrap;
}
.table td { vertical-align: middle; font-size: .9rem; }

/* ---------- شجرة الحسابات ---------- */
.acc-tree { list-style: none; padding-inline-start: 0; margin: 0; }
.acc-tree ul { list-style: none; padding-inline-start: 1.6rem; border-inline-start: 1px dashed #d5dde3; margin-inline-start: .55rem; }
.acc-node { margin: 2px 0; }
.acc-row {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: #fff; border: 1px solid #e7ecf0; border-radius: .55rem;
  padding: .4rem .7rem;
}
.acc-row:hover { border-color: #bcd8d4; }
.acc-code { font-weight: 700; color: var(--sphinx-primary-dark); direction: ltr; }
.acc-name { font-weight: 600; color: #24333e; }
.acc-actions { margin-inline-start: auto; display: flex; gap: .35rem; }
details.acc-details > summary { list-style: none; cursor: pointer; }
details.acc-details > summary::-webkit-details-marker { display: none; }
.acc-toggle { color: #8399a7; font-size: .8rem; width: 1rem; display: inline-block; text-align: center; }
details[open] > summary .acc-toggle .closed-ico { display: none; }
details:not([open]) > summary .acc-toggle .open-ico { display: none; }

/* ---------- مصفوفة الصلاحيات ---------- */
.matrix-wrap { overflow-x: auto; }
.matrix-table { min-width: 760px; }
/* نفس إصلاح Patch 3.1: لا التصاق للرأس داخل حاوية تمرير حتى لا يغطى أول صف */
.matrix-table thead th { background: #f7f9fa; }
.matrix-table .module-row td {
  background: #eef4f3; font-weight: 700; color: #0f5e57; font-size: .82rem;
}
.matrix-table td.check-cell { text-align: center; }
.matrix-table .form-check-input { width: 1.15rem; height: 1.15rem; cursor: pointer; }
.perm-key { font-size: .72rem; color: #90a0ac; direction: ltr; display: inline-block; }

/* شريط حفظ ثابت أسفل الشاشة */
.sticky-actions {
  position: sticky; bottom: 0; z-index: 1010;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(4px);
  border-top: 1px solid #e4e9ee;
  padding: .75rem 1rem;
  margin: 1.5rem -1.5rem -3rem;
  display: flex; gap: .6rem; align-items: center;
}

/* ---------- صفحة الدخول ---------- */
.login-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #102733 0%, #134e4a 100%);
  padding: 1rem;
}
.login-card {
  width: 100%; max-width: 420px;
  background: #fff; border-radius: 1.1rem;
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
  padding: 2.1rem 1.9rem;
}
.login-brand { text-align: center; margin-bottom: 1.4rem; }
.login-brand .brand-icon {
  width: 56px; height: 56px; border-radius: 14px; margin: 0 auto .7rem;
  background: linear-gradient(135deg, var(--sphinx-primary), #14b8a6);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1.5rem;
}

/* ---------- شارات حالة المستند (مسودة/معتمد/مرحّل/ملغى) ---------- */
.badge-doc-draft { background: #eef1f4; color: #5c6b78; }
.badge-doc-approved { background: #e7effd; color: #1d4ed8; }
.badge-doc-posted { background: #e7f6ec; color: #16794c; }
.badge-doc-cancelled { background: #fdeaea; color: #b42318; }
.badge-doc-reversed { background: #fff1e0; color: #b45309; }
.badge-role-reversal { background: #fff1e0; color: #b45309; }
.badge-role-primary { background: #eef2ff; color: #3f51b5; }

/* ---------- محرر سطور القيد ---------- */
.je-lines-table td { vertical-align: top; padding: .35rem .3rem; }
.je-lines-table .form-select, .je-lines-table .form-control { font-size: .85rem; }
.je-lines-table .amount-input { direction: ltr; text-align: left; font-weight: 600; }
.je-lines-table .party-required .party-select { border-color: #dc3545; background-color: #fff8f8; }
.je-totals { background: #f7f9fa; border-top: 2px solid #e4e9ee; font-weight: 700; }
.je-totals td { padding: .6rem .5rem; }
.je-diff-ok { color: #16794c; }
.je-diff-bad { color: #b42318; }
/* ---------- الأعمدة الرقمية المالية (Patch 3.2) ----------
   قاعدة موحدة لكل خلية مبلغ: محاذاة يمين + اتجاه LTR للرقم نفسه +
   أرقام جدولية (tabular) متساوية العرض حتى تصطف خانات الآلاف والمئات،
   ومنع الالتفاف. الشرطة «—» تتبع نفس المحاذاة فلا تكسر العمود. */
.amount-cell, .amount {
  direction: ltr;
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
/* وسم مدين/دائن بجوار الرصيد: عرض ثابت حتى تظل الفواصل العشرية
   لكل الصفوف على خط واحد (الصف الصفرى يحمل وسمًا فارغًا بنفس العرض) */
.amount-cell .side-tag {
  display: inline-block;
  min-width: 3em;
  text-align: right;
  unicode-bidi: isolate;
  font-size: .72rem;
  font-weight: 700;
  opacity: .85;
  padding-inline-start: .35em;
}

/* بطاقة معلومات القيد */
.meta-list { display: flex; flex-wrap: wrap; gap: .35rem 1.6rem; margin: 0; }
.meta-list dt { font-size: .72rem; color: #8195a3; font-weight: 600; margin: 0; }
.meta-list dd { font-size: .88rem; font-weight: 600; color: #24333e; margin: 0 0 .4rem; }

/* ---------- سجل التدقيق ---------- */
.json-details summary { cursor: pointer; color: var(--sphinx-primary); font-size: .78rem; }
.json-details pre {
  direction: ltr; text-align: left; font-size: .72rem;
  background: #f7f9fa; border: 1px solid #e4e9ee; border-radius: .4rem;
  padding: .5rem; margin: .3rem 0 0; max-width: 360px; max-height: 220px; overflow: auto;
}

/* ---------- التقارير ----------
   ملاحظة إصلاح (Patch 3.1): كانت رؤوس الجداول position: sticky بإزاحة
   top: 60px داخل حاوية .table-responsive (وهى حاوية تمرير) — فينزاح الرأس
   لأسفل ويغطى أول صف بيانات عند تكبير 100%. أُزيل الالتصاق نهائيًا. */
.report-account-header td {
  background: #eef4f3; font-weight: 700; color: #0f5e57;
  border-top: 2px solid #d3e3e0;
}
.report-subtotal td { background: #f7f9fa; font-weight: 700; border-bottom: 2px solid #e4e9ee; }
.report-opening td { background: #fbfcfd; color: #66788a; font-style: normal; }
.balance-pos { color: #1a56db; }
.balance-neg { color: #b45309; }
.entry-block { border: 1px solid #e4e9ee; border-radius: .7rem; margin-bottom: .9rem; overflow: hidden; }
.entry-block-head {
  background: #f7f9fa; padding: .5rem .9rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem;
  align-items: center; font-size: .85rem; border-bottom: 1px solid #e4e9ee;
}

/* رأس يظهر فى الطباعة فقط */
.print-header { display: none; }

/* ---------- الطباعة ---------- */
@media print {
  .sidebar, .sidebar-backdrop, .topbar, .sticky-actions, .no-print { display: none !important; }
  .main-col { width: 100%; }
  .content { padding: 0; max-width: 100%; }
  body, .content { background: #fff; }
  .card { border: none; box-shadow: none; }
  .print-header { display: block; margin-bottom: 1rem; border-bottom: 2px solid #333; padding-bottom: .5rem; }
  .print-header h1 { font-size: 1.15rem; font-weight: 700; margin: 0; }
  .print-header .small { color: #444; }
  a { text-decoration: none; color: inherit; }
}

/* ---------- تجاوب أساسى ---------- */
@media (max-width: 992px) {
  .sidebar { position: fixed; inset-inline-start: 0; z-index: 1040; transform: translateX(100%); transition: transform .2s; }
  .sidebar.show { transform: translateX(0); }
  .sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1035;
  }
  .sidebar-backdrop.show { display: block; }
}