:root{
  --bg:#f8f9fb; /* خلفية أفتح قليلاً */
  --card:#ffffff;
  --text:#1c2025; /* لون نص أغمق قليلاً للتباين */
  --muted:#6e7987;
  --primary:#0d94f8; /* أزرق أساسي أكثر حيوية */
  --primary-hover:#0b7ecf; /* لون عند التحويم */
  --primary-ink:#fff; /* لون نص الزر الأساسي */
  --ok:#10b981; /* أخضر */
  --warn:#f59e0b; /* أصفر */
  --err:#ef4444; /* أحمر */
  --ring:#bae6fd;
}

/* استخدام خط Cairo لجميع العناصر */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Cairo', sans-serif; /* الخط الاحترافي الجديد */
  font-weight:400;
}

.site-header{
  text-align:center;
  padding:32px 16px 12px;
}
.site-header h1{
    font-weight:900; /* وزن ثقيل للعنوان الرئيسي */
    font-size:36px;
    margin-bottom:4px;
    color:var(--primary);
}
.sub{color:var(--muted);margin:6px 0 0; font-size:17px}

.grid{
  max-width:1080px; /* زيادة عرض الشبكة قليلاً */
  margin:0 auto;
  padding:24px;
  display:grid;
  gap:24px;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); /* زيادة حجم البطاقات الأدنى */
}
.card{
  background:var(--card);
  border:1px solid #e5e7eb;
  border-radius:20px; /* زوايا أكثر استدارة */
  padding:24px;
  /* ظل احترافي وبارز أكثر */
  box-shadow:0 10px 30px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.05);
  transition:transform 0.3s ease; /* تأثير حركي خفيف */
}
.card:hover {
    transform: translateY(-2px); /* رفع البطاقة قليلاً عند التحويم */
}
.card-title{
    margin:0 0 16px;
    font-size:24px;
    font-weight:700;
    color:var(--text);
    border-bottom:2px solid #f0f3f5; /* خط خفيف تحت العنوان */
    padding-bottom:8px;
}

.form{display:grid;gap:16px}
label{font-weight:700; font-size:15px}
input,select{
  width:100%;
  padding:14px 18px;
  border-radius:14px;
  border:1px solid #dcdfe3; /* حدود أغمق قليلاً للمظهر الأنيق */
  background:#f9f9fa; /* خلفية خفيفة للحقول */
  color:var(--text);
  font-size:16px;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(13, 148, 248, 0.2); /* تأثير حلقة التركيز */
    background:var(--card);
    outline:none;
}

/* الأزرار - تحسين المظهر والتفاعل */
button{
    font-family:'Cairo', sans-serif;
    font-weight:700;
    font-size:16px;
    padding:14px 18px !important;
    border-radius:14px !important;
}

.btn-primary{
  cursor:pointer;
  background:var(--primary);
  color:var(--primary-ink);
  border:none;
  transition:all .2s ease;
  box-shadow:0 8px 20px rgba(13, 148, 248, 0.4); /* ظل أقوى للزر الأساسي */
}
.btn-primary:hover:not([disabled]){
    background:var(--primary-hover);
    box-shadow:0 10px 25px rgba(13, 148, 248, 0.5);
    transform: translateY(-1px); /* رفع خفيف عند التحويم */
}
.btn-primary:active{ transform:scale(.98); transition:transform .08s ease }
.btn-primary[disabled]{ filter:brightness(.9); opacity:.65; cursor:not-allowed; box-shadow:none; }

.btn-ghost{
  border:1px solid #c8d1da;
  background:#fff;
  color:var(--text);
  cursor:pointer;
  transition:all .2s ease;
}
.btn-ghost:hover{
    background:#f0f3f5;
    border-color:#aab7c4;
}

.status{min-height:20px;margin-top:16px;font-weight:700; padding:8px 12px; border-radius:10px;}
.status.ok{color:var(--ok); background:#e6fff3}
.status.warn{color:var(--warn); background:#fffbeb}
.status.err{color:var(--err); background:#ffebeb}

.stats{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); /* تعديل لعرض أكثر مرونة */
}
.stat{
  border:1px solid #e5e7eb;
  padding:18px;
  border-radius:16px;
  background:#f9fbfc; /* خلفية خفيفة لبطاقة الإحصاء */
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
}
.stat .label{color:var(--muted);font-size:15px; margin-bottom:4px}
.stat .value{font-size:32px;font-weight:900; color:var(--primary)}

.site-footer{
  margin:40px auto 32px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
}
.site-footer a{color:var(--primary);text-decoration:none; font-weight:700}
.site-footer a:hover{text-decoration:underline}

/* تحسينات النافذة المنبثقة (Dialog) */
.dialog::backdrop{background:rgba(2,8,23,.5); backdrop-filter:blur(3px);}
.dialog-card{
  width:min(500px,96vw); /* جعل نافذة الدخول أصغر وأكثر تركيزاً */
  background:#fff;
  border-radius:20px;
  border:none;
  padding:30px;
  box-shadow:0 25px 50px rgba(0,0,0,.25), 0 10px 20px rgba(0,0,0,.15);
}
.dialog-card h3{
    font-size:28px;
    font-weight:900;
    margin-top:0;
    margin-bottom:20px;
}

.dialog-actions{
  display:flex; gap:12px; justify-content:flex-end; margin-top:24px;
}
.toolbar{
    display:flex; gap:10px; flex-wrap:wrap; margin:16px 0;
    padding:10px; border-radius:12px; background:#f4f7f9;
}
.table{
  border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; max-height:60vh; overflow:auto;
}
.row{display:grid; grid-template-columns: 52px 1.5fr 1fr 1fr; gap:0; border-bottom:1px solid #eef2f7}
.cell{padding:12px 14px; font-size:15px}
.row.head{position:sticky; top:0; background:var(--primary); color:white; font-weight:700; z-index:10;}
.muted{color:var(--muted)}

/* تحسينات إضافية على التنسيقات */
.table .cell:nth-child(2) { /* تنسيق خاص لعمود الاسم */
    font-weight: 600;
}

@media (max-width: 600px) {
    .site-header h1 {
        font-size: 28px;
    }
    .grid {
        padding: 16px;
    }
    .card {
        padding: 20px;
    }
    .row {
        grid-template-columns: 52px 1fr 1fr; /* إخفاء عمود في شاشات الجوال */
    }
    .row.head .cell:last-child, .row:not(.head) .cell:last-child {
        display: none;
    }
}

/* تحسين القراءة على الجوال: تكبير طفيف للنصوص والعناصر التفاعلية */
@media (max-width: 600px) {
  html, body { font-size: 17px; line-height: 1.55; }
  input, select, button { font-size: 17px; }
  .dialog-card { width: min(560px, 98vw); padding: 22px; }
  .toolbar { gap: 8px; }
  #filterChoice { min-width: 160px; }
}

/* جعل القوائم والعناصر أكثر قابلية للمس */
select, button, input {
  min-height: 44px;
}

/* تنسيق خاص لفلتر الرغبات في شريط الأدمن */
#filterChoice {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #dcdfe3;
  background: #fff;
}

/* ===== Reset native <dialog> border to avoid double box ===== */
dialog, dialog::backdrop {
  border: none;
}
dialog {
  padding: 0;
  background: transparent;
}
/* keep the rounded box only on .dialog-card */
.dialog-card {
  border-radius: 20px;
  overflow: hidden;
}


/* === Mobile override to ALWAYS keep the "الرغبة" column visible === */
@media (max-width: 600px) {
  /* Keep 4 columns on small screens (checkbox, الاسم، رقم الجلوس، الرغبة) */
  .row { grid-template-columns: 44px 1.2fr .9fr .9fr; }

  /* Reduce spacing and font size a bit so all columns fit without hiding any */
  .cell { padding: 10px 8px; font-size: 14px; }

  /* Ensure the last column (الرغبة) is NOT hidden on mobile */
  .row.head .cell:last-child,
  .row:not(.head) .cell:last-child {
    display: block !important;
  }
}