/* ============================================================================
   RECORD PAGE — tab strip, child lists, change history
   ----------------------------------------------------------------------------
   The shared furniture of a record page: one screen for one thing, with tabs
   across the top and child lists inside them. Built for the client record
   (docs/modules/clients-detail.md) and written to be reused by every other
   record page in the product, because they all have this same shape.

   THE TAB STRIP IS ONE LINE THAT SCROLLS SIDEWAYS. It does not wrap onto a
   second line, and it does not collapse into an overflow menu.

   Product owner, 2026-08-14: "Tab must be horizontal scrollable or generate
   the menu which ever is not visible as per the screen width but not in two
   line." Two rows were tried first and rejected on sight — ADR-0040 amended.

   SCROLLING WAS CHOSEN OVER THE OVERFLOW MENU, and the reason is the one that
   argued against the menu in the first place: with a menu, WHICH TABS ARE ON
   SCREEN depends on the window width, so a tab sits in the strip on one
   machine and inside a "⋮" on another, and moves between the two as a window
   is dragged. A scrolling strip always holds all seventeen in the same order;
   only how far along you are changes. Nothing is ever hidden in a container
   whose contents the operator cannot predict.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   THE TAB STRIP
   -------------------------------------------------------------------------- */

.rec-tabs {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--color-surface);
  border-block-end: 1px solid var(--color-border);
  flex: none;
}

/* The scrolling track. Its own scrollbar is hidden — a horizontal scrollbar
   under a row of tabs is eight pixels of chrome that says nothing the arrow
   buttons do not say better, and on Windows it sits on top of the tabs. */
.rec-tabs__scroll {
  display: flex;
  flex: 1;
  min-inline-size: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: var(--space-3) var(--space-7);
  gap: var(--space-1);
}
.rec-tabs__scroll::-webkit-scrollbar { display: none; }

/* THE ACTIVE TAB IS A FILLED SHAPE, NOT AN UNDERLINE.
   Product owner, 2026-08-14: "On hover tab should high light with background
   color change but underline does not looks good."

   A filled shape also fixes something the underline could not: in a strip that
   scrolls, an underline sitting on the container's bottom edge is easy to lose
   at the moment it is half scrolled out of view. A filled tab is recognisable
   from any fraction of it. */
.rec-tabs__t {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  flex: none;
  transition: color .12s, background .12s;
}

.rec-tabs__t:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-hover);
}

.rec-tabs__t[aria-current="page"] {
  color: var(--color-primary);
  background: var(--color-primary-subtle);
  font-weight: var(--fw-semi);
}

.rec-tabs__t:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

/* The two arrows. Present only when there is something to scroll to, and
   disabled at each end, so the control always states whether more exists —
   a strip that simply stops gives no clue that it was ever cut off. */
.rec-tabs__arrow {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 30px;
  align-self: stretch;
  flex: none;
  border: 0;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.rec-tabs.is-scrollable .rec-tabs__arrow { display: inline-flex; }
.rec-tabs__arrow:hover:not(:disabled) { background: var(--color-surface-hover); color: var(--color-text-primary); }
.rec-tabs__arrow:disabled { color: var(--color-text-disabled); cursor: default; }
.rec-tabs__arrow svg { inline-size: 16px; block-size: 16px; }

/* A hairline on the side facing the track, so the arrow reads as a control
   sitting over the strip rather than as another tab. A shadow would say it
   more strongly, but the only shadow token in the product that does this job
   — the data grid's pinned-column shadow — points one way only, and adding a
   mirrored one to the shared token file for two buttons is not worth the
   change to a file every screen depends on. */
.rec-tabs__arrow--prev { border-inline-end: 1px solid var(--color-border-subtle); }
.rec-tabs__arrow--next { border-inline-start: 1px solid var(--color-border-subtle); }

/* A tab whose contents are not built yet still appears, and still navigates.
   Hiding it would give the operator a false map of the product: they would
   conclude the feature does not exist, rather than that it is not ready. */
.rec-tabs__t--pending { color: var(--color-text-tertiary); }
.rec-tabs__t--pending:hover { color: var(--color-text-secondary); }

/* A count beside a tab — "Accounts 4". Not populated yet; the mark-up and the
   space are reserved so adding one later does not re-flow the strip. */
.rec-tabs__n {
  min-inline-size: 18px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-semi);
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   A CHILD LIST — Addresses, Phones, and every other small list inside a record
   These are NOT the data grid. The grid carries filters, sorting, pagination,
   a column chooser and export, and costs its weight; a five-row address list
   needs none of that. Using the grid here would be reuse for its own sake.
   -------------------------------------------------------------------------- */

/* The row above a child list on a record tab: one line saying what the list
   is, and its Add button. PACKET-37 §6. */
.rec-tab-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-4); flex: none; }
.rec-tab-bar__note { font-size: var(--fs-xs); color: var(--color-text-secondary); }
/* More than one button beside the note stay together at the end, rather than
   being spread across the bar (Packets 17 and 18). */
.rec-tab-bar__actions { display: flex; align-items: center; gap: var(--space-3); flex: none; }

.rec-list { margin-block-start: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.rec-list__scroll { overflow-x: auto; }

.rec-table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-xs); }

.rec-table th {
  text-align: start;
  font-weight: var(--fw-semi);
  font-size: var(--fs-2xs);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: var(--color-surface-sunken);
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--color-border);
  white-space: nowrap;
}

.rec-table td {
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--color-border-subtle);
  vertical-align: top;
}

.rec-table tbody tr:last-child td { border-block-end: 0; }
.rec-table tbody tr:hover { background: var(--color-surface-hover); }

/* The action cell is pushed to the end and never grows. */
.rec-table__act { inline-size: 1%; white-space: nowrap; text-align: end; }
.rec-table__act .rec-act { margin-inline-start: var(--space-2); }

/* ---------------------------------------------------------------------------
   ROW ACTIONS — small, and coloured by what they do
   Product owner, 2026-08-14: "can we use bit small and colorful action icon".

   COLOUR CARRIES THE MEANING, which is the point of doing this rather than
   decorating. A row of identical grey buttons has to be read one by one; a
   danger-coloured one is simply seen. Delete is the only irreversible control
   on these lists and should never be the same shape and weight as the control
   beside it.

   The three tints are the product's semantic tokens — danger, primary and
   success. They are NOT the brand colour, which ADR-0006 reserves for identity
   and keeps out of interaction entirely.
   -------------------------------------------------------------------------- */

.rec-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 26px;
  block-size: 26px;
  flex: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.rec-act svg { inline-size: 14px; block-size: 14px; }
.rec-act:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }

/* Tinted at rest, solid on hover. At rest the tint has to sit quietly behind
   the data — the row is what the operator came to read, not the buttons. */
.rec-act--edit {
  color: var(--color-primary);
  background: var(--color-primary-subtle);
  border-color: var(--color-primary-border);
}
.rec-act--edit:hover { background: var(--color-primary); color: var(--color-on-accent); }

.rec-act--delete {
  color: var(--color-danger-fg);
  background: var(--color-danger-subtle);
  border-color: var(--color-danger-border);
}
.rec-act--delete:hover { background: var(--color-danger); color: var(--color-on-accent); }

.rec-act--call {
  color: var(--color-success-fg);
  background: var(--color-success-subtle);
  border-color: var(--color-success-border);
}
.rec-act--call:hover { background: var(--color-success); color: var(--color-on-accent); }

/* A blank value is an em dash, never an empty cell — an empty cell reads as
   "not loaded", a dash reads as "nothing here". Same rule as the data grid. */
.rec-muted { color: var(--color-text-tertiary); }

.rec-empty {
  padding: var(--space-9) var(--space-5);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--fs-xs);
}

/* ---------------------------------------------------------------------------
   A READ-ONLY FIELD, and a field with its own edit control beside it
   -------------------------------------------------------------------------- */

/* Shaded, and not focusable by tabbing. A value the operator cannot change
   should not be a stop on the keyboard path to the ones they can. */
.input[readonly] {
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  cursor: default;
}
.input[readonly]:focus-visible { border-color: var(--color-border); box-shadow: none; }

/* Email and Nickname on the client record are shaded and carry a pencil, which
   is the live system saying "this one is not edited in place". The control is
   reproduced; what it opens is not specified anywhere, so the button reports
   that honestly instead of pretending. */
.field-act { display: flex; align-items: stretch; }
.field-act .input { flex: 1; min-inline-size: 0; border-start-end-radius: 0; border-end-end-radius: 0; }

.field-act__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--ctl-h-md);
  flex: none;
  border: 1px solid var(--color-border);
  border-inline-start: 0;
  border-start-end-radius: var(--radius-sm);
  border-end-end-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.field-act__btn:hover { background: var(--color-surface-hover); color: var(--color-primary); }
.field-act__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.field-act__btn svg { inline-size: 14px; block-size: 14px; }

/* ---------------------------------------------------------------------------
   THE AVATAR BLOCK on the client record
   -------------------------------------------------------------------------- */

.rec-avatar { position: relative; inline-size: 96px; block-size: 96px; flex: none; }

.rec-avatar__img {
  inline-size: 96px;
  block-size: 96px;
  border-radius: var(--radius-full);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  font-weight: var(--fw-semi);
}

.rec-avatar__edit {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 26px;
  block-size: 26px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-surface);
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.rec-avatar__edit:hover { background: var(--color-primary); color: var(--color-on-accent); }
.rec-avatar__edit svg { inline-size: 12px; block-size: 12px; }

/* The avatar sits beside the first row of fields, not inside the grid — it is
   identification, not a field. Same ruling as the Users record page (OQ-046). */
.rec-ident { display: flex; align-items: flex-start; gap: var(--space-7); }
.rec-ident__fields { flex: 1; min-inline-size: 0; }

/* ---------------------------------------------------------------------------
   CHANGE HISTORY — the collapsible panel at the foot of every tab
   The live system paints this bar blue. It is not reproduced in blue here:
   blue is this product's INTERACTION colour (ADR-0006), and a full-width blue
   bar that is only a section heading would read as a button.
   -------------------------------------------------------------------------- */

.rec-panel { margin-block-start: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }

.rec-panel__head {
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-sunken);
  border: 0;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text-primary);
  cursor: pointer;
  text-align: start;
}
.rec-panel__head:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.rec-panel__head svg { inline-size: 15px; block-size: 15px; color: var(--color-text-secondary); }
.rec-panel__chev { margin-inline-start: auto; transition: transform .15s; }
.rec-panel[open] .rec-panel__head { border-end-start-radius: 0; border-end-end-radius: 0; }
.rec-panel[open] .rec-panel__chev { transform: rotate(180deg); }
.rec-panel__body { padding: var(--space-6); border-block-start: 1px solid var(--color-border); }

/* ---------------------------------------------------------------------------
   THE EVENT LOG — a before-and-after pair of key/value lists
   -------------------------------------------------------------------------- */

.rec-kv { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); font-size: var(--fs-2xs); align-items: baseline; }
.rec-kv__k { color: var(--color-text-secondary); white-space: nowrap; }
.rec-kv__v { color: var(--color-text-primary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* A value the system masks at the point it is written. Rendered in a way that
   cannot be mistaken for the real characters — BC-102. */
.rec-kv__v--masked { color: var(--color-text-tertiary); letter-spacing: .18em; }

.rec-pager { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; font-size: var(--fs-xs); }
.rec-pager__n { color: var(--color-text-secondary); margin-inline-start: auto; }

/* ---------------------------------------------------------------------------
   A TAB THAT IS NOT BUILT YET
   -------------------------------------------------------------------------- */

.rec-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-11) var(--space-7);
  text-align: center;
  color: var(--color-text-secondary);
}
.rec-pending svg { inline-size: 28px; block-size: 28px; color: var(--color-text-tertiary); }
.rec-pending h2 { font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--color-text-primary); }
.rec-pending p { max-inline-size: 52ch; font-size: var(--fs-xs); line-height: 1.6; }

/* ---------------------------------------------------------------------------
   NARROW WINDOWS
   The strip already wraps, so there is nothing to collapse. Only the padding
   tightens, to buy back width for the grids inside the tabs.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .rec-tabs__scroll { padding-inline: var(--space-5); }
  .rec-tabs__t { padding-inline: var(--space-4); }
}

/* Somebody who has asked for less movement gets no sliding strip. The tab
   still changes; it simply arrives instead of travelling. */
@media (prefers-reduced-motion: reduce) {
  .rec-tabs__scroll { scroll-behavior: auto; }
}