/* ==========================================================================
   صفحة "المصاريف" — نظام إدارة مصاريف (أنواع، أقسام، أهداف، سجل، تراجع)
   يعتمد متغيرات الألوان المعرفة في :root داخل index.html
   ========================================================================== */

/* عنوان قابل للتحرير */
#expTitle{ border-radius:6px; padding:0 4px; outline:none; }
#expTitle:hover{ background:var(--green-soft); cursor:text; }
#expTitle:focus{ background:#FBFDF9; box-shadow:0 0 0 1.5px var(--green); }

/* ---------- بطاقتا الملخص الأبرز (الرقمان الأساسيان فقط) ---------- */
.exp-hero{
  background:linear-gradient(135deg, var(--green) 0%, #0A4A3B 100%);
  border-radius:12px; padding:11px 14px; color:#fff;
}
.exp-hero .lbl{ font-size:11.5px; color:#CFE3DC; margin-bottom:3px; }
.exp-hero .val{ font-size:23px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1; }
.exp-hero .sub{ font-size:10.5px; color:#A8CCC0; margin-top:3px; }
.exp-heroes{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.hero-balance{ background:linear-gradient(135deg, #22352B 0%, #101E18 100%); }
.hero-balance .val{ display:flex; }
.hero-balance .val input{
  width:100%; background:transparent; border:none; color:#fff; font:inherit;
  font-weight:700; font-variant-numeric:tabular-nums; text-align:right; direction:ltr; padding:0;
}
.hero-balance .val input:focus{ outline:none; box-shadow:0 2px 0 rgba(255,255,255,.45) inset; }
@media (max-width:400px){ .exp-hero .val{ font-size:20px; } }

/* ---------- إحصائيات إضافية (ثانوية، مطوية) ---------- */
.exp-more{ margin-bottom:12px; }
.exp-more > summary{
  list-style:none; cursor:pointer; font-size:12px; color:var(--muted);
  padding:5px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card);
  display:inline-flex; align-items:center; gap:6px; user-select:none;
}
.exp-more > summary::-webkit-details-marker{ display:none; }
.exp-more > summary::before{ content:'▾'; font-size:10px; color:var(--green); }
.exp-more[open] > summary::before{ content:'▴'; }
.exp-more > summary:hover{ border-color:var(--green); color:var(--green); }
.mini-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr));
  gap:6px; margin-top:8px;
}
.mini-grid .mg{
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  background:var(--card); border:1px solid var(--line); border-radius:8px; padding:6px 10px;
}
.mini-grid .mg span{ font-size:11px; color:var(--muted); }
.mini-grid .mg b{ font-size:13.5px; font-variant-numeric:tabular-nums; }
.mini-grid .mg b.neg{ color:var(--danger); }

/* ---------- شريط الأدوات ---------- */
.exp-toolbar{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin-bottom:14px;
}
.exp-toolbar #expSearch{
  flex:1 1 200px; min-width:160px;
  font-family:inherit; font-size:14px; padding:9px 12px;
  border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--ink);
}
.exp-toolbar #expSearch:focus{ outline:none; border-color:var(--green); }
.exp-toolbar select{
  font-family:inherit; font-size:14px; padding:9px 10px;
  border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--ink);
}
.exp-toolbar-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-inline-start:auto; }
#expUndoBtn:disabled{ opacity:.45; cursor:default; }
#expUndoBtn:disabled:hover{ border-color:var(--line); }

/* ---------- الأقسام ---------- */
.exp-group{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  margin-bottom:12px; overflow:hidden;
}
.exp-group-head{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--green-soft); padding:8px 12px;
}
.exp-group-head .gtoggle{
  border:none; background:none; cursor:pointer; color:var(--green);
  font-size:14px; padding:4px 6px; border-radius:6px;
}
.exp-group-head .gtoggle:hover{ background:#D2E4DC; }
.gname-inp{
  font-family:inherit; font-weight:700; font-size:14.5px; color:var(--green);
  border:1px solid transparent; background:transparent; border-radius:7px;
  padding:5px 8px; min-width:110px; max-width:220px;
}
.gname-inp:hover{ border-color:var(--line); background:#fff; }
.gname-inp:focus{ outline:none; border-color:var(--green); background:#fff; }
.exp-group-head .gcount{ color:var(--muted); font-size:12.5px; }
.exp-group-head .gbar{
  flex:1 1 70px; max-width:150px; height:8px; background:#CFE3DC; border-radius:999px; overflow:hidden;
}
.exp-group-head .gbar > i{ display:block; height:100%; background:var(--green); border-radius:999px; }
.exp-group-head .gbar > i.over{ background:var(--danger); }
.exp-group-head .gneed{
  font-variant-numeric:tabular-nums; font-size:13px; font-weight:600; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:7px; padding:3px 10px;
}
.exp-group-head .gtools{ margin-inline-start:auto; display:flex; gap:2px; }
.exp-group-head .gtools button{
  border:none; background:none; cursor:pointer; color:var(--muted);
  font-size:13.5px; padding:4px 7px; border-radius:6px; line-height:1;
}
.exp-group-head .gtools button:hover{ background:#fff; color:var(--green); }
.exp-group-head .gtools .gdel:hover{ color:var(--danger); background:var(--danger-soft); }
.exp-group.collapsed .exp-group-body{ display:none; }

/* ---------- رأس أعمدة الصفوف الشهرية (Excel-like) ---------- */
.exp-cols{
  display:grid;
  grid-template-columns: 1.5fr 1.1fr 1.1fr 0.8fr 1.2fr 1.35fr 46px;
  gap:6px; padding:5px 10px 3px;
  font-size:11px; font-weight:600; color:var(--muted);
}

/* ---------- الصف الشهري (مضغوط) ---------- */
.exp-row{ border-top:1px solid var(--line); }
.exp-monthly{
  display:grid;
  grid-template-columns: 1.5fr 1.1fr 1.1fr 0.8fr 1.2fr 1.35fr 46px;
  gap:6px; align-items:center; padding:2px 10px;
}
.exp-monthly.over{ background:var(--danger-soft); }
.exp-monthly.good{ background:#EEF6F1; }

.exp-row input[type=text], .exp-row select{
  width:100%; border:1px solid transparent; background:transparent;
  font-family:inherit; font-size:13px; padding:5px; border-radius:6px; color:var(--ink);
}
.exp-row input:focus, .exp-row select:focus{ outline:none; border-color:var(--green); background:#FBFDF9; }
.sel-mini{ font-size:12px !important; padding:3px 4px !important; display:block; }
.c-type{ display:flex; gap:3px; }
.c-type .sel-mini{ flex:1; min-width:0; }

/* التسميات الصغيرة داخل الحقول (تظهر على الجوال فقط) */
.fl{ display:none; font-size:9.5px; color:var(--muted); margin-inline-end:3px; }

.c-diff{ display:flex; align-items:baseline; gap:5px; padding:0 4px; }
.c-diff .diff-val{ font-variant-numeric:tabular-nums; font-weight:600; font-size:12.5px; }
.c-diff .diff-pct{ font-size:10.5px; color:var(--muted); }

.c-actions{ display:flex; gap:1px; justify-content:flex-end; align-items:center; }
.exp-row .dup, .exp-row .del{
  border:none; background:none; cursor:pointer; font-size:13.5px; padding:3px 5px;
  color:#B9C2BD; border-radius:6px; line-height:1;
}
.exp-row .dup:hover{ color:var(--gold); background:var(--gold-soft); }
.exp-row .del:hover{ color:var(--danger); background:var(--danger-soft); }

/* ---------- أزرار الزيادة/النقصان (ريال كامل) ---------- */
.stp{ display:flex; align-items:center; gap:1px; }
.stp input{
  flex:1; min-width:0; width:100%; border:1px solid transparent; background:transparent;
  font-family:inherit; font-size:13px; padding:5px 3px; border-radius:6px; color:var(--ink);
  font-variant-numeric:tabular-nums; direction:ltr; text-align:right;
}
.stp input:focus{ outline:none; border-color:var(--green); background:#FBFDF9; }
.stp input::-webkit-outer-spin-button, .stp input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.stp input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
.stp-b{
  width:18px; height:20px; flex:0 0 18px; border:1px solid var(--line); background:var(--card);
  border-radius:5px; cursor:pointer; color:var(--muted); font-size:11px; line-height:1; padding:0;
}
.stp-b:hover{ border-color:var(--green); color:var(--green); }

/* ---------- صف الهدف = صف جدولي مثل الشهري (بلا بطاقات) ---------- */
.exp-goal{
  display:grid;
  grid-template-columns: 1.5fr 1.1fr 1.1fr 0.8fr 1.2fr 1.35fr 46px;
  gap:6px 6px; align-items:center; padding:2px 10px;
  border-inline-start:3px solid var(--gold);
}
.exp-goal.complete{ border-inline-start-color:var(--green); }
.exp-goal .c-name{ display:flex; align-items:center; gap:4px; min-width:0; }
.g-ico{ font-size:12px; flex:0 0 auto; }
/* الأعمدة الثلاثة الإضافية للهدف تنسدل بعرض كامل تحت الصف (سطر ثانوي بلا بطاقات) */
.exp-goal .c-type{ grid-column:1 / -1; }
.exp-goal .c-note.g-line{ grid-column:1 / -1; }
.g-line{
  display:flex; align-items:center; gap:6px 12px; flex-wrap:wrap;
  padding:2px 0 3px; border-top:1px dashed var(--line);
}
.g-line .ge{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--muted); }
.g-line .ge .stp{ width:96px; }
.g-line .g-inst{ font-size:12.5px; color:#8A6D0F; font-variant-numeric:tabular-nums; }
.exp-goal.complete .g-inst{ color:var(--green); }
.exp-goal.stalled .g-inst{ color:var(--danger); }
.g-line .gp{ flex:1; min-width:90px; }
.g-bar{ flex:1; height:6px; background:var(--gold-soft); border-radius:999px; overflow:hidden; }
.g-bar > i{ display:block; height:100%; background:var(--gold); border-radius:999px; transition:width .3s; }
.exp-goal.complete .g-bar{ background:var(--green-soft); }
.exp-goal.complete .g-bar > i{ background:var(--green); }
.g-pct{ font-size:11px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; min-width:30px; text-align:left; }
.g-note-inp{ flex:1 1 120px; min-width:90px; border:1px solid transparent; background:transparent;
  font-family:inherit; font-size:12px; color:var(--muted); padding:3px 5px; border-radius:6px; }
.g-note-inp:focus{ outline:none; border-color:var(--green); background:#FBFDF9; }
.g-spend{
  border:none; background:none; cursor:pointer; font-size:14px; padding:3px 5px; border-radius:6px; line-height:1;
}
.g-spend:hover{ background:var(--gold-soft); }

/* ---------- سجل بدء الشهور ---------- */
.log-item{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  margin-bottom:10px; overflow:hidden;
}
.log-item summary{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; cursor:pointer; list-style:none;
}
.log-item summary::-webkit-details-marker{ display:none; }
.log-item summary:hover{ background:var(--green-soft); }
.log-date{ font-weight:700; color:var(--green); }
.log-sum{ color:var(--muted); font-size:13px; }
.log-del{
  margin-inline-start:auto; border:none; background:none; cursor:pointer;
  color:#B9C2BD; font-size:14px; padding:4px 8px; border-radius:6px;
}
.log-del:hover{ color:var(--danger); background:var(--danger-soft); }
.log-body{ padding:4px 16px 14px; border-top:1px solid var(--line); }
.log-sec h4{ font-size:12.5px; color:var(--green); margin:12px 0 6px; }
.log-line{
  display:flex; gap:12px; align-items:baseline; font-size:13.5px;
  padding:4px 0; border-bottom:1px dashed var(--line);
}
.log-line:last-child{ border-bottom:none; }
.log-line b{ font-variant-numeric:tabular-nums; }
.log-ba{ color:var(--muted); font-size:12px; margin-inline-start:auto; font-variant-numeric:tabular-nums; }

@media (max-width:820px){
  .exp-toolbar-actions{ margin-inline-start:0; width:100%; }

  /* على الجوال: أزرار +/- تُخفى لتوفير المساحة (الإدخال بالكتابة، وتظهر عند التحرير وعلى الكمبيوتر) */
  .exp-monthly .stp-b, .exp-goal .stp-b{ display:none; }
  .stp input{ text-align:center; padding:5px 2px; }

  /* رأس أعمدة مضغوط يظهر مرة واحدة لكل قسم (اسم | مخطط | مدفوع | فرق) */
  .exp-cols{
    display:grid;
    grid-template-columns: minmax(0,1fr) 56px 56px 52px;
    gap:6px; padding:4px 10px 2px; font-size:10px;
  }
  .exp-cols > div:nth-child(n+5){ display:none; }

  /* الشهري والهدف = صف واحد مثل Excel، بنفس الأعمدة */
  .exp-monthly, .exp-goal{
    grid-template-columns: minmax(0,1fr) 56px 56px 52px;
    grid-template-areas: "name plan actual diff";
    align-items:center; gap:4px 6px; padding:3px 10px;
  }
  .exp-monthly .c-name, .exp-goal .c-name{ grid-area:name; min-width:0; }
  .exp-monthly .c-plan, .exp-goal .c-plan{ grid-area:plan; }
  .exp-monthly .c-actual, .exp-goal .c-actual{ grid-area:actual; }
  .exp-monthly .c-diff, .exp-goal .c-diff{ grid-area:diff; justify-content:flex-end; padding:0; }
  .exp-row .c-diff .diff-pct{ display:none; }
  .exp-monthly .fl, .exp-goal .fl{ display:none; }
  .exp-monthly .c-name input, .exp-goal .c-name input{ font-weight:600; }
  /* الحقول الثانوية تظهر فقط عند التحرير (النقر داخل الصف) */
  .exp-monthly .c-type, .exp-monthly .c-note, .exp-monthly .c-actions,
  .exp-goal .c-type, .exp-goal .c-note, .exp-goal .c-actions{ display:none; }
  .exp-monthly:focus-within, .exp-goal:focus-within{
    grid-template-columns: minmax(0,1fr) 56px 56px 52px;
    grid-template-areas:
      "name plan actual diff"
      "acts acts acts acts"
      "type type type type"
      "note note note note";
    background:#FBFDF9;
  }
  .exp-monthly:focus-within .c-type, .exp-goal:focus-within .c-type{ grid-area:type; display:flex; }
  .exp-monthly:focus-within .c-note, .exp-goal:focus-within .c-note{ grid-area:note; display:flex; }
  .exp-monthly:focus-within .c-actions, .exp-goal:focus-within .c-actions{ grid-area:acts; display:flex; justify-content:flex-end; padding-top:2px; }
  .exp-row:focus-within .c-diff .diff-pct{ display:inline; }
  .exp-monthly:focus-within .stp-b, .exp-goal:focus-within .stp-b{ display:inline-flex; }
  .g-line .stp{ width:auto; flex:1; }
  .exp-group-head .gneed{ order:5; }
  .exp-group-head .gtools{ margin-inline-start:0; }
}

/* ---------- رأس القسم: كامل الرأس يطوي/يفتح، والاسم يُحرَّر ---------- */
.exp-group-head{ cursor:pointer; }
.gname-inp{ cursor:text; }
.log-when{ color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }

/* ---------- نافذة صرف الهدف ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(16,24,20,.5);
  display:none; align-items:center; justify-content:center; z-index:200; padding:16px;
}
.modal-overlay.on{ display:flex; }
.modal-box{
  background:var(--card); border-radius:16px; padding:20px 22px;
  max-width:400px; width:100%; max-height:90vh; overflow:auto;
  box-shadow:0 20px 50px rgba(0,0,0,.28);
}
.modal-box h3{ color:var(--green); font-size:17px; margin-bottom:4px; }
.modal-box .modal-hint{ color:var(--muted); font-size:13px; margin-bottom:12px; }
.modal-box .modal-hint b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.modal-box label{ font-size:13px; font-weight:600; display:block; margin:12px 0 5px; color:var(--ink); }
.modal-box input, .modal-box textarea{
  width:100%; font-family:inherit; font-size:15px; padding:9px 11px;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink);
}
.modal-box input:focus, .modal-box textarea:focus{ outline:none; border-color:var(--green); }
.modal-box input:disabled{ background:var(--green-soft); color:var(--muted); }
.modal-box textarea{ min-height:60px; resize:vertical; }
.modal-seg{ display:flex; gap:8px; margin:6px 0 4px; }
.modal-seg button{
  flex:1; border:1px solid var(--line); background:#fff; padding:9px; border-radius:9px;
  cursor:pointer; font-family:inherit; font-size:14px; color:var(--ink);
}
.modal-seg button.on{ background:var(--green); border-color:var(--green); color:#fff; font-weight:600; }
.modal-actions{ display:flex; gap:10px; margin-top:18px; }