/* ====== Base ====== */
.wpsm-portal{
  background:#f5f9ff;
  padding:25px;
  border:1px solid #d9e7ff;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(30,136,229,.08);
  max-width:1200px;
  margin:25px auto;
  font-family:"Cairo", Tahoma, sans-serif;
  direction:rtl;
  box-sizing:border-box;
}
.wpsm-portal h2{
  text-align:center;
  font-weight:700;
  color:#1e3d6b;
  margin-bottom:22px;
  position:relative;
}
.wpsm-portal h2::after{
  content:"";
  display:block;
  width:120px;height:3px;
  background:#1e88e5;
  margin:12px auto 0;border-radius:2px;
}

/* ====== Layout: right employees + left form ====== */
.wpsm-layout{
  display:grid;
  grid-template-columns: 1fr 2fr; /* يمين: البكاحيم | يسار: الحقول */
  gap:24px;
  align-items:start;
}
@media (max-width: 900px){
  .wpsm-layout{ grid-template-columns: 1fr; }
}
.wpsm-main p{ margin:0 0 14px; }

/* ====== Legend ====== */
.wpsm-legend{
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-start;
}
.wpsm-legend .legend-title{
  color:#1e3d6b;
  font-weight:700;
  margin-inline-end:8px;
}
.legend-badge{
  display:inline-block;
  padding:4px 8px;
  border-radius:6px;
  font-weight:700;
  font-size:12px;
}
.legend-badge.free  { background:#e8f5e9; color:#1b5e20; }
.legend-badge.leave { background:#fff8e1; color:#ff6f00; }
.legend-badge.busy  { background:#ffebee; color:#b71c1c; }

/* ====== Inputs ====== */
.wpsm-portal form label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
  font-size:14px;
  color:#1e3d6b;
}
.wpsm-portal input[type="text"],
.wpsm-portal input[type="date"],
.wpsm-portal input[type="time"],
.wpsm-portal select,
.wpsm-portal textarea{
  width:100%; padding:12px 14px;
  border:2px solid #d9e7ff;
  border-radius:8px;
  background:#fff;
  font-size:14px;
  transition:all .25s ease;
  box-sizing:border-box;
}
.wpsm-portal textarea{ min-height:100px; resize:vertical; }
.wpsm-portal input:focus,
.wpsm-portal select:focus,
.wpsm-portal textarea:focus{
  border-color:#1e88e5;
  box-shadow:0 0 0 4px rgba(30,136,229,.15);
  outline:none;
}
.wpsm-portal input[type="checkbox"]{ accent-color:#1e88e5; }
.wide{ grid-column:1/-1; }

/* ====== Submit button ====== */
.wpsm-portal .button,
.wpsm-portal .button-primary{
  background:#1e88e5;
  border:none;
  color:#fff;
  font-weight:700;
  padding:12px 24px;
  border-radius:8px;
  cursor:pointer;
  transition:.2s ease;
}
.wpsm-portal .button:hover,
.wpsm-portal .button-primary:hover{
  background:#1565c0;
  box-shadow:0 6px 14px rgba(21,101,192,.25);
  transform:translateY(-1px);
}

/* ====== Employees (right panel) ====== */
.wpsm-side{
  background:#eaf3ff;
  border:1px solid #cfe3ff;
  border-radius:12px;
  padding:12px;
  display:flex;
  flex-direction:column;
}

/* الأسطورة فوق قائمة الموظفين */
.wpsm-side .wpsm-legend{
  order:-1;
  margin-bottom:14px;
}

.wpsm-side .side-title{
  font-weight:700;
  color:#1e3d6b;
  margin-bottom:10px;
  text-align:right;
}

.wpsm-emp-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:560px;
  overflow:auto;
  padding-inline:4px;
}

.wpsm-emp-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid #d9e7ff;
  background:#fff;
  border-radius:0 12px 12px 0; /* تدوير الحافة اليمنى */
  cursor:pointer;
  transition:.15s ease;
}
.wpsm-emp-card input[type="checkbox"]{ margin:0 0 0 6px; }
.wpsm-emp-card .emp-name{ font-weight:700; color:#1e3d6b; }
.wpsm-emp-card .emp-phone{ color:#466; font-size:12px; }
.wpsm-emp-card:hover{ transform:translateX(-2px); }

/* حالة اللون */
.wpsm-emp-card.emp-free  { background:#e8f5e9; border-color:#c8e6c9; color:#1b5e20; }
.wpsm-emp-card.emp-leave { background:#fff8e1; border-color:#ffe0b2; color:#ff6f00; }
.wpsm-emp-card.emp-busy  { background:#ffebee; border-color:#ffcdd2; color:#b71c1c; }

/* تحديد */
.wpsm-emp-card.emp-selected{ outline:3px solid rgba(30,136,229,.35); }

/* ====== Result box ====== */
.wpsm-pre{
  background:#eef6ff;
  border:1px solid #bbdefb;
  border-radius:8px;
  padding:12px;
  white-space:pre-wrap;
  word-wrap:break-word;
  margin-top:14px;
  font-family:monospace;
  color:#1e3d6b;
}

/* ====== جدول ====== */
.wpsm-portal table{
  width:100%;
  border-collapse:collapse;
  margin-top:16px;
}
.wpsm-portal table th,
.wpsm-portal table td{
  border:1px solid #d9e7ff;
  padding:10px 12px;
  text-align:center;
}
.wpsm-portal table th{ background:#1e88e5; color:#fff; }
.wpsm-portal table tr:nth-child(even){ background:#f5f9ff; }
/* ====== Layout معدل ====== */
.wpsm-layout{
  display:flex;
  flex-direction:row-reverse; /* عكس الاتجاه ليكون الموظفين يمين */
  gap:24px;
  align-items:flex-start;
}

/* القسم الأيمن = الموظفين */
.wpsm-side{
  flex:1;
  max-width:320px; /* عرض مناسب للعمود الأيمن */
}

/* القسم الأيسر = النموذج */
.wpsm-main{
  flex:2;
}

/* في الشاشات الصغيرة يكون عمود واحد */
@media (max-width: 900px){
  .wpsm-layout{
    flex-direction:column;
  }
  .wpsm-side, .wpsm-main{
    max-width:100%;
  }
}