/* Redesign: shared rules for record detail pages (record header, figures, tabs, sections, inspector
   contents) and record forms. A record page is a .page-content whose first child is header.rec-head
   (rec_head() in app/lib/records.php); a record form is a .rec-form. Colours: tokens only. Square,
   ruled, no boxes: a 3px ink rule opens each section and an ink case label names it. */

/* ------------------------------------------------------------ header */
.rec-head { flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; }
.rec-head > .page-heading { flex: 1 1 360px; min-width: 0; display: block; }
.rec-kind {
  margin: 0 0 6px; font-size: var(--text-xs); font-weight: 700; line-height: 16px;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted);
}
.rec-head .page-title { overflow-wrap: anywhere; }
.page-title .rec-number { font-size: 0.5em; font-weight: 600; letter-spacing: 0; color: var(--color-text-muted); white-space: nowrap; }
.rec-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin: 8px 0 0; font-size: var(--text-sm); line-height: 20px; color: var(--color-label); }
.rec-summary-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.rec-summary-item > .icon { flex: none; color: var(--color-text-muted); }
.rec-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.rec-actions .inline-form { display: inline-flex; margin: 0; }
.rec-actions > .btn, .rec-actions > .icon-btn { min-height: 40px; }

/* ------------------------------------------------------------ figures and tabs */
.rec-strip { margin: 0 0 4px; }
/* A grid, so a wrapped row keeps its rules: each figure draws its left and top line, the strip clips the outer ones. */
.rec-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); overflow: hidden; }
.rec-strip .r2-stat {
  margin: 0; padding: 7px 12px 8px; border: 0; container-type: inline-size;
  box-shadow: -1px 0 0 var(--color-text), 0 -1px 0 var(--color-border-strong);
}
.rec-strip .r2-stat > dd { font-size: 18px; }
.rec-strip .r2-stat > dd > a { color: inherit; text-decoration: none; }
.rec-strip .r2-stat > dd > a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.rec-tabs {
  position: sticky; top: var(--topbar-height); z-index: 30;
  margin: 20px 0 0; background: var(--color-page-bg);
}
.rec-tabs > a { min-height: 44px; }
.rec-tabs > a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

.record-description { max-width: 72ch; margin: 16px 0 0; white-space: normal; }

/* ------------------------------------------------------------ sections: no box, the heading is the case label on its rule
   (the .r2-label rules of r2.css, restated for the panels' own h2 and the history panel's summary) */
.page-content:has(> .rec-head) { --rec-anchor: calc(var(--topbar-height) + 60px); }
.page-content:has(> .rec-head) > .panel ,
.page-content:has(> .rec-head) > .crm-order > .panel {
  margin: 36px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; scroll-margin-top: var(--rec-anchor);
}
.page-content:has(> .rec-head) > .form-panel { scroll-margin-top: var(--rec-anchor); }
.page-content:has(> .rec-head) > .panel > .panel-header ,
.page-content:has(> .rec-head) > .crm-order > .panel > .panel-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 0 0 12px; padding: 0; border: 0; background: transparent;
}
.page-content:has(> .rec-head) > .panel > .panel-header > h2,
.page-content:has(> .rec-head) > .crm-order > .panel > .panel-header > h2,
.page-content:has(> .rec-head) > .panel.legacy-panel > details > summary {
  display: flex; align-items: stretch; flex: 1 1 260px; gap: 0; margin: 0; padding: 0 0 0 10px;
  background: var(--color-text); color: var(--color-page-bg);
  font-size: var(--text-sm); font-weight: 700; line-height: 26px; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.page-content:has(> .rec-head) > .panel > .panel-header > h2::after,
.page-content:has(> .rec-head) > .crm-order > .panel > .panel-header > h2::after,
.page-content:has(> .rec-head) > .panel.legacy-panel > details > summary::after {
  content: ""; flex: 1 1 0; min-width: 12px; margin-left: 10px; background: var(--color-page-bg); border-top: var(--rule) solid var(--color-text);
}
.page-content:has(> .rec-head) .panel-header > h2 > * { color: inherit; }
.page-content:has(> .rec-head) .panel-header > h2 .section-count {
  height: auto; margin: 0 0 0 10px; padding: 0 10px 0 10px; border: 0; border-left: 1px solid currentColor; border-radius: 0;
  background: none; box-shadow: none; color: inherit; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; line-height: inherit; letter-spacing: 0; text-transform: none;
}
.page-content:has(> .rec-head) > .panel > .panel-body ,
.page-content:has(> .rec-head) > .crm-order > .panel > .panel-body { padding: 0; }
.page-content:has(> .rec-head) > .panel .table-footer { border-radius: 0; }

/* Rows of a record's tables carry no state corner: the status words say it. */
html[data-shell="r2"] .page-content:has(> .rec-head) .data-table > tbody > tr:is([class*="state-"], .corner-mark, .act-row) > :first-child::after { content: none; }

/* ------------------------------------------------------------ inspector contents: label over value, one pair per row */
.page-sidebar dl.detail-grid { display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: 0; margin: 0; padding: 0; font-size: var(--text-sm); line-height: 20px; }
.page-sidebar .detail-grid > dt, .page-sidebar .detail-grid > dd { display: block; margin: 0; padding: 8px 0; min-width: 0; border-bottom: 1px solid var(--color-border-strong); }
.page-sidebar .detail-grid > dt { padding-right: 12px; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }
.page-sidebar .detail-grid > dd { overflow-wrap: anywhere; color: var(--color-text); }
.page-sidebar .detail-grid > dt::after, .page-sidebar .detail-grid > dd::after { content: none; }
.page-sidebar .detail-grid > dt:last-of-type, .page-sidebar .detail-grid > dd:last-of-type { border-bottom: 0; }
.page-sidebar .detail-grid > dd .badge { vertical-align: baseline; }
.page-sidebar .detail-grid > dd.is-open, .page-sidebar .detail-grid > dd.member-attr.is-open { grid-column: 1 / -1; margin: 0; padding-top: 0; }

/* ------------------------------------------------------------ record forms (.form-panel.rec-form and the panels after it):
   no box, one column of sections, each opened by its case label; the save bar stays in view at the bottom */
.page-content:has(> .rec-form) > .form-panel {
  max-width: 980px; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.page-content:has(> .rec-form) > .form-panel + .form-panel { margin-top: 40px; }
.page-content:has(> .rec-form) .form-section { display: block; padding: 0; margin: 0 0 32px; border: 0; }
.page-content:has(> .rec-form) .form-section > .form-section-icon { display: none; }
.page-content:has(> .rec-form) .form-section > :not(.form-section-icon) { grid-column: auto; }
.page-content:has(> .rec-form) .form-section > .form-section-icon + .form-section-title,
.page-content:has(> .rec-form) .form-section > .form-section-title:first-child {
  display: flex; align-items: stretch; gap: 0; margin: 0 0 16px; padding: 0 0 0 10px;
  background: var(--color-text); color: var(--color-page-bg);
  font-size: var(--text-sm); font-weight: 700; line-height: 26px; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.page-content:has(> .rec-form) .form-section > .form-section-icon + .form-section-title::after,
.page-content:has(> .rec-form) .form-section > .form-section-title:first-child::after {
  content: ""; flex: 1 1 0; min-width: 12px; margin-left: 10px; background: var(--color-page-bg); border-top: var(--rule) solid var(--color-text);
}
.page-content:has(> .rec-form) .form-section > .form-section-title ~ .form-section-title {
  margin: 20px 0 8px; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text);
}
/* A record form that opens the page keeps the ordinary page header (app.css joins it to the form panel's box otherwise). */
html[data-shell="r2"] .page:has(> .page-body > .page-content > .form-panel.rec-form:first-child) { padding: 28px var(--gutter) 56px; }
html[data-shell="r2"] .page:has(> .page-body > .page-content > .form-panel.rec-form:first-child) > .page-header {
  max-width: none; margin: 0 0 24px; padding: 0 0 14px; background: transparent; border: 0; border-bottom: var(--rule) solid var(--color-text);
}
html[data-shell="r2"] .page:has(> .page-body > .page-content > .form-panel.rec-form:first-child) > .page-header .page-title { color: var(--color-text); }
html[data-shell="r2"] .page:has(> .page-body > .page-content > .form-panel.rec-form:first-child) > .crumbs { max-width: none; margin: 0; padding: 0; }
.rec-form-hint { margin: -8px 0 12px; }
.page-content:has(> .rec-form) .form-row > label, .page-content:has(> .rec-form) .form-label { color: var(--color-text); }
.page-content:has(> .rec-form) form > .form-actions {
  position: sticky; bottom: 0; z-index: 20; justify-content: flex-start; gap: 12px;
  margin: 8px 0 0; padding: 12px 0 14px; border: 0; border-top: var(--rule) solid var(--color-text); background: var(--color-page-bg);
}

/* ------------------------------------------------------------ narrow */
@media screen and (max-width: 980px) {
  .rec-head > .page-heading { flex-basis: 100%; }
  .rec-actions { justify-content: flex-start; }
}
@media screen and (max-width: 600px) {
  .rec-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rec-strip .r2-stat { padding: 7px 10px 8px; }
  .rec-tabs { margin-top: 16px; }
  .rec-tabs > a { padding-left: 10px; padding-right: 10px; }
  .page-content:has(> .rec-head) > .panel ,
.page-content:has(> .rec-head) > .crm-order > .panel { margin-top: 24px; }
}
@media print {
  .rec-tabs, .rec-actions { display: none !important; }
}
.rec-actions > .icon-btn, .rec-actions .inline-form > .icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; }
@media (pointer: coarse) {
  .rec-actions > .icon-btn, .rec-actions .inline-form > .icon-btn, .rec-actions > .btn { min-width: 44px; height: 44px; }
}
.page-content:has(> .rec-head) .panel .table-footer { background: transparent; border-top: 1px solid var(--color-border-strong); }