/* ==========================================================================
   APPLICATIONS — list, create, detail
   --------------------------------------------------------------------------
   Owned by the applications workstream.
   Rules for this file: design TOKENS only (no hex, no px colours), LOGICAL
   properties only (inline-start/end, block-start/end — never left/right), and
   nothing that cannot survive dir="rtl" and dir="ltr" alike. Loaded after
   app.css and apple.css, so it may rely on every token they define.

   Every class is prefixed .apl- (.app-* is taken by the shell in app.css).

   Contents
     1  List: stage tabs, table, and its small-screen layout
     2  New application: stepper, pickers, form fields, summary
     3  Application page: tracker, actions, columns, cards
   ========================================================================== */


/* ==========================================================================
   1 · LIST
   ========================================================================== */

/* The tabs are the stage filter. They are already a segmented control (apple.css), but
   seven of them — longer in English than in Arabic — do not fit a narrow screen, and a
   control that scrolls sideways hides the tabs it has run out of room for. So this one
   wraps onto a second line instead, and its ends are rounded rather than pill-shaped so a
   wrapped control still looks like one. */
.apl-stages { min-inline-size: 0; max-inline-size: 100%; }

.apl-stages .tabs {
  flex-wrap: wrap;
  inline-size: fit-content;
  max-inline-size: 100%;
  overflow: visible;
  border-radius: var(--radius-xl);
}

.apl-count {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.5rem;
  padding-inline: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
  color: var(--color-text-muted);
  background: var(--color-fill);
  border-radius: var(--radius-pill);
}

/* Inside the selected tab's thumb the pill must stay legible on both the light and the
   dark thumb, so it takes the text colour on the sunken surface. */
.tabs__tab.is-active .apl-count {
  color: var(--color-text);
  background: var(--color-surface-sunken);
}

.apl-citizen,
.apl-when {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-inline-size: 0;
}

/* The number and its priority: the number is what is read, so it never wraps. */
.apl-number {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}
.apl-cell-number a { white-space: nowrap; }

.apl-cell-service { min-inline-size: 9rem; }
.apl-cell-updated { white-space: nowrap; }

/* What is still owed is the figure someone scans this column for. */
.apl-money--due { font-weight: var(--font-weight-semibold); }

/* A table cannot be read at 375px. Under 48rem every row becomes a card: the cells
   stack two to a line, each labelled from its data-label, and the header row — which
   the labels replace — is kept for assistive technology but not painted. */
@media (max-width: 47.99rem) {
  .apl-table thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .apl-table,
  .apl-table tbody { display: block; }

  .apl-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4);
    border-block-end: 1px solid var(--color-hairline);
  }
  .apl-table tbody tr:last-child { border-block-end: 0; }

  .apl-table td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-inline-size: 0;
    padding: 0;
    border: 0;
  }

  .apl-table td::before {
    content: attr(data-label);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-subtle);
  }

  /* The application number is the card's heading: full width, no label, with its
     priority beside it rather than under it. */
  .apl-table td.apl-cell-number {
    grid-column: 1 / -1;
    font-size: var(--font-size-md);
  }
  .apl-table td.apl-cell-number::before { content: none; }
  .apl-table .apl-number { flex-direction: row; align-items: center; gap: var(--space-3); }
  .apl-cell-service,
  .apl-cell-updated { min-inline-size: 0; white-space: normal; }
}


/* ==========================================================================
   2 · NEW APPLICATION
   ========================================================================== */

/* -- stepper --------------------------------------------------------------- */

.apl-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.apl-step {
  display: flex;
  flex: 1 1 12rem;
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
}

.apl-step__marker {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-circle);
}

.apl-step__text {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.apl-step__label,
.apl-step__link {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.apl-step__link {
  min-block-size: var(--tap-target-min);
  padding: 0;
  text-align: start;
  color: var(--color-link);
  cursor: pointer;
}
.apl-step__link:hover { color: var(--color-link-hover); text-decoration: underline; }

.apl-step__summary {
  overflow: hidden;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.apl-step__summary:empty { display: none; }

/* The step the employee is on: ring and filled marker, not colour alone. */
.apl-step.is-current {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.apl-step.is-current .apl-step__marker {
  color: var(--color-primary-fg);
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.apl-step.is-current .apl-step__label { color: var(--color-text); }

/* A step already done carries a tick. */
.apl-step.is-done .apl-step__marker {
  color: var(--color-success-fg);
  background: var(--color-success-soft);
  border-color: var(--color-success);
}

/* -- layout: the form, and the summary that stays beside it ----------------- */

.apl-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.apl-create__main,
.apl-create__aside { min-inline-size: 0; }

@media (min-width: 64rem) {
  .apl-create { grid-template-columns: minmax(0, 1fr) 21rem; }

  .apl-create__aside {
    position: sticky;
    inset-block-start: calc(var(--topbar-height) + var(--space-4));
  }
}

/* -- the citizen: a result to pick, and the pick once made ------------------ */

.apl-pick {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.apl-pick__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
  min-block-size: var(--tap-target-min);
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  text-align: start;
  cursor: pointer;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.apl-pick__item:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-strong);
}

.apl-pick__body,
.apl-chosen__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-inline-size: 0;
}

.apl-pick__title,
.apl-chosen__title { font-weight: var(--font-weight-semibold); }

.apl-pick__meta,
.apl-chosen__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.apl-chosen {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-md);
}

/* -- the service: cards, with the price on each ----------------------------- */

.apl-services {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-3);
}

.apl-service {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  min-block-size: var(--tap-target-min);
  padding: var(--space-4);
  text-align: start;
  cursor: pointer;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.apl-service:hover {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-sm);
}

/* Chosen: a heavier ring and a tick in the corner, so it does not rely on colour. */
.apl-service.is-selected {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary);
}

.apl-service__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.apl-service__name { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); }
.apl-service__tick { color: var(--color-primary); }
.apl-service__desc { font-size: var(--font-size-sm); color: var(--color-text-muted); }

.apl-service__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.apl-service__meta > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.apl-service__fee {
  margin-block-start: auto;
  padding-block-start: var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

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

.apl-fields { align-items: start; }

.apl-group {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.apl-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-6);
}

/* -- the summary ------------------------------------------------------------ */

.apl-summary__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}
.apl-summary__list dt {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}
.apl-summary__list dd { margin: 0; overflow-wrap: anywhere; }

.apl-summary__rule { margin-block: var(--space-4); }

.apl-summary__heading {
  margin-block-end: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.apl-feelist {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.apl-feelist__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
}
.apl-feelist__line + .apl-feelist__line { border-block-start: 1px solid var(--color-border-subtle); }
.apl-feelist__name { display: flex; flex-direction: column; min-inline-size: 0; }

.apl-feelist__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-3);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  border-block-start: 1px solid var(--color-border-strong);
}


/* ==========================================================================
   3 · APPLICATION PAGE
   ========================================================================== */

.apl-facts__sub {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* -- stage tracker ---------------------------------------------------------- */

.apl-track {
  --apl-marker: 2rem;

  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.apl-track__step {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
  padding-inline: var(--space-2);
  text-align: center;
}

/* The line to the previous stage: from the edge of its marker to the edge of this one. */
.apl-track__step + .apl-track__step::before {
  content: '';
  position: absolute;
  inset-block-start: calc(var(--apl-marker) / 2 - 1px);
  inset-inline-end: calc(50% + var(--apl-marker) / 2);
  inline-size: calc(100% - var(--apl-marker));
  border-block-start: 2px solid var(--color-border-strong);
}
/* Passed: the stage before it is done. */
.apl-track__step.is-done + .apl-track__step::before { border-color: var(--color-success); }
/* Never reached: dashed. */
.apl-track__step.is-upcoming::before { border-block-start-style: dashed; }

.apl-track__marker {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  inline-size: var(--apl-marker);
  block-size: var(--apl-marker);
  color: var(--color-text-subtle);
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-circle);
}

.apl-track__dot {
  inline-size: 0.375rem;
  block-size: 0.375rem;
  background: currentColor;
  border-radius: var(--radius-circle);
}

.apl-track__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

.apl-track__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}
.apl-track__caption {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.apl-track__step.is-done .apl-track__marker {
  color: var(--color-text-inverse);
  background: var(--color-success);
  border-color: var(--color-success);
}
.apl-track__step.is-done .apl-track__label { color: var(--color-text); }

/* The current stage: a ring, a filled centre, and a heavier label. */
.apl-track__step.is-current .apl-track__marker {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.apl-track__step.is-current .apl-track__dot { inline-size: 0.75rem; block-size: 0.75rem; }
.apl-track__step.is-current .apl-track__label {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

/* Where an ended application stopped: a cross. */
.apl-track__step.is-ended .apl-track__marker {
  color: var(--color-danger-fg);
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
}
.apl-track__step.is-ended .apl-track__label {
  font-weight: var(--font-weight-bold);
  color: var(--color-danger-fg);
}

@media (max-width: 39.99rem) {
  .apl-track { flex-direction: column; gap: var(--space-4); }

  .apl-track__step {
    flex-direction: row;
    align-items: flex-start;
    padding-inline: 0;
    text-align: start;
  }

  .apl-track__step + .apl-track__step::before { content: none; }

  /* The line runs down from each marker to the next stage's marker. */
  .apl-track__step:not(:last-child)::after {
    content: '';
    position: absolute;
    inset-block: var(--apl-marker) calc(-1 * var(--space-4));
    inset-inline-start: calc(var(--apl-marker) / 2 - 1px);
    border-inline-start: 2px solid var(--color-border-strong);
  }
  .apl-track__step.is-done:not(:last-child)::after { border-color: var(--color-success); }
}

/* -- actions ----------------------------------------------------------------- */

.apl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* The form an action opens — under the bar, or inside the card it belongs to. */
.apl-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.apl-panel--danger {
  border-color: var(--color-danger-border);
  border-inline-start: 4px solid var(--color-danger);
}
.apl-panel__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

/* -- columns -----------------------------------------------------------------
   On a phone the cards stack in the order of the work — documents, appointment,
   details, fees, notes, history. On a wide screen they sit in two columns: the
   paperwork on the wide one, the booking, the money and the record beside it. The
   wrappers disappear (display: contents) on a phone so `order` can interleave the
   cards of the two columns. */

.apl-columns {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.apl-columns__main,
.apl-columns__side { display: contents; }

.apl-card { min-inline-size: 0; }
.apl-card--documents { order: 1; }
.apl-card--appointment { order: 2; scroll-margin-block-start: calc(var(--topbar-height) + var(--space-4)); }
.apl-card--answers { order: 3; }
.apl-card--fees { order: 4; }
.apl-card--notes { order: 5; }
.apl-card--timeline { order: 6; }

@media (min-width: 64rem) {
  .apl-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: start;
  }

  .apl-columns__main,
  .apl-columns__side {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-inline-size: 0;
  }
}

/* -- documents ---------------------------------------------------------------- */

.apl-doc__name { font-weight: var(--font-weight-semibold); }

.apl-doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* -- fees --------------------------------------------------------------------- */

.apl-fee__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

/* A waived line is struck through and badged: the strike is the shape, not colour. */
.apl-fee__name.is-waived,
.apl-fee__amount.is-waived {
  color: var(--color-text-subtle);
  text-decoration: line-through;
}

.apl-fee__waived {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.apl-totals {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border-strong);
}
.apl-totals > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.apl-totals dt { color: var(--color-text-muted); }
.apl-totals dd { margin: 0; }
.apl-totals__due {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}
.apl-totals__due dt { color: var(--color-text); }

/* -- answers ------------------------------------------------------------------ */

.apl-answers dd { margin: 0; }

/* -- timeline ----------------------------------------------------------------- */

.apl-timeline {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.apl-timeline__entry {
  position: relative;
  display: flex;
  gap: var(--space-3);
  padding-block-end: var(--space-4);
}
.apl-timeline__entry:last-child { padding-block-end: 0; }

/* The line joining each entry to the next. */
.apl-timeline__entry:not(:last-child)::before {
  content: '';
  position: absolute;
  inset-block: 1rem 0;
  inset-inline-start: calc(0.375rem - 1px);
  border-inline-start: 2px solid var(--color-border);
}

.apl-timeline__marker {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  margin-block-start: 0.4rem;
  background: var(--color-primary);
  border-radius: var(--radius-circle);
}

.apl-timeline__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
}

.apl-timeline__note {
  overflow-wrap: anywhere;
  white-space: pre-line;
}

@media (forced-colors: active) {
  .apl-service.is-selected,
  .apl-step.is-current { outline: 2px solid Highlight; }
  .apl-track__step.is-current .apl-track__marker { outline: 2px solid Highlight; }
}