@font-face { font-family: 'Plex Arabic'; src: url('/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex Arabic'; src: url('/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Plex Arabic'; src: url('/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Plex Arabic'; src: url('/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2') format('woff2'); font-weight: 400; unicode-range: U+0000-00FF; font-display: swap; }

/* ألوان مؤقتة بنفسجي/عنابي — تُضبط على اللوكو الأصلي عند إرفاقه */
:root {
  --purple: #4b144d; /* من اللوكو */
  --purple-600: #3a0f3c;
  --purple-50: #f7eef7;
  --purple-100: #eedcee;
  --burgundy: #8a1c3c;
  --burgundy-50: #fbeef2;
  --bg: #fbf8fb;
  --surface: #ffffff;
  --text: #241a2e;
  --muted: #6c5f78;
  --border: #ebdfeb;
  --ok: #1f7a4d;
  --ok-50: #e8f5ee;
  --warn: #9a6200;
  --warn-50: #fdf4e3;
  --bad: #b3261e;
  --bad-50: #fdecea;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(75, 20, 77, .06), 0 4px 16px rgba(75, 20, 77, .06);
  --font: 'Plex Arabic', 'Segoe UI', Tahoma, 'Noto Sans Arabic', sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.6; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--purple); }
h1, h2, h3 { line-height: 1.3; margin: 0 0 .5rem; }
h1 { font-size: 1.4rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
.boot { padding: 3rem; text-align: center; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.nowrap { white-space: nowrap; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.stack > * + * { margin-top: .75rem; }
.hidden { display: none !important; }

/* أزرار */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .5rem 1.1rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-weight: 600; text-decoration: none; color: var(--text); }
.btn:hover { border-color: var(--purple); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.primary { background: var(--purple); border-color: var(--purple); color: #fff; }
.btn.primary:hover { background: var(--purple-600); }
.btn.danger { color: var(--bad); border-color: #f0c9c5; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.big { min-height: 54px; font-size: 1.1rem; width: 100%; }
.btn.sm { min-height: 36px; padding: .25rem .75rem; font-size: .9rem; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--purple-100); outline-offset: 1px; border-color: var(--purple); }

/* حقول */
label.field { display: block; }
label.field > span { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .95rem; }
label.field > small { display: block; color: var(--muted); margin-top: .2rem; }
input[type=text], input[type=url], input[type=search], input[type=month], input[type=password], input[type=date], input[type=time], input[type=number], input[type=tel], input:not([type]), select, textarea {
  width: 100%; min-height: 46px; padding: .55rem .8rem; border: 1px solid var(--border); border-radius: 12px; background: #fff;
}
textarea { min-height: 90px; resize: vertical; }
input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--purple); vertical-align: middle; }
.check { display: flex; gap: .5rem; align-items: center; min-height: 44px; cursor: pointer; }
.grid2 { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr; } .grid2 .full { grid-column: 1 / -1; } }

/* بطاقات */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }
.card + .card { margin-top: .9rem; }
.card h2 { display: flex; align-items: center; gap: .5rem; }
.cards { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cards.c2 { grid-template-columns: 1fr 1fr; } .cards.c3 { grid-template-columns: repeat(3, 1fr); } }
.cards > .card + .card { margin-top: 0; }

.chip { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .6rem; border-radius: 999px; font-size: .82rem; font-weight: 600; background: var(--purple-50); color: var(--purple); white-space: nowrap; }
.chip.gray { background: #f1eef4; color: var(--muted); }
.chip.red { background: var(--bad-50); color: var(--bad); }
.chip.amber { background: var(--warn-50); color: var(--warn); }
.chip.green { background: var(--ok-50); color: var(--ok); }
.chip.burgundy { background: var(--burgundy-50); color: var(--burgundy); }

/* الشعار */
.logo { display: block; height: auto; max-width: 100%; object-fit: contain; }
.logo-login { max-height: 140px; max-width: 260px; margin: 0 auto 1rem; }
.logo-head { height: 40px; width: auto; max-width: 140px; }
.brand-text { font-weight: 700; color: var(--purple); }
.brand-text .sub { color: var(--burgundy); }

/* الدخول */
.login-wrap { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1rem; background: linear-gradient(180deg, var(--purple-50), var(--bg) 60%); }
.login-card { width: 100%; max-width: 420px; text-align: center; padding: 1.75rem 1.25rem; }
.login-card form { text-align: start; }
.login-card h1 { font-size: 1.35rem; margin-bottom: 1.25rem; }

/* الهيكل */
.shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .75rem; padding: .5rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar .who { font-size: .9rem; color: var(--muted); text-align: end; line-height: 1.3; }
.topbar .who b { color: var(--text); display: block; }
.layout { flex: 1; display: flex; }
.sidenav { display: none; }
.content { flex: 1; min-width: 0; padding: 1rem; padding-bottom: 6rem; max-width: 1200px; margin: 0 auto; width: 100%; }
.bottomnav { position: fixed; bottom: 0; inset-inline: 0; z-index: 20; display: flex; background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
.bottomnav a { flex: 1; text-align: center; padding: .7rem .25rem; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .92rem; min-height: 56px; display: flex; align-items: center; justify-content: center; }
.bottomnav a.active { color: var(--purple); box-shadow: inset 0 3px 0 var(--purple); }
.menu-btn { display: inline-flex; }
@media (min-width: 900px) {
  .sidenav.on { display: block; width: 230px; flex-shrink: 0; background: var(--surface); border-inline-start: 1px solid var(--border); padding: .75rem; position: sticky; top: 57px; height: calc(100vh - 57px); overflow-y: auto; }
  .has-side .bottomnav, .has-side .menu-btn { display: none; }
  .has-side .content { padding-bottom: 2rem; }
}
.sidenav a, .drawer a { display: block; padding: .6rem .8rem; border-radius: 10px; text-decoration: none; color: var(--text); font-weight: 600; }
.sidenav a.active, .drawer a.active { background: var(--purple-50); color: var(--purple); }
.drawer { position: fixed; inset: 0; z-index: 50; background: rgba(30, 15, 45, .4); display: flex; justify-content: flex-start; }
.drawer nav { width: min(300px, 85vw); background: var(--surface); height: 100%; overflow-y: auto; padding: 1rem; }
/* شريط تمرير القائمة الجانبية على حافة الشاشة بجانب الأسماء (لا على يسار القائمة)، ورفيع بلون اللوحة */
.sidenav, .drawer nav { direction: ltr; scrollbar-width: thin; scrollbar-color: #c4a0c6 transparent; }
.sidenav > *, .drawer nav > * { direction: rtl; }
.sidenav::-webkit-scrollbar, .drawer nav::-webkit-scrollbar { width: 6px; }
.sidenav::-webkit-scrollbar-track, .drawer nav::-webkit-scrollbar-track { background: transparent; }
.sidenav::-webkit-scrollbar-thumb, .drawer nav::-webkit-scrollbar-thumb { background: #c4a0c6; border-radius: 6px; }
.sidenav:hover::-webkit-scrollbar-thumb, .drawer nav:hover::-webkit-scrollbar-thumb { background: var(--purple); }

.page-head { display: flex; align-items: flex-start; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--muted); font-size: .95rem; }

.tabs { display: flex; gap: .4rem; overflow-x: auto; margin-bottom: 1rem; padding-bottom: .25rem; }
.tabs button { flex-shrink: 0; min-height: 42px; border-radius: 999px; padding: .3rem 1rem; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-weight: 600; }
.tabs button.active { background: var(--purple); color: #fff; border-color: var(--purple); }
.tabs.need button { border-color: var(--bad); box-shadow: 0 0 0 2px rgba(192,57,43,.25); }

/* المهام */
.section-title { display: flex; align-items: center; gap: .5rem; margin: 1.25rem 0 .6rem; font-size: 1.05rem; }
.overdue-zone { border: 2px solid #f0c9c5; background: var(--bad-50); border-radius: var(--radius); padding: .75rem; }
.overdue-zone .section-title { margin-top: 0; color: var(--bad); }
.task { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }
.task + .task { margin-top: .75rem; }
.task .title { font-size: 1.08rem; font-weight: 700; margin: .25rem 0; }
.task .desc { white-space: pre-wrap; margin: .35rem 0 .6rem; }
.task.p1 { border-inline-start: 5px solid var(--burgundy); }
.task.p2 { border-inline-start: 5px solid var(--purple); }
.task.p3 { border-inline-start: 5px solid #cbbfd8; }
.status-set { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin: .75rem 0; }
@media (min-width: 640px) { .status-set { grid-template-columns: repeat(4, 1fr); } }
.status-set button { min-height: 50px; border-radius: 12px; border: 1px solid var(--border); background: #fff; font-weight: 700; cursor: pointer; }
.status-set button.on { background: var(--purple); color: #fff; border-color: var(--purple); }
.status-set button.on.blocked { background: var(--bad); border-color: var(--bad); }
.status-set button.on.done { background: var(--ok); border-color: var(--ok); }
.proofs { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0; }
.proofs a { font-size: .9rem; }

/* جداول */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { padding: .6rem .7rem; text-align: start; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--purple-50); color: var(--purple-600); font-weight: 700; white-space: nowrap; position: sticky; top: 0; }
tr:last-child td { border-bottom: 0; }
tr.click { cursor: pointer; } tr.click:hover td { background: #fcfaff; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.na { color: var(--muted); font-style: normal; font-size: .85rem; }
.cell-masked { color: #b9adc6; }

/* اتجاه الأداء — يظهر فقط في سياق تقييم أيام 10/20/30 */
.trend { font-weight: 700; white-space: nowrap; }
.trend.up { color: var(--ok); } .trend.down { color: var(--bad); } .trend.flat { color: var(--warn); }

/* حالات */
.state { text-align: center; padding: 2rem 1rem; color: var(--muted); border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface); }
.state.error { color: var(--bad); border-color: #f0c9c5; background: var(--bad-50); }
.notice { padding: .75rem 1rem; border-radius: 12px; background: var(--purple-50); color: var(--purple-600); }
.notice.warn { background: var(--warn-50); color: var(--warn); }
.notice.bad { background: var(--bad-50); color: var(--bad); }
.notice.ok { background: var(--ok-50); color: var(--ok); }
.notice.rest { text-align: center; font-size: 1.1rem; line-height: 1.8; }
.skeleton { height: 90px; border-radius: var(--radius); background: linear-gradient(90deg, #f1ecf6, #f8f5fb, #f1ecf6); background-size: 200% 100%; animation: sk 1.2s infinite; }
.skeleton + .skeleton { margin-top: .75rem; }
@keyframes sk { to { background-position: -200% 0; } }

#toast { position: fixed; bottom: 80px; inset-inline: 0; margin: auto; width: fit-content; max-width: 92vw; z-index: 100; }
#toast div { background: #2b1e37; color: #fff; padding: .7rem 1.1rem; border-radius: 12px; box-shadow: var(--shadow); margin-top: .4rem; }
#toast div.bad { background: var(--bad); }

dialog { border: 0; border-radius: 18px; padding: 0; width: min(720px, 96vw); max-height: 92vh; box-shadow: 0 20px 60px rgba(40, 20, 60, .3); }
dialog::backdrop { background: rgba(30, 15, 45, .45); }
dialog .dlg-head { display: flex; align-items: center; gap: .5rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: #fff; z-index: 1; }
dialog .dlg-body { padding: 1.1rem; }
dialog .dlg-foot { display: flex; gap: .5rem; padding: .9rem 1.1rem; border-top: 1px solid var(--border); position: sticky; bottom: 0; background: #fff; flex-wrap: wrap; }

.kpi { display: flex; gap: .75rem; flex-wrap: wrap; }
.kpi div { flex: 1; min-width: 110px; background: var(--purple-50); border-radius: 12px; padding: .6rem .8rem; }
.kpi b { display: block; font-size: 1.4rem; color: var(--purple); }
.kpi div.bad b { color: var(--bad); }
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: .55rem 0; border-bottom: 1px solid var(--border); }
.list li:last-child { border-bottom: 0; }

/* التقرير للطباعة */
.report { background: #fff; }
.report-head { display: flex; align-items: center; gap: 1rem; border-bottom: 3px solid var(--purple); padding-bottom: .75rem; margin-bottom: 1rem; }
.report-head .logo { max-height: 120px; width: auto; }
@media print {
  .topbar, .sidenav, .bottomnav, .no-print, #toast { display: none !important; }
  body { background: #fff; }
  .content { padding: 0; max-width: none; }
  .card { box-shadow: none; break-inside: avoid; }
  th { position: static; }
}
.print-only { display: none; }
@media print { .print-only { display: block; } }
.topbar > a { text-decoration: none; }
.topbar .brand-text { white-space: nowrap; font-size: .95rem; }
@media (max-width: 420px) { .topbar .brand-text .sub { display: none; } }
/* أوراق المهام اليومية */
.cl-sec { margin: 1.25rem 0 .25rem; color: var(--purple); border-bottom: 1px solid var(--border); padding-bottom: .25rem; }
.cl-item { padding: .6rem 0; border-bottom: 1px dashed var(--border); }
.cl-item:last-child { border-bottom: 0; }
.cl-opts { grid-template-columns: repeat(3, 1fr) !important; margin: .5rem 0; }
.cl-opts button { min-height: 42px; }
.cl-rules ol { padding-inline-start: 1.25rem; margin: .25rem 0; }
.cl-rules li + li { margin-top: .35rem; }
.cl-table td:first-child { width: 2rem; text-align: center; }
.cl-sigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.cl-sig { border: 1px solid var(--border); border-radius: 10px; padding: .6rem; min-height: 90px; }
.cl-line { border-bottom: 1px solid #999; height: 40px; }
@media print { .cl-sigs { break-inside: avoid; } .cl-table { font-size: 12px; } }

/* الإشعارات */
.bell { position: relative; font-size: 1.15rem; min-width: 44px; }
.bell-badge { position: absolute; top: 2px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--bad); color: #fff; font-size: .72rem; font-weight: 700; line-height: 18px; text-align: center; }
/* طلب المالك 2026-10-14: شريط آخر تحديث في الرئيسية فقط، والكروب بشاشة كاملة مثل الواتساب */
.shell:not([data-route="home"]) .idari-strip { display: none; }
.shell[data-route="goods"] .askbar, .shell[data-route="goods"] .bottomnav { display: none; }
.shell[data-route="goods"] .content { padding-bottom: .5rem; }
.idari-strip { padding: .3rem 1rem; font-size: .82rem; color: var(--muted); background: var(--purple-50); border-bottom: 1px solid var(--border); }
.push-banner { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; font-size: .9rem; background: var(--warn-50); color: var(--warn); border-bottom: 1px solid var(--border); }
.push-banner > span { flex: 1; }
.notif-list { display: flex; flex-direction: column; gap: .5rem; max-height: 60vh; overflow-y: auto; }
.notif { display: block; width: 100%; text-align: start; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .6rem .75rem; cursor: pointer; font: inherit; color: inherit; }
.notif.unread { border-inline-start: 4px solid var(--purple); background: var(--purple-50); }
.notif .row { gap: .5rem; flex-wrap: wrap; }
.notif-body { white-space: pre-line; margin: .3rem 0; }
.chip.k-task, .chip.k-task_assigned { background: var(--warn-50); color: var(--warn); }
.chip.k-data_update { background: var(--ok-50); color: var(--ok); }
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 .75rem; max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: .25rem .75rem; }
.lbl { font-weight: 600; margin-bottom: .3rem; }

/* الإضافات */
.att-card .row .btn { flex: 1; }
.btn.big { min-height: 52px; font-size: 1.05rem; }
.maint { display: flex; gap: .75rem; align-items: flex-start; }
.maint > .stack { flex: 1; min-width: 0; }
.maint img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.card.late { border-inline-start: 4px solid var(--bad); }
.summary-card { margin-bottom: 1rem; border-top: 4px solid var(--purple); }
.honor-board { margin-bottom: 1rem; background: linear-gradient(180deg, var(--purple-50), var(--surface)); }
@media (max-width: 520px) { .maint { flex-direction: column; } .maint img { width: 100%; height: 180px; } }
tr.me td { background: var(--purple-50); font-weight: 600; }
.checkin { text-align: center; max-width: 420px; margin: 2rem auto; }
.checkin .big-icon { font-size: 4rem; }
.qr-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 1rem 0; }
.qr-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.qr-card img { width: 100%; max-width: 220px; aspect-ratio: 1; }
@media print { .qr-card { break-inside: avoid; border: 2px solid #000; } .tabs, .page-head .sub, form.card { display: none !important; } }

/* موقع الزبائن */
body.site { background: var(--bg); }
.site-head { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.site-logo { height: 40px; width: auto; }
.site-hero { text-align: center; padding: 2.5rem 1rem 2rem; background: linear-gradient(180deg, var(--purple-50), var(--bg)); }
.site-hero h1 { color: var(--purple); margin: 0 0 .5rem; }
.site-main { max-width: 1100px; margin: 0 auto; padding: 0 1rem 2rem; }
.site-main section { margin: 2rem 0; }
.site-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.site-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; }
.site-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.site-card-body { padding: .8rem 1rem; display: flex; flex-direction: column; gap: .4rem; }
.site-card h3 { margin: 0; font-size: 1.05rem; }
.site-card.video .play { aspect-ratio: 9 / 10; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: #fff; background: linear-gradient(135deg, var(--purple), var(--burgundy)); }
.site-soon { text-align: center; padding: 1.5rem; border: 2px dashed var(--border); border-radius: 14px; }
.site-foot { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; color: var(--muted); padding: 1.5rem 0; border-top: 1px solid var(--border); }
.row.center { justify-content: center; }
.pin-row { gap: .4rem; flex-wrap: nowrap; }
.pin-row input { flex: 1; min-width: 0; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 .75rem; }
.kpi-extra { display: block; margin-top: .2rem; }

/* ---- أوراق المهام بشكلها الورقي (كما في النماذج المسلّمة) ---- */
.paper { position: relative; background: #fff; color: #111; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.06);
  max-width: 820px; margin: 0 auto 1rem; padding: 1.25rem 1.5rem 1.5rem; overflow: hidden; font-size: .95rem; }
.paper > * { position: relative; }
.pp-wm { position: absolute !important; inset: 18% 15% auto; display: flex; justify-content: center; opacity: .06; pointer-events: none; }
.pp-wm .logo, .pp-wm .pp-wm-img { width: 70%; height: auto; filter: grayscale(1); }
.pp-wm .brand-text { font-size: 4rem; }
.pp-head { text-align: center; margin-bottom: .5rem; }
.pp-head .logo { max-height: 110px; width: auto; filter: grayscale(1); }
.pp-brand { font-weight: 700; font-size: .9rem; }
.pp-title { text-align: center; font-weight: 800; margin: .5rem 0; }
.pp-title.start { text-align: start; }
.pp-sheet-title { text-align: center; font-weight: 800; font-size: 1.05rem; text-decoration: underline; text-underline-offset: 4px; margin: .75rem 0 .25rem; }
.pp-info { width: 100%; border: 1.5px solid #222; border-collapse: collapse; margin: .25rem 0 .5rem; }
.pp-info td { border-bottom: 1px solid #222; padding: .45rem .6rem; vertical-align: middle; }
.pp-info tr:last-child td { border-bottom: 0; }
.pp-lines > div { margin: .3rem 0; }
.pp-fill { display: inline-block; min-width: 7rem; border-bottom: 1px dotted #555; padding: 0 .25rem; font-weight: 600; }
.pp-num { display: inline-block; margin-inline-end: 1rem; }
.pp-num .pp-fill { min-width: 5rem; }
.pp-input { border: 0; border-bottom: 1px dotted #555; border-radius: 0; background: transparent; padding: .1rem .25rem; min-width: 7rem; width: auto; font: inherit; font-weight: 600; min-height: 0; }
select.pp-input { padding-inline-end: 1.5rem; }
.pp-rules p { margin: .3rem 0; font-weight: 700; white-space: pre-wrap; }
.pp-footer { text-align: center; font-weight: 600 !important; margin-top: .75rem !important; }
.pp-sec { font-weight: 800; text-decoration: underline; text-underline-offset: 4px; margin: .9rem 0 .3rem; }
.pp-table { width: 100%; border: 1.5px solid #222; border-collapse: collapse; background: transparent; }
.pp-table td, .pp-table th { border-bottom: 1px solid #222; padding: .35rem .5rem; background: transparent; position: static; }
.pp-table th { font-weight: 800; text-align: center; }
.pp-table tr:last-child td { border-bottom: 0; }
.pp-row { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr); align-items: center; gap: .5rem; }
.pp-no { font-weight: 700; }
.pp-hint { font-size: .8rem; color: #555; }
.pp-opts { display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: center; }
.pp-opt { display: inline-flex; align-items: center; gap: .3rem; background: none; border: 0; padding: .2rem .1rem; font: inherit; color: inherit; cursor: pointer; min-height: 36px; }
span.pp-opt { cursor: default; }
.pp-box { width: 22px; height: 22px; border: 1.5px solid #222; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; line-height: 1; border-radius: 3px; background: #fff; }
.pp-opt.on.ok .pp-box { background: #e7f6ec; color: #17803d; border-color: #17803d; }
.pp-opt.on.no .pp-box { background: #fdecec; color: #b42318; border-color: #b42318; }
.pp-opt.on.mid .pp-box { background: #fff5e0; color: #a15c00; border-color: #a15c00; }
.pp-note-wrap { display: flex; align-items: center; gap: .3rem; }
.pp-note-l { white-space: nowrap; font-size: .9rem; }
.pp-note { flex: 1; border: 0; border-bottom: 1px dotted #555; border-radius: 0; background: transparent; padding: .1rem .25rem; font: inherit; min-height: 0; min-width: 0; width: 100%; }
span.pp-note { display: inline-block; min-height: 1.3em; white-space: pre-wrap; }
.pp-cols td.pp-task { width: 55%; }
.pp-cols .pp-c { width: 4.5rem; text-align: center; }
.pp-cols .pp-c .pp-opt { justify-content: center; }
.pp-ratings { margin-top: .5rem; }
.pp-rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem 1rem; }
.pp-rcell .pp-fill { min-width: 4rem; }
.pp-notes { margin-top: .9rem; }
.pp-textarea { display: block; width: 100%; border: 0; border-bottom: 1px dotted #555; border-radius: 0; line-height: 1.8em; min-height: 3.6em; padding: 0 .25rem; font: inherit; white-space: pre-wrap; }
.pp-sigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-top: 1.5rem; padding-top: .5rem; border-top: 1.5px solid #222; text-align: center; }
.pp-sig-l { font-weight: 800; }
.pp-sig-line { border-bottom: 1px dotted #555; height: 2.2rem; margin: 0 1rem; }
.pp-signed { margin-top: .3rem; }
.pp-actions { margin: .25rem auto 1.25rem; max-width: 820px; }
@media (max-width: 640px) {
  .paper { padding: 1rem .75rem; font-size: .9rem; }
  .pp-row { grid-template-columns: 1fr; gap: .2rem; }
  .pp-info td { display: block; border-bottom: 1px solid #222; }
  .pp-cols td.pp-task { width: auto; }
  .pp-cols .pp-c { width: 2.6rem; padding: .2rem; }
  .pp-cols th:last-child, .pp-cols td.pp-c-note { width: 30%; }
}
@media print {
  .paper { border: 0; box-shadow: none; max-width: none; padding: 0; font-size: 12px; }
  .pp-opt { min-height: 0; }
  .pp-box { width: 14px; height: 14px; font-size: 11px; }
  .pp-wm { opacity: .07; }
  .pp-table tr { break-inside: avoid; }
}
.paper input.pp-note, .paper input.pp-input, .paper select.pp-input, .paper textarea.pp-textarea { border: 0; border-bottom: 1px dotted #555; border-radius: 0; background-color: transparent; box-shadow: none; padding: .1rem .25rem; min-height: 0; }
.paper input.pp-note { width: 100%; }
.paper input.pp-input { width: auto; max-width: 11rem; }
.paper textarea.pp-textarea { min-height: 3.6em; resize: none; border-bottom: 1px dotted #555; }
.paper input:focus, .paper select:focus, .paper textarea:focus { outline: 2px solid var(--purple); outline-offset: 1px; }

/* صور بنود أوراق المهام، وخانة «لماذا لم يتم» */
.paper .pp-photos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .25rem; }
.paper .pp-photos[hidden] { display: none; }
.pp-cam { font: inherit; font-size: .8rem; padding: .15rem .55rem; border: 1px dashed #555; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
.pp-cam:disabled { opacity: .6; cursor: wait; }
.pp-thumb { position: relative; display: inline-block; }
.pp-thumb-btn { padding: 0; border: 1px solid #333; border-radius: 4px; background: none; cursor: zoom-in; display: block; }
.pp-thumb-btn img { width: 52px; height: 52px; object-fit: cover; display: block; border-radius: 3px; }
.pp-thumb-x { position: absolute; top: -7px; inset-inline-start: -7px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: #b3261e; color: #fff; font-size: .8rem; line-height: 20px; padding: 0; cursor: pointer; }
.pp-photo-big { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; }
.paper input.pp-note.need { border-bottom: 2px solid #b3261e; background: #fdecea; }
.paper input.pp-note.need::placeholder { color: #b3261e; }
@media print { .pp-cam, .pp-thumb-x { display: none !important; } .paper input.pp-note.need { background: none; } }

/* صفحة الكاشيرات */
table.cashiers tfoot tr.total td { border-top: 2px solid currentColor; background: var(--surface-2, rgba(0,0,0,.04)); }
table.cashiers td.num, table.cashiers th { white-space: nowrap; }
@media (max-width: 640px) { table.cashiers td, table.cashiers th { padding: .4rem .35rem; font-size: .85rem; } table.cashiers .small { font-size: .7rem; } }
.pp-sig-act { margin-top: .4rem; }
.pp-sig-ok { color: #1b7f3b; font-weight: 800; }
.pp-sig-line .small { padding-top: .6rem; }
/* جرد «الإداري»: اختيار المستودع */
.whs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.wh-card { display: flex; flex-direction: column; gap: .15rem; align-items: flex-start; text-align: start; background: var(--surface); border: 1.5px solid var(--purple-50); border-radius: 12px; padding: .55rem .75rem; cursor: pointer; font: inherit; color: inherit; }
.wh-card b { color: var(--purple); }
.wh-card.on { border-color: var(--purple); background: var(--purple-50); }
.wh-card .bad { color: var(--bad); }
/* تعديل بنود أوراق المهام */
.tpl-sec { padding: .75rem; display: flex; flex-direction: column; gap: .5rem; }
.tpl-item { display: grid; grid-template-columns: auto 1fr; gap: .25rem .5rem; align-items: start; border-top: 1px dashed var(--border); padding-top: .5rem; }
.tpl-item textarea { width: 100%; resize: vertical; }
.tpl-no { font-weight: 700; color: var(--purple); padding-top: .4rem; }
.tpl-ctl { grid-column: 2; flex-wrap: wrap; gap: .25rem; }
.tpl-ctl select { max-width: 170px; flex: 1; }
.tpl-ctl .btn { padding-inline: .5rem; }
/* اللوائح */
.pol .pp-title { margin-bottom: .5rem; }
.pol-intro { font-weight: 700; }
.pol-list { margin: .25rem 0 .75rem; padding-inline-start: 1.4rem; }
.pol-list li { margin: .2rem 0; line-height: 1.7; }
/* معالجة السوالب */
.neg-list { max-height: 50vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.neg-row { display: flex; gap: .5rem; align-items: center; padding: .45rem .6rem; border-bottom: 1px solid var(--border); cursor: pointer; }
.neg-name { flex: 1; min-width: 0; }
.neg-act { position: sticky; bottom: 0; margin-top: .5rem; }
.whs .bad { color: var(--bad); }
/* العمل بدون إنترنت: شريط الحالة وعدد غير المتزامن */
.offline-bar { display: flex; flex-wrap: nowrap; gap: .5rem; align-items: center; padding: .2rem .75rem; min-height: 30px; background: #fff6e0; border-bottom: 1px solid #f0d9a0; font-size: .8rem; line-height: 1.3; overflow: hidden; white-space: nowrap; cursor: pointer; }
.offline-bar .ob-what { font-weight: 700; }
.offline-bar .ob-hint { color: var(--muted, #666); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.offline-bar .ob-btn { font: inherit; font-weight: 700; padding: .1rem .55rem; border-radius: 999px; border: 1px solid currentColor; background: #fff; color: var(--warn); cursor: pointer; flex: none; }
.offline-bar .ob-btn.bad { color: var(--bad); }
.offline-bar.off { background: #fdecea; border-color: #f0c9c5; }
.offline-bar.hidden { display: none; }

/* المساعد */
.askbar { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; background: var(--purple-50); border-bottom: 1px solid var(--border); }
.askbar input { flex: 1; min-width: 0; border-radius: 999px; padding-inline: 1rem; }
.askbar-icon { color: var(--purple); font-size: 1.1rem; }
.chat-card { display: flex; flex-direction: column; gap: .75rem; }
.chat { display: flex; flex-direction: column; gap: .6rem; max-height: 60vh; max-height: 60dvh; overflow-y: auto; padding: .25rem; }
.msg { max-width: 85%; padding: .6rem .85rem; border-radius: 14px; line-height: 1.7; }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-at { font-size: .75rem; color: var(--muted); margin-top: .25rem; }
.msg.user { align-self: flex-start; background: var(--purple); color: #fff; border-end-start-radius: 4px; }
.msg.user .msg-at { color: var(--purple-100); }
.msg.assistant { align-self: flex-end; background: var(--surface); border: 1px solid var(--border); border-end-end-radius: 4px; }
.msg.wait { color: var(--muted); }
.msg.error { align-self: center; background: var(--bad-50); color: var(--bad); }
.chat-input { display: flex; gap: .5rem; align-items: flex-end; }
.chat-input textarea { flex: 1; min-width: 0; resize: vertical; }
@media print { .askbar { display: none; } }
.msg-img { display: block; max-width: 220px; max-height: 220px; border-radius: 10px; margin-bottom: .35rem; }
.chat-photo { display: flex; align-items: center; gap: .5rem; }
.chat-photo img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }

/* كروب البضاعة: مثل الواتساب */
.gchat { display: flex; flex-direction: column; height: calc(100dvh - 260px); min-height: 320px; }
.gchat-tabs { margin-bottom: .5rem; }
.gchat-list { flex: 1; overflow-y: auto; padding: .5rem .25rem; background: var(--purple-50); border-radius: 14px; display: flex; flex-direction: column; gap: .35rem; overscroll-behavior: contain; }
.gchat-day { align-self: center; font-size: .78rem; color: var(--muted); background: var(--surface); padding: .15rem .7rem; border-radius: 999px; margin: .4rem 0; }
.gmsg { display: flex; flex-direction: column; align-items: flex-start; max-width: 85%; align-self: flex-start; }
.gmsg.mine { align-items: flex-end; align-self: flex-end; }
.gbub { background: var(--surface); border-radius: 14px; border-start-start-radius: 4px; padding: .45rem .65rem; box-shadow: 0 1px 1px rgb(0 0 0 / 6%); min-width: 6rem; }
.gmsg.mine .gbub { background: var(--purple-100); border-start-start-radius: 14px; border-start-end-radius: 4px; }
.gname { font-size: .8rem; font-weight: 700; color: var(--purple); margin-bottom: .15rem; }
.gname span { font-weight: 400; color: var(--muted); }
.gimg { display: block; max-width: 100%; width: 230px; height: auto; max-height: 420px; object-fit: contain; background: rgba(0,0,0,.04); border-radius: 10px; margin-bottom: .25rem; }
.gmsg-pending .gbub { opacity: .85; outline: 1px dashed var(--purple); }
.gtext { white-space: pre-wrap; overflow-wrap: anywhere; }
.gtime { font-size: .7rem; color: var(--muted); text-align: end; margin-top: .15rem; display: flex; gap: .5rem; justify-content: flex-end; }
.glink { background: none; border: 0; color: var(--muted); font: inherit; padding: 0; text-decoration: underline; cursor: pointer; }
.gstatus { font-size: .82rem; margin-top: .3rem; padding: .2rem .45rem; border-radius: 8px; background: var(--warn-50); color: var(--warn); }
.gstatus.ok { background: var(--ok-50); color: var(--ok); }
.gstatus.done { background: var(--ok-50); color: var(--ok); font-weight: 700; }
.gstatus.bad { background: var(--bad-50); color: var(--bad); }
.gbtns { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.gbtn { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: .45rem .8rem; font: inherit; font-size: .88rem; cursor: pointer; }
.gbtn.ok { border-color: var(--ok); color: var(--ok); }
.gbtn.bad { border-color: var(--bad); color: var(--bad); }
.gchat-bar { padding-top: .5rem; }
.gchat-row { display: flex; gap: .4rem; align-items: flex-end; }
.gchat-row textarea { flex: 1; resize: none; border-radius: 22px; padding: .6rem .9rem; min-height: 44px; max-height: 120px; }
.gchat-icon, .gchat-send { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; font-size: 1.2rem; cursor: pointer; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / 10%); }
.gchat-send { background: var(--purple); color: #fff; transform: scaleX(-1); }
.gchat-send:disabled { opacity: .5; }
.gchat-preview { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.gchat-preview img { max-height: 110px; border-radius: 10px; }
.gdetails { font-size: .85rem; margin-top: .3rem; padding: .25rem .45rem; border-radius: 8px; background: var(--purple-50); }
.gchat-details { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: .5rem; margin-bottom: .4rem; }
.gchat-drow { display: flex; gap: .4rem; align-items: center; }
.gchat-drow input { min-width: 0; flex: 1; }
.gchat-drow input[type=number] { flex: 0 0 6.8rem; padding-inline: .5rem; }
.gseen { color: var(--muted); letter-spacing: -.15em; }
.gseen.on { color: #2a8fd6; }
.gchat-install { margin-inline-start: auto; border: 0; background: none; color: var(--purple); font: inherit; font-size: .9rem; cursor: pointer; white-space: nowrap; }

/* صلاحيات المستخدمين (public/perms.js) */
.perm-layout { display: grid; grid-template-columns: 230px 1fr; gap: 1rem; align-items: start; }
.perm-users { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .4rem; position: sticky; top: .5rem; max-height: calc(100vh - 2rem); overflow: auto; }
.perm-users-head { font-weight: 700; padding: .3rem .5rem; color: var(--purple); }
.perm-user { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: start; background: none; border: 0; border-radius: 10px; padding: .45rem .6rem; cursor: pointer; position: relative; }
.perm-user:hover { background: var(--purple-50); }
.perm-user.on { background: var(--purple); color: #fff; }
.perm-user.on .small { color: #f0dff0; }
.perm-user.off b { text-decoration: line-through; opacity: .7; }
.perm-user .small { color: var(--muted); }
.perm-badge { font-size: .72rem; background: var(--warn-50); color: var(--warn); border-radius: 99px; padding: 0 .45rem; margin-top: .15rem; }
.perm-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; min-width: 0; }
.perm-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.perm-flags { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .25rem 1rem; padding: .5rem .75rem; background: var(--purple-50); border-radius: 10px; margin-bottom: .75rem; }
.perm-tools { flex-wrap: wrap; gap: .4rem; }
.perm-search { flex: 1 1 220px; max-width: 320px; }
.perm-group { margin-top: .75rem; }
.perm-group-title { font-weight: 700; color: var(--purple); border-bottom: 2px solid var(--purple-100); padding-bottom: .2rem; margin-bottom: .2rem; }
.perm-page { border-bottom: 1px solid var(--border); padding: .2rem 0 .35rem; }
.perm-page-name { min-height: 38px; }
.perm-acts { display: flex; flex-wrap: wrap; gap: .3rem .5rem; padding-inline-start: 1.9rem; }
.perm-act { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; background: var(--bg); border: 1px solid var(--border); border-radius: 99px; padding: .15rem .6rem; cursor: pointer; }
.perm-act:has(input:not(:checked)) { background: var(--bad-50); border-color: #f2c4c0; text-decoration: line-through; color: var(--muted); }
.perm-act.dim { opacity: .45; }
.perm-save { position: sticky; bottom: 0; display: flex; align-items: center; gap: .5rem; background: var(--surface); border-top: 1px solid var(--border); padding: .6rem 0 .2rem; margin-top: .75rem; }
.perm-save .perm-dirty { display: none; color: var(--warn); font-weight: 600; }
.perm-save.dirty .perm-dirty { display: inline; }
@media (max-width: 760px) {
  .perm-layout { grid-template-columns: 1fr; }
  .perm-users { position: static; max-height: 210px; }
  .perm-acts { padding-inline-start: .5rem; }
}
.perm-row { display: grid; grid-template-columns: 1fr minmax(170px, 240px) 70px; gap: .5rem; align-items: center; min-height: 44px; }
.perm-level { padding: .3rem .5rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); }
.perm-level[data-level="none"] { background: var(--bad-50); color: var(--bad); }
.perm-level[data-level="view"] { background: var(--warn-50); color: var(--warn); }
.perm-level[data-level="user"] { background: var(--purple-50); color: var(--purple); }
.perm-level[data-level="admin"] { background: var(--ok-50); color: var(--ok); }
.perm-level[data-level="custom"] { background: #eef2fb; color: #2a4a8a; }
.perm-page .perm-acts { padding: .2rem 0 .3rem; }
@media (max-width: 760px) { .perm-row { grid-template-columns: 1fr auto; } .perm-row .perm-level { grid-column: 1 / -1; grid-row: 2; } }
.perm-acts[hidden] { display: none; }

/* رسالة فُتحت من إشعار */
.gmsg-focus { outline: 3px solid var(--purple); outline-offset: 2px; transition: outline-color 2s; }

/* عارض صور الكروب */
.gviewer { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.gviewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gviewer-x { position: absolute; top: calc(env(safe-area-inset-top) + .75rem); inset-inline-start: .75rem; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 1.5rem; cursor: pointer; }
.gimg { cursor: zoom-in; }