/* تنسيقات خاصة بصفحة المدير — المشترك في theme.css */

.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px 60px }

/* ============================== منطقة رفع البيان ============================== */
.drop {
  background: var(--surface); border: 2px dashed #C4CDD6; border-radius: 16px;
  padding: 22px 20px; text-align: center; margin-top: 18px; transition: .15s; box-shadow: var(--shadow);
}
.drop.hot { border-color: var(--brand); background: var(--brand-soft) }
.drop h2 { margin: 0 0 4px; font-size: 16px }
.drop p { margin: 0 0 14px; color: var(--muted); font-size: 13px }

/* ============================== التبويبات وشريط الأدوات ============================== */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 6px }
.tab {
  font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line); color: #48555f;
}
.tab.on { background: var(--ink); color: #fff; border-color: var(--ink) }
.tab .n { opacity: .65; margin-inline-start: 6px }

.toolbar { display: flex; gap: 10px; align-items: center; margin: 8px 0 14px }
.search { flex: 1; position: relative }
.search input {
  width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 10px 14px;
  font-family: inherit; font-size: 14px; background: var(--surface);
}
.search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft) }
.refresh { white-space: nowrap }

/* ============================== بطاقة الشحنة ============================== */
.ticket {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 14px; box-shadow: var(--shadow); overflow: hidden;
}
.ticket::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px; background: var(--amber) }
.ticket.ready::before { background: var(--brand) }
.ticket.sent::before { background: var(--sent) }
.t-head { padding: 14px 16px 12px; display: flex; gap: 12px; align-items: flex-start }
.t-name { font-size: 16px; font-weight: 700; margin: 0 }
.t-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center }
.status { margin-inline-start: auto; font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; white-space: nowrap }
.status.need { background: var(--amber-soft); color: var(--amber) }
.status.ready { background: var(--brand-soft); color: var(--brand-2) }
.status.sent { background: var(--sent-soft); color: var(--sent) }
.t-body { padding: 0 16px 14px; display: grid; gap: 12px }
.t-actions { margin-top: 2px }

.rowline { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13px }
.kv { display: inline-flex; align-items: center; gap: 6px }
.kv .k { color: var(--muted); font-size: 11.5px }
.trk {
  font-family: ui-monospace, monospace; font-size: 12px; font-weight: 600;
  background: #F1F4F7; border: 1px solid var(--line); padding: 3px 8px; border-radius: 7px; color: #3a4750;
}
.phone { font-family: ui-monospace, monospace; font-weight: 600; font-size: 13.5px }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  background: #F1F4F7; color: #41505c; border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px;
}
.iconbtn {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  color: var(--muted); border: 1px solid var(--line); background: var(--surface);
}
.iconbtn:hover { color: var(--brand); border-color: var(--brand) }
.bad { color: var(--danger); font-weight: 600; font-size: 12px }
.copybtn {
  padding: 2px 9px; font-size: 11px; border-radius: 7px; margin-inline-start: 8px;
  background: #EEF2F5; color: var(--ink); border: 1px solid var(--line); font-weight: 600;
}
.field label { font-size: 12px; font-weight: 600; color: #48555f; display: block; margin-bottom: 6px }
textarea.msg {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
  resize: vertical; font-family: inherit; font-size: 13.5px; line-height: 1.7;
  color: var(--ink); background: #FBFCFD; min-height: 90px;
}
textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft) }

.receipt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.thumb {
  width: 80px; height: 80px; border-radius: 10px; object-fit: cover;
  border: 1px solid var(--line); background: #F1F4F7; cursor: zoom-in;
}
.rbadge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  color: var(--wa-2); background: #E4F6EC; border: 1px solid #BfE6CF; padding: 3px 9px; border-radius: 999px;
}
.rnone {
  color: var(--amber); font-weight: 600; font-size: 12.5px; background: var(--amber-soft);
  border: 1px solid #F0D9B8; padding: 7px 10px; border-radius: 9px; display: inline-block;
}
.receipt-actions { display: flex; gap: 8px; flex-wrap: wrap }
.receipt-col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px }

.send-row { display: flex; gap: 8px; flex-wrap: wrap }
.send-row .btn { flex: 1; min-width: 150px }

/* ============================== صندوق الضوء ============================== */
.lb {
  position: fixed; inset: 0; background: rgba(15, 20, 26, .86);
  display: none; align-items: center; justify-content: center; z-index: 60; padding: 20px;
}
.lb.on { display: flex }
.lb img { max-width: 100%; max-height: 90vh; border-radius: 12px }

/* ============================== لوحة القوالب ============================== */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin: 16px 0 }
.panel summary { list-style: none; cursor: pointer; padding: 13px 16px; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px }
.panel summary::-webkit-details-marker { display: none }
.panel summary .caret { margin-inline-start: auto; color: var(--muted); transition: .2s }
.panel[open] summary .caret { transform: rotate(180deg) }
.panel-body { padding: 0 16px 16px; border-top: 1px solid var(--line) }
.tpl-block { margin-top: 14px }
.tpl-block > label { font-size: 12.5px; font-weight: 700; color: #48555f; display: block; margin-bottom: 6px }
.fmtbar { display: flex; gap: 6px; margin-bottom: 6px }
.fmtbtn {
  width: 30px; height: 28px; border-radius: 7px; border: 1px solid var(--line);
  background: #F1F4F7; color: #3a4750; font-size: 13px; font-weight: 800; display: grid; place-items: center;
}
.fmtbtn:hover { background: #E4EAEF; color: var(--brand) }
.fmtbtn .i { font-style: italic }
.fmtbtn .s { text-decoration: line-through }
textarea.tmpl {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
  resize: vertical; font-family: inherit; font-size: 13.5px; line-height: 1.7;
  color: var(--ink); background: #FBFCFD; min-height: 96px;
}
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.tag {
  font-size: 11.5px; font-weight: 700; color: var(--brand); background: var(--brand-soft);
  padding: 4px 9px; border-radius: 7px; cursor: pointer; font-family: ui-monospace, monospace;
}
.tag:hover { background: #d3e9e7 }
.tpl-hint { font-size: 11.5px; color: var(--muted); margin: 12px 0 0 }
.tpl-save { margin-top: 14px }

/* ============================== تبويب الأرشيف (فلاتر الشحنات) ============================== */
.archbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px }
.archbar select {
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: #41505c;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px;
}
.arch-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); margin-bottom: 10px; padding: 12px 14px }
.arch-name { font-size: 15px; font-weight: 800; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.arch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 12.5px }
.arch-grid .k { color: var(--muted); font-size: 11px }
.arch-full { grid-column: 1 / -1 }
.sbadge { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px }
.sbadge.sent { background: var(--sent-soft); color: var(--sent) }
.sbadge.unsent { background: var(--amber-soft); color: var(--amber) }
.sbadge.rec { background: #E4F6EC; color: var(--wa-2) }
.sbadge.norec { background: #F1F4F7; color: var(--muted) }
.arch-actions { display: flex; gap: 8px; margin-top: 10px }

/* الشبكة كانت مثبّتة على عمودين بلا نقطة توقف — تنكسر على الجوال */
@media (max-width: 560px) {
  .arch-grid { grid-template-columns: 1fr }
  .send-row .btn { min-width: 100% }
  .topbar-in { flex-wrap: wrap }
  .top-stat { text-align: right; width: 100% }
}

/* ══════════════════════════════════════════════════════════════
   تبويب «جميع الإيصالات» — كان صفحة مستقلة (receipts.css).
   أُسقِط منه تعريفا .wrap و .topbar-in لأنهما كانا ١١٠٠px هنا و٩٦٠px
   في صفحة المدير، والدمج بلا إسقاطهما يوسّع الصفحة كلها صامتاً.
   والجدول لا يحتاجهما: .tablewrap فيه overflow-x تلقائي.
   وأُسقِط .lb لأنه معرَّف أعلاه حرفياً.
   ══════════════════════════════════════════════════════════════ */
/* ============================== شريط الإجماليات ============================== */
.summary {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 12px;
}
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 16px; box-shadow: var(--shadow); min-width: 130px; flex: 1;
}
.stat .n { font-size: 22px; font-weight: 800; line-height: 1.2 }
.stat .l { font-size: 11.5px; color: var(--muted); margin-top: 2px }
.stat.warn .n { color: var(--danger) }
.stat.ok .n { color: var(--brand) }

.warnbox {
  background: var(--amber-soft); border: 1px solid #F0D9B8; color: #8a5310;
  border-radius: 12px; padding: 12px 14px; font-size: 13px; font-weight: 600; margin-bottom: 12px;
}

/* ============================== شريط الأدوات ============================== */
.toolbar { display: flex; gap: 10px; align-items: center; margin: 0 0 12px; flex-wrap: wrap }
.search { flex: 1; min-width: 200px }
.search input {
  width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 10px 14px;
  font-family: inherit; font-size: 14px; background: var(--surface);
}
.search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft) }
.toolbar select {
  font-family: inherit; font-size: 13px; font-weight: 600; color: #41505c;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}

.bulkbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--brand-soft); border: 1px solid #BcDEDC; border-radius: 12px;
  padding: 10px 14px; margin-bottom: 12px; font-size: 13px; font-weight: 700; color: var(--brand-2);
}

/* ============================== الجدول ============================== */
/* الجدول يمرّر أفقياً داخل حاويته — الصفحة نفسها لا تمرّر أفقياً أبداً */
.tablewrap {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow-x: auto;
}
.rtable { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 760px }
.rtable th {
  text-align: right; font-size: 11.5px; font-weight: 700; color: var(--muted);
  padding: 11px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: #F7F9FB;
}
.rtable td { padding: 10px 12px; border-bottom: 1px solid #EEF1F4; vertical-align: middle }
.rtable tbody tr:last-child td { border-bottom: none }
.rtable tbody tr:hover { background: #FAFCFD }
.rtable .c-check { width: 38px }
.rtable .c-act { width: 1%; white-space: nowrap }
.rtable .name { font-weight: 700 }
.rtable .trk { font-family: ui-monospace, monospace; font-size: 11.5px; color: #55636e }
.rtable .muted { color: var(--muted); font-size: 12px }
.rtable input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--brand) }
.rowthumb {
  width: 34px; height: 34px; border-radius: 7px; object-fit: cover;
  border: 1px solid var(--line); background: #F1F4F7; cursor: zoom-in; vertical-align: middle;
  margin-inline-end: 8px;
}

/* ============================== العدّاد ============================== */
.days { font-weight: 800; font-size: 12px; padding: 4px 10px; border-radius: 999px; white-space: nowrap }
.days.g { background: var(--brand-soft); color: var(--brand-2) }   /* > ٧ أيام */
.days.y { background: var(--amber-soft); color: var(--amber) }      /* ٣–٧ */
.days.r { background: var(--danger-soft); color: var(--danger) }    /* < ٣ */
.days.n { background: #F1F4F7; color: var(--muted) }                /* مؤرشف */

.tag-unsent {
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: var(--danger-soft); color: var(--danger); margin-inline-start: 6px;
}
.tag-arch {
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: #F1F4F7; color: var(--muted); margin-inline-start: 6px;
}

/* ============================== حزم الأرشيف (ملفات ZIP) ============================== */
.sec { font-size: 16px; margin: 28px 0 4px }
.sec-note { font-size: 12.5px; color: var(--muted); margin: 0 0 12px }
.arch-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--shadow);
}
.arch-row .fn { font-weight: 700; font-family: ui-monospace, monospace; font-size: 12.5px }
.arch-row .meta { font-size: 12px; color: var(--muted) }
.arch-row .dl-badge {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-2);
}
.arch-row .dl-badge.no { background: var(--amber-soft); color: var(--amber) }

@media (max-width: 620px) {
  .stat { min-width: 100px }
  .topbar-in { flex-wrap: wrap }
}

/* ============================================================
   تبويب المستخدمين
   ============================================================ */
.userform { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 12px }
.userform .field label { font-size: 12px; font-weight: 600; color: #48555f; display: block; margin-bottom: 6px }
.userform input, .userform select {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font-family: inherit; font-size: 14px; background: #FBFCFD; color: var(--ink);
}
.userform input:focus, .userform select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.userform-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap }
.userform-actions .gate-err { margin: 0 }

.utable { width: 100%; border-collapse: collapse; font-size: 13.5px }
.utable th {
  text-align: start; font-size: 11.5px; font-weight: 600; color: var(--muted);
  padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.utable td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle }
.utable tr.off { opacity: .5 }
.utable .uname { font-family: ui-monospace, monospace; font-weight: 600 }
.urole { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap }
.urole.admin { background: var(--sent-soft); color: var(--sent) }
.urole.docs { background: var(--brand-soft); color: var(--brand-2) }
.ume { font-size: 11px; color: var(--muted); margin-inline-start: 6px }

@media (max-width: 560px) {
  .userform { grid-template-columns: 1fr }
}
.normhint { font-size: 11.5px; color: var(--brand-2); margin-top: 5px; min-height: 16px }