/*
 * Amrrk Attendance design system
 *
 * This file is intentionally loaded after app.css.  app.css still contains
 * page-specific product styles; this layer owns the cross-page contract:
 * type scale, spacing rhythm, surfaces, controls and responsive density.
 */

:root {
  --layout-max: 1480px;
  --page-gutter: clamp(18px, 2.6vw, 38px);
  --page-block-start: clamp(22px, 2.5vw, 34px);
  --content-gap: 16px;
  --space-card: clamp(18px, 2vw, 24px);
  --radius-panel: 18px;
  --radius-nested: 14px;
  --radius-input: 11px;
  --title-page: clamp(26px, 2vw, 34px);
  --title-section: clamp(17px, 1.35vw, 20px);
  --title-card: 16px;
  --text-body: 14px;
  --text-small: 12px;
  --text-micro: 11px;
  --sticky-offset: 86px;
  --focus-ring: #087f75;
}

body {
  line-height: 1.65;
}

:focus-visible {
  outline-color: var(--focus-ring);
  outline-offset: 3px;
}

/* Page shell and one vertical rhythm for every product page. */
.page-frame {
  width: 100%;
  max-width: var(--layout-max);
  padding: var(--page-block-start) var(--page-gutter) 56px;
}

.page-intro {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px 24px;
  margin-bottom: 22px;
}

.page-intro__copy {
  min-width: 0;
  max-width: 920px;
  display: grid;
  gap: 5px;
}

.page-intro__copy h2,
.attendance-history-intro h2 {
  max-width: 30ch;
  margin: 0;
  font-size: var(--title-page);
  line-height: 1.22;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.page-intro__copy > p:last-child,
.attendance-history-intro > p:last-child {
  max-width: 76ch;
  color: var(--muted);
  font-size: var(--text-body);
  line-height: 1.75;
  text-wrap: pretty;
}

.page-intro__actions {
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 0;
}

.page-intro__actions form { margin: 0; }

.page-action-menu { position: relative; }
.page-action-menu__popover { inset-inline: auto 0; min-width: 210px; }

.user-menu__popover {
  width: min(300px, calc(100vw - 24px));
}

.organization-menu {
  display: grid;
  gap: 6px;
  padding: 8px;
}

.organization-menu > strong {
  overflow: hidden;
  font-size: var(--text-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organization-menu__label {
  color: var(--muted);
  font-size: var(--text-micro);
}

.organization-menu__options {
  display: grid;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
}

.organization-menu__options button {
  display: grid;
  gap: 1px;
  border: 1px solid transparent;
}

.organization-menu__options button small {
  color: var(--muted);
  font-size: var(--text-micro);
}

.organization-menu__options button.is-current {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--line);
  cursor: default;
  opacity: 1;
}

/* Sidebar information architecture: company workspace vs platform controls. */
.nav-stack--grouped {
  display: grid;
  gap: 14px;
}

.nav-section {
  position: relative;
  display: grid;
  align-content: start;
}

.nav-section + .nav-section {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.nav-stack__label--section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: #93a4a7;
  font-size: var(--text-micro);
  letter-spacing: 0;
}

.nav-stack__label--section span { color: #dce5e2; }

.nav-stack__label--section small {
  max-width: 120px;
  overflow: hidden;
  color: #718487;
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-section--platform .nav-stack__label--section span { color: var(--signal); }
.nav-stack--grouped .nav-item { position: relative; min-height: 44px; padding-block: 8px; }
.nav-stack--grouped .nav-item.is-active::before { inset-block-start: 50%; transform: translateY(-50%); }

html[data-sidebar="collapsed"] .nav-section + .nav-section,
body.sidebar-collapsed .nav-section + .nav-section { padding-top: 10px; }

.page-content {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--content-gap);
}

.page-content > * {
  min-width: 0;
  margin-block: 0;
}

.section-kicker {
  font-size: var(--text-micro);
  line-height: 1.4;
  letter-spacing: .065em;
}

/* Surfaces: one radius and one elevation at the same hierarchy level. */
.panel,
.metric-card,
.destination-card,
.device-overview article,
.summary-ribbon,
.detail-hero,
.entity-hero,
.operation-hero,
.import-operation-card,
.bulk-transfer-form,
.group-card,
.management-gate,
.capability-summary__item,
.capability-card,
.history-summary article,
.device-tool-card,
.device-employee-card {
  border-radius: var(--radius-panel);
}

.panel,
.metric-card,
.destination-card,
.device-overview article,
.management-gate,
.capability-summary__item,
.history-summary article {
  box-shadow: var(--shadow-soft);
}

.history-employee-card,
.history-request-card,
.import-stage,
.fingerprint-choice-stage,
.device-target-picker,
.info-card,
.product-tabs {
  border-radius: var(--radius-nested);
}

/* Section headings follow the same size and padding regardless of page. */
.panel__header,
.data-panel__header,
.history-card-heading,
.history-records-header {
  min-height: 72px;
  padding: 18px 20px;
  gap: 14px;
}

.panel__header h3,
.data-panel__header h3,
.history-card-heading h3,
.history-guide-card h3,
.history-records-header h3,
.history-section-heading h3,
.device-tools-heading h3,
.device-employees-heading h3 {
  margin-block: 2px 0;
  font-size: var(--title-section);
  line-height: 1.35;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.history-card-heading > div > p:last-child,
.history-records-header > div > p:last-child,
.history-section-heading > div > p:last-child,
.device-tools-heading > div > p:last-child,
.device-employees-heading p:not(.section-kicker),
.editor-card__header p:last-child {
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.7;
}

.history-section-heading,
.device-tools-heading,
.device-employees-heading {
  min-height: 58px;
  padding: 4px 2px;
}

.editor-card,
.import-operation-card,
.bulk-transfer-form {
  padding: var(--space-card);
}

.editor-card__header,
.import-operation-card__header {
  gap: 13px;
  margin-bottom: 18px;
  padding-bottom: 16px;
}

.editor-card__header h3,
.import-operation-card__header h3,
.device-tool-card__header h3 {
  margin-block: 2px 0;
  font-size: var(--title-card);
  line-height: 1.4;
}

/* Controls and forms use one height, label size and focus treatment. */
.button {
  min-height: 42px;
  padding: 9px 15px;
  border-radius: var(--radius-input);
  font-size: 13px;
  line-height: 1.25;
}

.button--danger {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}

.button--danger:hover { background: #a83b34; border-color: #a83b34; }

.button:disabled,
.button[aria-disabled="true"],
button:disabled,
select:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: .58;
}

.form-grid { gap: 15px; }
.form-field { gap: 6px; }

.form-field > label,
.filter-field label,
.history-filter-form label,
.device-tool-field > label,
.device-employee-role-form > label {
  color: var(--text);
  font-size: var(--text-small);
  font-weight: 800;
}

.form-field input:not([type="checkbox"]),
.form-field select,
.form-field textarea,
.filter-form input,
.filter-form select,
.history-filter-form input,
.history-filter-form select,
.device-tool-field select,
.device-employee-role-form select {
  min-height: 44px;
  border-radius: var(--radius-input);
}

.form-field__help,
.form-field__error,
.device-tool-field > small,
.device-employee-role-form > small,
.device-target-picker__choice small {
  font-size: var(--text-small);
  line-height: 1.6;
}

.form-field__error,
.field-error,
.form-errors {
  color: #8e302a;
  font-size: var(--text-small);
  line-height: 1.6;
}

.form-errors {
  display: grid;
  gap: 5px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--red-soft);
  border: 1px solid color-mix(in srgb, var(--red) 38%, var(--line));
  border-inline-start: 4px solid var(--red);
  border-radius: var(--radius-input);
}

.form-field--error input,
.form-field--error select,
.form-field--error textarea {
  border-color: var(--red);
}

.form-field--checkbox {
  border-radius: var(--radius-input);
}

.editor-actions {
  gap: 10px;
  padding-block: 16px 0;
}

.editor-actions--split { justify-content: space-between; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; }

.editor-actions > p,
.import-operation-card__action p,
.history-form-footer p {
  font-size: var(--text-small);
  line-height: 1.65;
}

.filter-panel {
  margin: 0;
  padding: 12px;
}

.filter-form,
.filter-form--devices,
.history-filter-form { gap: 10px; }

/* No filter is hidden at intermediate widths. */
.filter-form .filter-field:nth-of-type(3) { display: grid; }

/* Tables remain dense enough for operations, without 8px labels. */
.data-panel { overflow: hidden; }

.data-table th {
  height: 44px;
  padding: 11px 16px;
  font-size: var(--text-small);
  line-height: 1.35;
}

.data-table td {
  height: 62px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.55;
}

.table-empty {
  min-height: 92px;
  padding: 28px 18px !important;
  color: var(--muted);
  font-size: 12px !important;
  line-height: 1.7;
  text-align: center;
  white-space: normal;
}

.row-action {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
}

.row-action:not(:has(svg)) {
  font-size: 0;
  direction: ltr;
}

.row-action:not(:has(svg))::before { content: "←"; font-size: 16px; }
[dir="ltr"] .row-action:not(:has(svg))::before { content: "→"; }

.text-button {
  min-height: 40px;
  padding: 8px 10px;
}

.response-excerpt {
  max-width: min(52vw, 680px);
  display: block;
  margin-top: 4px;
  overflow: visible;
  color: var(--muted);
  line-height: 1.6;
  text-overflow: clip;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.audit-diff summary {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: var(--text-small);
  font-weight: 800;
}

.audit-diff > div {
  position: static;
  width: min(520px, calc(100vw - 72px));
  margin-top: 7px;
  border-radius: var(--radius-input);
}

.audit-diff pre { font-size: var(--text-micro); line-height: 1.65; }

.table-wrap[data-scrollable="true"] {
  scroll-behavior: smooth;
  scrollbar-color: var(--line-dark) transparent;
  scrollbar-width: thin;
}

.data-table--compact th,
.data-table--compact td { padding-inline: 16px; }

.table-time strong,
.employee-code,
.serial-code,
.ip-code,
.rate-cell strong { font-size: 12px; }

.table-time small,
.record-link small,
.rate-cell small,
.device-ref small,
.device-name small,
.management-layout--tables .data-table td > small,
.history-employee-header div > span,
.history-request-card > header small,
.history-request-card dt {
  font-size: var(--text-micro);
}

.status-badge,
.meta-chip,
.sync-action {
  min-height: 25px;
  padding: 4px 8px;
  font-size: var(--text-micro);
  line-height: 1.25;
}

.pagination { min-height: 58px; }
.pagination p,
.pagination__button,
.pagination__current { font-size: var(--text-small); }

/* Repeated dashboard and detail layouts share the page rhythm. */
.metric-grid,
.dashboard-grid,
.device-overview,
.management-gates,
.management-layout,
.overview-grid,
.capability-summary,
.capability-grid,
.history-action-grid,
.history-summary,
.history-request-grid,
.device-tools-grid,
.device-employee-list,
.group-grid {
  gap: var(--content-gap);
  margin-block: 0;
}

.metric-card { min-height: 158px; padding: 18px; }
.metric-card__value { font-size: clamp(31px, 3vw, 40px); }

.entity-hero {
  min-height: 158px;
  gap: 20px;
  padding: 22px;
}

.entity-hero__copy h3 {
  font-size: clamp(21px, 2vw, 29px);
}

.entity-hero__copy p,
.operation-hero > div > p:last-child,
.info-card__description,
.capability-card p { font-size: var(--text-small); }

.entity-hero__metrics dt,
.operation-hero dt,
.info-list dt,
.management-specs dt,
.group-scope dt,
.sync-plan-seal dt { font-size: var(--text-micro); }

.entity-hero__metrics dd { font-size: 21px; }
.operation-hero dd,
.info-list dd,
.management-specs dd { font-size: 13px; }

.product-tabs {
  gap: 5px;
  margin: 0;
  padding: 5px;
  top: var(--sticky-offset);
}

.compact-list a {
  margin-inline-start: auto;
  margin-right: 0;
}

.data-panel__header > .card-actions,
.device-employees-heading > .card-actions {
  padding: 0;
}

.product-tabs a {
  min-height: 42px;
  padding-inline: 15px;
  font-size: var(--text-small);
}

/* Targeted repairs found during the cross-page audit. */
.attendance-history-intro { max-width: 920px; }

.history-pull-card,
.history-guide-card,
.history-records,
.history-employee-card { border-radius: var(--radius-panel); }

.history-card-heading,
.history-pull-form,
.history-records-header { padding-inline: 20px; }

.history-summary span,
.history-summary small,
.history-guide-steps small,
.history-device-chip small,
.history-empty-state p { font-size: var(--text-small); }

.history-guide-steps strong,
.history-employee-header h4,
.history-request-card dd { font-size: 13px; }

.history-filter-form { padding: 14px 16px; }
.history-groups { gap: 12px; padding: 16px; }

/* Five result cards no longer leave an accidental four-column orphan. */
.import-result-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.import-result-grid small,
.import-stage small,
.import-operation-card__header p:last-child { font-size: var(--text-small); }

/* Transfer summaries may contain three or four facts depending on workflow. */
.sync-plan-seal dl {
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
}

.group-scope dl {
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
}

.group-grid > .management-empty,
.group-grid > .empty-state,
.group-grid > .table-empty { grid-column: 1 / -1; }

.sync-plan-seal dd { font-size: 13px; overflow-wrap: anywhere; }

.direct-personnel-form,
.personnel-import-card { width: min(100%, 920px); }

.helper-disclosure {
  width: min(100%, 920px);
  overflow: hidden;
}

.helper-disclosure > summary {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}

.helper-disclosure > summary::-webkit-details-marker { display: none; }

.helper-disclosure > summary > span:first-child {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  color: var(--teal);
  background: var(--teal-soft);
  border-radius: 10px;
  font-size: 19px;
  transition: transform .18s ease;
}

.helper-disclosure[open] > summary > span:first-child { transform: rotate(45deg); }

.helper-disclosure > summary > span:last-child { display: grid; gap: 3px; }
.helper-disclosure > summary strong { font-size: var(--title-card); }
.helper-disclosure > summary small { color: var(--muted); font-size: var(--text-small); }

.helper-disclosure__body {
  display: grid;
  gap: 15px;
  padding: 0 20px 20px;
  border-top: 1px solid var(--line);
}

.helper-disclosure__body > p {
  padding-top: 15px;
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.7;
}

.biometric-safety-details,
.biometric-source-disclosure { overflow: hidden; }

.biometric-safety-details > summary,
.biometric-source-disclosure > summary {
  cursor: pointer;
  list-style: none;
}

.biometric-safety-details > summary::-webkit-details-marker,
.biometric-source-disclosure > summary::-webkit-details-marker { display: none; }

.biometric-safety-details > summary {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
}

.biometric-safety-details > summary h3 { font-size: var(--title-section); }

.biometric-safety-details > summary > span {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  color: var(--teal);
  background: var(--teal-soft);
  border-radius: 10px;
  font-size: 19px;
  transition: transform .18s ease;
}

.biometric-safety-details[open] > summary > span { transform: rotate(45deg); }

.biometric-safety-details__body {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  gap: 18px;
  padding: 18px 20px 20px;
  border-top: 1px solid var(--line);
}

.biometric-safety-details__body > p {
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.75;
}

.biometric-safety-details__body dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.biometric-safety-details__body dl > div {
  padding: 12px;
  background: var(--surface-2);
  border-radius: var(--radius-input);
}

.biometric-safety-details__body dt { color: var(--muted); font-size: var(--text-micro); }
.biometric-safety-details__body dd { margin-top: 3px; font-size: var(--text-small); font-weight: 800; }

.biometric-source-disclosure > summary { user-select: none; }
.biometric-source-disclosure__body { border-top: 1px solid var(--line); }

.device-tool-card__header div > p:last-child,
.fingerprint-choice-placeholder small,
.fingerprint-choice small,
.device-tool-note p,
.device-employee-guide small,
.device-employee-current-role small,
.device-employee-current-role span,
.device-employee-card__identity small {
  font-size: var(--text-micro);
}

/* One-screen plan management. Version history stays an internal concern. */
.simple-plan-editor { display: grid; gap: var(--content-gap); }

.simple-plan-sheet { overflow: hidden; }

.simple-plan-sheet__section {
  display: grid;
  gap: 18px;
  padding: var(--space-card);
}

.simple-plan-sheet__section + .simple-plan-sheet__section {
  border-top: 1px solid var(--line);
}

.simple-plan-sheet__heading { display: grid; gap: 4px; }
.simple-plan-sheet__heading h3 { font-size: var(--title-section); }
.simple-plan-sheet__heading > p:last-child {
  color: var(--muted);
  font-size: var(--text-small);
}

.simple-plan-editor__identity { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.simple-plan-editor__wide { grid-column: 1 / -1; }
.simple-plan-editor__limits { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.simple-plan-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.simple-plan-feature {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto minmax(150px, .65fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 13px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-nested);
}

.simple-plan-feature.is-enabled {
  background: color-mix(in srgb, var(--teal-soft) 52%, var(--surface));
  border-color: color-mix(in srgb, var(--teal) 28%, var(--line));
}

.simple-plan-feature__title { min-width: 0; display: grid; gap: 2px; }
.simple-plan-feature__title strong { font-size: var(--text-body); }
.simple-plan-feature__title small { color: var(--success-fg); font-size: var(--text-micro); }
.simple-plan-feature .form-field { margin: 0; }
.simple-plan-feature .form-field--checkbox { padding: 0; border: 0; background: transparent; }
.simple-plan-feature .form-field__help { display: none; }

.simple-plan-editor__save {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px var(--space-card);
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}

.simple-plan-editor__save p {
  color: var(--muted);
  font-size: var(--text-small);
}

.simple-plan-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--content-gap);
}

.simple-plan-card {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: var(--space-card);
}

.simple-plan-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.simple-plan-card__header > div { min-width: 0; }
.simple-plan-card__header h3 { font-size: var(--title-section); }
.simple-plan-card__header p {
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.6;
}

.simple-plan-card__price { display: flex; align-items: baseline; gap: 8px; }
.simple-plan-card__price strong { font-size: clamp(22px, 2vw, 28px); line-height: 1; }
.simple-plan-card__price span { color: var(--muted); font-size: var(--text-small); }

.simple-plan-card__facts { display: grid; gap: 8px; }
.simple-plan-card__facts > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-block: 8px;
  border-bottom: 1px solid var(--line);
}
.simple-plan-card__facts dt { color: var(--muted); font-size: var(--text-small); }
.simple-plan-card__facts dd { font-size: var(--text-small); font-weight: 800; }
.simple-plan-card > .button { width: 100%; margin-top: auto; }

@media (max-width: 1180px) {
  .filter-form,
  .filter-form--devices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .filter-form__search { grid-column: span 2; }
}

@media (max-width: 900px) {
  :root {
    --page-gutter: 16px;
    --page-block-start: 22px;
    --content-gap: 14px;
    --sticky-offset: 73px;
  }

  .page-intro {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 13px;
  }

  .page-intro__actions { justify-content: flex-start; }
  .page-intro__copy h2,
  .attendance-history-intro h2 { max-width: 34ch; }

  .entity-hero { padding: 19px; }
  .import-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sync-plan-seal dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .filter-form,
  .filter-form--devices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-form__search { grid-column: 1 / -1; }

  .table-wrap[data-scrollable="true"] .data-table th:first-child,
  .table-wrap[data-scrollable="true"] .data-table td:first-child:not([colspan]) {
    position: sticky;
    z-index: 1;
    inset-inline-start: 0;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--line);
  }

  .table-wrap[data-scrollable="true"] .data-table th:first-child { z-index: 2; }

  .simple-plan-editor__identity,
  .simple-plan-editor__limits,
  .simple-plan-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .simple-plan-features { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  :root {
    --page-gutter: 12px;
    --page-block-start: 18px;
    --content-gap: 12px;
    --radius-panel: 15px;
    --radius-nested: 12px;
    --title-page: 24px;
    --title-section: 17px;
  }

  .page-frame { padding-bottom: 38px; }
  .page-intro { margin-bottom: 18px; }

  .page-intro__actions,
  .page-intro__actions > a,
  .page-intro__actions > button,
  .page-intro__actions > form,
  .page-intro__actions > form .button { width: 100%; }

  .page-action-menu,
  .page-action-menu > .button { width: 100%; }

  .page-intro__actions { display: grid; grid-template-columns: minmax(0, 1fr); }

  .panel__header,
  .data-panel__header,
  .history-card-heading,
  .history-records-header {
    min-height: 64px;
    padding: 15px;
  }

  .editor-card,
  .import-operation-card,
  .bulk-transfer-form { padding: 16px; }

  .button { min-height: 44px; }
  .data-table th,
  .data-table td { padding-inline: 12px; }

  .history-card-heading,
  .history-pull-form,
  .history-records-header { padding-inline: 15px; }

  .history-groups { padding: 10px; }
  .import-result-grid { grid-template-columns: minmax(0, 1fr); }
  .sync-plan-seal dl { grid-template-columns: minmax(0, 1fr); }
  .group-scope dl { grid-template-columns: minmax(0, 1fr); }

  .filter-form,
  .filter-form--devices { grid-template-columns: minmax(0, 1fr); }

  .filter-form__search,
  .filter-form .filter-field:nth-of-type(3) { grid-column: auto; }

  .filter-form .button--filter,
  .filter-form .filter-reset { width: 100%; }

  .editor-actions--split { align-items: stretch; }

  .biometric-safety-details__body,
  .biometric-safety-details__body dl { grid-template-columns: minmax(0, 1fr); }

  .simple-plan-editor__identity,
  .simple-plan-editor__limits,
  .simple-plan-list { grid-template-columns: minmax(0, 1fr); }

  .simple-plan-feature {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .simple-plan-feature .form-field:not(.form-field--checkbox) { grid-column: 1 / -1; }
  .simple-plan-editor__save { align-items: stretch; flex-direction: column; }
  .simple-plan-editor__save .button { width: 100%; }
}

@media print {
  .page-content { display: block; }
  .page-content > * { margin-bottom: 12px; }
}