/* ============================================================================
 * COMPONENT — Entry list
 * ----------------------------------------------------------------------------
 * A vertical list of records with an icon, a title, some metadata and optional
 * actions: education, experience, documents, languages.
 *
 * SHARED, not page-specific. The profile editor and the public profile both
 * render the same records, and they must look the same in both — a copy per
 * page is how "my education looks different on my public page" happens. This
 * lives here for the same reason the whole shared component library does.
 * ========================================================================== */

.entry-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.entry {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
}

.entry:first-child { padding-block-start: 0; }
.entry:last-child  { padding-block-end: 0; }

.entry + .entry {
  border-block-start: 1px solid var(--border);
  padding-block-start: var(--sp-4);
}

.entry__body {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.entry__title {
  /* Holds text a USER typed, which may be Urdu or Arabic on a page laid out
     left-to-right. Isolating it keeps the layout from flipping while letting
     the script itself read correctly — see .ugc in base.css. */
  unicode-bidi: isolate;

  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

.entry__meta {
  /* Holds text a USER typed, which may be Urdu or Arabic on a page laid out
     left-to-right. Isolating it keeps the layout from flipping while letting
     the script itself read correctly — see .ugc in base.css. */
  unicode-bidi: isolate;

  margin-block-start: 2px;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.entry__meta--danger {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--danger);
}

/* Dates carry .ltr in the markup as well — a range like "2004–2012" is
   reordered by the bidi algorithm inside Urdu text without it. */
.entry__dates {
  margin-block-start: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.entry__text {
  /* Holds text a USER typed, which may be Urdu or Arabic on a page laid out
     left-to-right. Isolating it keeps the layout from flipping while letting
     the script itself read correctly — see .ugc in base.css. */
  unicode-bidi: isolate;

  margin-block-start: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  line-height: var(--lh-snug);
}

.entry__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-inline-start: auto;
}

/* --------------------------------------------------------------------------
 * Notification rows
 * --------------------------------------------------------------------------
 * Unread is marked twice — a tinted row and a dot — because the tint alone is
 * a colour-only distinction, and the dot alone is easy to miss in a list of
 * thirty. Neither is a state a reader has to act on: the page marks itself
 * read on open, so this is "what is new since last time", nothing more.
 * ----------------------------------------------------------------------- */

.notif--unread {
  background: var(--brand-soft);
  border-radius: var(--r-md);
  /* The card supplies the horizontal rhythm; the tint has to reach past it or
     it reads as a floating chip rather than a highlighted row. */
  padding-inline: var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1);
}

.notif__dot {
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--brand);
  align-self: center;
}

/* --------------------------------------------------------------------------
 * A row that is one link
 * --------------------------------------------------------------------------
 * .entry is a layout: an icon, a body, some actions, and each part decides for
 * itself whether it is clickable. That is right for a row with two or three
 * different things to do in it — a listing with Approve and Reject.
 *
 * It is wrong for a row with exactly ONE thing to do, like a conversation in an
 * inbox. There the whole row is the target, and .entry--row turns it into one:
 * the <a> fills the row, carries the padding, and the parts inside it stop
 * being separate destinations.
 * ----------------------------------------------------------------------- */

.entry--row { padding: 0; }

.entry--row + .entry--row { padding-block-start: 0; }

.entry__hit {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  color: inherit;
  text-decoration: none;
}

.entry__hit:hover { background: var(--surface-sunken); }

/* The title inside a whole-row link is text, not a second link — it must not
   keep the underline and the brand colour of one. */
.entry__hit .entry__title {
  display: block;
  color: var(--ink);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.entry__hit .entry__meta {
  display: block;
  /* One line, cut cleanly: a long last message must not make the rows in a
     list different heights. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entry__hit .entry__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}