/* ════════════════════════════════════════════════════════════════
   📦 ICM Admin — Packages page v8 (Cairo + Actions + RTL fixes)
   ════════════════════════════════════════════════════════════════ */

/* ═══════════ Cairo font enforcement (form elements لا يرثوا الخط افتراضياً) ═══════════ */
.pkg-table,
.pkg-table input,
.pkg-table select,
.pkg-table button,
.pkg-mob-card,
.pkg-mob-card input,
.pkg-mob-card select,
.pkg-mob-card button,
.pkg-drawer,
.pkg-drawer input,
.pkg-drawer select,
.pkg-drawer button,
.pkg-drawer textarea,
.pkg-drawer-header,
.pkg-drawer-body,
.pkg-drawer-footer,
.subs-toolbar input,
.subs-toolbar select,
.pkg-bulk-bar,
.pkg-bulk-bar button{
  font-family:'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
/* الـ Quran verse يحافظ على خطه الخاص (الموجود فى الـ rule الأصلى) */

/* ─── KPI cards as clickable filters ─── */
.pkg-kpi-filter{
  cursor:pointer;
  transition:transform .12s, border-color .15s, box-shadow .15s;
  border:1px solid transparent;
}
.pkg-kpi-filter:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
}
.pkg-kpi-filter[data-active="1"]{
  border-color:var(--accent);
  box-shadow:0 0 0 2px hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .25);
  background:hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .08);
}
.pkg-kpi-filter[data-active="1"]::after{
  content:"●";
  position:absolute;
  inset-block-start:6px;
  inset-inline-start:8px;
  color:var(--accent);
  font-size:10px;
  line-height:1;
}
.pkg-kpi-filter{ position:relative; }


.pkg-col-acts{
  inline-size:90px;
  text-align:center;
  white-space:nowrap;
}
.pkg-act-btn{
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:32px; block-size:32px;
  margin-inline:2px;
  border-radius:8px;
  border:1px solid var(--card-line);
  background:var(--surface-2);
  color:var(--txt-2);
  cursor:pointer;
  transition:all .15s ease;
  padding:0;
}
.pkg-act-btn .ic{ inline-size:15px; block-size:15px; }
.pkg-act-btn:hover{
  background:var(--accent);
  color:var(--on-accent);
  border-color:var(--accent);
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}
.pkg-act-btn.pkg-act-delete:hover{
  background:var(--bad);
  border-color:var(--bad);
  color:#fff;
}

/* اسم الباقة فى الجدول لا يطول لأكثر من 200px */
.pkg-name-cell{
  max-inline-size:200px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pkg-name-cell > span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:inline-block;
  max-inline-size:140px;
}

/* ─── RTL/LTR fix: للقيم اللى فيها أرقام + units ─── */
.pkg-mob-cell-val,
.pkg-mob-price-big,
.pkg-badge{
  unicode-bidi:isolate;
}

/* ═══ Table + skeleton ═══ */
.pkg-table-wrap{
  background:var(--surface);
  border:1px solid var(--card-line);
  border-radius:var(--r-lg);
  overflow-x:auto;          /* scroll أفقى للجدول */
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
.pkg-skel-rows{ display:flex; flex-direction:column; gap:0; }
.pkg-skel-rows .skel-row{ border:0; border-bottom:1px solid var(--card-line); padding:14px 16px; }

/* ═══ Table ═══ */
.pkg-table{
  min-inline-size:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}
.pkg-table thead th{ position:sticky; top:0; z-index:2; background:var(--surface-2); color:var(--txt-2); font-weight:800; font-size:11.5px; text-align:start; padding:11px 12px; border-bottom:1px solid var(--card-line); white-space:nowrap; }
.pkg-table tbody td{ padding:11px 12px; border-bottom:1px solid var(--card-line); color:var(--txt); vertical-align:middle; white-space:nowrap; }

/* ── عمود Actions: sticky على inline-end (يسار فى RTL) ── */
.pkg-table thead th:last-child,
.pkg-table tbody td.pkg-col-acts{
  position:sticky;
  inset-inline-end:0;
  background:var(--surface-2);   /* للـ thead */
  z-index:3;
  box-shadow:-2px 0 8px hsl(228 30% 3% / .25);
}
.pkg-table tbody td.pkg-col-acts{ background:var(--surface); }
.pkg-table tbody tr:hover td.pkg-col-acts{ background:var(--surface-2); }
.pkg-table tbody tr.selected td.pkg-col-acts{ background:hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .15); }

.pkg-table tbody tr{ transition:background .12s ease; }
.pkg-table tbody tr:hover{ background:var(--surface-2); }
.pkg-table tbody tr.selected{ background:hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .08); }
.pkg-table tbody tr:last-child td{ border-bottom:0; }
.pkg-table .pkg-col-check,.pkg-table .pkg-col-num{ inline-size:40px; text-align:center; }
.pkg-check{ inline-size:16px; block-size:16px; cursor:pointer; accent-color:var(--accent); }
.pkg-col-num{ font-weight:700; color:var(--txt-3); font-size:11.5px; }

/* ═══ Badges ═══ */
.pkg-badge{ display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:99px; font-weight:800; font-size:11px; white-space:nowrap; }
.pkg-badge[data-kind="warning"]{ background:hsl(38 92% 54% / .18); color:var(--warn); }
.pkg-badge[data-kind="success"]{ background:hsl(150 70% 46% / .18); color:var(--ok); }
.pkg-badge[data-kind="info"]   { background:hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .18); color:var(--accent); }
.pkg-badge[data-kind="dark"]   { background:var(--surface-3); color:var(--txt-2); font-family:'JetBrains Mono', ui-monospace, monospace; }
.pkg-badge[data-kind="muted"]  { background:var(--surface-2); color:var(--txt-3); }
.pkg-name-cell{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; background:linear-gradient(135deg, var(--accent), var(--accent-strong)); color:var(--on-accent); border-radius:8px; font-weight:800; font-size:12px; cursor:pointer; border:0; transition:transform .12s ease, box-shadow .15s ease; }
.pkg-name-cell:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.pkg-name-cell .ic{ inline-size:13px; block-size:13px; }
.pkg-name-cell .pkg-name-arrow{ inline-size:10px; block-size:10px; opacity:.8; }
.pkg-row-actions{ position:relative; display:inline-block; }

/* ═══ Mobile cards (محسّن للهواتف) ═══ */
.pkg-mob-list{ display:none; flex-direction:column; gap:10px; }
.pkg-mob-card{
  background:var(--surface-2);
  border:1px solid var(--card-line);
  border-radius:14px;
  padding:14px;
  display:flex; flex-direction:column; gap:12px;
  transition:border-color .15s, transform .12s;
}
.pkg-mob-card:hover{ border-color:var(--accent); transform:translateY(-1px); }
.pkg-mob-card.selected{ border-color:var(--accent); background:hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .06); }

/* Header: checkbox + title block + big price */
.pkg-mob-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.pkg-mob-head-left{
  display:flex; align-items:flex-start; gap:10px;
  flex:1; min-inline-size:0;
}
.pkg-mob-head .pkg-check{ margin-block-start:4px; flex:none; inline-size:18px; block-size:18px; }
.pkg-mob-title-wrap{ flex:1; min-inline-size:0; }
.pkg-mob-title{
  font-size:16px; font-weight:900; color:var(--txt);
  line-height:1.25;
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.pkg-mob-subtitle{
  font-size:11px; color:var(--txt-3); font-weight:600;
  margin-block-start:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pkg-mob-price-big{
  flex:none;
  display:flex; align-items:baseline; gap:3px;
  padding:6px 12px;
  background:hsl(38 92% 54% / .15);
  color:var(--warn);
  border-radius:10px;
  font-size:17px; font-weight:900;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.pkg-mob-price-big small{
  font-size:10px; font-weight:700; opacity:.7;
}

/* Info rows (label على اليمين / value على اليسار - نفس السطر) */
.pkg-mob-grid{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:4px 0;
  border-block:1px dashed var(--card-line);
}
.pkg-mob-cell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 6px;
  border-bottom:1px dashed hsl(228 14% 19% / .5);
}
.pkg-mob-cell:last-child{ border-bottom:0; }
.pkg-mob-cell-lbl{
  font-size:12px; font-weight:700; color:var(--txt-3);
  letter-spacing:.2px;
  flex:none;
}
.pkg-mob-cell-val{
  font-size:13.5px; font-weight:800; color:var(--txt);
  font-feature-settings: "lnum" 1, "tnum" 1;
  text-align:end;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Action buttons */
.pkg-mob-foot{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.pkg-mob-btn{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--card-line);
  background:var(--surface);
  color:var(--txt);
  font:inherit; font-size:13px; font-weight:800;
  cursor:pointer;
  transition:all .12s ease;
  min-block-size:44px;
}
.pkg-mob-btn .ic{ inline-size:15px; block-size:15px; }
.pkg-mob-btn:active{ transform:scale(.97); }
.pkg-mob-btn-edit:hover{
  background:var(--accent); color:var(--on-accent); border-color:var(--accent);
}
.pkg-mob-btn-delete{ color:var(--bad); }
.pkg-mob-btn-delete:hover{
  background:var(--bad); color:#fff; border-color:var(--bad);
}

@media (max-width: 768px){ .pkg-table{ display:none; } .pkg-mob-list{ display:flex; padding:8px; } }
@media (min-width: 769px){ .pkg-mob-list{ display:none; } }

/* ═══ Bulk bar ═══ */
.pkg-bulk-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; background:hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .12); border:1px solid var(--accent); border-radius:var(--r-md); margin-block:8px; }
.pkg-bulk-info{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:13px; color:var(--accent); }
.pkg-bulk-info .ic{ inline-size:18px; block-size:18px; }
.pkg-bulk-actions{ display:flex; gap:6px; }
.pkg-bulk-danger{ background:var(--bad) !important; color:#fff !important; border-color:var(--bad) !important; }
.pkg-bulk-danger:hover{ filter:brightness(1.08); }

/* ════════════════════════════════════════════════════════════════
   DRAWER
   ════════════════════════════════════════════════════════════════ */
/* صفحة الفورم = صفحة عادية بالكامل (page-header قياسى زى باقى الصفحات)
   + أنيميشن دخول خفيف. مفيش شكل نافذة (drawer) خالص. */
.pkg-form-page:not(.hidden){ animation:pkgFormIn .3s cubic-bezier(.16,1,.3,1); }
@keyframes pkgFormIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ───────── البنية أعلاه تكفى — التالى الأعمدة + form fields ───────── */
.pkg-field{
  margin-block-end:18px;
}

/* ─── 2-column row (desktop) ─── */
.pkg-field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-block-end:18px;
}
.pkg-field-row .pkg-field{ margin-block-end:0; }

/* mobile: stack to single column */
@media (max-width: 640px){
  .pkg-field-row{ grid-template-columns:1fr; gap:0; }
  .pkg-field-row .pkg-field{ margin-block-end:18px; }
}

/* full-width field (override the row) */
.pkg-field-full{ grid-column:1 / -1; }

/* ─── Label header ─── */
.pkg-field-head{
  display:flex; align-items:center; gap:8px;
  margin-block-end:9px;
  padding-inline:2px;
}
.pkg-field-label{
  font-size:14px;
  font-weight:700;
  color:var(--txt-2);
  letter-spacing:.1px;
}

.pkg-field-hint-inline{
  font-size:11.5px;
  color:var(--txt-3);
  font-weight:600;
  margin-inline-start:auto;
  text-align:end;
  flex:1;
  min-inline-size:0;
}

.pkg-field-hint{
  display:block;
  margin-block-start:7px;
  padding-inline:2px;
  font-size:11.5px;
  color:var(--txt-3);
  font-weight:600;
}

/* ─── Help icon: دائرة حمراء بـ ! ─── */
.pkg-help{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:20px; block-size:20px;
  border-radius:50%;
  background:var(--bad);
  color:#fff;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
  border:0; padding:0;
  line-height:1;
  box-shadow:0 1px 4px hsl(354 78% 30% / .35);
  transition:transform .12s, filter .15s;
  user-select:none;
}
.pkg-help::before{ content:"!"; font-family:ui-sans-serif, system-ui, sans-serif; }
.pkg-help:hover{ filter:brightness(1.15); transform:scale(1.1); }
.pkg-help:active{ transform:scale(.95); }

/* ─── Input wrapper ─── */
.pkg-field-input{
  position:relative;
  display:flex; align-items:stretch;
  background:var(--surface-2);
  border:1px solid var(--card-line);
  border-radius:10px;
  overflow:hidden;
  transition:border-color .25s, box-shadow .25s;
  min-block-size:54px;
}
.pkg-field-input:hover{ border-color:hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .4); }
.pkg-field-input:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .18);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ✨ INPUTS — أرقام إنجليزية + بدون spinners
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pkg-field-input > input,
.pkg-field-input > textarea{
  flex:1;
  min-inline-size:0;
  background:transparent;
  color:var(--txt);
  border:0; outline:0;
  padding:14px 16px;
  font-size:15px;
  font-weight:600;
  font-family:inherit;
  /* فرض الأرقام بالـ Latin */
  font-feature-settings: "lnum" 1, "tnum" 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.pkg-field-input > input::placeholder,
.pkg-field-input > textarea::placeholder{
  color:var(--txt-3);
  font-weight:500;
}

/* إخفاء أسهم زيادة/نقص الأرقام (spinners) */
.pkg-field-input > input[type="number"]::-webkit-inner-spin-button,
.pkg-field-input > input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance:none;
  appearance:none;
  margin:0;
}
.pkg-field-input > input[type="number"]{
  -moz-appearance:textfield;
  appearance:textfield;
  /* مهم: لو الـ locale عربى، اللى يحدّد direction للأرقام */
  direction:ltr;
  text-align:start;
}

/* textarea variant */
.pkg-field-input-area{ min-block-size:auto; }
.pkg-field-input > textarea{
  resize:vertical;
  min-block-size:80px;
  padding:12px 16px;
  line-height:1.5;
}

/* ─── Inline unit selector ─── */
.pkg-field-input > .pkg-field-unit{
  flex:none;
  border:0;
  border-inline-start:1px solid var(--card-line);
  background:transparent;
  color:var(--txt);
  padding:0 32px 0 16px;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  outline:0;
  min-inline-size:110px;
  text-align:start;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath fill='%237367f0' d='M0 0l5.5 7L11 0z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 12px center;
}
[dir="rtl"] .pkg-field-input > .pkg-field-unit{ background-position:left 12px center; }
.pkg-field-input > .pkg-field-unit:hover{ background-color:hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .08); }
.pkg-field-input > .pkg-field-unit option{ background:var(--surface); color:var(--txt); font-weight:600; }

/* ─── Static unit (USD, يوم...) ─── */
.pkg-field-input > .pkg-field-unit-static{
  flex:none;
  display:flex; align-items:center; justify-content:center;
  border-inline-start:1px solid var(--card-line);
  background:transparent;
  color:var(--txt-2);
  padding:0 18px;
  font-weight:800;
  font-size:14px;
  min-inline-size:80px;
  letter-spacing:.3px;
}

/* ════════════════════════════════════════════════════════════════
   Toggle: عرض الخيارات المتقدمة
   ════════════════════════════════════════════════════════════════ */
.pkg-advanced-toggle{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  margin-block:8px 18px;
  background:var(--surface-2);
  border:1px solid var(--card-line);
  border-radius:var(--r-md);
  cursor:pointer;
}
.pkg-advanced-toggle-label{
  font-size:14px; font-weight:800; color:var(--txt);
}

/* ─── Switch ─── */
.pkg-switch{
  position:relative;
  display:inline-block;
  inline-size:46px; block-size:26px;
  flex:none; cursor:pointer;
}
.pkg-switch input{ opacity:0; inline-size:0; block-size:0; position:absolute; }
.pkg-switch-slider{
  position:absolute; inset:0;
  background:var(--surface-3);
  border:1px solid var(--card-line);
  border-radius:99px;
  transition:background .2s, border-color .2s;
}
.pkg-switch-slider::before{
  content:'';
  position:absolute;
  block-size:20px; inline-size:20px;
  inset-inline-end:2px;
  inset-block-start:2px;
  background:var(--txt-3);
  border-radius:50%;
  transition:all .25s cubic-bezier(.34, 1.56, .64, 1);
}
.pkg-switch input:checked + .pkg-switch-slider{ background:var(--accent); border-color:var(--accent); }
.pkg-switch input:checked + .pkg-switch-slider::before{
  inset-inline-end:calc(100% - 22px);
  background:#fff;
  box-shadow:0 2px 6px hsl(228 30% 3% / .25);
}
.pkg-switch input:focus-visible + .pkg-switch-slider{ box-shadow:0 0 0 3px hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .25); }

/* Advanced body */
.pkg-advanced-body[hidden]{ display:none; }
.pkg-advanced-body{ animation:pkgAdvFade .25s ease-out; }
@keyframes pkgAdvFade{
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
   Quranic verse (decorative)
   ════════════════════════════════════════════════════════════════ */
.pkg-quran-verse{
  text-align:center;
  font-family:'Amiri Quran', 'Scheherazade New', 'Noto Naskh Arabic', 'Traditional Arabic', serif;
  font-size:17px;
  color:var(--txt-2);
  margin:22px 0 18px;
  padding:10px 12px;
  line-height:2.4;
  direction:rtl;
  letter-spacing:0;
  opacity:.85;
}

/* ════════════════════════════════════════════════════════════════
   Help popover
   ════════════════════════════════════════════════════════════════ */
.pkg-help-card{ max-inline-size:380px; text-align:start; }
.pkg-help-card .cdlg-title{ text-align:center; }
.pkg-help-card .cdlg-msg{ text-align:start; line-height:1.7; font-size:13.5px; }

/* ─── Mobile: بس padding أفقى (البادينج السفلى متحدّد فوق عشان الـ bottombar) ─── */
@media (max-width: 600px){
  .pkg-form-page .pkg-drawer-body{ padding-inline:14px; }
}

/* page-header على الموبايل: العنوان أعلى والأزرار تحت */
@media (max-width: 540px){
  #pagePackages .page-header{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  #pagePackages .page-actions{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
  }
  #pagePackages .page-actions .btn{
    flex:1;
    min-inline-size:90px;
    justify-content:center;
    padding:9px 10px;
    font-size:12px;
  }
  /* KPI strip - 2x2 */
  #pagePackages .kpi-strip-mini{
    grid-template-columns:1fr 1fr !important;
  }
  /* Search + filters - stacked */
  #pagePackages .subs-toolbar{
    flex-direction:column;
    gap:8px;
  }
  #pagePackages .subs-filters{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
  }
  #pagePackages .subs-filters select{ min-inline-size:0; }
}

/* ─── Columns modal ─── */
.pkg-cols-modal{ display:grid; gap:6px; max-block-size:50vh; overflow-y:auto; padding:4px; }
.pkg-cols-modal .col-toggle{ display:flex; align-items:center; gap:9px; padding:9px 11px; background:var(--surface-2); border:1px solid var(--card-line); border-radius:var(--r-sm); cursor:pointer; font-size:13px; font-weight:600; color:var(--txt); }
.pkg-cols-modal .col-toggle:hover{ border-color:var(--accent); }
.pkg-cols-modal .col-toggle input{ accent-color:var(--accent); inline-size:16px; block-size:16px; }

/* ─── Row dropdown ─── */
.pkg-row-actions .dd-menu{ min-inline-size:200px; inset-inline-start:auto; inset-inline-end:0; inset-block-start:calc(100% + 4px); }