/* El Monitor application styles, on top of Tabler RTL. */

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* The design of the approved prototype (reference/prototype/public/app.css): navy, teal and orange, rounded cards
   with soft shadows. Tabler RTL stays the base; its colours are pointed at these variables. */
:root {
  --el-navy: #0b3048;
  --el-navy-2: #123b52;
  --el-teal: #0b5866;
  --el-orange: #dc913f;
  --el-muted: #6b8090;
  --el-line: #dce6ec;
  --el-bg: #f3f6f8;
  --el-ink: #193447;
  --el-radius: 12px;
  --el-shadow: 0 2px 10px rgba(11, 48, 72, 0.07);
  --el-shadow-lg: 0 12px 34px rgba(11, 48, 72, 0.16);
  --el-good-bg: #e4f4ed;
  --el-good: #257556;
  --el-bad-bg: #fceae7;
  --el-bad: #aa493d;
  --el-warn-bg: #fff0da;
  --el-warn: #8a601e;
  --el-info-bg: #e3eff7;
  --el-info: #1f5f86;
  --el-neutral-bg: #eaf2f6;
  --el-neutral: #476578;
  --tblr-font-sans-serif: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --tblr-body-font-family: var(--tblr-font-sans-serif);
  --tblr-body-bg: var(--el-bg);
  --tblr-body-color: var(--el-ink);
  --tblr-primary: var(--el-teal);
  --tblr-primary-rgb: 11, 88, 102;
  --tblr-primary-lt: #e3eff1;
  --tblr-link-color: var(--el-teal);
  --tblr-link-color-rgb: 11, 88, 102;
  --tblr-link-hover-color: var(--el-navy);
  --tblr-border-color: var(--el-line);
  --tblr-border-radius: 8px;
  --tblr-secondary: var(--el-muted);
}

html,
body {
  font-family: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
}

/* Numbers, codes and mobile numbers read left to right inside Arabic text. */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Validation icon in a left-to-right field (mobile number, password) inside the right-to-left page. Tabler
   reserves the space at the field's inline end (the right in LTR) but always draws the icon on the left, over
   the digits and the placeholder; draw it in the reserved space instead. */
.form-control[dir="ltr"].is-invalid,
.form-control[dir="ltr"].is-valid {
  background-position: right var(--tblr-form-feedback-icon-inset) center !important;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-wrapper {
  flex: 1 1 auto;
  min-width: 0;
}


/* Phones and tablets: top bar first, then the sidebar (its menu collapses), then the content. */
@media (max-width: 991.98px) {
  /* The phone menu opens and closes at once, without Bootstrap's 0.35 s height animation. While the menu is
     `.collapsing` it is a short box with hidden overflow, and anything that brings a link into view (keyboard
     focus, an automated tap) scrolls that box; as the box grows its scroll position falls back, so the link slides
     away between press and release and the tap lands on the list instead of the link. With no animation the box
     takes its full height in the same task that opens it, so a link never moves after it appears. */
  #sidebar-menu.collapsing {
    transition: none;
  }
}

.empty-state {
  padding: 1.5rem 0.5rem;
  text-align: center;
  color: var(--tblr-secondary);
}

/* F-012: the user's memberships in the sidebar; the active one is marked, the others have a switch button. */
.app-membership {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem;
  margin-inline: -0.25rem;
  border-radius: var(--tblr-border-radius);
}

.app-membership-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.app-membership.is-active {
  background: rgba(255, 255, 255, 0.08);
}

.app-membership .badge.ltr {
  font-size: 0.7em;
}

/* F-022: the company name, logo and environment label in the top bar. On a phone they get their own line under
   the menu button, brand and logout, so a long name is shown in full instead of being cut. */
.app-company {
  min-width: 0;
}

.app-company-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.app-company-logo {
  height: 28px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
}

.app-logo-preview {
  height: 48px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  padding: 0.25rem;
  background: #fff;
}

.app-env {
  white-space: nowrap;
  flex-shrink: 0;
}

.app-env-production {
  background: var(--tblr-green-lt);
  color: var(--tblr-green);
}

.app-env-training {
  background: var(--tblr-blue-lt);
  color: var(--tblr-blue);
}

.app-env-demo {
  background: var(--tblr-orange-lt);
  color: var(--tblr-orange);
}


/* F-022: a file field with an Arabic button; the real input stays in the page for keyboards and screen readers. */
.app-file {
  position: relative;
  min-width: 0;
}

.app-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.app-file:focus-within {
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
}

.app-file-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* F-018: on a phone each owner item is a compact card, two fields per line; the description and spec span it. */
@media (max-width: 767.98px) {
  .boq-table tbody tr {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .boq-table tbody td {
    width: 50%;
  }

  .boq-table tbody td.boq-wide {
    width: 100%;
  }
}

/* F-020: on a phone each asset is a compact card, two balances per line; the asset name and contract span it. */
@media (max-width: 767.98px) {
  .stock-table tbody tr {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .stock-table tbody td {
    width: 50%;
  }

  .stock-table tbody td.stock-wide {
    width: 100%;
  }
}

/* F-149: on a phone each report row is a compact card, two fields per line; the subject spans it. */
@media (max-width: 767.98px) {
  .report-table tbody tr {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .report-table tbody td {
    width: 50%;
    overflow-wrap: anywhere;
  }

  .report-table tbody td.report-wide {
    width: 100%;
  }
}

/* F-160: dates, due times and amounts in a report cell stay on one line. */
.report-table tbody td .ltr {
  white-space: nowrap;
}

/* F-158: a list of record ids (R-669) reads left to right and wraps between ids. */
.report-table tbody td .ltr.report-ids {
  white-space: normal;
}

/* F-153: the totals row (public/auto-reports.js:19,26): bold on a tinted line; a hidden row stays hidden on a phone. */
.report-total td {
  font-weight: 700;
  background: var(--tblr-primary-lt, #e9f2f4);
  border-top: 2px solid var(--tblr-primary, #0d5965);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* F-157: on a wide screen a total and the word الإجمالي are never split mid-word; the column widens instead. */
@media (min-width: 768px) {
  .report-total td {
    overflow-wrap: normal;
    word-break: keep-all;
  }
}

[data-totals-footer][hidden] {
  display: none !important;
}

@media (max-width: 767.98px) {
  .report-table tfoot tr {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .report-table tfoot td {
    width: 50%;
  }

  .report-table tfoot td:last-child:nth-child(odd) {
    width: 100%;
  }
}

/* F-150: on a phone each condition stacks its field, operator and value; a line separates one condition from the next. */
@media (max-width: 767.98px) {
  .report-condition + .report-condition {
    border-top: 1px solid var(--tblr-border-color, #dadfe5);
    padding-top: 0.5rem;
  }
}

/* F-034: the operation chat. Messages scroll inside the card; the user's own messages are tinted. */
.app-chat-messages {
  max-height: 22rem;
  overflow-y: auto;
}

.app-chat-message {
  border: 1px solid var(--tblr-border-color, #dadfe5);
  border-radius: var(--tblr-border-radius);
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}

.app-chat-own {
  background: var(--tblr-primary-lt, #e9f0f9);
}

/* F-151: on a phone the layout controls stack with room between them. */
@media (max-width: 767.98px) {
  .report-layout > [class^="col-"] {
    margin-bottom: 0.5rem;
  }
}

/* F-152: the existing values of a condition's field open under its value box; a long list scrolls. */
.condition-value {
  position: relative;
}

.condition-suggestions {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 20;
  max-height: 16rem;
  overflow-y: auto;
  margin-top: 0.25rem;
  padding: 0.25rem;
  background: var(--tblr-bg-surface, #fff);
  border: 1px solid var(--tblr-border-color, #dadfe5);
  border-radius: var(--tblr-border-radius);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
}

.condition-suggestions button {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  text-align: start;
  background: none;
  border: 0;
  border-radius: var(--tblr-border-radius);
  color: inherit;
}

.condition-suggestions button:hover,
.condition-suggestions button:focus-visible {
  background: var(--tblr-primary-lt, #e9f0f9);
}

.condition-suggestions small {
  display: block;
  padding: 0.5rem 0.75rem;
  color: var(--tblr-secondary);
}

/* F-123: the step edit form keeps long unbroken values inside the phone's width. */
.app-step-edit {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* F-138 (R-783): a searchable picker. Its search box sits on the select; the list of matches opens over the page,
   above the tables and cards under it, and scrolls when long (prototype refine-ui.css .search-list-menu). */
.app-picker {
  position: relative;
  margin-bottom: 0.25rem;
  min-width: 0;
}

.app-picker-menu {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  z-index: 1060;
  min-width: 12rem;
  margin-top: 2px;
  padding: 0.375rem;
  background: var(--tblr-bg-surface, #fff);
  border: 1px solid var(--tblr-border-color, #dadfe5);
  border-radius: var(--tblr-border-radius);
  box-shadow: 0 8px 22px rgba(23, 61, 83, 0.15);
}

.app-picker-menu[hidden] {
  display: none;
}

.app-picker-results {
  max-height: 14rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.app-picker-option {
  display: block;
  width: 100%;
  text-align: start;
  white-space: normal;
  overflow-wrap: anywhere;
  padding: 0.5rem;
  margin: 2px 0;
  font-size: 0.8125rem;
  background: transparent;
  color: inherit;
  border: 1px solid transparent;
  border-radius: var(--tblr-border-radius);
}

.app-picker-option:hover,
.app-picker-option:focus-visible {
  background: var(--tblr-primary-lt, #e9f0f9);
  outline: none;
}

.app-picker-option[aria-selected="true"] {
  border-color: var(--tblr-primary, #066fd1);
}

.app-picker-empty {
  margin: 0;
  padding: 0.5rem;
  font-size: 0.8125rem;
  color: var(--tblr-secondary, #667382);
}

/* On a phone the search box keeps 16px text so the browser does not zoom in (update-v1.css iphone-mode). */
@media (max-width: 767.98px) {
  .app-picker-search {
    font-size: 16px;
  }
}

/* F-104 (R-519): a request code and its copy button, and the confirmation after copying. */
.request-code {
  direction: ltr;
  unicode-bidi: isolate;
}
.copy-toast {
  position: fixed;
  inset-inline: 1rem;
  bottom: 1rem;
  z-index: 1080;
  max-width: 28rem;
  margin-inline: auto;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: #1d6b3a;
  color: #fff;
  font-weight: 600;
  text-align: center;
  overflow-wrap: anywhere;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
}
.copy-toast[hidden] {
  display: none;
}
.copy-toast-failed {
  background: #b42318;
}

/* F-140: the bell of the top bar and the unread notifications of الإشعارات والمراسلات. */
.app-notice-bell {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

@media (max-width: 575.98px) {
  .app-notice-bell .app-notice-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.app-notice-item {
  padding: 0.8rem 1rem;
  border-inline-start: 3px solid transparent;
}
.app-notice-item b {
  color: var(--el-navy);
}
.app-notice-item p {
  font-size: 0.85rem;
  color: var(--el-neutral);
}
.app-notice-item.is-unread {
  border-inline-start: 3px solid var(--el-orange);
  background: #fffaf2;
}
/* A long list of rows scrolls inside its card instead of stretching the page. */
.el-scroll {
  max-height: 70vh;
  overflow-y: auto;
}
.el-scroll-short {
  max-height: 22rem;
}

/* F-141: متابعة المهام, a panel under the top bar. */
.app-follow {
  position: relative;
}
.drag-handle {
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.app-follow-pop {
  position: fixed;
  top: 9rem;
  inset-inline-end: 0.75rem;
  z-index: 1040;
  width: min(28rem, calc(100vw - 1.5rem));
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  box-shadow: var(--el-shadow-lg);
}

/* ------------------------------------------------------------------ the header: dark, brand, company, tabs */
body {
  background: var(--el-bg);
  color: var(--el-ink);
}

.app-topbar {
  background: var(--el-navy);
  color: #fff;
  position: relative;
  z-index: 1030;
}

.app-topbar-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  max-width: 1600px;
  margin-inline: auto;
  padding: 0.7rem 1rem 0.4rem;
}

.app-brand {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

/* The brand "El Monitor": "El" in the base colour, "Monitor" in orange. One text node, so a hard colour stop does it. */
.app-brand,
.login-card .brand,
.error-card .error-brand {
  --el-brand-base: #fff;
  direction: ltr;
  width: fit-content;
  color: transparent;
  /* The colour changes inside the space (0.91em to 1.15em), not at 1.2em: there it cut the left stem of the M and
     drew a thin stray line between "El" and "Monitor". */
  background: linear-gradient(90deg, var(--el-brand-base) 0 1.03em, var(--el-orange) 1.03em);
  -webkit-background-clip: text;
  background-clip: text;
}

.login-card .brand,
.error-card .error-brand {
  --el-brand-base: var(--el-navy);
  margin-inline: auto;
}

.app-brand:hover {
  color: transparent;
}

.app-topbar .app-company {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #c9dbe6;
  padding-inline-start: 1rem;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.2);
}

.app-topbar .app-company-name {
  color: #e6eff5;
  font-weight: 500;
}

.app-topbar .app-company-logo {
  background: #fff;
  border-radius: 6px;
  padding: 2px 4px;
}

.app-topbar .app-env {
  background: rgba(220, 145, 63, 0.18);
  color: #f3c690;
  font-weight: 500;
}

.app-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
}

.app-topbar .btn,
.app-topbar .btn-outline-primary {
  --tblr-btn-color: #fff;
  --tblr-btn-border-color: rgba(255, 255, 255, 0.28);
  --tblr-btn-hover-bg: rgba(255, 255, 255, 0.12);
  --tblr-btn-hover-color: #fff;
  --tblr-btn-hover-border-color: rgba(255, 255, 255, 0.5);
  --tblr-btn-active-bg: rgba(255, 255, 255, 0.18);
  --tblr-btn-active-color: #fff;
  --tblr-btn-bg: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  background: transparent;
  border-radius: 8px;
}

.app-topbar .btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.app-topbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.35);
  padding: 0.3rem 0.55rem;
}

.app-topbar .navbar-toggler-icon {
  filter: invert(1);
}

.app-sidebar {
  display: block;
  background: var(--el-navy);
  color: #c2d2dd;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: 0 6px 18px rgba(11, 48, 72, 0.22);
  position: relative;
  z-index: 1020;
}

.app-sidebar-inner {
  max-width: 1600px;
  margin-inline: auto;
  padding: 0 1rem 0.6rem;
}

.app-user {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  padding: 0.25rem 0 0.5rem;
}

.app-user .app-user-name {
  font-weight: 600;
  color: #fff;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.app-active-project {
  color: #fff;
}

.app-memberships {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-membership {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.1rem 0.7rem;
  margin-inline: 0;
  color: #d7e5ee;
}

.app-membership.is-active {
  background: rgba(220, 145, 63, 0.2);
  border-color: rgba(220, 145, 63, 0.55);
  color: #fff;
}

.app-membership .badge {
  background: transparent;
  color: #a9c2d1;
}

.app-membership .badge.bg-green {
  background: var(--el-good) !important;
  color: #fff !important;
}

.app-sidebar .btn-outline-light {
  border-radius: 999px;
}

/* The role tabs: one tab per menu entry the user's roles have. */
.app-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.25rem 0 0.1rem;
  margin: 0;
  list-style: none;
}

.app-tabs .nav-link {
  color: #c2d2dd;
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  font-size: 0.875rem;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}

.app-tabs .nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.app-tabs .nav-link.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-bottom-color: var(--el-orange);
  font-weight: 600;
}

@media (max-width: 991.98px) {
  .app-topbar-inner {
    flex-wrap: wrap;
    padding-top: 0.6rem;
  }

  .app-brand {
    font-size: 1.35rem;
  }

  .app-topbar .app-company {
    order: 10;
    width: 100%;
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .app-topbar-actions {
    margin-inline-start: auto;
  }

  .app-tabs {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .app-tabs .nav-link {
    white-space: normal;
    padding: 0.65rem 0.8rem;
  }
}

/* ------------------------------------------------------------------ floating chat and task buttons */
.app-fabs {
  position: fixed;
  inset-inline-end: 1rem;
  bottom: 1rem;
  z-index: 1045;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}

.app-fabs .app-follow {
  position: static;
}

.app-fabs .btn,
.app-fabs .app-notice-bell {
  background: var(--el-teal);
  color: #fff;
  border: 0;
  border-radius: 999px;
  box-shadow: var(--el-shadow-lg);
  padding: 0.65rem 1rem;
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}

.app-fabs .btn:hover {
  background: var(--el-navy);
  color: #fff;
}

.app-fabs .btn .badge {
  background: var(--el-orange) !important;
  color: #fff !important;
  border-radius: 999px;
  min-width: 1.4rem;
}

#follow-toggle .app-notice-label {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
}

@media (max-width: 575.98px) {
  .app-fabs .btn .app-fab-label {
    display: none;
  }

  .app-fabs .btn {
    padding: 0.65rem 0.8rem;
  }

  #follow-toggle .app-notice-label {
    display: none;
  }
}

.page-body {
  padding-bottom: 6rem;
}

/* ------------------------------------------------------------------ page, cards, tables, forms, buttons */
.page-body {
  margin-top: 1.25rem;
}

.container-xl {
  max-width: 1600px;
}

.page-title,
h1,
h2,
h3 {
  color: var(--el-navy);
  font-weight: 700;
}

.card {
  border: 1px solid var(--el-line);
  border-radius: var(--el-radius);
  box-shadow: var(--el-shadow);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--el-line);
}

.card-title {
  color: var(--el-navy);
  font-weight: 700;
}

.card-footer {
  background: #f6f9fa;
  border-top: 1px solid var(--el-line);
}

.table > :not(caption) > * > * {
  border-bottom-color: #e9eff3;
}

.table thead th,
.table > thead > tr > th {
  background: #f6f9fa;
  color: var(--el-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.table-hover > tbody > tr:hover > * {
  background: #f1f7f8;
}

.btn {
  border-radius: 8px;
  font-weight: 500;
}

.btn-primary {
  --tblr-btn-bg: var(--el-teal);
  --tblr-btn-border-color: var(--el-teal);
  --tblr-btn-hover-bg: var(--el-navy);
  --tblr-btn-hover-border-color: var(--el-navy);
  --tblr-btn-active-bg: var(--el-navy);
  --tblr-btn-active-border-color: var(--el-navy);
  --tblr-btn-disabled-bg: var(--el-teal);
  --tblr-btn-disabled-border-color: var(--el-teal);
}

.btn-outline-primary {
  --tblr-btn-color: var(--el-teal);
  --tblr-btn-border-color: var(--el-teal);
  --tblr-btn-hover-bg: var(--el-teal);
  --tblr-btn-hover-border-color: var(--el-teal);
  --tblr-btn-active-bg: var(--el-teal);
  --tblr-btn-active-border-color: var(--el-teal);
}

.form-control,
.form-select {
  border-color: #ccdae3;
  border-radius: 8px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--el-teal);
  box-shadow: 0 0 0 0.2rem rgba(11, 88, 102, 0.18);
}

.form-label {
  color: var(--el-ink);
  font-weight: 500;
}

.alert {
  border-radius: 10px;
}

.badge {
  font-weight: 500;
}

.empty-state,
.empty {
  background: #fff;
  border: 1px dashed var(--el-line);
  border-radius: var(--el-radius);
  color: var(--el-muted);
}

.empty-state {
  padding: 2rem 1rem;
}

.empty .empty-header {
  color: var(--el-orange);
  font-weight: 700;
}

.empty .empty-title {
  color: var(--el-navy);
}

/* ------------------------------------------------------------------ status badges (templates/core/_status_badge.html) */
.el-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 6px;
  padding: 0.15rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  background: var(--el-neutral-bg);
  color: var(--el-neutral);
}

.el-status::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}

.el-status-draft {
  background: #eef1f4;
  color: #5c6b78;
}

.el-status-review {
  background: var(--el-info-bg);
  color: var(--el-info);
}

.el-status-mine {
  background: var(--el-warn-bg);
  color: var(--el-warn);
}

.el-status-approved {
  background: var(--el-good-bg);
  color: var(--el-good);
}

.el-status-refused {
  background: var(--el-bad-bg);
  color: var(--el-bad);
}

.el-status-cancelled {
  background: #f1eaea;
  color: #7d5a5a;
  text-decoration: line-through;
}

.el-status-archived {
  background: #e9e7f2;
  color: #5b5a85;
}

/* ------------------------------------------------------------------ the login page and the error pages */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem 1rem;
  background: linear-gradient(140deg, var(--el-navy), #0c5964);
}

.login-card {
  background: #fff;
  border-radius: 20px;
  padding: 2.25rem;
  max-width: 490px;
  width: 100%;
  box-shadow: 0 25px 90px rgba(0, 20, 27, 0.35);
}

.login-card .brand {
  font-size: 2rem;
  font-weight: 700;
  direction: ltr;
  text-align: center;
  margin-bottom: 0.5rem;
}


.login-card .eyebrow {
  font-size: 0.7rem;
  letter-spacing: 1.8px;
  color: var(--el-teal);
  direction: ltr;
  text-align: center;
  margin: 0;
}

.login-card h1 {
  font-size: 1.5rem;
  text-align: center;
  margin: 0.5rem 0;
}

.login-card .muted {
  color: var(--el-muted);
  text-align: center;
  font-size: 0.85rem;
}

.login-card .btn-primary {
  width: 100%;
  padding: 0.6rem;
}

body.app-plain {
  background: linear-gradient(140deg, var(--el-navy), #0c5964);
  min-height: 100vh;
}

body.app-plain .page-center {
  min-height: 100vh;
}

.error-card {
  background: #fff;
  border-radius: 20px;
  padding: 2rem 1.5rem;
  box-shadow: 0 25px 90px rgba(0, 20, 27, 0.35);
  text-align: center;
}

.error-card .error-code {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--el-orange);
  direction: ltr;
}

.error-card .error-brand {
  font-size: 1.4rem;
  font-weight: 700;
  direction: ltr;
}


html,
body {
  overflow-x: clip;
}

/* ------------------------------------------------------------------ session 2: home, notifications, follow-up */
.el-hero {
  background: linear-gradient(135deg, var(--el-navy), var(--el-teal));
  color: #fff;
  border-radius: 18px;
  padding: 1.6rem 1.75rem;
  box-shadow: var(--el-shadow-lg);
}
.el-hero-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
  direction: ltr;
  text-transform: uppercase;
  text-align: start;
}
[dir="rtl"] .el-hero-eyebrow {
  text-align: right;
}
.el-hero-project::before {
  content: " / ";
  white-space: pre;
}
.el-hero-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0.3rem 0;
}
.el-hero-sub {
  color: rgba(255, 255, 255, 0.85);
}
.el-hero-chip {
  display: inline-block;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0.1rem 0.7rem;
  font-size: 0.8rem;
  margin-inline-start: 0.4rem;
}
.el-tile {
  border: 1px solid var(--el-line);
  border-radius: 14px;
  box-shadow: var(--el-shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}
.el-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--el-shadow-lg);
}
.el-tile .h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--el-navy);
  margin: 0.2rem 0;
}
.el-tile .h1.text-red {
  color: var(--el-bad) !important;
}
.el-tile-more {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--el-teal);
}
.card-header .card-title {
  color: var(--el-navy);
  font-weight: 700;
}
.list-group-item-action:hover {
  background: var(--el-bg);
}
.app-notice-item.is-unread {
  border-inline-start: 4px solid var(--el-orange);
  background: var(--el-warn-bg);
}
.app-follow-pop {
  border: 1px solid var(--el-line);
  border-radius: 16px;
  overflow-x: hidden;
}
.app-follow-pop .card-header {
  background: var(--el-navy);
  border-radius: 16px 16px 0 0;
}
.app-follow-pop .card-title {
  color: #fff;
}

/* ------------------------------------------------------------------ site operations: document pages and forms (session 3) */
.page-body .page-header {
  background: #fff;
  border: 1px solid var(--el-line);
  border-inline-start: 4px solid var(--el-orange);
  border-radius: var(--el-radius);
  box-shadow: var(--el-shadow);
  padding: 0.9rem 1.1rem;
  /* The page body already leaves the space under the dark header; Tabler's own top margin doubled it. */
  margin-top: 0;
}
.page-body .page-header .page-title {
  font-size: 1.3rem;
  margin: 0.1rem 0 0;
}
.page-body .page-header .text-secondary.small {
  color: var(--el-teal) !important;
  font-weight: 600;
}
.card-header {
  min-height: 0;
  padding: 0.75rem 1.1rem;
  background: linear-gradient(180deg, #fafcfd, #f3f7f9);
  border-radius: var(--el-radius) var(--el-radius) 0 0;
}
.card-header .card-title {
  font-size: 1rem;
  margin: 0;
}
.card-header .card-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--el-orange);
  margin-inline-end: 0.5rem;
  vertical-align: middle;
}
.card-body dl.row {
  margin-bottom: 0;
}
.card-body dl.row > dt,
.card-body dl.row > dd {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin: 0;
  border-bottom: 1px dashed var(--el-line);
}
.card-body dl.row > dt {
  color: var(--el-muted);
  font-weight: 500;
  font-size: 0.86rem;
}
.card-body dl.row > dd {
  color: var(--el-ink);
  font-weight: 500;
}
.card-body dl.row > dt:nth-last-of-type(1),
.card-body dl.row > dd:last-of-type {
  border-bottom: 0;
}
.list-group-item {
  border-color: var(--el-line);
}
form .card-footer,
.card-footer {
  border-radius: 0 0 var(--el-radius) var(--el-radius);
}
.form-label.required::after,
.required .form-label::after {
  color: var(--el-orange);
}
.form-hint,
.form-text {
  color: var(--el-muted);
}
.alert-success {
  background: var(--el-good-bg);
  border-color: #bfe3d2;
  color: var(--el-good);
}
.alert-danger {
  background: var(--el-bad-bg);
  border-color: #f2c9c3;
  color: var(--el-bad);
}
.alert-info {
  background: var(--el-info-bg);
  border-color: #c4dcec;
  color: var(--el-info);
}
.alert-warning {
  background: var(--el-warn-bg);
  border-color: #f0d9b0;
  color: var(--el-warn);
}

/* ------------------------------------------------------------------ prototype layout: dark sidebar on the right
   (240px, tabs stacked) on a desktop; on a phone a row of tabs that scrolls sideways (reference app.css). */
@media (min-width: 992px) {
  .app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 240px;
    overflow-y: auto;
    box-shadow: none;
    z-index: 1031;
  }
  .app-sidebar-inner {
    max-width: none;
    margin: 0;
    padding: 1.25rem 0.75rem 1.5rem;
  }
  .app-sidebar .navbar-collapse {
    display: block !important;
    flex-basis: auto;
  }
  .app-user {
    display: block;
    padding: 0 0.35rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 0.5rem;
  }
  .app-memberships {
    display: grid;
    margin-top: 0.4rem;
  }
  .app-membership {
    border-radius: 10px;
  }
  .app-sidebar .app-tabs {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.15rem;
  }
  .app-tabs .nav-link {
    white-space: normal;
    padding: 0.6rem 0.75rem;
    border-bottom: 0;
    border-inline-start: 3px solid transparent;
    border-radius: 6px;
  }
  .app-tabs .nav-link.active {
    border-bottom: 0;
    border-inline-start-color: var(--el-orange);
  }
  .app-topbar,
  .page-wrapper {
    margin-inline-start: 240px;
  }
  .app-topbar .navbar-toggler {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .app-sidebar-inner {
    padding-bottom: 0.4rem;
  }
  .app-user {
    padding-bottom: 0.2rem;
  }
  .app-sidebar .navbar-collapse,
  .app-sidebar .navbar-collapse.collapse:not(.show) {
    display: block;
  }
  .app-sidebar .app-tabs {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.4rem;
    padding-bottom: 0.5rem;
  }
  .app-sidebar .app-tabs .nav-item {
    flex: 0 0 auto;
  }
  .app-tabs .nav-link {
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
  }
  /* The floating buttons are round icons here, so they cover less of the form fields behind them. */
  .app-fabs .app-fab-label {
    display: none;
  }
  /* One low row in the corner, as the prototype's buttons (communications.css #comms-ui), not a tall column
     over the left edge of the fields. */
  .app-fabs {
    flex-direction: row;
    align-items: flex-end;
    gap: 0.45rem;
    inset-inline-end: 0.6rem;
    bottom: 0.6rem;
  }
  .app-fabs .btn,
  .app-fabs .app-notice-bell {
    padding: 0.45rem 0.6rem;
    min-height: 2.4rem;
    transition: opacity 0.15s ease;
  }
  /* While the user types in a field of the page, the buttons fade so the field behind them stays readable. */
  body:has(.page-body :is(input, textarea, select):focus) .app-fabs:not(:focus-within) .btn,
  body:has(.page-body :is(input, textarea, select):focus) .app-fabs:not(:focus-within) .app-notice-bell {
    opacity: 0.35;
  }
  .page-body {
    padding-bottom: 4rem;
  }
}

/* The operation manager's figure tiles have a coloured edge, as in the prototype. */
[data-testid="om-counters"] .card {
  border-inline-start: 4px solid var(--el-teal);
}
[data-testid="om-counters"] [data-counter="overdue"],
[data-testid="om-counters"] [data-counter="stopped"] {
  border-inline-start-color: #c0392b;
}
[data-testid="om-counters"] [data-counter="completed_late"],
[data-testid="om-counters"] [data-counter="unknown"] {
  border-inline-start-color: var(--el-orange);
}
[data-testid="om-counters"] [data-counter="completed_on_time"] {
  border-inline-start-color: var(--el-good);
}
@media (min-width: 992px) {
  .app-sidebar .app-tabs .nav-link {
    justify-content: flex-start;
    text-align: start;
  }
}

/* ------------------------------------------------------------------ second pass, session 1: the document page
   Header card with the state badge and chips, an action bar, a main column (fields and actions) and a side column
   (files, the step timeline, the workflow chart). One column on a phone: the main column first. */
.el-doc-head {
  padding: 1rem 1.25rem;
}
.el-doc-eyebrow {
  color: var(--el-teal);
  font-size: 0.82rem;
  font-weight: 600;
}
.el-doc-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.el-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #f3f7f9;
  border: 1px solid var(--el-line);
  border-radius: 999px;
  padding: 0.12rem 0.75rem;
  font-size: 0.82rem;
  color: var(--el-navy-2);
}
.el-chip-project::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--el-teal);
}
.el-chip-due::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--el-orange);
}
.el-doc-head [data-testid="document-meta"] {
  border-top: 1px dashed var(--el-line);
  padding-top: 0.55rem;
}

/* The action bar stays under the dark header while the page scrolls. */
.el-action-bar {
  position: sticky;
  top: 0.5rem;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--el-line);
  border-inline-start: 4px solid var(--el-teal);
  border-radius: var(--el-radius);
  box-shadow: var(--el-shadow);
  padding: 0.55rem 0.9rem;
  margin-bottom: 1rem;
}
.el-action-bar .btn {
  flex: 0 1 auto;
}
.el-action-bar-text {
  color: var(--el-navy);
  font-weight: 600;
}
.el-action-bar-text::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--el-orange);
  margin-inline-end: 0.5rem;
}
@media (max-width: 575.98px) {
  .el-action-bar .btn {
    flex: 1 1 100%;
  }
}

/* The main column's inner cards fill the column, whatever width the shared partials ask for. */
.el-doc-main > .row > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
}
.el-doc-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.el-doc-side > .card,
.el-doc-side > section.card {
  margin: 0;
}
.wf-node {
  border-top-width: 4px;
}
.el-doc-side .wf-chart {
  gap: 1.75rem;
}
.el-doc-side .wf-card .card-body {
  padding: 0.9rem;
}

/* A card that holds a form is an action card: a teal edge. The action bar above links to it. */
.card:has(> .card-body > form),
.card:has(> form) {
  border-top: 3px solid var(--el-teal);
}
.card:has(> .card-body > form) form > .btn[type="submit"]:last-child {
  box-shadow: 0 4px 12px rgba(11, 88, 102, 0.25);
}
.card[id],
[id="el-actions"] {
  scroll-margin-top: 5rem;
}
.card:target {
  box-shadow: 0 0 0 3px rgba(220, 145, 63, 0.45);
}

/* The step timeline: a vertical line with a dot for each step, who did what, the note, the time. */
.el-timeline {
  position: relative;
  padding-inline-start: 0;
}
.el-timeline-item {
  position: relative;
  padding-inline-start: 1.9rem;
  padding-bottom: 1.1rem;
}
.el-timeline-item:last-child {
  padding-bottom: 0;
}
.el-timeline-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.5rem;
  top: 1.2rem;
  bottom: -0.1rem;
  width: 2px;
  background: var(--el-line);
}
.el-timeline-item:last-child::before {
  display: none;
}
.el-timeline-dot {
  position: absolute;
  inset-inline-start: 0.15rem;
  top: 0.3rem;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: var(--el-teal);
  box-shadow: 0 0 0 4px #dcecee;
}
.el-timeline-item:last-child .el-timeline-dot {
  background: var(--el-orange);
  box-shadow: 0 0 0 4px #fbe9d3;
}
.el-timeline-who {
  font-weight: 700;
  color: var(--el-navy);
  line-height: 1.6;
}
.el-timeline-action {
  color: var(--el-teal);
  font-weight: 600;
  font-size: 0.9rem;
}
.el-timeline-note {
  margin-top: 0.3rem;
  padding: 0.4rem 0.7rem;
  background: #f5f8fa;
  border-radius: 8px;
  border-inline-start: 3px solid var(--el-line);
  font-size: 0.9rem;
}
.el-timeline-time {
  margin-top: 0.25rem;
}

/* Attachments: compact file cards. */
.app-attachment-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.el-file {
  justify-content: space-between;
  background: #f7fafb;
  border: 1px solid var(--el-line);
  border-radius: 10px;
  padding: 0.4rem 0.65rem;
}
.el-file-link {
  min-width: 0;
  font-weight: 500;
}
.el-file-icon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 8px;
  background: #e3eff1;
  color: var(--el-teal);
  font-weight: 700;
}
.el-file-size {
  flex: 0 0 auto;
}
li[data-testid$="-empty"] {
  color: var(--el-muted);
}

/* ------------------------------------------------------------------ second pass, session 1: create and edit forms
   Sections with a heading, two columns on a desktop and one on a phone, a clear primary and secondary button. */
.el-form-section {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--el-line);
  color: var(--el-navy);
  font-size: 1rem;
  font-weight: 700;
}
.el-form-section::before {
  content: "";
  width: 4px;
  height: 1.1rem;
  border-radius: 2px;
  background: var(--el-orange);
}
.el-form .row > .col-12:not(:first-child) > .el-form-section,
.el-fields-grid > .el-form-section:not(:first-child) {
  margin-top: 1.1rem;
}
.el-fields-grid > .el-form-section {
  grid-column: 1 / -1;
}
@media (min-width: 768px) {
  .el-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
    align-items: start;
  }
  .el-fields-grid > * {
    grid-column: 1 / -1;
  }
  .el-fields-grid > .mb-3:has(> :is(input:not([type="file"], [type="checkbox"], [type="hidden"]), select, .form-control-plaintext, .fw-bold, .input-group)) {
    grid-column: auto;
  }
}
.el-form .card-footer {
  padding: 0.9rem 1.25rem;
  background: #f6f9fa;
}
.el-form .card-footer .btn-primary {
  min-width: 11rem;
  font-weight: 600;
}
.el-form .card-footer .btn-outline-secondary {
  background: #fff;
  border-color: #ccdae3;
  color: var(--el-navy);
}
@media (max-width: 575.98px) {
  .el-form .card-footer {
    flex-direction: column;
  }
  .el-form .card-footer .btn {
    width: 100%;
  }
}
.app-signature .form-check {
  background: #f6f9fa;
  border: 1px solid var(--el-line);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.app-signature .form-check-input {
  float: none;
  margin: 0;
  flex: 0 0 auto;
}
.app-signature .form-check-input:checked {
  background-color: var(--el-teal);
  border-color: var(--el-teal);
}
.app-attachments .form-control[type="file"] {
  background: #f9fbfc;
  border-style: dashed;
}

/* Errors: a field's message under it, and the form's message at the top, in the same red as the status badges. */
.invalid-feedback,
.form-error {
  color: var(--el-bad);
  font-size: 0.85rem;
  font-weight: 500;
}
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: #d98a80;
  background-color: #fffafa;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 0.2rem rgba(170, 73, 61, 0.18);
}
.alert-danger[data-testid="form-error"] {
  border-inline-start: 4px solid var(--el-bad);
  font-weight: 500;
}
.alert-danger[data-testid="form-error"]::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  margin-inline-end: 0.5rem;
  border-radius: 50%;
  background: var(--el-bad);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

/* Searchable selects: a search box with a magnifier on top of the select, and a rounded list of matches. */
.app-picker-search {
  background-color: #f6f9fa;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b8090' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  padding-inline-start: 2.2rem;
  border-color: #ccdae3;
  border-radius: 8px 8px 0 0;
  margin-bottom: -1px;
  font-size: 0.85rem;
}
.app-picker-search:focus {
  background-color: #fff;
}
.app-picker .form-select {
  border-radius: 0 0 8px 8px;
}
.app-picker-menu {
  border-color: var(--el-line);
  border-radius: var(--el-radius);
  box-shadow: var(--el-shadow-lg);
}
.app-picker-option:hover,
.app-picker-option:focus-visible {
  background: #e3eff1;
  color: var(--el-navy);
}
.app-picker-option[aria-selected="true"] {
  border-color: var(--el-teal);
  background: #f1f7f8;
  font-weight: 600;
}

/* ------------------------------------------------------------------ second pass, session 2: lists
   A list is a card of rows. Each row is one link (so a click anywhere opens the document). From 1200px the rows are
   a table (head line, columns); below that each row is a card with the cells in two columns, labelled by data-label. */
.el-list {
  overflow: hidden;
  padding: 0;
}
.el-list.el-list-flush {
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.el-lhead {
  display: none;
}
.el-lrow {
  display: block;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #e9eff3;
  color: var(--el-ink);
  text-decoration: none;
  position: relative;
}
.el-lrow:last-child {
  border-bottom: 0;
}
a.el-lrow:hover,
a.el-lrow:focus-visible {
  background: #f1f7f8;
  color: var(--el-ink);
}
.el-lrow .el-status {
  white-space: normal;
}
.el-lhead,
.el-lrow,
.el-lgrid {
  --el-cols: minmax(130px, 0.95fr) minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 0.9fr)
    minmax(0, 0.9fr);
}
.el-list-4 .el-lrow,
.el-list-4 .el-lhead {
  --el-cols: minmax(130px, 1fr) minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1fr);
}
.el-lrow.el-lrow-block {
  display: block;
}
.el-lgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 1rem;
  align-items: start;
}
.el-lrow:not(.el-lrow-block) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 1rem;
  align-items: start;
}
.el-c {
  min-width: 0;
}
.el-c-num,
.el-c-title {
  grid-column: 1 / -1;
}
.el-c-num {
  order: -1;
}
.el-c[data-label]::before {
  content: attr(data-label);
  display: block;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--el-muted);
}
.el-title {
  font-weight: 700;
  color: var(--el-navy);
  display: block;
}
a.el-title:hover {
  color: var(--el-teal);
}
/* Due and late: red when late, amber within a day, quiet otherwise. */
.el-due {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 6px;
  font-size: 0.78rem;
  white-space: nowrap;
}
.el-due-late {
  background: var(--el-bad-bg);
  color: var(--el-bad);
  font-weight: 700;
}
.el-due-soon {
  background: var(--el-warn-bg);
  color: var(--el-warn);
  font-weight: 600;
}
.el-due-ok {
  color: var(--el-muted);
  padding-inline: 0;
}
@media (min-width: 1200px) {
  .el-lhead {
    display: grid;
    grid-template-columns: var(--el-cols);
    gap: 0 1rem;
    padding: 0.7rem 1rem;
    background: #f6f9fa;
    border-bottom: 1px solid #e9eff3;
    font-size: 0.75rem;
    color: var(--el-muted);
    font-weight: 600;
  }
  .el-list-4 .el-lhead {
    grid-template-columns: var(--el-cols);
  }
  .el-lrow:not(.el-lrow-block),
  .el-lgrid {
    grid-template-columns: var(--el-cols);
    align-items: center;
  }
  .el-c-num,
  .el-c-title {
    grid-column: auto;
  }
  .el-c[data-label]::before {
    content: none;
  }
}
/* The search bar and the state tabs with their counts. */
.el-filterbar {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.el-search {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0;
}
.el-search .form-control {
  flex: 1 1 14rem;
  min-width: 0;
}
.el-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.el-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--el-neutral-bg);
  color: var(--el-neutral);
  font-size: 0.85rem;
  text-decoration: none;
}
.el-tab:hover {
  background: #dbe8ef;
  color: var(--el-navy);
}
.el-tab.is-active {
  background: var(--el-navy);
  color: #fff;
}
.el-tab-count {
  display: inline-block;
  min-width: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--el-navy);
  font-size: 0.75rem;
  text-align: center;
}
.el-tab.is-active .el-tab-count {
  background: var(--el-orange);
  color: #fff;
}
.el-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}
.el-pager-info {
  color: var(--el-muted);
  font-size: 0.85rem;
}
.el-c-act {
  grid-column: 1 / -1;
}
.el-c-act .btn {
  width: 100%;
}
@media (min-width: 1200px) {
  .el-c-act {
    grid-column: auto;
  }
  .el-c-act .btn {
    width: auto;
  }
}
.el-status-priority {
  background: var(--el-warn-bg);
  color: var(--el-warn);
  margin-inline-start: 0.35rem;
}
.el-counter.is-active {
  background: var(--el-info-bg);
}
/* A chat room in the list of unread chats, and a follow-up row. */
.el-room-icon {
  flex: 0 0 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  background: var(--el-info-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231f5f86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20l1.3-3.9a9 8 0 1 1 3.4 2.9L3 20'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.el-room [data-testid="unread-room-title"] {
  font-weight: 700;
  color: var(--el-navy);
}
.el-room [data-testid="unread-room-count"] {
  border-radius: 999px;
  min-width: 1.8rem;
}
[data-testid="follow-list"] .list-group-item {
  padding: 0.8rem 1rem;
}
[data-testid="follow-item-title"] {
  color: var(--el-navy);
}
/* Empty states: a soft icon over the message. */
.el-empty::before {
  content: "▤";
  display: block;
  font-size: 1.8rem;
  line-height: 1.4;
  color: #b5c6d1;
}
.el-empty-search::before {
  content: "⌕";
}

/* ------------------------------------------------------------------ second pass, session 3: tables, tiles, charts
   Every scrolling table keeps its head row in view (sticky) and scrolls inside its card, never the page. Numbers use
   tabular figures so columns line up. A tile that is not a link has no lift and no "عرض التفاصيل". */
.el-stat {
  cursor: default;
}
.el-stat:hover {
  transform: none;
  box-shadow: var(--el-shadow);
}
.el-stat .text-secondary {
  font-size: 0.82rem;
}
.table-responsive {
  max-height: 75vh;
  overflow: auto;
  border-radius: var(--el-radius);
}
.table-responsive > .table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f6f9fa;
  box-shadow: 0 1px 0 var(--el-line);
}
.table-responsive > .table > tfoot > tr > * {
  background: #f6f9fa;
  border-top: 2px solid var(--el-line);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.el-num-table .el-num,
.el-num {
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.el-table td,
.el-table th {
  vertical-align: middle;
}
.el-num-table > thead > tr > th,
.el-num-table > tbody > tr > td {
  padding: 0.6rem 0.45rem;
  font-size: 0.82rem;
  line-height: 1.35;
}
.el-num-table > thead > tr > th {
  white-space: normal;
  vertical-align: bottom;
}
/* A label inside a figure cell: only the phone card shows it (the table has its head row). */
.el-cell-label {
  display: none;
}
.el-num-table > tbody > tr > td:nth-child(-n + 3) {
  min-width: 7.5rem;
}
@media (max-width: 767.98px) {
  /* A row of figures becomes a card: the name, project and role across the top, the figures two by two. */
  .el-num-table > tbody > tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--el-line);
  }
  .el-num-table > tbody > tr > td {
    display: block;
    padding: 0;
    border: 0;
    font-size: 0.9rem;
    text-align: start;
  }
  .el-num-table > tbody > tr > td:nth-child(-n + 3) {
    grid-column: 1 / -1;
  }
  .el-num-table > tbody > tr > td:nth-child(1) {
    font-size: 1rem;
    color: var(--el-navy);
  }
  .el-num-table > tbody > tr > td .el-cell-label {
    display: block;
    font-size: 0.7rem;
    color: var(--el-muted);
    font-weight: 400;
  }
  .el-num-table > tbody > tr > td[data-label]::before {
    display: block;
    font-size: 0.7rem;
    color: var(--el-muted);
    font-weight: 400;
    text-transform: none;
    margin: 0;
    width: auto;
  }
}
.el-table-card {
  overflow: hidden;
}
select.form-select[multiple] {
  padding: 0.35rem;
  border-radius: 10px;
  min-height: 7.5rem;
  background-image: none;
}
select.form-select[multiple] option {
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
}
@media (max-width: 767.98px) {
  .table-responsive {
    max-height: none;
  }
  .table-mobile-md .el-num {
    text-align: start;
  }
}