/* ===== groups-page.css — طبقة صفحة المجموعات فوق ds-core (VISUAL MASTER) ===== */
/* ألوان دلالية ثابتة داخل الجدول (لا تتبع لون الهوية) لتباين مريح للعين في أي ثيم —
   الأرقام/المراجع/⚡ بلون نيلي مميّز، والنجاح أخضر، والتنبيه برتقالي، فلا تتوحّد الألوان */
/* الأرقام/المراجع/⚡/المربّعات تتبع لون الثيم (--accent) لتوحيد كل الصفحة مع الهيدر */
:root{ --tref:var(--accent, #4f46e5); }
#rows .gref .code, .tbl .gref .code{ color:var(--ink) !important; font-weight:800; font-size:14.5px; letter-spacing:.01em; }
#rows .stick .cell-sub{ color:var(--muted); font-size:11px; font-weight:600; margin-top:3px; }
#rows .vref-link, #rows .tvref{ color:var(--tref) !important; }
#rows .vref-link:hover, #rows .tvref:hover{ background:color-mix(in srgb, var(--tref) 12%, transparent) !important; }
#rows .finlk.on{ background:linear-gradient(140deg, var(--accent), var(--accent-2)) !important; box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent) !important; color:#fff !important; }
#rows .btn.subtle{ background:color-mix(in srgb, var(--tref) 12%, transparent) !important; color:var(--tref) !important; }
#rows .btn.subtle:hover{ background:color-mix(in srgb, var(--tref) 20%, transparent) !important; }
#rows .aco, #rows .namecell, #rows .nm2{ color:var(--ink); }   /* اسم الشركة/المجموعة يبقى حبريًّا لا أخضر */
#rows .aco{ color:var(--ink) !important; }
.tbl tbody tr:hover .code{ color:var(--ink) !important; }

.app{min-height:100vh}
.apphead{position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter:saturate(180%) blur(10px); color:var(--ink); border-bottom:1px solid var(--line); box-shadow:var(--sh-1)}
.apphead-in{max-width:1280px; margin:0 auto; padding:6px 18px; display:flex; align-items:center; gap:14px}
.appbrand{display:flex; align-items:center; gap:10px; min-width:0}
.appbrand .lg{width:34px; height:34px; border-radius:10px; background:linear-gradient(140deg,var(--accent),var(--accent-2)); display:grid; place-items:center; font-weight:800; font-size:15px; box-shadow:var(--sh-2); color:#fff; overflow:hidden}
.appbrand b{font-size:15px; font-weight:800; letter-spacing:-.01em; display:block; line-height:1.15; white-space:nowrap; color:var(--ink)}
.appbrand .pagemark{width:34px; height:34px; min-width:34px; border-radius:10px; background:linear-gradient(140deg,var(--accent),var(--accent-2)); color:#fff; display:grid; place-items:center; font-weight:800; font-size:16px; line-height:1; flex:0 0 auto; box-shadow:var(--sh-1)}
.appbrand span{font-size:11px; color:var(--muted)}
.navseg{display:inline-flex; gap:2px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:3px; margin:0 auto; flex-wrap:wrap}
.navseg a{font-size:12px; font-weight:600; color:var(--muted); text-decoration:none; padding:6px 12px; border-radius:999px; transition:.16s var(--ease); white-space:nowrap}
.navseg a:hover{color:var(--ink); background:var(--surface)}
.navseg a.active{background:var(--accent); color:#fff; box-shadow:var(--sh-1)}
/* شريط تنقّل أيقوني يوفّر المساحة: أيقونة فقط، والنشِط يُظهر اسمه بجانبه */
.navseg a{display:inline-flex; align-items:center; padding:7px 9px; position:relative}
.navseg a svg{width:16px; height:16px; flex:0 0 auto}
.navseg a .nl{white-space:nowrap; overflow:hidden}
/* النشِط: الاسم ثابت بجانب الأيقونة */
.navseg a.active .nl{max-width:140px; opacity:1; margin-inline-start:7px}
/* غير النشِط: الاسم «تلميح» عائم لا يزحزح الشريط (يمنع الاهتزاز نهائيًّا) */
.navseg a:not(.active) .nl{position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%) translateY(-4px); background:var(--ink); color:var(--bg); font-size:11px; font-weight:700; line-height:1.2; padding:5px 9px; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .14s var(--ease), transform .14s var(--ease); z-index:40; box-shadow:var(--sh-2)}
.navseg a:not(.active) .nl::after{content:""; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-bottom-color:var(--ink)}
.navseg a:not(.active):hover{background:color-mix(in srgb,var(--accent) 10%,transparent); color:var(--accent)}
.navseg a:not(.active):hover .nl{opacity:1; transform:translateX(-50%) translateY(0)}
.hicon{width:36px; height:36px; border-radius:11px; border:1px solid var(--line); background:var(--surface-2); color:var(--muted); cursor:pointer; display:grid; place-items:center; transition:.16s var(--ease)}
.hicon:hover{color:var(--accent); border-color:var(--accent); background:var(--surface); transform:translateY(-1px); box-shadow:var(--sh-1)}
.hicon svg{width:18px; height:18px} .hicon.danger:hover{color:var(--danger); border-color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,var(--surface))}
.page{max-width:1280px; margin:0 auto; padding:14px 18px 70px}
.page-title{display:flex; align-items:baseline; gap:10px; margin:0 0 6px}
.page-title h1{margin:0; font-size:21px; font-weight:800; letter-spacing:-.02em}
.page-title p{margin:0; color:var(--muted); font-size:12.5px}
/* أيقونة الاستيراد بجانب كلمة «المجموعات» مباشرةً */
.page-title #importBtn{margin-inline-start:0; align-self:center; width:36px; height:36px; padding:0; display:inline-grid; place-items:center; border-radius:11px; flex:0 0 auto}
.page-title #importBtn svg{width:18px; height:18px}
#nusukBtn,#importBtn{margin-inline-start:auto; align-self:center; width:40px; height:40px; padding:0; justify-content:center; border-radius:12px; flex:0 0 auto}
#nusukBtn svg,#importBtn svg{width:19px; height:19px}
/* شارة العدّ على التبويبات */
.tab .c{font-variant-numeric:tabular-nums; background:var(--surface-2); color:var(--muted); border-radius:999px; padding:1px 7px; font-size:11px}
.tab.on .c{background:rgba(255,255,255,.22); color:#fff}
.tbl-topbar .gridtools .iconbtn{position:relative}

/* بطاقات الملخّص مضغوطة */
/* صفّ البطاقات مع أيقونة الاستيراد كأول عنصر — نصف العرض ومتوسّط في الصفحة */
.kpis-wrap{display:flex; gap:7px; align-items:stretch; margin:0 auto 3px; width:fit-content; max-width:100%; flex-wrap:wrap; justify-content:center}
.kpis-wrap .kpis{display:flex; flex-wrap:wrap; gap:7px; grid-template-columns:none; flex:0 1 auto; margin-bottom:0}
.kpis-wrap .kpi{width:auto; min-width:0}
.kpis-wrap #importBtn{margin:0; flex:0 0 auto; width:46px; min-width:46px; height:auto; align-self:stretch; padding:0; display:grid; place-items:center; border-radius:12px}
.kpis-wrap #importBtn svg{width:19px; height:19px}
@media(max-width:900px){ .kpis-wrap{max-width:100%} }
/* ===== بطاقات KPI — تدرّج هرمي: رئيسي بارز / ثانوي هادئ ===== */
.kpis{gap:8px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin-bottom:2px}
.kpis-wrap .kpi::before{display:none}
.kpis-wrap .kpi{position:relative; overflow:hidden; display:flex; align-items:center; gap:11px; width:auto; min-width:0;
  padding:9px 14px 9px 12px; border-radius:13px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease)}
.kpis-wrap .kpi:hover{transform:translateY(-2px); box-shadow:var(--sh-2); border-color:color-mix(in srgb,var(--kc) 45%,var(--line))}
.kpi .ico{flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--kc) 13%,var(--surface)); color:var(--kc); border:1px solid color-mix(in srgb,var(--kc) 22%,transparent)}
.kpi .ico svg{width:18px; height:18px}
.kpi .body{display:flex; flex-direction:column; line-height:1.06; min-width:0}
.kpi .v{font-size:20px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.kpi .t{font-size:11px; font-weight:700; color:var(--muted); margin-top:2px; white-space:nowrap}
.kpi .sub{font-size:9.5px; color:var(--faint); margin-top:1px; white-space:nowrap}
/* رئيسي: أبرز بصريًّا (الإجمالي + المدفوعة) */
.kpis-wrap .kpi.primary{background:linear-gradient(150deg,color-mix(in srgb,var(--kc) 9%,var(--surface)),var(--surface) 62%);
  border-color:color-mix(in srgb,var(--kc) 30%,var(--line)); box-shadow:0 2px 8px -1px color-mix(in srgb,var(--kc) 16%,transparent)}
.kpi.primary .ico{background:linear-gradient(140deg,var(--kc),color-mix(in srgb,var(--kc) 62%,#4b3fce)); color:#fff; border-color:transparent;
  box-shadow:0 3px 10px -2px color-mix(in srgb,var(--kc) 45%,transparent)}
.kpi.primary .v{font-size:25px}
.kpi.primary .t{color:color-mix(in srgb,var(--kc) 68%,var(--ink)); font-weight:800}

/* التبويبات */
.tabs{display:flex; flex-wrap:wrap; gap:7px; margin:5px 0 2px}
.tab{font-family:var(--app-font,"Cairo",sans-serif)}
/* عناصر أُزيلت بطلب المستخدم */
#colReset{display:none !important}   /* «عرض تلقائي» — يقوم به زر الاحتواء تلقائيًّا */
#syncStatus{display:none !important}  /* «محلي فقط — لست مسجّلاً» */
.tab{display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); color:var(--muted); font-size:12.5px; font-weight:700; cursor:pointer; transition:.16s var(--ease)}
.tab:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-1px)}
.tab .c{font-variant-numeric:tabular-nums; background:var(--surface-2); color:var(--muted); border-radius:999px; padding:1px 7px; font-size:11px}
.tab.on{background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:var(--sh-2)} .tab.on .c{background:rgba(255,255,255,.22); color:#fff}
.tab .dt{width:7px; height:7px; border-radius:50%}
.tab.t-paid .dt{background:var(--success)} .tab.t-todo .dt{background:var(--faint)} .tab.t-done .dt{background:var(--accent-2)} .tab.t-chg .dt{background:var(--warning)} .tab.t-rev .dt{background:#d97706}

.toolbar{display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin:3px 0}
.synced{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--success); background:var(--success-soft); border:1px solid var(--success-line); border-radius:999px; padding:6px 12px}
.synced .dot{width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 22%,transparent)}
.pushright{margin-inline-start:auto}
.import-lbl{cursor:pointer}

/* زر إنشاء مجموعة جديدة (+) قبل زر متابعة */
.newgrp-btn{width:46px; align-self:stretch; min-height:42px; border-radius:12px; border:1px solid var(--accent); background:linear-gradient(140deg,var(--accent),var(--accent-2)); color:#fff; display:inline-grid; place-items:center; cursor:pointer; box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 34%,transparent); transition:.15s var(--ease); flex:0 0 auto}
.newgrp-btn:hover{transform:translateY(-1px); filter:brightness(1.06)}
.newgrp-btn svg{width:21px; height:21px}

/* أزرار العرض (متابعة/الكل) — كل زر كبطاقة مثل بطاقات KPI؛ الفعّال بلون مميّز */
.viewseg{display:inline-flex; gap:8px; background:transparent; border:0; padding:0; box-shadow:none}
.viewseg .vseg-btn{position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line-strong,var(--line)); border-radius:12px; box-shadow:var(--sh-1); color:var(--muted); font-weight:800; font-size:14px; font-family:inherit; padding:10px 24px; cursor:pointer; transition:.16s var(--ease)}
.viewseg .vseg-btn:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-1px)}
/* الفعّال: بطاقة بيضاء بشريط جانبي وخلفية خفيفة بلون الثيم + نص بلون الثيم (مختلف واضح) */
/* الفعّال: تعبئة صلبة بنفس لون زر «اليوم» + تدرّج متحرك ناعم غير مزعج */
.viewseg .vseg-btn.on{background:linear-gradient(120deg,var(--accent),var(--accent-2),var(--accent)); background-size:220% 100%; border-color:transparent; color:#fff; box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 38%,transparent); animation:vseg-grad 4.5s ease-in-out infinite}
.viewseg .vseg-btn.on:hover{transform:translateY(-2px)}
@keyframes vseg-grad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* لمعة تمرّ كل بضع ثوانٍ */
.viewseg .vseg-btn.on::after{content:""; position:absolute; top:0; bottom:0; width:45%; left:-60%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg); animation:vseg-shine 5s ease-in-out infinite; pointer-events:none}
@keyframes vseg-shine{0%,62%{transform:translateX(0) skewX(-18deg)}100%{transform:translateX(420%) skewX(-18deg)}}

.dayband{margin:4px 0}
/* شريط الأيام + التبويبات في صفّ واحد (التبويبات بجانب الأيام) */
.days-filters{display:flex; align-items:center; gap:16px; margin:4px 0}
.days-filters .dayband{margin:0; flex:0 1 auto; min-width:0; overflow:hidden}
/* زر مسح فلتر اليوم كأيقونة X — مساحته محجوزة دائمًا فلا يزحزح الصفحة */
.dayclr-x{width:24px; height:24px; border-radius:7px; border:1px solid var(--line); background:var(--surface); color:var(--danger); font-size:12px; font-weight:800; line-height:1; cursor:pointer; flex:0 0 auto; visibility:hidden; transition:.14s var(--ease); padding:0}
.dayclr-x:hover{background:var(--danger-soft); border-color:var(--danger)}
.dayclr-x.on{visibility:visible}
.days-filters .tabs{flex:1 1 auto; margin:0; align-items:center; gap:5px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin}
.days-filters .tab{flex-direction:column; align-items:center; justify-content:center; gap:0; padding:2px 9px; font-size:10px; line-height:1.15; flex:0 0 auto}
.days-filters .tab .c{order:-1; font-size:11px; font-weight:800; padding:0; background:transparent; color:var(--ink); border-radius:0; min-width:0}
.days-filters .tab.on .c{background:transparent; color:#fff}
.days-filters .tab .dt{display:none}
.days-filters .ftaction{padding:3px 10px; font-size:10.5px; border-radius:999px; flex:0 0 auto}
@media(max-width:1000px){ .days-filters{flex-direction:column; align-items:stretch; gap:8px} }
.dayband .lbl{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); margin-bottom:5px}
.dayband .lbl svg{width:16px; height:16px; color:var(--accent)}
.daystrip{display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; padding:10px 4px; scrollbar-width:thin}
.day{flex:0 0 auto; width:76px; min-height:66px; text-align:center; border:1px solid var(--line); border-radius:var(--r); padding:8px 6px; background:var(--surface); transition:.16s var(--ease); cursor:pointer; display:flex; flex-direction:column; justify-content:center; gap:1px}
.day:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--sh-1); opacity:1}
.day.mt{opacity:.45; background:var(--surface-2); border-style:dashed}
.day.mt .cnt{color:var(--faint)}
.day.has .cnt{color:var(--tref)}
.day.today .cnt{color:var(--tref)}
/* اليوم (غير مُختار): إطار واضح + عدد أبرز فقط — بلا تعبئة، والنص واضح تمامًا */
.day.today{border:2px solid var(--accent); background:var(--surface); box-shadow:var(--sh-1); opacity:1; border-style:solid; position:relative; z-index:1}
.day.today .cnt{font-size:18px; color:var(--accent)}
.day.today .dd{color:var(--ink)}
.day.today.mt{opacity:.9; background:var(--surface-2)}
.day.today .dn{color:var(--accent); font-weight:800}
.day.sel{background:linear-gradient(140deg,var(--accent),var(--accent-2)); border-color:var(--accent); border-style:solid; opacity:1; box-shadow:var(--sh-2)}
.day.sel .dn,.day.sel .dd,.day.sel .cnt,.day.sel .cx{color:#fff}
/* اليوم عند تحديده: يأخذ نفس خلفية بقية الأيام المُختارة (بلا إطار مزدوج ولا تكبير) */
.day.today.sel{transform:none; border:1px solid var(--accent); box-shadow:var(--sh-2)}
.day.today.sel .cnt{color:#fff}
.day .dn{font-size:10.5px; color:var(--muted); font-weight:700} .day .dd{font-size:11px; color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}
.day.mt .dd{color:var(--faint); font-weight:600}
.day .cnt{font-size:17px; font-weight:800; margin-top:1px; font-variant-numeric:tabular-nums} .day .cx{font-size:9px; color:var(--faint)}

/* بانر التعديلات */
.pending-bar{display:flex; align-items:center; gap:12px; background:var(--warning-soft); border:1px solid color-mix(in srgb,var(--warning) 32%,transparent); border-radius:var(--r-lg); padding:12px 16px; margin:8px 0}
.pending-bar .pic{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb,var(--warning) 18%,var(--surface)); color:var(--warning); flex:0 0 auto} .pending-bar .pic svg{width:19px; height:19px}
.pending-bar .pt{font-weight:800; font-size:13.5px} .pending-bar .ps{font-size:12px; color:var(--muted)}

/* رأس بفلتر عمود */
.tbl th .thh{display:inline-flex; align-items:center; gap:5px}
.tbl th .thh.thh-c{justify-content:center}
.tbl th .thico{width:14px; height:14px; color:var(--muted); flex:0 0 auto}
.tbl th .barcode-hd{width:54px; height:17px; color:var(--ink); flex:0 0 auto; opacity:.85}
.colf,.colf-btn{width:18px; height:18px; border-radius:5px; display:inline-grid; place-items:center; border:0; background:transparent; color:var(--faint); cursor:pointer; opacity:0; transition:.14s var(--ease); font-size:10px}
.tbl th:hover .colf,.tbl th:hover .colf-btn{opacity:1} .colf:hover,.colf-btn:hover{background:var(--accent-soft); color:var(--accent)} .colf svg,.colf-btn svg{width:12px; height:12px}
.tbl th.filtered{color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 -2px 0 var(--accent)} .tbl th.filtered .colf,.tbl th.filtered .colf-btn{opacity:1; color:var(--accent)}

/* الخلايا الخاصة */
.pinbtn{border:0; background:transparent; cursor:pointer; color:var(--faint); font-size:12px; padding:2px; border-radius:5px; transition:.14s; display:inline-grid; place-items:center} .pinbtn:hover{color:var(--warning)} .pinbtn.on{color:var(--warning)}
.pinbtn svg{width:13px; height:13px}
tr.pinned .stick,tr.pinned-row .stick{box-shadow:inset 3px 0 0 var(--warning)}
.serial{font-variant-numeric:tabular-nums; color:var(--faint); font-size:10px}
.pgico{width:30px; height:26px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--faint); display:inline-grid; place-items:center; cursor:pointer; position:relative; transition:.14s}
.pgico.has{color:var(--success); border-color:color-mix(in srgb,var(--success) 40%,transparent); background:var(--success-soft)}
.pgico:hover{transform:translateY(-1px)} .pgico svg{width:15px;height:15px}
/* شارة العدد: محايدة هادئة (بيانات لا تنبيه) — تُصبح خضراء فقط عند إرفاق معتمرين فعليًّا */
.pgc{position:absolute; top:-6px; inset-inline-start:-6px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:color-mix(in srgb,var(--ink) 60%,var(--surface)); color:#fff; font-size:10px; font-weight:800; display:grid; place-items:center; font-variant-numeric:tabular-nums; border:1.5px solid var(--surface)}
.pgico.has .pgc{background:var(--success)}
.rem-b{display:inline-block; margin-top:3px; font-size:10px; font-weight:800; color:var(--warning); background:var(--warning-soft); border-radius:5px; padding:1px 6px}
.rem-done{display:inline-block; margin-top:3px; font-size:10px; font-weight:800; color:var(--success); background:var(--success-soft); border-radius:5px; padding:1px 6px}
.yes{color:var(--success); font-weight:800} .no{color:var(--faint)}
#rows td.yes,#rows td.no{text-align:center}
.chgbadge{display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:800; color:var(--warning); background:var(--warning-soft); border-radius:5px; padding:1px 5px 1px 6px; margin-inline-start:5px}
.revbadge{display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:800; color:#d97706; background:color-mix(in srgb,#d97706 14%,var(--surface)); border-radius:5px; padding:1px 5px 1px 6px; margin-inline-start:5px}
.chgbadge svg,.revbadge svg{flex:0 0 auto}
.aco{font-weight:700; font-size:12px; color:var(--ink); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.anum2{font-size:10px; color:var(--faint); font-variant-numeric:tabular-nums; margin-top:1px}
.inv-badge{font-size:10px; padding:3px 8px}
.flt{font-size:11px; color:var(--faint)}
/* الوصول: التاريخ أسود لأنه معلومة مهمّة (لا رمادي) */
#rows td.arr-td{color:var(--ink); font-weight:600}

/* صفوف أقصر — تقليل الحشو الرأسي وضغط العناصر المكدّسة */
#rows td{padding-top:3px !important; padding-bottom:3px !important; vertical-align:middle}
#rows .pgcell{gap:0}
#rows .rem-mini{margin-top:2px}
#rows .cell-sub{margin-top:1px}
#rows .anum2{margin-top:0}
#rows .nm2,#rows .aco{line-height:1.25}
#rows .aline{margin:1px 0}

/* قائمة فلتر العمود — فرض قواعد التصميم بأولوية (صناديق اختيار بلون الثيم + زر تطبيق أساسي) */
#colfPop{border-radius:14px; box-shadow:var(--sh-3,0 18px 44px rgba(15,23,42,.20)); padding:10px; min-width:216px}
#colfPop input[type=checkbox]{appearance:none; -webkit-appearance:none; width:17px; height:17px; border:1.5px solid var(--line-strong,var(--line)); border-radius:5px; background:var(--surface); cursor:pointer; flex:0 0 auto; position:relative; margin:0; transition:.12s var(--ease)}
#colfPop input[type=checkbox]:hover{border-color:var(--accent)}
#colfPop input[type=checkbox]:checked{background:var(--accent); border-color:var(--accent)}
#colfPop input[type=checkbox]:checked::after{content:""; position:absolute; inset-inline-start:5px; top:1.5px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
#colfPop .cf-acts button[data-cf="apply"]{border:1px solid var(--accent); background:var(--accent); color:#fff; box-shadow:var(--sh-1)}
#colfPop .cf-acts button[data-cf="apply"]:hover{filter:brightness(1.06); transform:translateY(-1px)}
.shbtn{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; border:1px solid var(--line-strong); cursor:pointer; transition:.15s var(--ease); background:var(--surface); color:var(--muted)} .shbtn svg{width:14px; height:14px}
.shbtn.on{color:var(--success); border-color:color-mix(in srgb,var(--success) 45%,transparent); background:var(--success-soft)}
.shbtn.off{color:var(--danger); border-color:color-mix(in srgb,var(--danger) 40%,transparent); background:var(--danger-soft)}
.shbtn:hover{transform:translateY(-1px); box-shadow:var(--sh-1)}
/* زر إصدار فاوتشر — أيقونة تذكرة بلون المرجع النيلي (لون الثيم)، تُظهر «إصدار فاوتشر» عند المرور على الصف */
.mkvbtn{display:inline-flex; align-items:center; height:30px; padding:0 7px; border-radius:9px; border:1px solid var(--accent); background:linear-gradient(140deg,var(--accent),var(--accent-2)); color:#fff; cursor:pointer; overflow:hidden; font-family:inherit; box-shadow:0 1px 3px color-mix(in srgb,var(--accent) 42%,transparent); transition:box-shadow .18s var(--ease), transform .15s var(--ease)}
.mkvbtn .mkv-ic{width:16px; height:16px; flex:0 0 auto}
.mkvbtn .mkv-lbl{max-width:0; opacity:0; margin:0; overflow:hidden; white-space:nowrap; font-size:11.5px; font-weight:700; font-family:var(--app-font,"Cairo",sans-serif); transition:max-width .2s var(--ease), opacity .16s var(--ease), margin .2s var(--ease)}
#rows tr:hover .mkvbtn,.mkvbtn:hover,.mkvbtn:focus,.mkvbtn:focus-visible{transform:translateY(-1px); box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 46%,transparent); outline:none}
#rows tr:hover .mkvbtn .mkv-lbl,.mkvbtn:hover .mkv-lbl,.mkvbtn:focus .mkv-lbl,.mkvbtn:active .mkv-lbl{max-width:130px; opacity:1; margin-inline-start:7px}
/* زر «منتهي» الأحمر + الاسم ظاهر دائمًا */
.mkvbtn.expired{background:linear-gradient(140deg,#8b95a7,#697084) !important; border-color:#697084 !important; box-shadow:0 1px 3px color-mix(in srgb,#697084 42%,transparent) !important}
.mkvbtn.expired .mkv-lbl{max-width:120px !important; opacity:1 !important; margin-inline-start:7px !important}
/* زر صغير لتحديد الفاتورة غير المدفوعة كمنتهي */
.expbtn{width:26px; height:26px; border-radius:7px; border:1px solid var(--line-strong,var(--line)); background:var(--surface); color:var(--muted); display:inline-grid; place-items:center; cursor:pointer; flex:0 0 auto; margin-inline-start:6px; transition:.15s var(--ease)}
.expbtn:hover{color:var(--danger); border-color:var(--danger); background:var(--danger-soft); transform:translateY(-1px)}
.expbtn svg{width:14px; height:14px}
/* شارة «بلاغ» حمراء — بلاغ مفتوح على أحد المعتمرين */
#rows .rep-badge{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; color:#fff; background:linear-gradient(140deg,#dc2626,#b91c1c); border-radius:7px; padding:4px 9px; white-space:nowrap; box-shadow:0 1px 3px color-mix(in srgb,#dc2626 42%,transparent); animation:rep-pulse 3.2s ease-in-out infinite}
#rows .rep-badge svg{width:12px; height:12px; flex:0 0 auto; transform-origin:top center; animation:rep-wave 3.2s ease-in-out infinite}
/* حركة لافتة كل بضع ثوانٍ لأيقونة البلاغ */
@keyframes rep-pulse{0%,84%,100%{transform:scale(1); box-shadow:0 1px 3px color-mix(in srgb,#dc2626 42%,transparent)}90%{transform:scale(1.09); box-shadow:0 3px 12px color-mix(in srgb,#dc2626 60%,transparent)}}
@keyframes rep-wave{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-14deg)}90%{transform:rotate(12deg)}95%{transform:rotate(-6deg)}}
#rows tr.expired .rep-badge{text-decoration:none !important; opacity:1 !important}
/* الصف المنتهي: خط شطب باهت على كل الخلايا عدا زر «منتهي» الأحمر */
#rows tr.expired > td{text-decoration:line-through; text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent); text-decoration-thickness:1.5px}
#rows tr.expired > td:not(.actcell){opacity:.72}
#rows tr.expired .mkvbtn.expired,#rows tr.expired .mkvbtn.expired *{text-decoration:none !important; opacity:1 !important}

/* عمود المرجع */
.reftools,.acol{display:flex; align-items:center; gap:6px; flex-wrap:nowrap}
.acol{flex-direction:column; align-items:flex-start; gap:4px}
.arefs{display:flex; flex-direction:column; gap:4px; align-items:flex-start; min-width:0}
.aline{display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; white-space:nowrap}
.vref-link,.tvref{display:inline-flex; align-items:center; white-space:nowrap; font-weight:800; color:var(--accent); text-decoration:none; font-variant-numeric:tabular-nums; padding:2px 4px; border-radius:5px}
.vref-link:hover,.tvref:hover{background:var(--accent-soft)}
.tbl .reftools .vref-link,.tbl .acol .vref-link{white-space:nowrap!important}
.pgcell{display:inline-flex; flex-direction:column; align-items:center; gap:2px}
.pgcell .pgline{display:inline-flex; align-items:center; gap:5px}
.pgcell .paxn{font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--ink)}
/* عمود المعتمرين: مربّع نيلي ناعم (نفس لون رقم المجموعة) + عدد واضح في شارة نيلية */
#rows .pgico{position:relative; width:30px; height:26px; border-radius:9px; border:1px solid var(--line); background:var(--surface-2); color:var(--muted); box-shadow:none; overflow:visible; display:inline-grid; place-items:center}
#rows .pgico svg{width:14px; height:14px}
#rows .pgico:hover{transform:translateY(-1px); border-color:var(--line-strong,var(--line)); color:var(--ink)}
#rows .pgico .pgc{position:absolute; top:-7px; inset-inline-start:-7px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:var(--accent); color:#fff !important; font-size:11px; font-weight:800; line-height:1; display:grid; place-items:center; font-variant-numeric:tabular-nums; border:2px solid var(--surface); box-shadow:0 1px 3px color-mix(in srgb,var(--accent) 50%,transparent)}
#rows .pgcell{gap:1px}
/* حالة العدد تحت الأيقونة: مكتمل أخضر · متبقّي أحمر صغير لا يأخذ مساحة */
.pgcell .rem-mini{font-size:8px; font-weight:800; line-height:1; padding:1px 4px; border-radius:4px; margin-top:2px; white-space:nowrap; display:inline-block; font-variant-numeric:tabular-nums}
.pgcell .rem-mini.done{color:var(--success); background:var(--success-soft)}
.pgcell .rem-mini.left{color:var(--warning); background:var(--warning-soft)}
.cby-cell,.cbcell{font-size:11px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:130px}
.namecell,.nm2{font-size:11px; font-weight:600; color:var(--muted); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:150px}
.finlk{width:22px; height:22px; border-radius:6px; display:inline-grid; place-items:center; color:var(--faint); background:var(--surface-2); flex:0 0 auto} .finlk svg{width:12px; height:12px}
.finlk.on{color:#fff; background:linear-gradient(140deg,var(--accent),var(--accent-2)); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent)}
.prtboth{width:26px; height:26px; border-radius:7px; border:1px dashed var(--line-strong); background:var(--surface); color:var(--muted); display:inline-grid; place-items:center; cursor:pointer; transition:.14s} .prtboth:hover{color:var(--accent); border-color:var(--accent)} .prtboth svg{width:14px;height:14px}

/* موشن مرور + تمييز الصف والخلية */
.tbl tbody tr{transition:background .16s var(--ease)}
.tbl tbody td{position:relative; transition:background .16s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease)}
.tbl tbody tr:hover{background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.tbl tbody tr:hover .code{color:var(--accent-hover)}
.tbl tbody tr .stick:first-child::before{content:""; position:absolute; inset-block:0; inset-inline-start:0; width:0; background:linear-gradient(var(--accent),var(--accent-2)); transition:width .18s var(--ease)}
.tbl tbody tr:hover .stick:first-child::before{width:4px}
/* أُزيلت إزاحة الصف عند التحويم (translateX) — حركة مشتّتة أثناء المسح الطويل */

/* درجات ضغط ارتفاع الصفوف */
.tbl-wrap[data-rh="1"] .tbl tbody td{padding-block:8px}
.tbl-wrap[data-rh="2"] .tbl tbody td{padding-block:5px} .tbl-wrap[data-rh="2"] .tbl thead th{padding-block:7px}
.tbl-wrap[data-rh="3"] .tbl tbody td{padding-block:3px} .tbl-wrap[data-rh="3"] .tbl thead th{padding-block:5px} .tbl-wrap[data-rh="3"] .tbl{font-size:12px}
.tbl-wrap .tbl thead th{padding:9px 8px} .tbl-wrap .tbl tbody td{padding:8px 8px}
.tbl-wrap[data-cc="1"] .tbl thead th,.tbl-wrap[data-cc="1"] .tbl tbody td{padding-inline:5px}
.tbl-wrap[data-cc="2"] .tbl thead th,.tbl-wrap[data-cc="2"] .tbl tbody td{padding-inline:3px}

/* احتواء الكل */
.tbl-wrap.fit .tbl{min-width:0; width:100%; table-layout:fixed; font-size:11.5px}
.tbl-wrap.fit .tbl-scroll{overflow-x:hidden}
.tbl-wrap.fit .stick{position:static!important}
.tbl-wrap.fit .stick::after{display:none}
.tbl-wrap.fit .tbl thead th{padding-inline:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tbl-wrap.fit .tbl tbody td{padding-inline:5px; overflow:hidden}
.fitbtn.on{background:var(--accent); color:#fff; border-color:var(--accent)}
@media(max-width:820px){ .tbl-wrap.fit .tbl{table-layout:auto; min-width:940px} .tbl-wrap.fit .tbl-scroll{overflow-x:auto} }

/* أدوات الشبكة (تكبير + كثافة) */
.gridtools{display:flex; align-items:center; gap:8px}
.gsearch{position:relative}
.gsearch-pop{position:absolute; top:calc(100% + 8px); inset-inline-end:0; width:280px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-3); padding:12px; z-index:44; display:none}
.gsearch-pop.open{display:block; animation:ds-pop .16s var(--ease)}
.gs-row{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px}
.gs-count{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.cell-hit{background:color-mix(in srgb,var(--warning) 24%,transparent)!important; border-radius:4px; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warning) 55%,transparent)}
.cell-hit.active{background:color-mix(in srgb,var(--accent) 28%,transparent)!important; box-shadow:inset 0 0 0 2px var(--accent)}
@keyframes ds-pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.zoomc{display:inline-flex; align-items:center; gap:2px; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:2px}
.zoomc button{width:26px; height:26px; border:0; background:transparent; color:var(--muted); cursor:pointer; border-radius:7px; display:grid; place-items:center; transition:.14s} .zoomc button:hover{background:var(--surface); color:var(--accent)} .zoomc svg{width:15px; height:15px}
.zoomc .zl{font-size:12px; font-weight:700; min-width:42px; text-align:center; font-variant-numeric:tabular-nums; color:var(--ink)}
.lvlbtn{position:relative} .lvlbtn .lvl{position:absolute; top:-5px; inset-inline-start:-5px; min-width:15px; height:15px; border-radius:999px; background:var(--accent); color:#fff; font-size:9.5px; font-weight:800; display:grid; place-items:center; font-variant-numeric:tabular-nums} .lvlbtn.z .lvl{display:none} .lvlbtn.act{border-color:var(--accent); color:var(--accent)}

/* مربّع الاختيار الأوضح */
.ck{width:18px; height:18px; border:1.8px solid var(--line-strong)}
.ck:checked{background:var(--accent); border-color:var(--accent)}
.ck:checked::after{content:""; position:absolute; inset:0; background:no-repeat center/13px url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>')}

/* عنقود أيقونات الهيدر: صفّ واحد لا يلتفّ */
.hicons{display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; flex-wrap:nowrap}
/* بطاقة الوقت والتاريخ في نهاية الهيدر — مثل بطاقة الموظفين */
.headclock{display:inline-flex; align-items:center; gap:8px; padding:5px 11px; border-radius:12px; border:1px solid var(--line); background:var(--surface-2); flex:0 0 auto; color:var(--muted)}
.headclock svg{width:17px; height:17px; color:var(--accent); flex:0 0 auto}
.headclock .hc-txt{display:flex; flex-direction:column; line-height:1.12; gap:3px}
.headclock .hc-time{font-size:13px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:.02em}
.headclock .hc-date{font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums}
@media(max-width:900px){ .headclock{display:none} }
.navseg{flex:0 1 auto; min-width:0}
@media(max-width:900px){ .navseg{order:3; flex:1 1 100%; justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; margin-top:6px} .page-title h1{font-size:18px} }