/* =====================================================================
   صفحات المكتب: الاستفسارات اليومية · الخدمات الأخرى · مصروفات المكتب
   تعتمد على رموز app.css (الألوان والوضع الداكن) — بلا رسوم بيانية
   ===================================================================== */

/* التنقل بين الأشهر */
.ops-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mnav{display:inline-flex;align-items:center;gap:2px;height:36px;padding:0 3px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--surface);box-shadow:var(--sh-xs)}
.mnav b{font:600 13.5px var(--f-disp);min-width:112px;text-align:center;white-space:nowrap;padding-inline:4px}
.mnav .icon-btn{width:30px;height:30px;border-radius:8px}
.mnav .icon-btn:disabled{opacity:.35;cursor:default}
.mnav .btn.sm{height:28px}
.z{color:var(--muted)}
.cur-sep{color:var(--faint);padding-inline:2px}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.btn.danger-t{color:var(--bad)}
.btn.danger-t:hover{background:var(--bad-soft);color:var(--bad)}
.mstrip.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.mstrip.ex-strip{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.mstrip.ex-strip .m-val{font-size:26px}

/* ===================== الاستفسارات اليومية ===================== */
.inq-top{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start;margin-bottom:20px}
.inq-top.solo{grid-template-columns:minmax(0,1fr)}
.inq-card .card-h{align-items:flex-start}
.inq-day{width:auto;height:36px;font-size:13px;flex:none}
.inq-form{gap:16px;padding-top:2px}
.inq-grp{display:grid;gap:8px}
.inq-gh{display:flex;align-items:center;gap:7px;font:600 12.5px var(--f-disp);color:var(--ink-2)}
.inq-gh svg.i{width:15px;height:15px;color:var(--brand-text)}
.inq-gh small{font:400 12px var(--f-body);color:var(--muted)}
.inq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.inq-f{gap:4px}
.inq-f label{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inq-f input{height:42px;font:600 16px var(--f-disp);font-variant-numeric:tabular-nums;text-align:center;padding:0 8px}
.inq-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:4px;border-top:1px dashed var(--line)}
.inq-live{font-size:12.5px;color:var(--muted)}
.inq-live b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.inq-miss .card-h{padding-bottom:8px}
.inq-mchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:0 18px 16px}
.inq-grid2{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.inq-side{display:grid;gap:20px}
.inq-side dl.props dd small{display:block;font-weight:400;font-size:11.5px}
.inq-tw{padding:0 0 8px}
.inq-tbl th,.inq-tbl td{padding:9px 10px}
.inq-tbl .sticky{position:sticky;inset-inline-start:0;z-index:1;background:var(--surface);border-inline-end:1px solid var(--line);min-width:84px;box-shadow:3px 0 0 var(--surface)}
[dir=ltr] .inq-tbl .sticky{box-shadow:-3px 0 0 var(--surface)}
.inq-tbl th.sticky{background:var(--surface-2);z-index:2;box-shadow:3px 0 0 var(--surface-2)}
.inq-tbl td.sticky small{display:inline;margin-inline-start:6px}
.inq-tbl tbody td.sticky>b{display:inline;font-weight:600}
.inq-tbl .tot-c{background:color-mix(in srgb,var(--brand-soft) 55%,transparent)}
.inq-tbl th.tot-c{color:var(--brand-text)}
.inq-tbl tr.click:hover td.sticky{background:var(--surface-2)}
.inq-tbl tr.on td{background:var(--brand-soft)}
.inq-tbl tr.on td.sticky{box-shadow:3px 0 0 var(--surface),inset -3px 0 0 var(--brand)}
.inq-tbl .note-c{max-width:220px;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:12px}
.inq-tbl tfoot td{border-bottom:0;border-top:1px solid var(--line-2);font-weight:600;background:var(--surface-2)}
.inq-tbl tfoot td.sticky{background:var(--surface-2);box-shadow:3px 0 0 var(--surface-2)}
.inq-tbl tfoot tr.avg td{font-weight:500;color:var(--ink-2);border-top:1px solid var(--line)}
.inq-tbl tfoot td b{display:inline}
.inq-tbl tfoot td small{display:block}
.day-b{border:0;background:none;padding:0;color:inherit;text-align:start;display:block;white-space:nowrap}
.day-b b{display:inline!important;font-weight:600}
.day-b small{display:inline!important;margin-inline-start:6px;color:var(--muted);font-size:11.5px}
.day-b:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.inq-chs{list-style:none;margin:0;padding:0 18px 12px;display:grid}
.inq-chs li{display:grid;grid-template-columns:minmax(0,1fr) auto 52px;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.inq-chs li:first-child{border-top:0}
.inq-chs b{font-weight:600;font-variant-numeric:tabular-nums}
.inq-chs small{color:var(--muted);font-size:12px;text-align:end;font-variant-numeric:tabular-nums}
.inq-none{padding:0 18px 16px;color:var(--muted);font-size:13px}
.inq-dash{padding:0 18px 16px}
.inq-dash .inq-none{padding:0}

/* ===================== الخدمات الأخرى ===================== */
.sv-stc{grid-template-columns:repeat(5,minmax(0,1fr))}
.sv-money{margin-bottom:14px}
.sv-mrows{display:grid;gap:10px;padding:0 18px 16px}
.sv-mrow{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center}
.sv-mrow .pill{justify-self:start}
.svrow{--cols:minmax(0,1.6fr) minmax(0,1.2fr) minmax(112px,1fr) minmax(140px,1fr) minmax(0,1.2fr) 100px;display:grid;grid-template-columns:var(--cols);gap:14px;align-items:center;width:100%;min-height:58px;padding:9px 18px;border:0;border-bottom:1px solid var(--line);background:none;color:inherit;text-align:start;font-size:13px;transition:background .12s}
button.svrow{cursor:pointer}
button.svrow:hover{background:var(--surface-2)}
button.svrow:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.svrow.shead{min-height:0;padding-block:9px;font-size:12px;color:var(--muted);background:var(--surface-2);cursor:default}
.svrow>span{min-width:0}
.svrow small{display:block;color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-c{display:flex;align-items:center;gap:10px}
.sv-c .nm{min-width:0}
.sv-c b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-m b{font-weight:600;font-variant-numeric:tabular-nums}
.sv-i{font-size:12.5px}
.sv-s{text-align:end}
.sv-foot span{line-height:1.8}
.modal.sv-modal{width:min(660px,100%)}
.sv-modal .m3 b{font-size:17px}
.sv-modal dl.props{padding:0}
.sv-sec{display:grid;gap:8px}
.sv-sec h3{display:flex;align-items:center;gap:7px;font-size:13.5px}
.sv-sec h3 svg.i{width:16px;height:16px;color:var(--brand-text)}
.sv-sec h3 small{font:500 11px/1 var(--f-body);background:var(--surface-3);color:var(--muted);border-radius:99px;padding:3px 7px}
.sv-none{padding:2px 0}
.inst-list{list-style:none;margin:0;padding:0;display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.inst-list li{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:13px;flex-wrap:wrap}
.inst-list li+li{border-top:1px solid var(--line)}
.inst-list li>div{flex:1;min-width:120px}
.inst-list li b{font-weight:600;font-variant-numeric:tabular-nums}
.inst-list li small{display:block;color:var(--muted);font-size:11.5px}
.inst-list li.paid{background:color-mix(in srgb,var(--ok-soft) 45%,transparent)}
.inst-list li.late{background:color-mix(in srgb,var(--warn-soft) 55%,transparent)}
.inst-n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);border:1px solid var(--line);font:600 11.5px var(--f-disp);color:var(--ink-2);flex:none}
.sv-plist{padding:0;border:1px solid var(--line);border-radius:12px}
.sv-plist li{padding:9px 12px}
.sv-plist li:first-child{border-top:0}
.sv-plist .icon-btn{color:var(--muted)}
.sv-plist .icon-btn:hover{color:var(--bad);background:var(--bad-soft)}
.sv-form{gap:14px}
.sv-res{display:grid;gap:4px;margin-top:6px}
.sv-res:empty{display:none}
.sv-hit,.sv-chip{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:inherit;text-align:start;font-size:13px;min-width:0}
.sv-hit:hover,.sv-hit:focus-visible{border-color:var(--brand);background:var(--brand-soft);outline:none}
.sv-hit>span,.sv-chip>span{flex:1;min-width:0}
.sv-hit b,.sv-chip b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-hit small,.sv-chip small{display:block;color:var(--muted);font-size:11.5px}
.sv-chip{background:var(--brand-soft);border-color:var(--brand-soft-2)}
.inst-ed{display:grid;gap:8px}
.inst-ed:empty{display:none}
.inst-row{display:grid;grid-template-columns:24px minmax(0,1fr) minmax(0,150px) auto auto;gap:8px;align-items:center}
.inst-row .inp{height:36px;font-size:13px}
.inst-row .pill{justify-self:start}
.inst-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.inst-tools .hint{margin-inline-start:auto}

/* ===================== مصروفات المكتب ===================== */
.ex-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.ex-side{display:grid;gap:20px}
.ex-tw{padding:0 0 6px}
.ex-tbl td,.ex-tbl th{padding:9px 12px}
.ex-tbl td small{max-width:260px;overflow:hidden;text-overflow:ellipsis}
.ex-tbl .ex-cat b{font-weight:600}
.ex-tbl .ex-acts{white-space:nowrap;width:1%}
.ex-tbl .ex-acts .icon-btn{display:inline-grid;color:var(--muted)}
.ex-tbl .ex-acts .icon-btn:hover{color:var(--ink)}
.ex-tbl .ex-acts .icon-btn[data-act=ex-del]:hover{color:var(--bad);background:var(--bad-soft)}
.ex-tbl tfoot td{border-bottom:0;border-top:1px solid var(--line-2);background:var(--surface-2)}
.ex-tbl tfoot td b{display:inline;font-weight:600}
.ex-tbl tfoot td small{display:inline;margin-inline-start:6px}
.ex-g td,.ex-g th{padding:8px 12px}
.ex-catl{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ex-catl li{display:inline-flex;align-items:center;gap:2px;height:32px;padding-inline:12px 3px;border:1px solid var(--line-2);border-radius:99px;background:var(--surface-2);font-size:13px}
.ex-catl .icon-btn{width:26px;height:26px;color:var(--muted)}
.ex-catl .icon-btn:hover{color:var(--bad);background:var(--bad-soft)}

/* ===================== الشاشات الأصغر ===================== */
@media (max-width:1180px){
  .inq-top,.inq-grid2,.ex-grid{grid-template-columns:minmax(0,1fr)}
  .inq-side,.ex-side{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .mstrip.five,.mstrip.ex-strip{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row}
  .mstrip.five .metric::before,.mstrip.ex-strip .metric::before{display:block}
  .mstrip.five .metric:nth-child(3n+1)::before,.mstrip.ex-strip .metric:nth-child(3n+1)::before{display:none}
  .mstrip.five .metric,.mstrip.ex-strip .metric{border-top:0}
  .mstrip.five .metric:nth-child(n+4),.mstrip.ex-strip .metric:nth-child(n+4){border-top:1px solid var(--line)}
  .svrow{--cols:minmax(0,1.5fr) minmax(0,1.1fr) minmax(108px,1fr) minmax(136px,1fr) minmax(0,1.1fr) 96px;gap:10px}
}
@media (max-width:900px){
  .svrow.shead{display:none}
  .svrow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"c s" "t m" "i r";row-gap:6px;padding:12px 16px}
  .sv-c{grid-area:c}.sv-s{grid-area:s;align-self:start}.sv-t{grid-area:t;padding-inline-start:38px}.sv-m{grid-area:m;text-align:end}
  .sv-i{grid-area:i;padding-inline-start:38px}.sv-r{grid-area:r;justify-self:end;align-self:center}
  .sv-m small{display:none}
  .sv-i small{white-space:normal}
}
@media (max-width:680px){
  .ops-acts{width:100%}
  .ops-acts .mnav{order:-1;width:100%;justify-content:space-between}
  .ops-acts .btn{flex:1 1 auto}
  .mstrip.five,.mstrip.ex-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mstrip.five .metric::before,.mstrip.ex-strip .metric::before{display:none!important}
  .mstrip.five .metric:nth-child(2n),.mstrip.ex-strip .metric:nth-child(2n){border-inline-start:1px solid var(--line)}
  .mstrip.five .metric:nth-child(n+3),.mstrip.ex-strip .metric:nth-child(n+3){border-top:1px solid var(--line)}
  .mstrip.five .metric:last-child:nth-child(odd),.mstrip.ex-strip .metric:last-child:nth-child(odd){grid-column:1/-1}
  .mstrip.ex-strip .m-val{font-size:20px}
  .inq-card .card-h{flex-direction:column;align-items:stretch}
  .inq-day{width:100%}
  .inq-grid{grid-template-columns:repeat(auto-fit,minmax(66px,1fr));gap:8px}
  .inq-f input{height:44px}
  .inq-foot .btn{width:100%}
  .inq-side,.ex-side{grid-template-columns:minmax(0,1fr)}
  .sv-mrow{grid-template-columns:minmax(0,1fr)}
  .sv-mrow .m3{grid-template-columns:minmax(0,1fr)}
  .sv-mrow .m3>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 12px}
  .sv-mrow .m3>div+div{border-inline-start:0;border-top:1px solid var(--line)}
  .sv-mrow .m3 b{font-size:15px}
  .row3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row3>.field:last-child{grid-column:1/-1}
  .inst-row{grid-template-columns:24px minmax(0,1fr) 30px;grid-template-areas:"n a x" ". d ." ". p ."}
  .inst-row .inst-n{grid-area:n}.inst-row [data-ia]{grid-area:a}.inst-row [data-idate]{grid-area:d}.inst-row .pill{grid-area:p}.inst-row .icon-btn{grid-area:x}
  .sv-modal .m3 b{font-size:14px}
  .sv-modal .m3>div{padding:8px 10px}
  .sv-modal .modal-actions .btn,.ex-modal .modal-actions .btn{flex:1 1 auto}
  /* جدول المصروفات بطاقات على الموبايل حتى يبقى المبلغ ظاهراً */
  .ex-tbl{min-width:0}
  .ex-tbl thead{display:none}
  .ex-tbl,.ex-tbl tbody,.ex-tbl tfoot{display:block;width:100%}
  .ex-tbl tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"c a" "s d" "m x";gap:3px 12px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line)}
  .ex-tbl tbody td{padding:0;border:0;min-width:0}
  .ex-tbl tbody td:nth-child(1){grid-area:d;justify-self:end;color:var(--muted);font-size:12px}
  .ex-tbl tbody td:nth-child(2){grid-area:c}
  .ex-tbl tbody td:nth-child(3){grid-area:s;font-size:12.5px}
  .ex-tbl tbody td:nth-child(3) small{display:none}
  .ex-tbl tbody td:nth-child(4){grid-area:m;font-size:12px;color:var(--muted)}
  .ex-tbl tbody td:nth-child(5){grid-area:a;justify-self:end}
  .ex-tbl tbody td:nth-child(6){grid-area:x;justify-self:end;width:auto}
  .ex-tbl td small{max-width:none;white-space:nowrap}
  .ex-tbl tfoot tr{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
  .ex-tbl tfoot td{padding:11px 16px;border-top:0}
  .ex-tbl tfoot td:empty{display:none}
}