/**
 * @file
 * ABS e-filing Application Status page.
 *
 * Three blocks live here:
 *   1. .abs-cards   -- the six whole-programme figure cards. The card shell,
 *      the colours and the dotted overlay are the same ones the front page
 *      statistics use (.statistics.abs in custom-style.css), so the two pages
 *      stay visually identical without either one importing the other's
 *      markup.
 *   2. .abs-panel   -- the white card each amendment period's table sits in,
 *      with its icon, heading and status pill.
 *   3. .abs-amend   -- the administrator-managed table itself, used by BOTH
 *      periods. Column count is decided by content, never by CSS, so nothing
 *      in here has to change when a column is added or removed in Drupal.
 *
 * Loaded through the drupal8_zymphonies_theme/abs-status library, which is
 * attached from the preprocess only on the ABS display page.
 */

.abs-page {
  margin: 0 0 10px;
}

/* ---------------------------------------------------------------------------
   1. SUMMARY CARDS -- the six figures, above both tables.
   --------------------------------------------------------------------------- */
.abs-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 24px;
}

.abs-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 14px 16px 16px;
  border-radius: 10px;
  color: #fff;
  background-color: #1b5e8c;
  background-image: url("../images/logo-graphics.png");
  background-size: 100%;
  background-repeat: no-repeat;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
  transition: transform .3s ease-in-out, box-shadow .3s ease-in-out;
}

.abs-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 25px rgba(0, 0, 0, .2);
}

/* Same decorative dot grid the front page cards use. Decorative only, so it
   must never intercept a click. */
.abs-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 150%;
  height: 150%;
  background: radial-gradient(circle, rgba(255, 255, 255, .15) 10%, transparent 10%);
  background-size: 20px 20px;
  opacity: .2;
  pointer-events: none;
}

/* Everything real sits above the overlay. */
.abs-card__head,
.abs-card__value {
  position: relative;
  z-index: 1;
}

.abs-card__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.abs-card__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .22);
}

.abs-card__label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.abs-card__value {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
}

/* Card colours, one per tile, taken from the front page palette so the two
   pages cannot drift apart. The modifier comes from the preprocess. */
.abs-card--received { background-color: #ff4b2b; }
.abs-card--signed   { background-color: #ff0059; }
.abs-card--model    { background-color: #17a900; }
.abs-card--closed   { background-color: #7175ff; }
.abs-card--process  { background-color: #2948ff; }
.abs-card--cor      { background-color: #ff0094; }

/* ---------------------------------------------------------------------------
   2. PANEL -- the white card one amendment period's table sits in.
   --------------------------------------------------------------------------- */
.abs-panel {
  margin: 0 0 22px;
  padding: 16px 18px 18px;
  border: 1px solid #e4ebf1;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(18, 102, 45, .06);
}

.abs-panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  /* The pill drops to its own line on a narrow screen rather than crushing
     the heading next to it. */
  flex-wrap: wrap;
}

.abs-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.abs-panel__icon--before { background: #f5a623; }
.abs-panel__icon--after  { background: #17a900; }

.abs-panel__title {
  margin: 0;
  padding: 0;
  color: #12662d;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Fills whatever space is left between the heading and the pill, so the pill
   sits at the right edge however long the heading an editor saves is. */
.abs-panel__rule {
  flex: 1 1 30px;
  min-width: 20px;
  height: 1px;
  background: #e0e7ec;
}

.abs-panel__pill {
  flex: 0 0 auto;
  padding: 5px 14px;
  border-radius: 999px;
  background: #f1f5f8;
  color: #4a6072;
  font-size: 12px;
  line-height: 1.4;
  /* The heading it is built from is uppercase in the field; shown here in
     sentence case. */
  text-transform: none;
}

.abs-panel__pill::first-letter {
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   3. THE TABLE -- administrator-managed, used by both periods.
   --------------------------------------------------------------------------- */

/* The table scrolls inside its own box so the PAGE never scrolls sideways,
   however many columns an administrator adds. */
.abs-amend-wrap {
  overflow-x: auto;
  border: 1px solid #d9e2ea;
  border-radius: 6px;
  -webkit-overflow-scrolling: touch;
}

/* Fixed layout, driven by the <colgroup> the template emits. With the default
   auto layout the browser hands all the leftover width to one arbitrary
   column, which made a single form column several times wider than its
   neighbours. Fixed layout splits the middle columns evenly instead. */
.abs-amend {
  width: 100%;
  /* Room for the row-name column, the last column, and ~100px per figure
     column -- enough for the longest single word in a status name
     ("Agreement", "Intimation") to fit whole instead of being split
     mid-word, and for the "View details" caption that appears under a linked
     figure on hover. --abs-mid-cols is set on the element by the template, so
     a table with more columns scrolls rather than squeezing every figure. */
  min-width: calc(260px + var(--abs-mid-cols, 8) * 100px);
  /* The theme gives every table a 22px bottom margin (custom-style.css).
     Inside this bordered box it showed as an empty band under the last row. */
  margin: 0;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
}

.abs-amend__col--first { width: 150px; }
.abs-amend__col--last { width: 110px; }

.abs-amend th,
.abs-amend td {
  padding: 8px 10px;
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid #e4ebf1;
  border-bottom: 1px solid #e4ebf1;
  white-space: nowrap;
}

/* Headings wrap instead of overflowing their column -- under fixed layout an
   over-wide cell spills out rather than pushing the column wider. Wrapping
   happens BETWEEN words; "anywhere" was splitting "Agreement" into
   "Agreeme / nt" even where the whole word fitted on the next line. */
.abs-amend thead th,
.abs-amend .is-first {
  white-space: normal;
  overflow-wrap: break-word;
}

.abs-amend th:last-child,
.abs-amend td:last-child { border-right: 0; }

.abs-amend thead th {
  /* Narrower side padding than the body cells: headings are words that need
     the width, figures are short numbers that do not. */
  padding: 8px 6px;
  background: #12662d;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  border-right-color: rgba(255, 255, 255, .18);
  border-bottom-color: rgba(255, 255, 255, .18);
}

/* Body rows read as figures, not as notes: bold, on a faint green, matching
   the published design. This is the plain look -- a row needs no Row Style
   picked for it.

   Kept deliberately LOW in specificity so everything more particular still
   wins over it: the totals column's stronger tint, the Row Style colours,
   and the empty-table message. */
.abs-amend tbody td,
.abs-amend tbody th.is-first {
  background: #f6fbf7;
  font-size: 14px;
  font-weight: 700;
}

.abs-amend tbody td {
  color: #1d3b2a;
}

.abs-amend tbody th.is-first {
  color: #12662d;
}

.abs-amend tbody tr:last-child td { border-bottom: 0; }

/* First column = the row name. Left aligned and pinned while scrolling wide,
   so the reader never loses track of which row they are on. */
.abs-amend .is-first {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  font-weight: 700;
  color: #16406b;
  background: #fff;
}

.abs-amend thead th.is-first {
  background: #12662d;
  color: #fff;
  z-index: 2;
}

/* Last column = the running total, given a little weight and a green tint. */
.abs-amend tbody td:last-child {
  font-weight: 700;
  color: #12662d;
  background: #f2f8f3;
}

/* Row styles an editor picks from the "Row Style" list on each row. The row
   name is a <th scope="row">, so both cell elements have to be named. */
.abs-amend .abs-amend__row--subtotal td,
.abs-amend .abs-amend__row--subtotal th.is-first {
  background: #dce9f5;
  font-weight: 700;
  color: #16406b;
}

.abs-amend .abs-amend__row--highlight td,
.abs-amend .abs-amend__row--highlight th.is-first {
  background: #fbe3ce;
  font-weight: 700;
  color: #7a3d10;
}

/* Scoped through tbody so it outranks the bold body-row look above -- this
   is an editor hint, and must not look like a row of figures. */
.abs-amend tbody .abs-amend__empty td {
  padding: 30px 16px;
  text-align: center;
  color: #6b7f92;
  background: #fcfdfe;
  font-size: 13px;
  font-weight: 400;
  white-space: normal;
}

.abs-amend__empty-hint {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  color: #93a5b6;
}

/* A figure with a breakdown page behind it.
   The NUMBER is the link: bold, in the brand green, over a dotted rule -- the
   quiet convention for "this leads somewhere", which keeps a table of figures
   reading as figures. The "View details" caption below it is the affordance,
   and it shows on hover and on keyboard focus.
   Its line is RESERVED at all times rather than added on hover. Revealing a
   line that was not there would grow the row and jog every other figure in
   the table, which looks like a fault rather than a flourish.
   Written as a.abs-amend__link inside .abs-amend so the theme's general link
   colours cannot outrank it. */
.abs-amend a.abs-amend__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  max-width: 100%;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #12662d;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.abs-amend__link-value {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
  border-bottom: 1px dotted rgba(18, 102, 45, .5);
  transition: border-color .18s ease;
}

/* The hover caption. It holds its own height while invisible, which is what
   keeps the row from moving when it fades in. */
.abs-amend__link-cta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: #2f8f4e;
  opacity: 0;
  transform: translateY(-1px);
  transition: opacity .18s ease, transform .18s ease;
}

.abs-amend a.abs-amend__link:hover,
.abs-amend a.abs-amend__link:focus-visible {
  background: #eaf6ee;
  border-color: #c3e2cc;
  color: #0b4d21;
  text-decoration: none;
}

.abs-amend a.abs-amend__link:hover .abs-amend__link-value,
.abs-amend a.abs-amend__link:focus-visible .abs-amend__link-value {
  border-bottom-color: #0b4d21;
}

.abs-amend a.abs-amend__link:hover .abs-amend__link-cta,
.abs-amend a.abs-amend__link:focus-visible .abs-amend__link-cta {
  opacity: 1;
  transform: none;
}

/* Visible keyboard focus -- required for accessibility compliance. */
.abs-amend a.abs-amend__link:focus-visible {
  outline: 2px solid #f5a623;
  outline-offset: 2px;
}

.abs-amend__link-icon {
  flex: 0 0 auto;
  transition: transform .18s ease;
}

.abs-amend a.abs-amend__link:hover .abs-amend__link-icon {
  transform: translateX(2px);
}

/* A touch screen has no hover, so the caption would never be reachable there
   and a bare number would be the only thing on offer. Those visitors keep the
   filled pill the figure has always had, which says "press me" without one. */
@media (hover: none) {
  .abs-amend a.abs-amend__link {
    border-color: #b9dcc2;
    background: #e3f3e7;
  }

  .abs-amend__link-cta {
    display: none;
  }
}

.abs-amend__hint {
  margin: 10px 2px 0;
  color: #4a6072;
  font-size: 12.5px;
}

/* ---------------------------------------------------------------------------
   Update note.
   --------------------------------------------------------------------------- */
.abs-note {
  margin: 14px 0 0;
  color: #24405c;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
}

.abs-note__label {
  color: #d24a1a;
  font-weight: 700;
}

.abs-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   Responsive. Only the card grid reflows -- the table keeps its own scroller.
   --------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .abs-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .abs-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .abs-card__value { font-size: 24px; }
  .abs-panel { padding: 14px 12px 16px; }
  .abs-panel__title { font-size: 15px; }
  /* The rule only exists to push the pill right; with the pill wrapped onto
     its own line there is nothing left for it to do. */
  .abs-panel__rule { display: none; }
}

@media (max-width: 420px) {
  .abs-cards { grid-template-columns: 1fr; }
}