:root{
  --maxw: 1100px;
  --border:#333;
  --soft:#f7f7f7;
}

* { box-sizing: border-box; }

body{
  font-family: "Tahoma", "Cairo", system-ui, sans-serif;
  background:#fafafa;
  margin:0;
  padding:24px;
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
}

/* شريط الأدوات */
.toolbar{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-start;
  margin:0 auto 12px; max-width:var(--maxw);
}

button{
  border:1px solid #999; background:white; padding:10px 14px; cursor:pointer; border-radius:10px;
}
button:hover{ background:#f0f0f0; }

/* عنوان الصفحة */
.header{
  background:white; border:1px solid var(--border); border-radius:12px;
  padding:12px; margin-bottom:12px;
}
.title{
  font-size:22px; font-weight:700; text-align:center; margin:0 0 6px 0;
}

/* المراحل */
.selection-summary{
  text-align:center; font-size:14px; color:#555;
}
.stage-picker{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-bottom:12px;
}
.stage-box{
  position:relative;
  background:white;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
}
.stage-btn{
  width:100%;
  font-weight:700;
  border:1px dashed #bbb;
  border-radius:10px;
  padding:10px;
}
.stage-menu{
  margin-top:10px;
  display:none;
  border-top:1px solid #eee;
  padding-top:10px;
}
.stage-box.open .stage-menu{
  display:block;
}

/* القوائم */
details{
  background: #fcfcfc;
  border:1px solid #ddd;
  border-radius:10px;
  margin-bottom:8px;
  padding:6px 10px;
}
details > summary{
  cursor:pointer;
  font-weight:700;
}
.class-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.class-btn{
  border:1px solid #bbb;
  border-radius:8px;
  padding:6px 10px;
  background:#fff;
  cursor:pointer;
}
.class-btn:hover{ background:#f5f5f5; }

/* الجداول */
table{
  width:100%; border-collapse:collapse; background:white;
  border:1px solid var(--border); table-layout:fixed; margin-bottom:24px;
}
thead th{
  background:rgb(101, 103, 101); color:#fff;
  border:1px solid var(--border); padding:10px; font-weight:700;
}
tbody td{
  border:1px solid var(--border); padding:8px; min-height:44px; vertical-align:top;
  text-align:center;
}
select, input{
  width:100%; border:none; outline:none; padding:6px; font-family:inherit;
}
option{ padding:4px; }

/* تمييز الصفوف حسب المرحلة */
tbody td[data-stage="ابتدائي"]{
  background:#e8f5e9;
}
tbody td[data-stage="متوسط"]{
  background:#fff3e0;
}
tbody td[data-stage="ثانوي"]{
  background:#e3f2fd;
}

/* للهواتف */
@media (max-width: 820px){
  .stage-picker{
    grid-template-columns: 1fr;
  }
}

@media print{
  body{ background:white; padding:0; }
  .toolbar{ display:none; }
  .wrap{ max-width:unset; margin:0; }
  .header{ border:none; margin-bottom: 0; } /* خلي العنوان ملتصق بالجدول الأول */
  thead th{ position:static; }
  select, input{ border:none; }
  .stage-picker, .selection-summary { display:none; }

  /* الغي إجبار الجداول تبدأ بصفحة جديدة */
  .day-table{
    page-break-before: auto !important;
    page-break-after: always; /* كل جدول ينتهي بفاصل صفحة */
  }

  /* آخر جدول فقط ما يكون بعده فاصل */
  .day-table:last-of-type{
    page-break-after: auto;
  }
}

