/* ---- V1.64 Forms (frm-): Client\Apps\Forms (FormsPage, FormsDesignerPage, FormsFillPage, FormRenderer). Design system tokens only
   (--os-*), full page width; a new app file: every design guard at zero (DesignGuardTests.ZeroTolerance). ---- */

.frm-click { cursor: pointer; }
.frm-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--os-space-4); }
.frm-field { display: flex; flex-direction: column; gap: var(--os-space-1); min-width: 0; }
.frm-field--wide { grid-column: 1 / -1; }
.frm-answers { display: flex; flex-wrap: wrap; gap: var(--os-space-2); }
.frm-num { max-width: 9rem; }
.frm-value { color: var(--os-text); }
.frm-problem { color: var(--os-bad-text); }
.frm-group { display: flex; flex-direction: column; gap: var(--os-space-3); }
.frm-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--os-space-3); align-items: end;
    padding: var(--os-space-3); border: var(--os-border-w) solid var(--os-border-subtle); border-radius: var(--os-radius-md); }
.frm-photo { display: block; max-width: 100%; max-height: 32rem; border-radius: var(--os-radius-md); border: var(--os-border-w) solid var(--os-border); }
.frm-designer { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--os-space-4); align-items: start; }
.frm-preview { position: sticky; top: var(--os-space-4); min-width: 0; }
.frm-edit { display: flex; flex-direction: column; gap: var(--os-space-2); padding: var(--os-space-3); border: var(--os-border-w) solid var(--os-border-subtle);
    border-radius: var(--os-radius-md); }
@media (max-width: 900px) {
    .frm-designer { grid-template-columns: minmax(0, 1fr); }
    .frm-preview { position: static; }
}

/* ---- V1.69 the premium pass (mockup 29): the overview, My forms, the Schedules and Follow-ups tabs. Tokens only; the kinds of form in the
   operator order of the chart palette (Inspections blue, Safety teal, Operations violet). ---- */
.frm-page { display: flex; flex-direction: column; gap: var(--os-space-4); min-width: 0; }
.frm-page > * { min-width: 0; max-width: 100%; }
.frm-stack { display: grid; gap: var(--os-gutter); }
.frm-page .os-grid.frm-ovgrid { align-items: stretch; }
.frm-col { --span: 4; display: flex; flex-direction: column; gap: var(--os-gutter); min-width: 0; }
.frm-col--8 { --span: 8; }
.frm-col--7 { --span: 7; }
.frm-col--5 { --span: 5; }
.frm-col > :last-child { flex: 1 1 auto; }
.frm-brief { display: grid; gap: var(--os-gutter); align-content: start; }
.frm-page .os-panel__foot { flex-wrap: wrap; gap: var(--os-space-2) var(--os-space-4); }
.frm-narrow { width: auto; min-width: 9rem; max-width: 16rem; }
.frm-compare { margin-left: auto; }
.frm-clip2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.frm-nowrap { white-space: nowrap; }
.frm-mono { font: var(--os-type-mono); font-variant-numeric: tabular-nums; }
.frm-bad { color: var(--os-bad-text); }
.frm-warn { color: var(--os-warn-text); }
.frm-info { color: var(--os-info-text); }
.frm-down { color: var(--os-text-3); }
.frm-block { width: 100%; justify-content: center; }

/* The kinds of form and the teams: a colour each */
.frm-k--insp { --frm-c: var(--os-chart-1); }
.frm-k--safe { --frm-c: var(--os-chart-2); }
.frm-k--ops { --frm-c: var(--os-chart-3); }
.frm-k--other { --frm-c: var(--os-chart-other); }
.frm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--frm-c, currentColor); flex: none; vertical-align: middle; }

/* Submissions per day (SVG) */
.frm-days { display: block; width: 100%; height: 100%; }
.frm-days__now { fill: var(--os-surface-sunken); }
.frm-days__span { fill: var(--os-text-2); font: var(--os-type-caption); }
.frm-days__grid { stroke: var(--os-border-subtle); stroke-width: 1; }
.frm-days__tick { fill: var(--os-text-3); font: var(--os-type-caption); }
.frm-days__total { fill: var(--os-text); font: var(--os-type-caption); }
.frm-days__bar { fill: var(--frm-c); }
.frm-days__bar.is-prev { opacity: 0.45; }
.frm-days__bar.is-today { opacity: 0.55; }
.frm-days__due { fill: none; stroke: var(--os-text-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.frm-stats { display: flex; flex-wrap: wrap; gap: var(--os-space-3) var(--os-space-5); margin: 0; width: 100%; }
.frm-stats > div { display: grid; gap: var(--os-space-1); padding-right: var(--os-space-5); border-right: var(--os-border-w) solid var(--os-border-subtle); }
.frm-stats > div:last-child { border-right: 0; }
.frm-stats dt { font: var(--os-type-caption); color: var(--os-text-2); }
.frm-stats dd { margin: 0; font: var(--os-type-kpi-sm); color: var(--os-text); font-variant-numeric: tabular-nums; }
.frm-stats small { font: var(--os-type-caption); color: var(--os-text-2); }

/* Needs attention now */
.frm-att__head { display: flex; justify-content: space-between; padding: var(--os-space-2) var(--os-space-4); background: var(--os-surface-sunken);
    font: var(--os-type-caption); color: var(--os-text-2); border-top: var(--os-border-w) solid var(--os-border-subtle); }
.frm-att__n { font-variant-numeric: tabular-nums; }
/* A flush panel has no padding: its footer keeps its place inside (os.css pulls a footer out by the panel's padding) */
.frm-page .os-panel--flush > .os-panel__foot { margin: 0; }
.frm-alist { list-style: none; margin: 0; padding: 0; }
.frm-alist li { display: flex; align-items: center; gap: var(--os-space-3); padding: var(--os-space-3) var(--os-space-4); border-top: var(--os-border-w) solid var(--os-border-subtle); }
.frm-alist li:first-child { border-top: 0; }
.frm-alist li > div { display: grid; gap: var(--os-space-0h); flex: 1; min-width: 0; }
.frm-alist__title { font: var(--os-type-body-strong); color: var(--os-text); overflow-wrap: anywhere; }
.frm-alist__age { display: grid; justify-items: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.frm-alist__age span { display: grid; justify-items: end; }
.frm-alist__age small { font: var(--os-type-caption); color: var(--os-text-2); }
.frm-alist__icon { display: inline-flex; padding: var(--os-space-1h); border-radius: var(--os-radius-md); background: var(--os-neutral-soft); color: var(--os-neutral-text); flex: none; }
.frm-alist__icon--warn { background: var(--os-warn-soft); color: var(--os-warn-text); }
.frm-alist__icon--bad { background: var(--os-bad-soft); color: var(--os-bad-text); }
.frm-alist__icon--info { background: var(--os-info-soft); color: var(--os-info-text); }

/* Forms most used */
.frm-used { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--os-space-3); }
.frm-used li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--os-space-1) var(--os-space-3); align-items: end; }
.frm-used__name { display: grid; min-width: 0; }
.frm-used__name b { font: var(--os-type-body-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frm-used__n { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.frm-used__n small { font: var(--os-type-caption); color: var(--os-good-text); }
.frm-used__n small.frm-down { color: var(--os-text-3); }
.frm-used__bar { grid-column: 1 / -1; position: relative; height: 8px; border-radius: 2px; background: var(--os-surface-sunken); }
.frm-used__bar i { display: block; height: 100%; border-radius: 2px; background: var(--frm-c); }
.frm-used__tick { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--os-text); }
.frm-used__axis, .frm-fill__axis { display: flex; justify-content: space-between; margin-top: var(--os-space-2); font: var(--os-type-caption); color: var(--os-text-3);
    font-variant-numeric: tabular-nums; }
.frm-fill__axis { margin-left: 9.5rem; margin-right: 2.5rem; }

/* Follow-ups from the answers */
.frm-split { display: flex; height: 10px; border-radius: 2px; overflow: hidden; gap: 2px; }
.frm-split i { display: block; background: var(--frm-c); }
.frm-split__legend { display: flex; flex-wrap: wrap; gap: var(--os-space-1) var(--os-space-4); margin: var(--os-space-2) 0 var(--os-space-3); font: var(--os-type-caption); color: var(--os-text-2); }
.frm-split__legend > span { display: inline-flex; align-items: center; gap: var(--os-space-1); }
.frm-split__legend .frm-bad { margin-left: auto; }
.frm-flist { list-style: none; margin: 0; padding: 0; }
.frm-flist li { display: flex; align-items: flex-start; gap: var(--os-space-3); padding: var(--os-space-2) 0; border-top: var(--os-border-w) solid var(--os-border-subtle); }
.frm-flist li > div { display: grid; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.frm-flist__due { display: inline-flex; align-items: center; gap: var(--os-space-1); white-space: nowrap; font: var(--os-type-caption); }
.frm-flist__due .frm-dot { background: currentColor; border-radius: var(--os-radius-pill); }

/* Forms due by schedule: the grid of shifts */
.frm-grid-wrap { overflow-x: auto; }
.frm-grid { border-collapse: separate; border-spacing: 3px; width: 100%; font: var(--os-type-caption); }
.frm-grid th { font-weight: 500; color: var(--os-text-2); text-align: center; white-space: nowrap; }
.frm-grid__day { padding-top: 0; }
.frm-grid__shift.is-now { color: var(--os-text); }
.frm-grid__name { text-align: left; min-width: 12rem; display: grid; padding-right: var(--os-space-2); }
.frm-grid__name b { font: var(--os-type-body-strong); color: var(--os-text); }
.frm-grid__pct { text-align: right; white-space: nowrap; padding-left: var(--os-space-2); }
.frm-grid__pct b { display: block; font: var(--os-type-body-strong); }
.frm-cell { min-width: 1.4rem; height: 1.5rem; border-radius: var(--os-radius-xs); text-align: center; font-variant-numeric: tabular-nums; color: var(--os-text); }
.frm-cell--good { background: var(--os-good-soft); }
.frm-cell--warn { background: var(--os-warn-soft); color: var(--os-warn-text); }
.frm-cell--bad { background: var(--os-bad); color: var(--os-surface); }
.frm-cell--overdue { background: var(--os-surface); outline: 2px solid var(--os-bad); outline-offset: -2px; color: var(--os-bad-text); }
.frm-cell--open { background: var(--os-surface-sunken); }
.frm-cell--none { background: repeating-linear-gradient(135deg, var(--os-surface-sunken) 0 3px, var(--os-surface) 3px 6px); }
.frm-cell.is-now:not(.frm-cell--overdue) { outline: 1px dashed var(--os-border); outline-offset: 1px; }
.frm-grid__legend { display: flex; flex-wrap: wrap; gap: var(--os-space-2) var(--os-space-4); margin-top: var(--os-space-3); font: var(--os-type-caption); color: var(--os-text-2); }
.frm-grid__legend > span { display: inline-flex; align-items: center; gap: var(--os-space-1); }
.frm-grid__legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.frm-grid__note { margin-left: auto; }

/* Time to fill */
.frm-fill { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--os-space-3); }
.frm-fill li { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 2rem; gap: var(--os-space-2); align-items: center; }
.frm-fill__name { font: var(--os-type-caption); color: var(--os-text-2); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frm-fill__track { position: relative; height: 12px; }
.frm-fill__range { position: absolute; top: 3px; height: 6px; border-radius: 3px; background: var(--os-info-soft); border: 1px solid var(--os-info-border); }
.frm-fill__dot { position: absolute; top: 1px; width: 10px; height: 10px; margin-left: -5px; border-radius: var(--os-radius-pill); background: var(--os-info); }
.frm-fill__prev { position: absolute; top: -1px; width: 2px; height: 14px; margin-left: -1px; background: var(--os-text-2); }
.frm-fill__n { font: var(--os-type-caption); color: var(--os-text); font-variant-numeric: tabular-nums; }

/* The latest submissions */
.frm-latest tr.is-hot { background: var(--os-warn-soft); }
.frm-oor { display: flex; align-items: center; gap: var(--os-space-1); color: var(--os-bad-text); flex-wrap: wrap; }
.frm-oor .frm-dot { background: var(--os-bad); border-radius: var(--os-radius-pill); }
.frm-oor small { color: var(--os-text-2); }
.frm-warns { display: grid; gap: var(--os-space-2); }
.frm-att { white-space: nowrap; color: var(--os-text-2); }
.frm-att > span { display: inline-flex; align-items: center; gap: var(--os-space-0h); margin-right: var(--os-space-2); }

/* My forms (the phone first) */
.frm-mine { display: grid; gap: var(--os-gutter); }
.frm-mine__hint { margin: 0 0 var(--os-space-3); }
.frm-due { list-style: none; margin: 0; padding: 0; }
.frm-due li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-2) var(--os-space-3); padding: var(--os-space-3) 0; border-top: var(--os-border-w) solid var(--os-border-subtle); }
.frm-due li:first-child { border-top: 0; }
.frm-due li > div:first-child { display: grid; flex: 1 1 14rem; min-width: 0; }
.frm-due li.is-late b { color: var(--os-bad-text); }
.frm-due__go { display: flex; gap: var(--os-space-2); }

/* The Schedules and Follow-ups tabs */
.frm-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--os-space-3); }
.frm-form .frm-wide { grid-column: 1 / -1; }
.frm-actions { margin-top: var(--os-space-3); }
.frm-wo { width: 8rem; }

/* The phone: My forms first, the overview one tap away */
.frm-phone-only { display: none; }
@media (max-width: 639.98px) {
    .frm-phone-only { display: block; }
    .frm-phone-only.frm-hidden, .frm-phone-hide { display: none; }
    .frm-phone-switch .os-seg { width: 100%; }
    .frm-stats > div { border-right: 0; padding-right: 0; }
    .frm-compare { margin-left: 0; }
    .frm-fill li { grid-template-columns: 6rem minmax(0, 1fr) 2rem; }
    .frm-fill__axis { margin-left: 6.5rem; }
}