:root {
  --bg: #f7f7fb;
  --card: #ffffff;
  --text: #222;
  --muted: #666;
  --brand: #4f46e5;
  --border: #e6e6ef;
}
.dataTables_wrapper {
  position: relative;
  clear: both;
  width: 100%;
  overflow: scroll;
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0; background: var(--bg); color: var(--text);
  direction: rtl; font-family: "Tajawal","Cairo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
a { color: var(--brand); text-decoration: none; }
.container { max-width: 1100px; margin: 0 auto; padding: 16px; }
.site-header, .site-footer { background: var(--card); border-bottom: 1px solid var(--border); }
.site-footer { border-top: 1px solid var(--border); border-bottom: none; margin-top: 40px; }
.hdr { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand a { font-weight: 700; font-size: 18px; }
.btn { display: inline-block; padding: 8px 12px; background: var(--brand); color: #fff; border-radius: 12px; font-size: 14px; border: 1px solid var(--brand); }
.btn:hover { opacity: .95; }
.btn-outline { background: transparent; color: var(--brand); }
.btn-sm { padding: 6px 8px; font-size: 12px; border-radius: 10px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px; margin-bottom: 16px; }
.card-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 8px; }
.grid.two { display:grid; grid-template-columns: 1fr; gap:16px; }
@media (min-width: 900px) { .grid.two { grid-template-columns: 1fr 1fr; } }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
label { display:block; margin: 8px 0 4px; color: var(--muted); font-size: 13px; }
input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"], textarea, select {
  width: 100%; padding: 10px 12px; border:1px solid var(--border); border-radius: 12px; background:#fff;
}
.alert { padding: 10px 12px; border-radius: 12px; margin: 8px 0; }
.alert-success { background: #ecfdf5; color:#065f46; border: 1px solid #a7f3d0; }
.alert-error { background: #fef2f2; color:#7f1d1d; border: 1px solid #fecaca; }
.tag { display:inline-block; background:#eef2ff; color:#3730a3; padding:4px 8px; border-radius: 999px; font-size:12px; margin: 2px; }
.filter { min-width: 160px; }
table.dataTable thead th, table.dataTable tbody td { white-space: nowrap; }
.attachments { list-style: none; padding: 0; margin: 0; }
.attachments li { padding: 6px 0; border-bottom: 1px dashed var(--border); }

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:9999}
.modal-card{background:#fff;border-radius:14px;border:1px solid var(--border);padding:16px;min-width:280px;max-width:90vw}
.modal-actions{display:flex;gap:8px;justify-content:flex-start;margin-top:12px}
.modal-select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:10px}
.modal-form label{display:block;margin:8px 0 4px;color:var(--muted);font-size:13px}
.modal-form input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:12px}
.modal-form .row{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width: 700px){.modal-form .row{grid-template-columns:1fr 1fr}}