/* Plain, legible, and right-to-left by default, because these are Arabic records.
   English values are marked .ltr where they appear. */

:root {
  --ink: #1c2033;
  --muted: #6a7192;
  --line: #e1e4f0;
  --bg: #f6f7fb;
  --card: #ffffff;
  --brand: #2e3192;
  --good: #166534;
  --goodbg: #ecfdf3;
  --bad: #991b1b;
  --badbg: #fef2f2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 "Segoe UI", Tahoma, system-ui, sans-serif;
}

.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }

.bar {
  background: var(--brand);
  color: #fff;
  padding: 12px 0;
  margin-bottom: 20px;
}
.bar .wrap { display: flex; gap: 12px; align-items: baseline; }
.bar .muted { color: #c7cbf5; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

h1 { font-size: 20px; margin: 0 0 6px; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.crumb { margin: 0 0 10px; }
.crumb a { color: var(--brand); text-decoration: none; }
.mt { margin-top: 16px; }
.ltr { direction: ltr; text-align: left; }

.good { background: var(--goodbg); color: var(--good); padding: 8px 12px; border-radius: 6px; }
.bad  { background: var(--badbg);  color: var(--bad);  padding: 8px 12px; border-radius: 6px; }
ul.bad { padding-inline-start: 30px; }

/* ------------------------------------------------------------------ the list */

table.list { width: 100%; border-collapse: collapse; margin-top: 12px; }
table.list th, table.list td {
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  text-align: start;
  vertical-align: middle;
}
table.list th { color: var(--muted); font-weight: 600; font-size: 13px; }
table.list td.name { font-weight: 600; }
table.list td.end { text-align: end; }

/* The row being looked at - the dump chosen for import, and anything else that is one of
 * a list with a panel under it. A tint rather than a border, so the row does not move. */
table.list tr.on > td { background: color-mix(in srgb, var(--brand) 8%, transparent); }


.thumb { width: 52px; }
.thumb img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; }
.noimg {
  width: 40px; height: 40px; border-radius: 50%;
  background: #eef0f7; color: var(--muted);
  display: grid; place-items: center;
}

.tag {
  font-size: 12px; padding: 2px 8px; border-radius: 999px;
  background: #eef0f7; color: var(--muted); white-space: nowrap;
}
.tag.ok { background: var(--goodbg); color: var(--good); }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}
.btn:hover { background: #eef0fb; }
.btn.go { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.go:hover { filter: brightness(1.08); }

/* The one that cannot be undone. Quiet until it is under the pointer - a row of red
   buttons down a list of thirty people is a page you stop reading. */
.btn.danger { color: #a4243b; border-color: #e6c9cf; }
.btn.danger:hover { background: #a4243b; border-color: #a4243b; color: #fff; }

/* ------------------------------------------------------------------ the form */

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 14px 0 16px; }
.tab {
  border: 0; background: none; padding: 9px 14px; cursor: pointer;
  color: var(--muted); font: inherit; border-bottom: 2px solid transparent;
}
.tab.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }

.pane { display: none; }
.pane.on { display: block; }

.field { margin-bottom: 14px; }
.field label { display: block; margin-bottom: 4px; color: #39405f; }
.req { color: #c0392b; }

/* Every box in a field, by what it is not.
 *
 * This was a list of the four types that happened to exist when it was written - text,
 * email, tel, url - so the day a password box appeared it came out at the browser's own
 * default width, a third of the card, with the label above it stretching the full width.
 * A rule that has to be edited every time a field is added is a rule that will be wrong
 * again; the tickboxes and the file picker are the exceptions, so they are what is named. */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.field select,
.field textarea {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 7px;
  font: inherit; color: inherit; background: #fff;
}
.field input:focus, .rich-box:focus { outline: 2px solid #c7cbf5; outline-offset: 1px; }
/* Fields the person is not asked for, hidden rather than removed.
 *
 * Type and College name come from the old site and go straight back to the panel. Nobody
 * filling this form in knows what to put in Type, and the college is the link they arrived
 * by - asking them to type its name is asking for a second spelling of it. Hidden in CSS and not taken
 * out of the form on purpose: a field that is not rendered is not posted either, so
 * removing it would blank whatever the capture had put there the first time somebody
 * pressed حفظ. Display:none still submits.
 *
 * Add a line here to hide another, using the column's own name. */
/* The sentence above the list, telling somebody which of the two things to do. Bigger
   than a hint and quieter than a heading - it is read once and then never again. */
/* An informational panel, in Bootstrap's "info" colours and none of Bootstrap's code.
   The three values are the ones that framework settled on - a pale cyan ground, a hairline
   a shade deeper, and dark teal text - because they are already what people read as
   "here is something you should know" rather than "something went wrong". */

.alert {
  margin: 4px 0 16px; padding: 13px 16px;
  background: #cff4fc; border: 1px solid #b6effb;
  border-inline-start: 4px solid #087990;
  border-radius: 8px; line-height: 1.75; color: #055160;
}

.alert p { margin: 0; }
.alert p + p { margin-top: 7px; }

.alert strong { color: #032830; font-weight: 700; }

/* The same panel in the "nothing came back" tone - Bootstrap's warning colours, for the
   same reason its info colours were used above: they already read as "this is not an
   error, but it wants your attention". A search that found nobody is exactly that. */
.alert.warn {
  background: #fff3cd; border-color: #ffe69c;
  border-inline-start-color: #997404; color: #664d03;
}

.alert.warn strong { color: #332701; }

@media (max-width: 560px) {
  .alert { padding: 11px 13px; }
}

/* Find your own name. One line on a desktop, and the box takes the room on a phone
   rather than the buttons doing it. */
.finder { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.finder input[type="search"] {
  flex: 1 1 220px; min-width: 0;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; background: #fff;
}
.finder input[type="search"]:focus { outline: 2px solid #c7cbf5; outline-offset: 1px; }
.finder .btn { flex: none; }

/* Removed by assets/find.js the moment it runs: with the list filtering as you type there
   is nothing to press. It stays in the markup for a browser with no script, where it is
   the only way to search - and where it also keeps Enter working, since a form with more
   than one field needs a submit button for that. */

/* For a label that a screen reader needs and the page does not. */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.field-type_ar,
.field-type_en,
.field-college_name_ar,
.field-college_name_en { display: none; }


.photo-row { display: flex; align-items: center; gap: 12px; }
.photo-row img { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; }

/* ------------------------------------------------------------------ the editor */

.rich { border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: #fff; }
.rich-bar {
  display: flex; gap: 2px; padding: 4px;
  background: #fafbff; border-bottom: 1px solid var(--line);
}
.rich-bar button {
  border: 0; background: none; cursor: pointer;
  padding: 4px 9px; border-radius: 5px; font: inherit; color: #39405f;
}
.rich-bar button:hover { background: #eef0fb; }

.rich-box { min-height: 96px; padding: 10px; }

/* The bullets belong on the side the text starts from. Left to itself the browser puts
   the marker outside the box in RTL and it lands under the text of the line above. */
.rich-box ul, .rich-box ol { padding-inline-start: 24px; margin: 6px 0; }
.rich-box[dir="rtl"] ul, .rich-box[dir="rtl"] ol { text-align: right; }
.rich-box p { margin: 6px 0; }

.actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

/* ------------------------------------------------------------------ admin */

code {
  background: #f1f2f8; padding: 2px 6px; border-radius: 4px;
  font-family: Consolas, monospace; direction: ltr; display: inline-block;
}

/* ------------------------------------------------------------------ lists and chips */

.checks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.check { display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.check input { margin: 0; }

.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.chip {
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  color: var(--muted); text-decoration: none; font-size: 13px;
}
.chip:hover { background: #eef0fb; }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }

table.list td.secs { color: var(--muted); font-size: 13px; }

/* The title and the way in, on one line - so the button is above the list as well as
   below it, and a person who is not in the list finds it without reading thirty names. */
.head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.head h1 { margin-bottom: 4px; }
.head .btn { flex: none; white-space: nowrap; }

@media (max-width: 560px) {
  .head { flex-direction: column; }
  .head .btn { align-self: stretch; text-align: center; }
}

.head-actions { display: flex; gap: 8px; flex: none; }
.head-actions .btn { white-space: nowrap; }

@media (max-width: 560px) {
  .head-actions { width: 100%; }
  .head-actions .btn { flex: 1; text-align: center; }
}

/* The departments table edits in place, so its cells hold inputs. */
table.list td input[type="text"], table.list td input[type="number"] {
  width: 100%; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 6px;
  font: inherit; color: inherit; background: #fff;
}


/* ------------------------------------------------------------------ narrow screens
 *
 * One breakpoint at 560px, which is a phone held upright, and one rule behind all of it:
 * anything that sits in a row on a laptop becomes a column, and anything a thumb has to
 * hit becomes full width.
 */

.narrow { max-width: 420px; margin: 40px auto; }

@media (max-width: 560px) {
  .wrap { padding: 0 12px; }
  .card { padding: 16px; border-radius: 8px; }
  .narrow { margin: 16px auto; }

  /* A button pushed to one end of a wide row is a small target in a corner. */
  .actions { flex-direction: column-reverse; align-items: stretch; }
  .actions .btn, .actions button { width: 100%; text-align: center; }
  .actions form { width: 100%; }
  .actions form .btn, .actions form button { width: 100%; }

  /* The search box and its button, which share a line on a laptop. */
  .head-actions { flex-wrap: wrap; }
  .head-actions input[type="text"] { flex: 1 1 100%; }

  /* Tabs across three words each will not fit; let them wrap rather than clip. */
  .tabs { flex-wrap: wrap; }
  .tab { padding: 8px 10px; }

  /* A table cannot become a column.
   *
   * Hiding columns by number was the first answer and it was wrong: the third column is
   * the English name on one page, the staff count on another and the department's order
   * on a third, so one rule hid something different everywhere.
   *
   * Turning the table into a block was the second, and worse - the columns lose their
   * widths and a name comes out one word per line.
   *
   * So the table stays a table, keeps a width its columns can live in, and the card it
   * sits in is what scrolls. Nothing is hidden and nothing is guessed at. */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Wide enough for the columns to be columns. Too little and the browser gives an
     Arabic name one word per line to make everything fit, which fits and cannot be read. */
  table.list { min-width: 720px; }

  /* Two columns of name and value are not a wide table, and 720px of minimum width sends
     the values off the side of a phone where nobody scrolls to find them. */
  table.list.pairs { min-width: 0; }
  table.list th, table.list td { padding: 8px; }
}

@media (max-width: 380px) {
  .bar .wrap { flex-direction: column; gap: 2px; }
}

/* A card that is one question and one answer gets one full-width button, at any size.
   A small button in the corner of a 420px card is a small target and reads as an
   afterthought, when it is the only thing on the card to press. */
.narrow .actions { flex-direction: column-reverse; align-items: stretch; }
.narrow .actions .btn, .narrow .actions button { width: 100%; text-align: center; }