:root{--bg:#f6f8fa;--card:#ffffff;--txt:#0f172a;--muted:#64748b;--brand:#0ea5e9;--border:#e5e7eb;}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Noto Sans",Arial}
.container{max-width:1000px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 10px 25px rgba(2,6,23,.05)}
.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:800px){.grid-2,.grid-3{grid-template-columns:1fr}}
h1,h2{margin:.2rem 0}
label{font-size:.9rem;color:var(--muted)}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff}
textarea{min-height:80px;resize:vertical}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#eef6ff;color:#1e40af;font-size:.8rem}
.btn{padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:#fff;cursor:pointer}
.btn.primary{background:var(--brand);color:white;border-color:var(--brand)}
.btn.ghost{background:transparent}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid var(--border);padding:10px;text-align:start}
tr:hover{background:#f7fbff}
.hidden{display:none !important}
.install-banner{position:fixed;left:12px;right:12px;bottom:12px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 8px 30px rgba(0,0,0,.08)}
.lang-switch{display:flex;gap:6px;align-items:center}
.rtl{direction:rtl}
.step{display:none}
.step.active{display:block}
fieldset{border:1px dashed var(--border);padding:10px;border-radius:12px}
legend{font-size:.95rem;font-weight:600;color:#0f172a}
.checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
@media (max-width:700px){.checkbox-grid{grid-template-columns:1fr}}
footer{margin-top:18px;color:var(--muted);font-size:.85rem}
/* === Better checkbox layout === */
.checkbox-grid .choice,
.checkbox-row,
.chk {
  display: flex;
  align-items: center;
  gap: .6rem;         /* قرب النص من المربع */
  line-height: 1.4;
}
.checkbox-grid input[type="checkbox"] {
  inline-size: 18px;
  block-size: 18px;
}
body[dir="rtl"] .checkbox-grid .choice { justify-content: flex-start; }
.review .rev-grid{display:grid;gap:.6rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.review .rev-grid .full{grid-column:1/-1}
.pill{display:inline-block;padding:.15rem .5rem;border:1px solid #e5e7eb;border-radius:999px;font-size:.85rem;margin:.15rem .25rem 0 0}
#reviewBox{background:#fff;border:1px dashed #e5e7eb;padding:12px;border-radius:10px}
/* dropdown صغير في جدول الحجوزات */
table select.statusSel{
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:10px;
  font-size:.85rem;
  background:#fff;
}

/* وميض خفيف بعد الحفظ */
.blink{ animation: bl 0.3s ease-in-out 1; }
@keyframes bl{ from{box-shadow:0 0 0 rgba(0,0,0,0)} to{box-shadow:0 0 0 4px rgba(14,165,233,.15)} }

/* ألوان للشارة عندما لا يوجد dropdown (المستخدم العادي) */
.badge.pending{ background:#eef6ff; color:#1e40af; }
.badge.confirmed{ background:#ecfdf5; color:#065f46; }
.badge.cancelled{ background:#fef2f2; color:#991b1b; }
@media print {
  .printbar { display: none !important; }
}

/* بطاقات سريعة في الرئيسية */
#homeCard .card{ border-radius:14px; box-shadow:0 10px 25px rgba(2,6,23,.05) }
#homeCard h3{ font-size:1.05rem }
#homeCard p{ line-height:1.5 }

/* Responsive admin tables */
.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid #e5e7eb; vertical-align: middle; }
.table thead th { font-weight:700; color:#0f172a; }
.table tr:nth-child(even){ background:#fcfcfd; }
.table tr{ transition: background .15s ease; }
.actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.actions .btn{ padding:6px 10px; border-radius:10px; font-size:.9rem; }
.actions .btn.ghost{ background:#f8fafc; }
.badge-role{ padding:4px 8px; border-radius:999px; background:#eef2ff; color:#3730a3; font-weight:600; font-size:.85rem; }
@media (max-width:760px){
  .table thead{ display:none; }
  .table, .table tbody, .table tr, .table td{ display:block; width:100%; }
  .table tr{ background:#fff; border-radius:14px; box-shadow:0 8px 18px rgba(2,6,23,.06); padding:10px 12px; margin-bottom:12px; }
  .table td{ border:0; padding:8px 0; display:flex; justify-content:space-between; gap:12px; }
  .table td::before{ content: attr(data-label); font-weight:600; color:#334155; }
  .actions{ justify-content:flex-start; gap:10px; }
}
/* Notifications list */
#notifList .item{padding:10px 12px;border-bottom:1px solid #f1f5f9;display:flex;gap:10px}
#notifList .item .dot{width:10px;height:10px;border-radius:999px;background:#0ea5e9;margin-top:6px}
#notifList .item .txt{flex:1}
#toast.hidden{ display:none }
/* ==== Admin Users – overlap fix ==== */
#adminCard .two-col {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
  align-items: start;         /* مهم: يمنع التراكب العمودي */
}

@media (max-width: 1024px) {
  #adminCard .two-col { grid-template-columns: 1fr; }
}

.table-wrap { 
  background: #fff; 
  border: 1px solid #e5e7eb; 
  border-radius: 16px; 
  overflow: hidden; 
}

.table-wrap table { width: 100%; border-collapse: collapse; }
.table-wrap th, .table-wrap td { 
  padding: 10px 12px; 
  border-bottom: 1px solid #eef2f7; 
  vertical-align: top; 
}

/* خلية الأكشن في جدول التسجيلات المعلقة */
#regTable td:last-child { width: 380px; }

/* تجميع الحقول داخل خلية الأكشن وتوزيعها على سطرين عند الحاجة */
.reg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.reg-actions input,
.reg-actions select {
  height: 36px;
  padding: 6px 10px;
  width: 160px;         /* اجعلها 120–160 حسب ذوقك */
  max-width: 100%;
}

.reg-actions .btn { height: 36px; }

/* حتى لو كبر المحتوى، ما يغطي العمود الثاني */
#adminCard .table-wrap { position: relative; z-index: 0; }

/* ===== Admin users layout fix ===== */
#adminCard .grid.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); /* عمود التسجيلات أعرض شوي */
  gap: 20px;
  align-items: start;   /* المهم: ما في تمدد عمودي */
}
/* النقطة الذهبية: بدونها الطفل يمنع الانكماش ويطيّر التخطيط */
#adminCard .grid.grid-2 > div { min-width: 0; }

/* جداول ثابتة العرض وتلف النصوص */
#adminCard table { width: 100%; table-layout: fixed; border-collapse: collapse; }
#adminCard th, #adminCard td { 
  padding: 10px 12px; border-bottom: 1px solid #eef2f7; 
  vertical-align: top; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* عمود Action في جدول التسجيلات المعلقة */
#regTable td:last-child { width: 360px; }              /* عدّلها 340–420 حسب ارتياحك */
.reg-actions{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; max-width:100%;
}
.reg-actions input, .reg-actions select{
  height:36px; padding:6px 10px;
  flex: 1 1 130px;      /* يلتف حسب المساحة */
  max-width: 160px;     /* حد أعلى حتى ما تكبر */
}
.reg-actions .btn{ height:36px; flex:0 0 auto; }

/* على الشاشات الصغيرة عمود واحد ولا داعي لعرض ثابت */
@media (max-width: 1024px){
  #adminCard .grid.grid-2 { grid-template-columns: 1fr; }
  #regTable td:last-child { width: auto; }
  #adminCard th, #adminCard td { white-space: normal; } /* يسمح بلف النص */
}