/* ==========================================================================
   PLATFORM — crossings management and the Super Admin area
   --------------------------------------------------------------------------
   Owned by the platform workstream. Prefix: .plat-
   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.

   Contents
     1  Module navigation   the pages of the crossings module, side by side
     2  Status chips        what a crossing is, in words and shapes
     3  Crossings list      a table that becomes one card per crossing when narrow
     4  Confirmation        the inline panel every change passes through, and its figures
     5  Crossing page       header, summary, sections
     6  Weekly hours        one block per weekday, several ranges each
     7  Lists               schedules, holidays, closures, special days, rules, types
   ========================================================================== */

/* ==========================================================================
   1 · MODULE NAVIGATION
   The sidebar has one entry for the whole module; these are the pages inside it.
   They wrap rather than scroll: three short pills never need to.
   ========================================================================== */

.plat-subnav {
  flex-wrap: wrap;
  overflow: visible;
}

/* ==========================================================================
   2 · STATUS CHIPS
   ========================================================================== */

.plat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ==========================================================================
   3 · CROSSINGS LIST
   Eight columns on a wide screen. Under 56rem the table is re-flowed as one card per
   crossing: the cells stack, each carrying its column's name (data-label) in front, and the
   header row is kept for screen readers only. Reading order is the DOM order, so nothing
   moves for assistive technology; the explicit table roles in the markup keep the table
   semantics that `display: block` would otherwise take away.
   ========================================================================== */

.plat-table td:first-child {
  min-inline-size: 12rem;
}

/* Wide enough for «الأحد–الخميس · 08:30–16:00» to sit on one line. */
.plat-table td:nth-child(4) {
  min-inline-size: 12.5rem;
}

/* The headings are longer than the figures under them: let them wrap instead of stretching
   their column. */
.plat-table thead th {
  white-space: normal;
  vertical-align: bottom;
}

.plat-table th,
.plat-table td {
  padding-inline: var(--space-2);
}

.plat-name {
  font-size: var(--font-size-md);
}

/* The name is the way into a crossing: on a touch screen it is a 44px target, not a line of text. */
@media (pointer: coarse) {
  .plat-name {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-target-min);
  }
}

.plat-type {
  display: block;
  font-weight: var(--font-weight-medium);
}

.plat-figure {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.plat-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.plat-code {
  padding-inline: var(--space-1);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  color: var(--color-text);
}

.plat-pattern {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.plat-pattern__sep {
  color: var(--color-text-subtle);
}

/* A disabled crossing recedes; its chip still says "Disabled" in words. */
.plat-row--off td {
  color: var(--color-text-muted);
}

.plat-actions__group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  min-inline-size: 7.5rem;
}

.plat-actions__group .btn {
  justify-content: flex-start;
}

/* A row-level Delete is quiet: a solid red button on every row makes a list look like an
   alarm. The loud, solid one is the confirmation's, which is where the harm would be done. */
.btn.plat-btn-danger {
  color: var(--color-danger-fg);
  background: transparent;
  border-color: var(--color-danger-border);
}

.btn.plat-btn-danger:hover {
  background: var(--color-danger-soft);
}

.plat-review-row > td {
  padding: var(--space-3);
  white-space: normal;
}

.plat-review-row,
.plat-review-row:hover,
.table--zebra .plat-review-row:nth-child(even) {
  background: var(--color-surface);
}

@media (max-width: 56rem) {
  .plat-table-wrap {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .plat-table,
  .plat-table tbody,
  .plat-table tr,
  .plat-table td {
    display: block;
  }

  /* Visually hidden, still announced: the cells carry their own labels below. */
  .plat-table thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .plat-table tbody tr {
    margin-block-end: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .plat-table.table--zebra tbody tr:nth-child(even) {
    background: var(--color-surface);
  }

  .plat-table td,
  .plat-table.table--zebra td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-2) 0;
    border: 0;
    white-space: normal;
  }

  .plat-table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 8rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
  }

  /* The name leads the card; it needs no label of its own. */
  .plat-table td:first-child {
    display: block;
    padding-block-start: 0;
  }

  .plat-table td:first-child::before {
    content: none;
  }

  .plat-table .table__actions {
    inline-size: auto;
    padding-block-end: 0;
  }

  .plat-actions__group {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .plat-table .plat-review-row {
    padding: 0;
    background: transparent;
    border: 0;
  }

  .plat-table .plat-review-row > td {
    display: block;
    padding: 0;
  }
}

/* ==========================================================================
   4 · CONFIRMATION
   The panel a change must pass through, and the figures it shows. A warning edge for a
   change, a danger edge for one that destroys something; the title says which in words.
   ========================================================================== */

.plat-review {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.plat-review--danger {
  border-color: var(--color-danger-border);
  border-inline-start-color: var(--color-danger);
}

.plat-review__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.plat-impact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.plat-impact__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A small square rather than a bullet glyph: it is a shape, so it needs no font and
   mirrors on its own in RTL. */
.plat-impact__list li {
  position: relative;
  padding-inline-start: var(--space-4);
}

.plat-impact__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  inline-size: 0.375rem;
  block-size: 0.375rem;
  background: currentColor;
  border-radius: 1px;
  opacity: 0.55;
}

.plat-impact__scope {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* The bookings that stay: the one line of a confirmation that needs a decision, so it is the
   one with a box of its own — a triangle and words, not only a colour. */
.plat-kept {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  color: var(--color-warning-fg);
  background: var(--color-warning-soft);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.plat-kept__icon {
  flex: 0 0 auto;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: 1px;
}

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

.plat-kept__title {
  font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   5 · CROSSING PAGE
   ========================================================================== */

/* The sections wrap rather than scroll: with seven of them a strip that scrolls hides the
   current one after a reload, and nothing without a script of our own can bring it into view. */
.plat-tabs {
  flex-wrap: wrap;
  overflow: visible;
}

.plat-summary {
  display: grid;
  gap: var(--space-3);
}

.plat-summary__id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.plat-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.plat-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
}

.plat-fact dt {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.plat-fact dd {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.plat-summary__hours {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.plat-choices {
  display: grid;
  gap: var(--space-1);
}

/* A fact shown but not editable: dashed, so it does not look like a field that failed to load. */
.plat-readonly {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-sunken);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}

.plat-gap-top {
  margin-block-start: var(--space-3);
}

.plat-errors {
  margin: 0;
  padding-inline-start: var(--space-4);
  list-style: disc;
}

/* ==========================================================================
   6 · WEEKLY HOURS
   One block per weekday. On a phone each block is a stack — the day's name, its ranges one
   under another, the buttons — and a range wraps its two time inputs and the remove button
   onto as many lines as it needs. Nothing needs a hover or a sideways scroll. From 48rem a
   day is a row: its name in a fixed column, its ranges and buttons beside it.
   ========================================================================== */

.plat-editor {
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.plat-editor__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.plat-week__days {
  display: grid;
  gap: var(--space-3);
}

.plat-day {
  display: grid;
  grid-template-areas:
    'head'
    'ranges'
    'error'
    'actions';
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* A closed day is an outline, not a filled card: it is the absence of hours. */
.plat-day--closed {
  background: transparent;
  border-style: dashed;
}

.plat-day__head {
  grid-area: head;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.plat-day__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.plat-day__ranges {
  grid-area: ranges;
  display: grid;
  gap: var(--space-2);
}

.plat-day__error {
  grid-area: error;
}

.plat-day__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.plat-range {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
}

.plat-range__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 6.5rem;
  min-inline-size: 0;
  max-inline-size: 11rem;
}

.plat-range__dash {
  padding-block-end: var(--space-2);
  color: var(--color-text-muted);
}

/* On a phone the two times sit side by side with their labels above them and the remove button
   at the end of the same line; the dash between them would only dangle. The editor gives up
   some of its padding so that the three fit on a 375px screen; on a narrower one the button
   simply wraps to the line below. */
@media (max-width: 40rem) {
  .plat-range__dash {
    display: none;
  }

  .plat-range {
    gap: var(--space-1);
  }

  .plat-range__field {
    flex: 1 1 5.5rem;
  }

  .plat-range__field .input {
    padding-inline: var(--space-2);
  }

  .plat-range__remove {
    flex: 0 0 auto;
  }

  .plat-editor {
    padding: var(--space-3);
  }

  .plat-day {
    padding: var(--space-2);
  }
}

/* The shared theme gives every small button horizontal padding, which an icon-only button has
   no room for: its glyph is squeezed to a dot. This one is full size, and keeps no padding. */
.btn.plat-range__remove {
  padding-inline: 0;
}

@media (min-width: 48rem) {
  .plat-day {
    grid-template-columns: 9rem minmax(0, 1fr);
    grid-template-areas:
      'head ranges'
      'head error'
      'head actions';
    align-items: start;
  }
}

/* ==========================================================================
   7 · LISTS
   One pattern for schedules, holidays, closures, special days, rules and types: an item
   with what it is on one side and what can be done to it on the other, and room under it for
   the confirmation that a destructive action opens. A past item is muted, and says "past".
   ========================================================================== */

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

.plat-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.plat-item--past {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.plat-item--past .plat-item__title {
  font-weight: var(--font-weight-regular);
}

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

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

.plat-item__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.plat-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin: 0;
  font-size: var(--font-size-sm);
}

.plat-item__meta > div {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.plat-item__meta dt {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.plat-item__meta dd {
  margin: 0;
}

.plat-item__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.plat-item__review {
  grid-column: 1 / -1;
}

@media (max-width: 40rem) {
  .plat-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .plat-item__actions {
    justify-content: flex-start;
  }
}

.plat-terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.plat-group-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.plat-moments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
}

.plat-moment {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}