/* ملف الموظفين الشامل: قائمة كل الموظفين، والتوسيع المختصر الملوّن، والفلاتر المطوية.
   المكوّن في scripts/frontend/employee-roster.jsx. */
.bina-roster, .bina-roster-filters {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05); direction: rtl;
}
.bina-roster-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; }
.bina-roster-title { margin: 0; font-size: 1.1rem; font-weight: 900; color: #0f172a; }
.bina-roster-sub { margin: .15rem 0 0; font-size: .75rem; font-weight: 700; color: #64748b; }
.bina-roster-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.bina-roster-group-select { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; color: #475569; margin: 0; }
.bina-roster-group-select select { border: 1px solid #e2e8f0; border-radius: .65rem; padding: .4rem .6rem; font-size: .8rem; background: #fff; color: #0f172a; }
.bina-roster-expand, .bina-roster-filter-toggle, .bina-roster-filter-clear {
  display: inline-flex; align-items: center; gap: .4rem; border-radius: .7rem; padding: .5rem .95rem;
  font-size: .82rem; font-weight: 800; border: 1px solid #c7d2fe; background: #eef2ff; color: #3730a3; cursor: pointer; transition: background .15s, color .15s;
}
.bina-roster-expand:hover, .bina-roster-filter-toggle:hover { background: #e0e7ff; }
.bina-roster-expand.is-on, .bina-roster-filter-toggle.is-on { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.bina-roster-filter-clear { border-color: #e2e8f0; background: #f8fafc; color: #475569; }
.bina-roster-empty { padding: 2.5rem 1rem; text-align: center; font-size: .9rem; color: #64748b; border: 1px dashed #cbd5e1; border-radius: .85rem; }

/* المجموعات الملوّنة */
.bina-roster-group { --t: #6366f1; --tb: #eef2ff; --tl: #c7d2fe; margin-top: .75rem; border-inline-start: 4px solid var(--t); border-radius: .85rem; background: var(--tb); padding: .6rem .65rem .7rem; }
.bina-roster-head + .bina-roster-group { margin-top: 0; }
.bina-roster-group-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.bina-roster-group-name { font-size: .88rem; font-weight: 900; color: #0f172a; }
.bina-roster-group-count { min-width: 1.6rem; text-align: center; border-radius: 999px; background: var(--t); color: #fff; font-size: .72rem; font-weight: 800; padding: .1rem .45rem; }
.tone-indigo { --t: #6366f1; --tb: #eef2ff; --tl: #c7d2fe; }
.tone-teal { --t: #0d9488; --tb: #f0fdfa; --tl: #99f6e4; }
.tone-amber { --t: #d97706; --tb: #fffbeb; --tl: #fde68a; }
.tone-rose { --t: #e11d48; --tb: #fff1f2; --tl: #fecdd3; }
.tone-sky { --t: #0284c7; --tb: #f0f9ff; --tl: #bae6fd; }
.tone-violet { --t: #7c3aed; --tb: #f5f3ff; --tl: #ddd6fe; }
.tone-emerald { --t: #059669; --tb: #ecfdf5; --tl: #a7f3d0; }
.tone-orange { --t: #ea580c; --tb: #fff7ed; --tl: #fed7aa; }
.tone-cyan { --t: #0891b2; --tb: #ecfeff; --tl: #a5f3fc; }
.tone-fuchsia { --t: #c026d3; --tb: #fdf4ff; --tl: #f5d0fe; }

/* بطاقات الأسماء: مضغوطة افتراضيًا، وأعرض عند التوسيع */
.bina-roster-grid { display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.bina-roster.is-expanded .bina-roster-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: .6rem; }
.bina-roster-card {
  display: block; width: 100%; text-align: start; background: #fff; border: 1px solid var(--tl); border-radius: .7rem;
  padding: .45rem .6rem; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; user-select: text; font: inherit; color: inherit;
}
.bina-roster-card:hover { border-color: var(--t); box-shadow: 0 2px 8px rgba(15, 23, 42, .08); }
.bina-roster-card:focus-visible { outline: 2px solid var(--t); outline-offset: 2px; }
.bina-roster-card.is-selected { border-color: var(--t); box-shadow: 0 0 0 2px var(--t); }
.bina-roster-card-head { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.bina-roster-name { flex: 1; min-width: 0; font-size: .85rem; font-weight: 800; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bina-roster.is-expanded .bina-roster-name { white-space: normal; font-size: .92rem; }
.bina-roster-dot { flex: none; width: .55rem; height: .55rem; border-radius: 999px; background: #94a3b8; }
.bina-roster-dot.is-active { background: #10b981; }
.bina-roster-dot.is-stopped { background: #ef4444; }
.bina-roster-dot.is-probation { background: #f59e0b; }
.bina-roster-approved { flex: none; font-size: .64rem; font-weight: 800; color: #047857; background: #d1fae5; border-radius: 999px; padding: .05rem .4rem; }
.bina-roster-meta { display: flex; flex-wrap: wrap; gap: .15rem .5rem; margin-top: .15rem; padding-inline-start: .95rem; font-size: .7rem; font-weight: 700; color: #64748b; }
.bina-roster-meta span + span::before { content: '·'; margin-inline-end: .5rem; color: #cbd5e1; }
.bina-roster-status { font-weight: 800; }
.bina-roster-status.is-active { color: #047857; }
.bina-roster-status.is-stopped { color: #b91c1c; }
.bina-roster-status.is-probation { color: #b45309; }

/* البيانات المختصرة: أقسام ملوّنة صغيرة */
.bina-roster-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; margin-top: .5rem; }
.bina-roster-section { border-radius: .55rem; background: var(--tb); border: 1px solid var(--tl); padding: .3rem .45rem .35rem; min-width: 0; }
.bina-roster-section:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bina-roster-section-title { font-size: .66rem; font-weight: 900; color: var(--t); margin-bottom: .15rem; }
.bina-roster-row { display: flex; justify-content: space-between; gap: .4rem; font-size: .7rem; line-height: 1.45; min-width: 0; }
.bina-roster-row-label { flex: none; color: #64748b; font-weight: 700; }
.bina-roster-row-value { min-width: 0; color: #0f172a; font-weight: 800; text-align: end; overflow-wrap: anywhere; }
.bina-roster-row-value.is-good { color: #047857; }
.bina-roster-row-value.is-bad { color: #b91c1c; }
.bina-roster-row-value.is-muted { color: #94a3b8; }

/* الفلاتر */
.bina-roster-filters-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.bina-roster-search { flex: 1 1 260px; min-width: 0; border: 1px solid #e2e8f0; border-radius: .75rem; padding: .55rem .8rem; font-size: .88rem; }
.bina-roster-search:focus { outline: none; box-shadow: 0 0 0 2px #c7d2fe; border-color: #a5b4fc; }
.bina-roster-filter-badge { min-width: 1.3rem; text-align: center; border-radius: 999px; background: #e11d48; color: #fff; font-size: .7rem; padding: 0 .35rem; }
.bina-roster-filters-grid { display: grid; gap: .65rem; margin-top: .8rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

@media (max-width: 640px) {
  .bina-roster, .bina-roster-filters { padding: .75rem; }
  .bina-roster-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .bina-roster.is-expanded .bina-roster-grid { grid-template-columns: 1fr; }
}

/* تبويبا القائمة: الموظفون / تواريخ العقود */
.bina-roster-tabs { display: flex; gap: .35rem; margin: -.25rem 0 .85rem; padding-bottom: .6rem; border-bottom: 1px solid #e2e8f0; }
.bina-roster-tabs button { border: 1px solid #e2e8f0; background: #f8fafc; color: #475569; border-radius: .7rem; padding: .5rem 1.1rem; font-size: .86rem; font-weight: 800; cursor: pointer; }
.bina-roster-tabs button:hover { background: #f1f5f9; }
.bina-roster-tabs button.is-on { background: #0f766e; border-color: #0f766e; color: #fff; }

/* تواريخ العقود */
.bina-contract-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.bina-contract-chip { --c: #475569; --cb: #f8fafc; display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #e2e8f0; background: var(--cb); color: var(--c); border-radius: 999px; padding: .35rem .8rem; font-size: .78rem; font-weight: 800; cursor: pointer; }
.bina-contract-chip span { min-width: 1.4rem; text-align: center; border-radius: 999px; background: #fff; padding: 0 .35rem; }
.bina-contract-chip.state-expired { --c: #b91c1c; --cb: #fef2f2; }
.bina-contract-chip.state-soon { --c: #b45309; --cb: #fffbeb; }
.bina-contract-chip.state-valid { --c: #047857; --cb: #ecfdf5; }
.bina-contract-chip.state-none { --c: #64748b; --cb: #f1f5f9; }
.bina-contract-chip.is-on { background: var(--c); border-color: var(--c); color: #fff; }
.bina-contract-chip.is-on span { color: var(--c); }
.bina-contract-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: .85rem; }
.bina-contract-table { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 760px; }
.bina-contract-table th { background: #f1f5f9; color: #334155; font-weight: 900; text-align: start; padding: .6rem .75rem; white-space: nowrap; }
.bina-contract-table td { padding: .55rem .75rem; border-top: 1px solid #f1f5f9; color: #0f172a; font-weight: 700; white-space: nowrap; }
.bina-contract-table tbody tr { cursor: pointer; border-inline-start: 4px solid transparent; }
.bina-contract-table tbody tr:hover { background: #f8fafc; }
.bina-contract-table tbody tr.state-expired { border-inline-start-color: #ef4444; }
.bina-contract-table tbody tr.state-soon { border-inline-start-color: #f59e0b; }
.bina-contract-table tbody tr.state-valid { border-inline-start-color: #10b981; }
.bina-contract-table tbody tr.state-none { border-inline-start-color: #cbd5e1; }
.bina-contract-table tbody tr.is-selected { background: #eef2ff; }
.bina-contract-name { display: flex; align-items: center; gap: .45rem; }
.bina-contract-name > span:last-child { display: flex; flex-direction: column; font-weight: 900; }
.bina-contract-name small { font-size: .7rem; font-weight: 700; color: #64748b; }
.bina-contract-badge { display: inline-block; border-radius: 999px; padding: .15rem .6rem; font-size: .76rem; font-weight: 800; }
.bina-contract-badge.state-expired { background: #fee2e2; color: #b91c1c; }
.bina-contract-badge.state-soon { background: #fef3c7; color: #b45309; }
.bina-contract-badge.state-valid { background: #d1fae5; color: #047857; }
.bina-contract-badge.state-none { background: #f1f5f9; color: #64748b; }
.bina-contract-note { margin: .6rem 0 0; font-size: .72rem; font-weight: 700; color: #64748b; }