:root{
  color-scheme:light;
  --bg:#E8F0EA;
  --paper:#F2F7F3;
  --panel:#FFFFFF;
  --ink:#14261B;
  --ink-2:#1F3D2B;
  --muted:#5C6E62;
  --line:#D6E3DA;
  --line-soft:#E7F0EA;
  --teal:#3FA579;
  --teal-dark:#2A7A57;
  --teal-soft:#DFF1E7;
  --gold:#C79A4E;
  --gold-soft:#F5EAD3;
  --danger:#B23A2E;
  --danger-soft:#F7E3E0;
  --warning:#B8720F;
  --warning-soft:#FBEDD9;
  --success:#2E8562;
  --success-soft:#DEF0E6;
  --info:#8B5FA6;
  --info-soft:#EFE6F3;
  --radius:12px;
  --shadow:0 1px 2px rgba(20,38,27,.05), 0 8px 24px -12px rgba(20,38,27,.20);
  --sidebar-veil:rgba(20,38,27,.9);
  --sidebar-ink:#c9d6cc;
  --sidebar-link:#aebfb0;
  --on-accent:#fff;
}

/* =========================================================================
   المظهر الداكن — نعيد تعريف نفس المتغيّرات فقط، فيتبعها كل عنصر في النظام
   تلقائيًا بلا تكرار أي قاعدة. الألوان مختارة بتباين كافٍ للقراءة المريحة.
   ========================================================================= */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F1613;
  --paper:#151F1A;
  --panel:#1A2621;
  --ink:#E4EDE7;
  --ink-2:#C5D6CB;
  --muted:#8FA396;
  --line:#28372F;
  --line-soft:#1F2C26;
  --teal:#4FBE8C;
  --teal-dark:#3FA579;
  --teal-soft:#163024;
  --gold:#D4A85E;
  --gold-soft:#332B18;
  --danger:#E2695A;
  --danger-soft:#3A1F1B;
  --warning:#D9932B;
  --warning-soft:#37280F;
  --success:#4FBE8C;
  --success-soft:#14301F;
  --info:#B187C7;
  --info-soft:#2B2133;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 8px 24px -12px rgba(0,0,0,.6);
  --sidebar-veil:rgba(8,15,11,.93);
  --sidebar-ink:#C5D6CB;
  --sidebar-link:#9BB0A2;
}
/* الأزرار المملوءة في الوضع الداكن: نص داكن على أرضية فاتحة ليبقى التباين مريحًا */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn-gold{ color:#0F1613; }
/* زر الخطر محدَّد لا مملوء — يحتاج حدًّا ظاهرًا ونصًّا فاتحًا لا داكنًا */
:root[data-theme="dark"] .btn-danger{ color:var(--danger); border-color:#5C312B; }
:root[data-theme="dark"] .btn-danger:hover{ background:var(--danger-soft); color:#F0AFA4; }
:root[data-theme="dark"] .btn-outline{ border-color:#31423A; }
:root[data-theme="dark"] img.logo-invertible{ filter:brightness(1.12); }
/* الطباعة دائمًا على ورق أبيض مهما كان مظهر الشاشة */
@media print{ :root[data-theme="dark"]{ color-scheme:light; } }
*{box-sizing:border-box;}
/* overflow-x:clip بدل hidden — لأن hidden يجعل body حاوية تمرير، وهذا يُبطل
   position:sticky للقائمة الجانبية فتنزل مع الصفحة. clip يمنع التمرير
   الأفقي دون إنشاء حاوية تمرير. */
html,body{margin:0;padding:0;overflow-x:clip;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Tajawal',sans-serif;
  font-size:14.5px;
  line-height:1.6;
  min-height:100vh;
}
h1,h2,h3,h4,.display{font-family:'Almarai',sans-serif;}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
a{color:inherit;}
::selection{background:var(--gold-soft);}

/* ---------- Ledger paper background texture ---------- */
.paper-bg{
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px);
  background-size: 100% 42px;
  background-position: 0 96px;
}

/* ---------- Utility ---------- */
.hidden{display:none !important;}
.container{max-width:1180px;margin:0 auto;padding:0 22px;}
.muted{color:var(--muted);}
.flex{display:flex;}
.between{justify-content:space-between;}
.center{align-items:center;}
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .gap-24{gap:24px;}
.wrap{flex-wrap:wrap;}
.grow{flex:1;}
.mt-8{margin-top:8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;}
.mb-8{margin-bottom:8px;} .mb-12{margin-bottom:12px;} .mb-16{margin-bottom:16px;}
.text-left{text-align:left;} .text-center{text-align:center;}
.small{font-size:12.5px;}
.tabular{font-variant-numeric:tabular-nums;}
.num{font-family:'Tajawal',sans-serif;font-weight:700;font-variant-numeric:tabular-nums;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid transparent;border-radius:9px;
  padding:9px 16px;font-weight:700;font-size:13.5px;cursor:pointer;
  transition:transform .05s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--teal);color:#fff;}
.btn-primary:hover{background:var(--teal-dark);}
.btn-gold{background:var(--gold);color:#fff;}
.btn-gold:hover{background:#a67f3f;}
.btn-outline{background:transparent;color:var(--ink-2);border-color:var(--line);}
.btn-outline:hover{border-color:var(--teal);color:var(--teal);}
.btn-danger{background:transparent;color:var(--danger);border-color:var(--danger-soft);}
.btn-danger:hover{background:var(--danger-soft);}
.btn-ghost{background:transparent;color:var(--muted);border:none;padding:6px 8px;}
.btn-ghost:hover{color:var(--ink);}
.btn-sm{padding:6px 11px;font-size:12.5px;border-radius:7px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.45;cursor:not-allowed;}

/* ---------- Cards / Panels ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
.card-pad{padding:20px 22px;}

/* ---------- Badges (status pills) ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:100px;font-size:12px;font-weight:700;line-height:1;white-space:nowrap;}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.badge-success{background:var(--success-soft);color:var(--success);}
.badge-warning{background:var(--warning-soft);color:var(--warning);}
.badge-danger{background:var(--danger-soft);color:var(--danger);}
.badge-info{background:var(--info-soft);color:var(--info);}
.badge-muted{background:#EAEDEC;color:var(--muted);}
.badge-gold{background:var(--gold-soft);color:var(--gold);}

/* =====================================================
   SCREEN: file picker / login (centered stage)
   ===================================================== */
.stage{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background-color:#14261B;
  background-image:
    linear-gradient(rgba(15,28,20,.82), rgba(15,28,20,.82)),
    url('login-bg.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.stage-card{
  width:100%;max-width:430px;
  background:var(--panel);color:var(--ink);border-radius:22px;padding:36px 32px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.45);
}
:root[data-theme="dark"] .stage-card{ border:1px solid var(--line); }
.brandmark{
  width:56px;height:56px;border-radius:14px;
  background:linear-gradient(155deg, var(--teal) 0%, var(--teal-dark) 100%);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:'Almarai',sans-serif;font-weight:800;font-size:22px;
  margin-bottom:18px;
}
.stage-title{font-size:22px;font-weight:800;margin:0 0 4px;}
.stage-sub{color:var(--muted);margin:0 0 26px;font-size:13.5px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%;border:1.5px solid var(--line);border-radius:9px;
  padding:10px 12px;background:var(--paper);color:var(--ink);outline:none;
  transition:border-color .15s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.8;}
/* أيقونة التقويم في حقول التاريخ تكون سوداء افتراضيًا فتختفي على الداكن */
:root[data-theme="dark"] .field input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.75);}
:root[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,.62);}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);background:var(--panel);}
.field input[type="file"]{padding:8px;background:var(--paper);border:1.5px dashed var(--line);cursor:pointer;}
.field input[type="file"]::file-selector-button{background:var(--teal);color:#fff;border:none;border-radius:6px;padding:6px 12px;font-weight:700;font-size:12px;margin-left:8px;cursor:pointer;}
.field input[type="file"]::file-selector-button:hover{background:var(--teal-dark);}
/* حقل ملفات بواجهة من عندنا: الحقل الأصلي مخفي بصريًا (لا display:none حتى
   يبقى قابلاً للتركيز والتحقق من المتصفح) والزر والنص بلغة الواجهة. */
.filebox{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px;background:var(--paper);border:1.5px dashed var(--line);border-radius:var(--radius-sm,8px);}
.filebox input[type="file"]{position:absolute;width:1px;height:1px;padding:0;margin:0;
  opacity:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.filebox label{margin:0;cursor:pointer;}
.filebox-txt{font-size:12.5px;min-width:0;overflow-wrap:anywhere;}
.field .hint{font-size:11.5px;color:var(--muted);margin-top:5px;}
.upload-drop{
  border:2px dashed var(--line);border-radius:14px;padding:34px 20px;text-align:center;
  cursor:pointer;transition:border-color .15s, background .15s;background:var(--paper);
}
.upload-drop:hover{border-color:var(--teal);background:var(--teal-soft);}
.upload-drop .icon{font-size:30px;margin-bottom:8px;}
.alert{border-radius:9px;padding:10px 14px;font-size:13px;margin-top:14px;border:1px solid transparent;}
.alert-danger{background:var(--danger-soft);color:var(--danger);border-color:#f0cac5;}
.alert-info{background:var(--info-soft);color:var(--info);border-color:#ddc9e6;}
.alert-success{background:var(--success-soft);color:var(--success);border-color:#c7e8d5;}
.alert-warning{background:var(--warning-soft);color:var(--warning);border-color:#f0dcb0;}
.demo-box{background:var(--paper);border:1px dashed var(--line);border-radius:10px;padding:12px 14px;margin-top:16px;font-size:12px;}
.demo-box .row{display:flex;justify-content:space-between;padding:3px 0;}
.demo-box b{font-family:'Tajawal',sans-serif;}

/* =====================================================
   APP SHELL
   ===================================================== */
#app-shell{display:flex;min-height:100vh;}
/* القائمة الجانبية ثابتة تمامًا على الشاشات الكبيرة: لا تتحرك مع تمرير
   المحتوى إطلاقًا. نستخدم position:fixed بدل sticky لأنه لا يتأثر بأي
   خاصية overflow على العناصر الأب، ثم نُزيح المحتوى بمقدار عرضها.
   نستخدم right/margin-right الفيزيائيين لا الخصائص المنطقية، لأن الواجهة
   rtl دائمًا وهذا لا يحتمل أي التباس في تفسير المتصفح. */
.sidebar{
  width:230px;flex-shrink:0;color:var(--sidebar-ink);
  display:flex;flex-direction:column;padding:20px 14px;
  position:fixed;top:0;right:0;left:auto;height:100vh;overflow-y:auto;z-index:30;
  background-color:var(--ink);
  background-image:
    linear-gradient(var(--sidebar-veil), var(--sidebar-veil)),
    url('sidebar-bg.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.sb-brand{display:flex;align-items:center;gap:10px;padding:0 6px 20px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:16px;}
.sb-brand .mark{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:'Almarai';font-weight:800;color:#1c1404;flex-shrink:0;}
.sb-brand .fed{font-size:12.5px;font-weight:700;color:#fff;line-height:1.3;}
.sb-brand .fed small{display:block;color:#8fa899;font-weight:400;font-size:10.5px;}
.sb-nav{display:flex;flex-direction:column;gap:2px;flex:1;}
.sb-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  color:var(--sidebar-link);text-decoration:none;font-size:13px;font-weight:700;cursor:pointer;border:none;background:transparent;width:100%;text-align:start;
}
.sb-item .ico{width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:.9;}
.sb-item .ico svg{width:17px;height:17px;}
.sb-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.sb-item.active{background:var(--teal);color:#fff;}
.sb-foot{border-top:1px solid rgba(255,255,255,.08);padding-top:12px;margin-top:12px;}
.sb-user{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;}
.sb-user:hover{background:rgba(255,255,255,.06);}
.sb-user .av{width:32px;height:32px;border-radius:50%;background:var(--teal-soft);color:var(--teal-dark);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0;}
.sb-user .who{font-size:12.5px;color:#fff;font-weight:700;line-height:1.3;}
.sb-user .who small{display:block;color:#8fa899;font-weight:400;}
.sb-logout{display:block;width:100%;text-align:center;margin-top:10px;font-size:11.5px;color:#82977f;background:none;border:1px solid rgba(255,255,255,.12);border-radius:7px;padding:7px;cursor:pointer;}
.sb-logout:hover{color:#fff;border-color:rgba(255,255,255,.3);}

.sidebar-backdrop{display:none;}
#burgerBtn{display:none;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;margin-right:230px;}
.topbar{
  background:var(--panel);border-bottom:1px solid var(--line);
  padding:14px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:20;
}
.topbar h1{font-size:18px;margin:0;}
.topbar .crumb{font-size:12px;color:var(--muted);margin-top:2px;}
#view{padding:24px 26px 60px;flex:1;}

/* ---------- Stat cards ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;}
.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden;}
.stat-card .lbl{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:6px;}
.stat-card .val{font-family:'Almarai',sans-serif;font-size:23px;font-weight:800;color:var(--ink);}
.stat-card .sub{font-size:11px;color:var(--muted);margin-top:4px;}
.stat-card.accent-teal{border-top:3px solid var(--teal);}
.stat-card.accent-gold{border-top:3px solid var(--gold);}
.stat-card.accent-warn{border-top:3px solid var(--warning);}
.stat-card.accent-danger{border-top:3px solid var(--danger);}

/* ---------- Custody cards ---------- */
.custody-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:16px;}
.cus-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;position:relative;cursor:pointer;transition:border-color .15s, transform .1s;overflow:hidden;}
.cus-card:hover{border-color:var(--teal);transform:translateY(-2px);}
.cus-card .top-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:10px;}
.cus-card .desc{font-weight:800;font-size:14.5px;color:var(--ink);margin:0 0 3px;font-family:'Almarai';}
.cus-card .who{font-size:12px;color:var(--muted);}
.cus-card .ring-wrap{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);}
.cus-card .figs{flex:1;}
.cus-card .figs .row{display:flex;justify-content:space-between;font-size:12px;padding:2px 0;}
.cus-card .figs .row b{font-weight:700;}
.overdue-flag{color:var(--danger);font-size:11px;font-weight:700;margin-top:6px;display:flex;align-items:center;gap:4px;}
.stamp{
  position:absolute;left:14px;bottom:14px;width:64px;height:64px;border-radius:50%;
  border:2.5px solid var(--danger);color:var(--danger);display:flex;align-items:center;justify-content:center;
  text-align:center;font-family:'Almarai';font-weight:800;font-size:10px;transform:rotate(-14deg);opacity:.8;
  line-height:1.15;
}
.stamp::before{content:'';position:absolute;inset:4px;border:1px solid var(--danger);border-radius:50%;}

/* ---------- Tables ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:560px;}
table.tbl th{background:var(--paper);color:var(--ink-2);font-weight:700;text-align:right;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:12px;}
table.tbl td{padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle;}
table.tbl tr:last-child td{border-bottom:none;}
table.tbl tbody tr:hover{background:var(--paper);}
/* بريد المستخدم داخل الجداول: قابل للنقر ولا يكسر عرض العمود */
.mail-link{color:var(--teal-dark);text-decoration:none;word-break:break-all;font-size:12.5px;}
.mail-link:hover{text-decoration:underline;}
:root[data-theme="dark"] .mail-link{color:var(--teal);}
.empty-row{padding:36px 20px;text-align:center;color:var(--muted);}
.empty-row .ico{font-size:26px;margin-bottom:8px;}

/* ---------- Home page: two-column layout, activity feed ---------- */
.grid-2col{display:grid;grid-template-columns:1.05fr 1fr;gap:22px;align-items:start;}
.block-title{font-size:14px;margin:0 0 10px;font-weight:800;}
.activity-row{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line-soft);cursor:pointer;font-size:12.5px;}
.activity-row:last-child{border-bottom:none;}
.activity-row:hover{background:var(--paper);}
.activity-row .ai{font-size:15px;flex-shrink:0;}
.activity-row .at{color:var(--ink);}
.activity-row .atime{color:var(--muted);font-size:11px;white-space:nowrap;flex-shrink:0;}
.clickable-row{cursor:pointer;}
@media(max-width:960px){ .grid-2col{grid-template-columns:1fr;} }

/* ---------- Cost center enum picker (add custody) ---------- */
.cc-combo{border:1.5px solid var(--line);border-radius:10px;padding:10px;background:var(--paper);}
.cc-tags{display:flex;flex-wrap:wrap;gap:6px;}
.cc-tag{display:inline-flex;align-items:center;gap:6px;background:var(--teal);color:#fff;border-radius:100px;padding:5px 6px 5px 12px;font-size:12px;font-weight:700;}
.cc-tag button{background:rgba(255,255,255,.25);border:none;color:#fff;width:16px;height:16px;border-radius:50%;cursor:pointer;font-size:10px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;}
.cc-tag button:hover{background:rgba(255,255,255,.45);}
.search-box.full-width{width:100%;}
.search-box.full-width input{width:100%;}
.cc-pick-list{border:1.5px solid var(--line);border-radius:10px;max-height:200px;overflow-y:auto;background:var(--panel);}
.cc-pick-row{display:flex;align-items:center;gap:9px;padding:8px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--line-soft);}
.cc-pick-row:last-child{border-bottom:none;}
.cc-pick-row:hover{background:var(--teal-soft);}
.cc-pick-row input{width:16px;height:16px;accent-color:var(--teal);flex-shrink:0;}
.cc-pick-main{font-weight:800;background:var(--paper);}
.cc-pick-header{cursor:default;}
.cc-pick-header:hover{background:var(--paper);}
.cc-pick-empty{cursor:default;color:var(--muted);font-size:12px;}
.cc-pick-empty:hover{background:var(--panel);}
.cc-pick-sub{padding-right:34px;color:var(--ink-2);}

/* ---------- Federation group tree (auditor views) ---------- */
.fed-group{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px;overflow:hidden;}
.fed-group-head{display:flex;align-items:center;gap:10px;padding:13px 18px;background:var(--paper);cursor:pointer;user-select:none;font-weight:800;font-size:14px;}
.fed-group-head:hover{background:var(--teal-soft);}
.fed-group-head .fed-name{flex:1;}
.fed-summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.fed-summary .stat-chip{background:var(--panel);border:1px solid var(--line);border-radius:100px;padding:4px 11px;color:var(--ink-2);font-size:11.5px;font-weight:700;white-space:nowrap;}
.fed-summary .stat-chip b{color:var(--ink);font-variant-numeric:tabular-nums;}
.fed-group-head.fed-open .cc-caret{transform:rotate(90deg);}
.fed-group-body{display:none;}
.fed-group-body.fed-open{display:block;}
.fed-group-body .tbl-wrap{border:none;border-radius:0;border-top:1px solid var(--line);}

/* ---------- Cost center tree ---------- */
.cc-forest{display:flex;flex-direction:column;gap:10px;}
.cc-tree{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.cc-node{display:flex;align-items:center;gap:10px;padding:12px 16px;}
.cc-main{background:var(--paper);font-size:13.5px;cursor:pointer;user-select:none;}
.cc-main:hover{background:var(--teal-soft);}
.cc-main .cc-ico{font-size:15px;}
.cc-caret{display:inline-block;font-size:11px;color:var(--muted);transition:transform .15s;width:10px;}
.cc-main.cc-open .cc-caret{transform:rotate(90deg);}
.cc-node .cc-name{flex:1;}
.cc-node .cc-spent{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2);}
.cc-children{padding:4px 0 8px;border-right:1.5px solid var(--line);margin-right:26px;display:none;}
.cc-children.cc-open{display:block;}
.cc-sub{position:relative;padding-right:22px;font-size:12.5px;margin-right:-1.5px;}
.cc-sub .cc-connector{position:absolute;right:0;top:0;width:16px;height:19px;border-bottom:1.5px solid var(--line);}
.cc-empty{color:var(--muted);}

/* ---------- Section header ---------- */
.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.section-head h2{font-size:17px;margin:0;}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--gold);text-transform:uppercase;margin-bottom:4px;}

/* ---------- Tabs / filters ---------- */
.pill-tabs{display:flex;gap:6px;flex-wrap:wrap;}
.pill-tab{padding:7px 14px;border-radius:100px;border:1px solid var(--line);background:var(--panel);font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;}
.pill-tab.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.search-box{position:relative;}
.search-box input{padding-right:32px;min-width:220px;}
.search-box .ico{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(14,34,51,.5);display:flex;align-items:flex-start;justify-content:center;padding:36px 16px;z-index:100;overflow-y:auto;}
.modal{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:16px;width:100%;max-width:640px;box-shadow:0 30px 60px -20px rgba(0,0,0,.35);animation:modalIn .18s ease;}
@keyframes modalIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.modal.modal-wide{max-width:820px;}
/* نافذة أعرض لما بداخله جدول مضمَّن (طلب رحلة: جدول المشاركين) */
.modal.modal-xwide{max-width:1060px;}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.modal-head h3{margin:0;font-size:16px;}
.modal-body{padding:20px 22px;max-height:70vh;overflow-y:auto;}
.modal-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;background:var(--paper);border-radius:0 0 16px 16px;}
.modal-close{background:none;border:none;font-size:18px;color:var(--muted);cursor:pointer;line-height:1;padding:4px;}
.modal-close:hover{color:var(--ink);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;}
.form-grid .full{grid-column:1/-1;}
.chip-select{display:flex;flex-wrap:wrap;gap:8px;}
.chip{border:1.5px solid var(--line);border-radius:100px;padding:7px 14px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--ink-2);background:var(--paper);user-select:none;}
.chip.on{background:var(--teal);border-color:var(--teal);color:#fff;}
.divider{border:none;border-top:1px solid var(--line);margin:18px 0;}
.subhead{font-size:13px;font-weight:800;color:var(--ink-2);display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.subhead .n{background:var(--gold);color:#fff;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;}
.line-item{display:grid;grid-template-columns:1.3fr 1.1fr .8fr 34px;gap:8px;align-items:center;margin-bottom:8px;}
.line-item select,.line-item input{padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;background:var(--paper);width:100%;}
.rm-line{background:var(--danger-soft);color:var(--danger);border:none;border-radius:7px;width:34px;height:34px;cursor:pointer;font-weight:800;}
.lines-empty{padding:16px;text-align:center;color:var(--muted);font-size:12.5px;border:1.5px dashed var(--line);border-radius:9px;}

/* ---------- Detail page ---------- */
.detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;}
.detail-title{font-size:20px;font-weight:800;margin:0 0 6px;font-family:'Almarai';}
.kv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-top:16px;}
.kv-grid .kv-lbl{font-size:11px;color:var(--muted);font-weight:700;margin-bottom:3px;}
.kv-grid .kv-val{font-size:13.5px;font-weight:700;}
.ring-svg{flex-shrink:0;}
.balance-strip{display:flex;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:16px;}
.balance-cell{flex:1;padding:14px 16px;text-align:center;border-left:1px solid var(--line);}
.balance-cell:first-child{border-right:none;}
.balance-cell:last-child{border-left:none;}
.balance-cell .lbl{font-size:11px;color:var(--muted);font-weight:700;}
.balance-cell .val{font-size:17px;font-weight:800;margin-top:4px;font-family:'Almarai';}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 22px;border-radius:10px;font-size:13px;font-weight:700;z-index:300;box-shadow:0 10px 30px rgba(0,0,0,.25);}

@media(max-width:880px){
  #app-shell{display:block;}
  /* على الجوال تنزلق القائمة فوق المحتوى، فلا حاجة لإزاحته */
  .main{margin-right:0;}

  /* القائمة الجانبية تنزلق من الجانب فوق المحتوى، مع زر تبديل واضح ولمسة خلفية للإغلاق.
     نستخدم transform:translateX بدل right السالب، لأنه يزيح العنصر بمقدار عرضه
     الفعلي المُحسوب دائمًا (مهما كان عرض الشاشة أو تقريب القيم)، بخلاف right
     السالب الذي يحتاج مطابقة رقمية دقيقة مع العرض وقد "يسرّب" جزءًا من القائمة. */
  .sidebar{
    position:fixed;top:0;right:0;width:270px;height:100vh;z-index:210;
    transform:translateX(100%);
    transition:transform .22s ease;
  }
  .sidebar.open{transform:translateX(0);box-shadow:-6px 0 30px rgba(0,0,0,.28);}
  .sidebar.open ~ .sidebar-backdrop{
    display:block;position:fixed;inset:0;background:rgba(10,20,14,.5);z-index:190;
    animation:sbFade .18s ease;
  }
  #burgerBtn{display:inline-flex;}

  .topbar{padding:12px 16px;gap:10px;}
  .topbar h1{font-size:16px;}
  .topbar .crumb{display:none;}
  #view{padding:16px 14px 48px;}
  .container{padding:0 14px;}

  .form-grid{grid-template-columns:1fr;}
  .line-item{grid-template-columns:1fr;gap:6px;padding-bottom:10px;margin-bottom:12px;border-bottom:1px dashed var(--line);}
  .custody-grid{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
  .kv-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}

  .search-box{width:100%;}
  .search-box input{min-width:0;width:100%;}
  .section-head{gap:10px;}

  .modal-overlay{padding:14px 10px;}
  .modal-head{padding:14px 16px;}
  .modal-body{padding:16px;}
  .modal-foot{padding:12px 16px;flex-wrap:wrap;}

  .balance-strip{flex-wrap:wrap;}
  .balance-cell{flex:1 1 33%;border-bottom:1px solid var(--line);}
  .balance-cell:nth-child(3n){border-left:none;}

  .detail-head{gap:12px;}
  .stage-card{padding:30px 24px;}
}
@keyframes sbFade{from{opacity:0;}to{opacity:1;}}

@media(max-width:480px){
  .stage{padding:14px;}
  .stage-card{padding:24px 18px;border-radius:18px;}
  .stats-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));}
  .kv-grid{grid-template-columns:repeat(2,1fr);}
  .detail-title{font-size:16.5px;}
  .balance-cell{flex:1 1 50%;}
  .balance-cell:nth-child(3n){border-left:1px solid var(--line);}
  .balance-cell:nth-child(2n){border-left:none;}
  .card-pad{padding:16px;}
  .sb-brand .fed{font-size:11.5px;}
  .sidebar{width:82vw;}
}

/* =========================================================================
   طباعة احترافية لتفاصيل العهدة (Actions.printCustody)
   #printArea مخفي دائمًا على الشاشة، ويظهر فقط عند الطباعة.
   بدل الاعتماد على visibility (يفشل مع العناصر position:fixed مثل القائمة
   الجانبية ويترك مساحات فارغة/صفحات زائدة)، نُخفي كل أبناء body مباشرة
   ما عدا #printArea، وهذا يمنع تسرّب أي جزء من واجهة التطبيق للطباعة.
   ========================================================================= */
#printArea{ display:none; }
@media print{
  @page{ size:A4; margin:14mm 12mm; }
  html, body{ background:#fff !important; height:auto !important; overflow:visible !important; margin:0 !important; }
  body > *{ display:none !important; }
  body > #printArea{
    display:block !important; position:static !important; width:100%;
    font-family:'Tajawal','Almarai',sans-serif; color:#0F1F16; direction:rtl;
  }
}
.print-doc{ padding:0; }
.print-header{ border-bottom:2.5px solid #14261B; padding-bottom:10px; margin-bottom:16px; }
.print-header-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.print-org{ display:flex; align-items:center; gap:10px; }
.print-org img{ width:40px; height:40px; object-fit:contain; background:#14261B; border-radius:8px; padding:5px; box-sizing:border-box; }
.print-org-name{ font-weight:800; font-size:14px; }
.print-sys-name{ font-size:11px; color:#5C6E62; font-weight:700; }
.print-meta{ text-align:left; font-size:10.5px; color:#5C6E62; line-height:1.7; }
.print-title{ font-size:19px; font-weight:800; margin:14px 0 2px; font-family:'Almarai',sans-serif; }
.print-subtitle{ font-size:12px; color:#5C6E62; }
.print-status-row{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }
.print-status-chip{ border:1.3px solid #14261B; border-radius:999px; padding:3px 12px; font-size:11px; font-weight:800; }
.print-kv{ width:100%; border-collapse:collapse; margin-top:14px; font-size:11.5px; }
.print-kv td{ border:1px solid #C9D6CE; padding:7px 10px; vertical-align:top; }
.print-kv td.lbl{ background:#F2F7F3; font-weight:800; width:15%; color:#1F3D2B; }
.print-kv td.val{ width:35%; }
.print-balance-strip{ display:flex; flex-wrap:wrap; border:1.3px solid #14261B; border-radius:8px; overflow:hidden; margin-top:14px; }
.print-balance-cell{ flex:1 1 120px; text-align:center; padding:9px 6px; border-left:1px solid #C9D6CE; border-bottom:1px solid #C9D6CE; }
.print-balance-cell:last-child{ border-left:none; }
.print-balance-cell .lbl{ font-size:9.5px; color:#5C6E62; font-weight:700; }
.print-balance-cell .val{ font-size:13px; font-weight:800; margin-top:2px; }
.print-balance-cell .sub2{ font-size:9px; color:#5C6E62; font-weight:700; margin-top:2px; }
.print-section-title{ font-size:13.5px; font-weight:800; margin:20px 0 6px; padding-bottom:4px; border-bottom:1.3px solid #14261B; }
.print-tbl{ width:100%; border-collapse:collapse; font-size:11px; }
.print-tbl th, .print-tbl td{ border:1px solid #C9D6CE; padding:6px 8px; text-align:right; }
.print-tbl th{ background:#F2F7F3; font-weight:800; }
.print-tbl tfoot td{ font-weight:800; background:#F8FBF9; }
.print-empty{ font-size:11px; color:#5C6E62; padding:8px; text-align:center; border:1px dashed #C9D6CE; }
.print-link{ color:#146C43; font-size:10.5px; text-decoration:underline; display:inline-block; }
.print-link + .print-link{ margin-inline-start:8px; }
.print-muted{ color:#8a9690; font-size:10.5px; }
.print-signoff{ display:flex; gap:14px; margin-top:34px; page-break-inside:avoid; }
.print-sign-box{ flex:1; text-align:center; }
.print-sign-box .print-sign-lbl{ font-size:11.5px; font-weight:800; margin-bottom:26px; }
.print-sign-box .print-sign-line{ border-top:1.3px solid #14261B; padding-top:6px; }
.print-sign-box .print-sign-name{ font-size:11.5px; font-weight:700; }
.print-sign-box .print-sign-date{ font-size:10px; color:#5C6E62; margin-top:2px; }
.print-footer-note{ margin-top:22px; font-size:9.5px; color:#8a9690; text-align:center; }

/* =========================================================================
   الاتجاه من اليسار لليمين (اللغة الإنجليزية)
   -------------------------------------------------------------------------
   الواجهة مبنية أصلاً بخصائص فيزيائية (right/margin-right) لأن العربية هي
   اللغة الأساسية. هنا نعكس هذه القواعد وحدها عند اختيار الإنجليزية، فلا
   نلمس أي شيء آخر ولا يتأثر الوضع العربي إطلاقًا.
   ========================================================================= */
:root[lang="en"] body{
  font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif;
  letter-spacing:.1px;
}
:root[lang="en"] h1,
:root[lang="en"] h2,
:root[lang="en"] h3,
:root[lang="en"] h4,
:root[lang="en"] .display{ font-family:'Segoe UI Semibold','Segoe UI','Helvetica Neue',Arial,sans-serif; }
:root[lang="en"] .num{ font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif; }

/* الشريط الجانبي ينتقل إلى اليسار */
[dir="ltr"] .sidebar{ right:auto; left:0; }
[dir="ltr"] .main{ margin-right:0; margin-left:230px; }
[dir="ltr"] .sb-link{ text-align:left; }

/* الجداول والعناوين */
[dir="ltr"] table.tbl th{ text-align:left; }
[dir="ltr"] .print-tbl th,
[dir="ltr"] .print-tbl td{ text-align:left; }
[dir="ltr"] .print-meta{ text-align:right; }

/* شجرة مراكز التكلفة */
[dir="ltr"] .cc-pick-sub{ padding-right:0; padding-left:34px; }
[dir="ltr"] .cc-children{ border-right:none; border-left:1.5px solid var(--line); margin-right:0; margin-left:26px; }
[dir="ltr"] .cc-sub{ padding-right:0; padding-left:22px; margin-right:0; margin-left:-1.5px; }
[dir="ltr"] .cc-sub .cc-connector{ right:auto; left:0; }

/* صندوق البحث */
[dir="ltr"] .search-box input{ padding-right:12px; padding-left:32px; }
[dir="ltr"] .search-box .ico{ right:auto; left:10px; }

/* شريط الأرصدة */
[dir="ltr"] .balance-cell{ border-left:none; border-right:1px solid var(--line); }
[dir="ltr"] .balance-cell:first-child{ border-right:none; }
[dir="ltr"] .print-balance-cell{ border-left:none; border-right:1px solid #C9D6CE; }
[dir="ltr"] .print-balance-cell:first-child{ border-right:none; }

/* زر اختيار الملف داخل الحقول */
[dir="ltr"] .field input[type="file"]::file-selector-button{ margin-left:0; margin-right:8px; }

/* شارة العملة/البطاقة المستديرة */
[dir="ltr"] .cus-card .ring{ left:auto; right:14px; }

/* سهم الفترة يشير لليمين في الإنجليزية */
[dir="ltr"] .period-sep{ transform:scaleX(-1); display:inline-block; }

@media (max-width: 980px){
  [dir="ltr"] .main{ margin-left:0; }
  [dir="ltr"] .sidebar{ right:auto; left:0; transform:translateX(-100%); }
  [dir="ltr"] .sidebar.open{ transform:translateX(0); box-shadow:6px 0 30px rgba(0,0,0,.28); }
}

/* =========================================================================
   أزرار اللغة والمظهر وتبديل النظام في الشريط الجانبي
   ========================================================================= */
.sb-tools{
  display:flex; gap:8px; margin:0 0 10px; padding:0 2px;
}
.sb-tool{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 8px; border-radius:9px; cursor:pointer;
  background:rgba(255,255,255,.07); color:var(--sidebar-ink);
  border:1px solid rgba(255,255,255,.12);
  font-size:12.5px; font-weight:700; font-family:inherit;
  transition:background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.sb-tool:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.24); }
.sb-tool:active{ transform:translateY(1px); }
.sb-switch{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; margin:0 0 14px;
  padding:11px 10px; border-radius:10px; cursor:pointer;
  background:linear-gradient(135deg, var(--teal-dark), var(--teal));
  color:#fff; border:none;
  font-size:13px; font-weight:700; font-family:inherit;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.5);
  transition:filter .15s ease;
}
.sb-switch:hover{ filter:brightness(1.08); }
.sb-switch:active{ transform:translateY(1px); }
.sb-switch .arrow{ font-size:15px; line-height:1; }
[dir="ltr"] .sb-switch .arrow{ transform:scaleX(-1); display:inline-block; }

/* =========================================================================
   محرّر المشاركين المضمَّن — صف تحرير داخل الجدول بدل نافذة منبثقة
   ========================================================================= */
/* صف التحرير: خانات الجدول نفسها، كل خانة تحمل عنصر تحكّم واحدًا بلا عنوان —
   تمامًا كصفوف بنود المصاريف التقديرية في نظام العهد. */
.px-edit-row > td{ background:var(--paper); }
:root[data-theme="dark"] .px-edit-row > td{ background:var(--line-soft); }
.px-edit-row > td{ padding:8px 6px !important; vertical-align:middle; }
/* حدّ أدنى لعرض الجدول أثناء التحرير فقط: بدونه تُضغط القوائم المنسدلة داخل
   نافذة إنشاء الرحلة الضيّقة حتى تصير غير مقروءة. خارج التحرير يبقى الجدول
   مرنًا بلا حدّ أدنى فلا يظهر شريط تمرير أفقي بلا داعٍ. */
table.px-tbl.px-editing{ min-width:860px; }
.px-edit-row select, .px-edit-row input{
  width:100%; min-width:0; padding:7px 8px; font-size:12.5px;
  border:1.5px solid var(--line); border-radius:8px;
  background:var(--panel); color:var(--ink); font-family:inherit; outline:none;
}
.px-edit-row select:focus, .px-edit-row input:focus{ border-color:var(--teal); }
.px-edit-row input:disabled{ background:var(--line-soft); color:var(--muted); }
/* قيمة محسوبة تُعرض ولا تُكتب: نصّ عادي بلا إطار، كخانات الجدول تمامًا */
.px-edit-row .px-ro{ display:inline-block; font-size:12.5px; color:var(--ink-2); white-space:nowrap; }
/* حدّ أدنى للخانات التي يُقصّ نصّها أولاً عند الضغط */
.px-edit-row td[data-lbl="المشارك"]{ min-width:170px; }
.px-edit-row td[data-lbl="المهمة / الدور"]{ min-width:130px; }
.px-edit-row td[data-lbl="مطابق لتفاصيل الرحلة؟"]{ min-width:112px; }
.px-edit-row td.px-edit-actions{ white-space:nowrap; }
.px-edit-actions{ display:flex; gap:6px; align-items:center; justify-content:flex-end; }
.px-edit-actions .btn{ padding:6px 12px; font-size:13px; }
/* زر «تعديل» في الصف: يفتح نافذة التفاصيل. نقطة صغيرة تُعلِم أن للمشارك
   تواريخ أو ظروفًا تخالف الرحلة، فلا يحتاج المستخدم لفتحه ليعرف. */
.px-edit-row .px-details-btn{ width:100%; }
.px-edit-row .px-details-btn.is-dirty{ border-color:var(--warning); color:var(--warning); font-weight:800; }
.px-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:12px 14px; }
.px-f{ min-width:0; }
.px-f.px-full{ grid-column:1/-1; }
.px-f label{ display:block; font-size:12px; font-weight:700; color:var(--ink-2); margin-bottom:5px; }
.px-f input, .px-f select, .px-f textarea{
  width:100%; border:1.5px solid var(--line); border-radius:8px;
  padding:8px 10px; background:var(--panel); color:var(--ink); outline:none;
  font-family:inherit; font-size:13px;
}
.px-f input:focus, .px-f select:focus, .px-f textarea:focus{ border-color:var(--teal); }
.px-f input:disabled{ background:var(--line-soft); color:var(--muted); }
.px-f .alert{ margin:0; }
.px-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; flex-wrap:wrap; }
:root[data-theme="dark"] .px-f input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(1) opacity(.75); }
.px-tbl td{ vertical-align:top; }
/* جدول المشاركين واسع (تسع خانات) — نضغط الحشو ونسمح للعناوين بالالتفاف
   حتى يتّسع داخل البطاقة بلا شريط تمرير أفقي يقصّ عمود الحالة والأزرار. */
table.px-tbl{ min-width:0; }
table.px-tbl th, table.px-tbl td{ padding:9px 8px; }
table.px-tbl th{ white-space:normal; }
table.px-tbl td .badge{ white-space:normal; }
.px-tbl .px-row-actions{ display:flex; flex-direction:column; gap:6px; align-items:stretch; }
.px-tbl .px-row-actions .btn{ white-space:nowrap; }
/* زرّا الحفظ والإلغاء يبقيان ملتصقين بطرف المنطقة الظاهرة، فلا يختفيان خلف
   التمرير الأفقي حين يكون الجدول أوسع من الحاوية (نافذة الرحلة الضيّقة). */
.px-edit-row > td.px-edit-actions{
  position:sticky; inset-inline-end:0; z-index:2;
  box-shadow:-8px 0 12px -10px rgba(0,0,0,.35);
}
[dir="ltr"] .px-edit-row > td.px-edit-actions{ box-shadow:8px 0 12px -10px rgba(0,0,0,.35); }
@media (max-width: 700px){
  .px-grid{ grid-template-columns:1fr; }
  .px-actions button{ flex:1; }
}