.mobile-identity-strip {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fffaf8;
  color: var(--text-secondary);
  font-size: 11px;
}

.mobile-identity-strip strong {
  color: var(--text);
  font-weight: 700;
}

body.mobile {
  background: var(--bg-mobile);
}

body.director {
  background: var(--bg-mobile);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body.director::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body.mobile .shell {
  min-height: 0;
  height: auto;
  grid-template-columns: 1fr;
  grid-auto-rows: min-content;
  align-content: start;
}

body.director .shell {
  min-height: 0;
  height: auto;
  grid-template-columns: 1fr;
  grid-auto-rows: min-content;
  align-content: start;
}

body.mobile .sidebar {
  position: static;
  height: auto;
  padding: var(--space-16) var(--space-16) 0;
  background: transparent;
  border-right: 0;
  display: block;
}

body.director .sidebar {
  position: static;
  height: auto;
  padding: var(--space-16) var(--space-16) 0;
  background: transparent;
  border-right: 0;
  display: block;
}

body.mobile .sidebar::before {
  display: none;
}

body.director .sidebar::before {
  display: none;
}

body.mobile .brand,
body.mobile .user-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--panel);
}

body.director .brand,
body.director .user-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--panel);
}

body.mobile .sidebar-footer {
  display: none;
}

body.director .sidebar-footer {
  display: none;
}

body.mobile .sidebar-account {
  display: none;
}

body.director .sidebar-account {
  display: none;
}

body.mobile .main {
  padding: 0 12px 14px;
  gap: 10px;
}

body.director .main {
  padding: 0 12px 14px;
  gap: 10px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body.director .main::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body.director .shell,
body.director .sidebar,
body.director .table-wrap,
body.director .supervision-input-table-wrap,
body.director .director-patrol-table-wrap,
body.director .dashboard-report-table-wrap {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body.director .shell::-webkit-scrollbar,
body.director .sidebar::-webkit-scrollbar,
body.director .table-wrap::-webkit-scrollbar,
body.director .supervision-input-table-wrap::-webkit-scrollbar,
body.director .director-patrol-table-wrap::-webkit-scrollbar,
body.director .dashboard-report-table-wrap::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body.mobile .page-header h1 {
  font-size: 16px;
}

body.director .page-header h1 {
  font-size: 16px;
}

body.mobile .page-header p,
body.mobile .panel-header span,
body.mobile .muted,
body.mobile .metric-card span,
body.mobile .field span {
  font-size: 11px;
}

body.director .page-header p,
body.director .panel-header span,
body.director .muted,
body.director .metric-card span,
body.director .field span {
  font-size: 11px;
}

body.mobile .metric-card strong {
  font-size: 14px;
}

body.director .metric-card strong {
  font-size: 14px;
}

body.mobile .card-grid-metrics {
  grid-template-columns: 1fr;
}

body.director .card-grid-metrics {
  grid-template-columns: 1fr;
}

body.mobile .metric-card {
  padding: var(--space-12);
}

body.director .metric-card {
  padding: var(--space-12);
}

body.mobile .dashboard-metrics {
  grid-template-columns: 1fr;
}

body.director .dashboard-metrics {
  grid-template-columns: 1fr;
}

body.mobile .dashboard-metric-card {
  height: 44px;
  padding: 0 12px;
  gap: 12px;
}

body.director .dashboard-metric-card {
  height: 44px;
  padding: 0 12px;
  gap: 12px;
}

body.mobile .brand-wordmark,
body.mobile .hero-wordmark {
  font-size: 18px;
}

body.director .brand-wordmark,
body.director .hero-wordmark {
  font-size: 18px;
}

body.mobile .brand-subtitle,
body.mobile .hero-brand-copy span {
  font-size: 11px;
}

body.director .brand-subtitle,
body.director .hero-brand-copy span {
  font-size: 11px;
}

body.mobile .page-kicker,
body.mobile .eyebrow,
body.mobile .hero-tag,
body.mobile .report-chip,
body.mobile .feature-tag,
body.mobile .soft-chip,
body.mobile .rank-pill,
body.mobile .status {
  min-height: 20px;
  padding: 0 6px;
  font-size: 10px;
}

body.director .page-kicker,
body.director .eyebrow,
body.director .hero-tag,
body.director .report-chip,
body.director .feature-tag,
body.director .soft-chip,
body.director .rank-pill,
body.director .status {
  min-height: 20px;
  padding: 0 6px;
  font-size: 10px;
}

body.mobile .field {
  gap: 4px;
}

body.director .field {
  gap: 4px;
}

body.mobile .mobile-shellbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 9px;
  padding: 8px 14px 8px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}

body.director .mobile-shellbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}

body.mobile .mobile-shellbar-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}

body.director .mobile-shellbar-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

body.mobile .mobile-brand-inline {
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 0;
  background: transparent;
  text-align: left;
  margin-right: 0;
}

body.director .mobile-brand-inline {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 0;
  background: transparent;
  text-align: left;
}

body.mobile .mobile-brand-inline .brand-lockup {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

body.director .mobile-brand-inline .brand-lockup {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

body.mobile .mobile-nav-list {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-width: 100%;
  justify-content: flex-start;
  padding: 0 0 2px;
  margin: 0;
  border: 0;
  background: transparent;
  overflow-x: auto;
  overflow-y: hidden;
}

body.director .mobile-nav-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  justify-content: stretch;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

body.mobile .nav-link {
  min-height: 30px;
  padding: 0 12px;
  white-space: nowrap;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

body.director .nav-link {
  min-height: 36px;
  padding: 0 10px;
  white-space: nowrap;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 12px;
}

body.mobile .mobile-nav-list .nav-link::before {
  display: none;
}

body.director .mobile-nav-list .nav-link::before {
  display: none;
}

body.mobile .mobile-nav-list .nav-link.active {
  padding-inline: 14px;
}

body.director .mobile-nav-list .nav-link,
body.director .mobile-nav-list .nav-link.active {
  width: 100%;
  min-width: 0;
  justify-content: center;
  padding-inline: 12px;
}

body.mobile .mobile-inline-logout {
  margin: 0 0 0 4px;
  padding: 0;
  border: 0;
  background: transparent;
  flex: 0 0 auto;
}

body.director .mobile-inline-logout {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  flex: 0 0 auto;
}

body.mobile .mobile-inline-logout .button {
  min-height: 30px;
  min-width: 0;
  padding: 0 10px;
  white-space: nowrap;
}

body.director .mobile-inline-logout .button {
  min-height: 30px;
  min-width: 0;
  padding: 0 10px;
  font-size: 11px;
  white-space: nowrap;
}

body.mobile .field input,
body.mobile .field select,
body.mobile .mini-input {
  min-height: 36px;
  padding: 0 10px;
}

body.director .field input,
body.director .field select,
body.director .mini-input {
  min-height: 36px;
  padding: 0 10px;
}

body.mobile .field input[type='file'] {
  min-height: 42px;
  padding: 7px 8px;
}

body.director .field input[type='file'] {
  min-height: 42px;
  padding: 7px 8px;
}

body.mobile .field input[type='file']::file-selector-button,
body.mobile .field input[type='file']::-webkit-file-upload-button {
  min-height: 26px;
  padding: 0 12px;
  font-size: 11px;
}

body.director .field input[type='file']::file-selector-button,
body.director .field input[type='file']::-webkit-file-upload-button {
  min-height: 26px;
  padding: 0 12px;
  font-size: 11px;
}

body.mobile .field textarea {
  min-height: 84px;
  padding: 10px;
}

body.director .field textarea {
  min-height: 84px;
  padding: 10px;
}

body.director .supervision-log-form textarea {
  min-height: 220px;
  font-size: 11px;
  line-height: 1.5;
}

body.director .supervision-log-form .field > span {
  font-size: 12px;
  line-height: 1.35;
}

body.director .supervision-log-form .button {
  font-size: 11px;
}

body.director .supervision-log-thread .stack-list {
  gap: 8px;
  padding: 0 8px 8px;
}

body.director .supervision-log-thread .stack-card {
  padding: 10px 12px;
  gap: 6px;
}

body.director .supervision-reply-form {
  gap: 6px;
}

body.director .supervision-reply-form input[type='text'] {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--accent-soft);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: none;
  font-size: 11px;
}

body.director .supervision-reply-form .button {
  min-width: 54px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 10px;
}

body.director .supervision-delete-form {
  display: flex;
  justify-content: flex-end;
}

body.director .supervision-delete-form .button {
  min-height: 24px;
  padding-inline: 12px;
  font-size: 10px;
}

body.director .supervision-log-thread > .stack-card-head strong,
body.director .supervision-log-thread > .stack-card-head span,
body.director .supervision-log-thread .stack-card-head strong,
body.director .supervision-log-thread .stack-card-head span {
  font-size: 11px;
  line-height: 1.35;
}

body.director .supervision-log-thread .stack-card p,
body.director .supervision-log-thread .empty-state,
body.director .supervision-log-thread .button-danger,
body.director .supervision-log-thread .button-secondary {
  font-size: 11px;
  line-height: 1.5;
}

body.mobile .button {
  min-height: 36px;
  font-size: 12px;
}

body.director .button {
  min-height: 36px;
  font-size: 12px;
}

body.mobile .button-xs {
  min-height: 32px;
  font-size: 11px;
}

body.director .button-xs {
  min-height: 32px;
  font-size: 11px;
}

body.mobile .mobile-supervision-filter-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

body.mobile .mobile-supervision-filter-bar .field {
  min-width: 0;
}

body.mobile .mobile-supervision-filter-bar .field select,
body.mobile .mobile-supervision-filter-bar .field input[type='date'] {
  width: 100%;
}

body.mobile .mobile-supervision-filter-bar > .action-field {
  min-width: 88px;
}

body.mobile .mobile-supervision-filter-bar > .action-field .button {
  width: 100%;
}

body.mobile .supervision-reply-form {
  gap: 10px;
}

body.mobile .mobile-supervision-log-list,
body.mobile .mobile-supervision-record-list,
body.mobile .mobile-supervision-thread .stack-list {
  padding: 0;
}

body.mobile .mobile-supervision-log-list,
body.mobile .mobile-supervision-record-list {
  gap: 12px;
}

body.mobile .mobile-supervision-thread .stack-list {
  gap: 10px;
}

body.mobile .mobile-supervision-thread .stack-list > * {
  min-width: 0;
}

body.mobile .mobile-supervision-log-card,
body.mobile .mobile-supervision-comment-card,
body.mobile .mobile-supervision-record-card {
  padding: 14px 16px;
  gap: 8px;
  border-radius: 18px;
}

body.mobile .mobile-supervision-comment-card {
  height: 100%;
  align-content: start;
}

body.mobile .mobile-supervision-log-card .stack-card-head,
body.mobile .mobile-supervision-comment-card .stack-card-head,
body.mobile .mobile-supervision-record-card .stack-card-head {
  align-items: baseline;
}

body.mobile .mobile-supervision-log-card .stack-card-head strong,
body.mobile .mobile-supervision-comment-card .stack-card-head strong,
body.mobile .mobile-supervision-record-card .stack-card-head strong {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
}

body.mobile .mobile-supervision-log-card .stack-card-head span,
body.mobile .mobile-supervision-comment-card .stack-card-head span,
body.mobile .mobile-supervision-record-card .stack-card-head span {
  font-size: 11px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--text);
}

body.mobile .mobile-supervision-log-card .stack-card-head span {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
}

body.mobile .mobile-supervision-records-panel .stack-card p,
body.mobile .mobile-supervision-records-panel .empty-state {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

body.mobile .mobile-supervision-section-label strong {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text);
}

body.mobile .mobile-supervision-meta strong,
body.mobile .mobile-supervision-record-text strong,
body.mobile .mobile-supervision-reply-text strong {
  color: var(--text);
}

body.mobile .supervision-reply-form input[type='text'] {
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid var(--accent-soft);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: none;
  font-size: 12px;
}

body.mobile .supervision-reply-form .button {
  min-width: 76px;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

body.mobile .mobile-supervision-compose-form {
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--surface-soft);
  border: 1px solid var(--line-soft);
  align-content: end;
}

body.mobile .supervision-delete-form {
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 860px) {
  body.mobile .mobile-supervision-thread .stack-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  body.mobile .mobile-supervision-thread .empty-state {
    grid-column: 1 / -1;
  }

  body.mobile .mobile-supervision-compose-form {
    height: 100%;
  }
}

body.mobile .supervision-delete-form .button {
  min-height: 28px;
  padding-inline: 12px;
  font-size: 10px;
}

body.mobile .supervision-log-content {
  white-space: pre-line;
}

body.mobile th,
body.mobile td {
  font-size: 12px;
  padding: 8px;
}

body.mobile .table-wrap-fixed-10 {
  height: auto;
  max-height: 360px;
}

body.mobile .table-wrap-fixed-10-frame {
  height: 360px;
}

body.mobile .table-value {
  font-size: 12px;
}

body.mobile .sales-entry-grid.is-mobile {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(140px, 0.9fr);
}

body.mobile .sales-entry-grid.is-mobile .sales-field-date {
  grid-column: 1;
  grid-row: 1;
}

body.mobile .sales-entry-grid.is-mobile .sales-field-amount {
  grid-column: 2;
  grid-row: 1;
}

body.mobile .sales-entry-grid.is-mobile .sales-field-remark {
  grid-column: 1 / span 2;
  grid-row: 2;
}

body.mobile .sales-entry-grid.is-mobile .sales-action-field {
  grid-column: 3;
  grid-row: 1;
}

body.mobile .task-sheet-panel {
  padding: 10px;
}

body.mobile .task-sheet-header {
  grid-template-columns: 1fr;
  align-items: start;
}

body.mobile .task-progress-panel,
body.director .task-progress-panel {
  padding: 12px;
  gap: 10px;
}

body.mobile .task-progress-header,
body.director .task-progress-header {
  display: grid;
  gap: 10px;
  justify-items: start;
}

body.mobile .task-progress-heading h2,
body.director .task-progress-heading h2 {
  font-size: 14px;
}

body.mobile .task-progress-heading span,
body.director .task-progress-heading span {
  font-size: 11px;
}

body.mobile .task-progress-switches,
body.director .task-progress-switches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

body.mobile .task-progress-switch,
body.director .task-progress-switch {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 36px;
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
}

body.mobile .task-progress-filter-form,
body.director .task-progress-filter-form {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

body.mobile .task-progress-filter-field,
body.director .task-progress-filter-field {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
}

body.mobile .task-progress-filter-field span,
body.director .task-progress-filter-field span {
  font-size: 12px;
  font-weight: 600;
}

body.mobile .task-progress-filter-input,
body.director .task-progress-filter-input {
  min-height: 40px;
  font-size: 12px;
  padding: 0 14px;
}

body.mobile .task-progress-filter-button,
body.director .task-progress-filter-button {
  min-width: 88px;
  min-height: 40px;
  padding: 0 14px;
  font-size: 12px;
}

body.mobile .task-progress-list,
body.director .task-progress-list {
  padding: 0;
  gap: 10px;
}

body.mobile .task-progress-card,
body.director .task-progress-card {
  padding: 12px 14px;
  gap: 8px;
  border-radius: 18px;
}

body.mobile .task-progress-card-title strong,
body.director .task-progress-card-title strong {
  font-size: 13px;
}

body.mobile .task-progress-card-title span,
body.director .task-progress-card-title span {
  font-size: 11px;
}

body.mobile .task-progress-target-chip,
body.director .task-progress-target-chip {
  min-height: 24px;
  font-size: 10px;
}

body.mobile .task-progress-metric-grid,
body.director .task-progress-metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.mobile .task-progress-metric,
body.director .task-progress-metric {
  padding: 10px 12px;
  border-radius: 14px;
}

body.mobile .task-progress-metric span,
body.director .task-progress-metric span {
  font-size: 10px;
}

body.mobile .task-progress-metric strong,
body.director .task-progress-metric strong {
  font-size: 12px;
}

body.mobile .task-sheet-tab-groups {
  display: grid;
  gap: 10px;
  width: 100%;
}

body.mobile .task-sheet-tab-group {
  display: grid;
  gap: 6px;
}

body.mobile .task-sheet-tab-group-label {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  padding-left: 2px;
}

body.mobile .task-matrix-wrap {
  height: 420px;
}

body.mobile .backend-page-stack,
body.mobile .stack-section,
body.mobile .content-grid {
  gap: 8px;
}

body.mobile .panel {
  border-radius: 14px;
}

body.mobile .toolbar,
body.mobile .form-card,
body.mobile .error-shell,
body.mobile .dashboard-switch-panel,
body.mobile .backend-form-panel {
  padding: 10px 12px;
}

body.mobile .mobile-supervision-records-panel {
  padding: 14px 12px 12px;
}

body.mobile .panel-header {
  gap: 6px;
  margin-bottom: 6px;
  padding: 0;
  align-items: flex-start;
}

body.mobile .mobile-supervision-records-panel .panel-header {
  margin-bottom: 12px;
}

body.mobile .panel-header h2,
body.mobile .panel-header h3,
body.mobile .dashboard-panel-title h2 {
  font-size: 14px;
  line-height: 1.3;
}

body.mobile .dashboard-switch-header {
  display: none;
}

body.mobile .dashboard-report-toolbar {
  margin-top: 0;
  padding-top: 0;
}

body.director .dashboard-report-toolbar {
  margin-top: 0;
  padding-top: 0;
}

body.director .dashboard-reports-filter-bar {
  flex: 0 1 auto;
  width: fit-content;
  max-width: 100%;
  align-items: end;
  gap: 8px 10px;
}

body.director .dashboard-reports-filter-bar .field.compact {
  width: min(100%, 210px);
}

body.director .supervision-records-panel > .header-actions {
  margin-bottom: 6px;
}

body.director .supervision-records-panel > .form-grid {
  gap: 8px;
}

body.director .supervision-records-panel .table-actions {
  margin-top: 0;
}

body.director .supervision-records-panel #add-supervision-row {
  min-height: 28px;
  padding-inline: 12px;
  font-size: 10px;
}

body.director .supervision-input-table {
  min-width: 100%;
  table-layout: auto;
}

body.director .supervision-input-table thead {
  display: none;
}

body.director .supervision-input-table,
body.director .supervision-input-table tbody {
  display: block;
}

body.director .supervision-input-table tbody tr[data-supervision-row] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}

body.director .supervision-input-table tbody tr[data-supervision-row]:first-child {
  border-top: 0;
}

body.director .supervision-input-table tbody td {
  display: grid;
  gap: 4px;
  padding: 0;
  border: 0;
  min-width: 0;
}

body.director .supervision-input-table tbody td::before {
  content: attr(data-label);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}

body.director .supervision-input-table tbody td.cell-store {
  grid-column: 1 / span 3;
  grid-row: 1;
}

body.director .supervision-input-table tbody td.cell-actions {
  grid-column: 4;
  grid-row: 1;
  justify-items: end;
  align-self: end;
}

body.director .supervision-input-table tbody td.cell-actions::before {
  display: none;
}

body.director .supervision-input-table tbody td.cell-arrival {
  grid-column: 1 / span 2;
  grid-row: 2;
}

body.director .supervision-input-table tbody td.cell-leave {
  grid-column: 3 / span 2;
  grid-row: 2;
}

body.director .supervision-input-table select,
body.director .supervision-input-table input[type='time'] {
  min-width: 0;
}

body.director .supervision-input-table tbody td.cell-actions .button {
  width: 88px;
  min-width: 0;
  min-height: 36px;
  height: 36px;
  padding-inline: 0;
}

body.director .dashboard-autonomy-filter-controls {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: nowrap;
}

body.director .dashboard-autonomy-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

body.director .dashboard-autonomy-filter-actions .button {
  min-width: 0;
  padding-inline: 12px;
  white-space: nowrap;
}

body.mobile .mobile-dashboard-report-group {
  display: grid;
  gap: 10px;
}

body.mobile .mobile-dashboard-report-section {
  display: grid;
  gap: 10px;
}

body.mobile .mobile-dashboard-report-section > .panel-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 4px 0 2px;
}

body.mobile .mobile-dashboard-report-section > .panel-header h3 {
  min-width: 0;
}

body.mobile .mobile-dashboard-report-section > .panel-header span {
  justify-self: end;
  padding-right: 4px;
  white-space: nowrap;
  line-height: 1.2;
}

body.mobile .mobile-employee-sales-panel > .panel-header {
  align-items: flex-start;
  padding-top: 6px;
}

body.mobile .mobile-sales-detail-panel > .panel-header {
  align-items: flex-start;
  padding-top: 6px;
}

body.mobile .mobile-dashboard-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

body.mobile .mobile-dashboard-table-wrap .dashboard-report-table {
  min-width: 640px;
}

body.mobile .mobile-employee-sales-wrap {
  max-height: 334px;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

body.mobile .mobile-employee-sales-table {
  min-width: 640px;
  table-layout: fixed;
}

body.mobile .mobile-employee-sales-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-soft);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.2;
}

body.mobile .mobile-employee-sales-table th,
body.mobile .mobile-employee-sales-table td {
  padding: 8px 10px;
  font-size: 11px;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  vertical-align: middle;
}

body.mobile .mobile-employee-sales-table tbody td {
  height: 42px;
}

body.mobile .mobile-sales-detail-panel {
  gap: 10px;
}

body.mobile .mobile-sales-detail-panel .mobile-sales-detail-wrap {
  margin-top: 2px;
}

body.mobile .mobile-sales-edit-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: #fffaf8;
}

body.mobile .mobile-sales-edit-remark,
body.mobile .mobile-sales-edit-actions {
  grid-column: 1 / -1;
}

body.mobile .mobile-sales-edit-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
}

body.mobile .mobile-sales-edit-actions .button {
  width: 100%;
}

body.mobile .mobile-sales-detail-wrap {
  max-height: 294px;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

body.mobile .mobile-sales-detail-table {
  min-width: 100%;
  table-layout: fixed;
}

body.mobile .mobile-sales-detail-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-soft);
}

body.mobile .mobile-sales-detail-table th,
body.mobile .mobile-sales-detail-table td {
  padding: 8px 10px;
  font-size: 11px;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  vertical-align: middle;
}

body.mobile .mobile-sales-detail-table tbody td {
  height: 42px;
}

body.mobile .mobile-sales-detail-table .cell-date,
body.mobile .mobile-sales-detail-table .cell-employee,
body.mobile .mobile-sales-detail-table .cell-remark {
  text-align: left;
}

body.mobile .mobile-sales-detail-table .cell-number,
body.mobile .mobile-sales-detail-table .cell-actions {
  text-align: center;
}

body.mobile .mobile-sales-detail-table .cell-remark {
  overflow: hidden;
  text-overflow: ellipsis;
}

body.mobile .mobile-report-entry-form {
  grid-template-columns: 1fr;
  gap: 10px;
}

body.mobile .mobile-report-entry-form .form-inline-hint {
  margin-top: -4px;
  padding: 7px 9px;
  font-size: 10px;
}

body.mobile .report-entry-section {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 10px;
}

body.mobile .company-notice-section {
  gap: 8px;
  padding: 9px 8px;
  background:
    linear-gradient(180deg, #fffaf8 0%, #fff 100%);
}

body.mobile .company-notice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}

body.mobile .company-notice-card {
  display: grid;
  gap: 6px;
  padding: 8px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: #fff;
}

body.mobile .company-notice-card-full {
  grid-column: 1 / -1;
}

body.mobile .company-notice-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

body.mobile .company-notice-card-head strong {
  font-size: 11px;
  line-height: 1.2;
}

body.mobile .company-notice-card-head span {
  font-size: 9px;
  color: var(--muted);
}

body.mobile .company-notice-highlight-body {
  display: grid;
  gap: 4px;
}

body.mobile .company-notice-highlight-name {
  font-size: 13px;
  line-height: 1.25;
}

body.mobile .company-notice-highlight-meta {
  font-size: 9px;
  color: var(--muted);
}

body.mobile .company-notice-highlight-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-deep);
}

body.mobile .company-notice-highlight-footnote {
  font-size: 9px;
  line-height: 1.35;
  color: var(--muted);
}

body.mobile .company-notice-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.mobile .company-notice-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 1px 6px;
  align-items: center;
  min-height: 38px;
  padding: 5px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #fffaf8;
}

body.mobile .company-notice-rank {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-width: 32px;
  font-size: 8px;
  color: var(--accent-deep);
  font-weight: 700;
}

body.mobile .company-notice-name {
  min-width: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

body.mobile .company-notice-meta {
  display: block;
  font-size: 8px;
  color: var(--muted);
  line-height: 1.25;
}

body.mobile .company-notice-list strong {
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-self: end;
  font-size: 10px;
  color: var(--accent-deep);
  line-height: 1.15;
}

body.mobile .company-notice-list li.is-placeholder {
  border-style: dashed;
  background: #fffdfc;
}

body.mobile .company-notice-list li.is-placeholder .company-notice-rank,
body.mobile .company-notice-list li.is-placeholder .company-notice-name,
body.mobile .company-notice-list li.is-placeholder .company-notice-meta,
body.mobile .company-notice-list li.is-placeholder strong {
  color: var(--muted);
}

body.mobile .company-notice-empty {
  padding: 6px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  font-size: 9px;
  color: var(--muted);
  text-align: center;
}

body.mobile .report-comment-panel .report-comment-grid {
  grid-template-columns: 1fr;
}

body.mobile .report-comment-panel .report-comment-card {
  padding: 10px;
}

body.mobile .report-comment-panel .report-comment-card h4 {
  font-size: 11px;
}

body.mobile .report-comment-panel .report-comment-form textarea {
  min-height: 84px;
}

body.mobile .report-entry-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
}

body.mobile .report-entry-section-head h3 {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
}

body.mobile .report-entry-section-head span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

body.mobile .report-entry-autonomy-head {
  justify-content: center;
  text-align: center;
}

body.mobile .report-entry-autonomy-head h3,
body.mobile .report-entry-autonomy-head span {
  width: 100%;
  text-align: center;
}

body.mobile .report-entry-section-grid {
  display: grid;
  gap: 8px;
}

body.mobile .report-entry-section-grid-basic {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.mobile .report-entry-section-grid-attachments {
  grid-template-columns: minmax(160px, 0.9fr) minmax(200px, 1.1fr);
}

body.mobile .report-entry-autonomy-dialog {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

body.mobile .report-entry-autonomy-table-wrap {
  margin: 0;
  max-height: 176px;
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.mobile .report-entry-autonomy-table {
  width: 100%;
  min-width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

body.mobile .report-entry-autonomy-table col.autonomy-col-project {
  width: 46%;
}

body.mobile .report-entry-autonomy-table col.autonomy-col-score {
  width: 16%;
}

body.mobile .report-entry-autonomy-table col.autonomy-col-content {
  width: 38%;
}

body.mobile .report-entry-autonomy-table th,
body.mobile .report-entry-autonomy-table td {
  padding: 8px 10px;
  font-size: 11px;
  vertical-align: middle;
  overflow: visible;
}

body.mobile .report-entry-autonomy-table tbody tr {
  height: 64px;
}

body.mobile .report-entry-autonomy-table tbody td {
  display: table-cell;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
}

body.mobile .report-entry-autonomy-table thead th {
  text-align: center;
}

body.mobile .report-entry-autonomy-table tbody td {
  text-align: left;
}

body.mobile .report-entry-autonomy-table th:first-child,
body.mobile .report-entry-autonomy-table td:first-child {
  width: auto;
}

body.mobile .report-entry-autonomy-table th:nth-child(2),
body.mobile .report-entry-autonomy-table td:nth-child(2) {
  width: auto;
  text-align: center;
}

body.mobile .report-entry-autonomy-table th:nth-child(3),
body.mobile .report-entry-autonomy-table td:nth-child(3) {
  width: auto;
}

body.mobile .report-entry-autonomy-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-soft);
}

body.mobile .report-entry-autonomy-table select,
body.mobile .report-entry-autonomy-table input[type='text'] {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  height: 36px !important;
  min-height: 36px !important;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  font-size: 11px;
  background: #fff;
  line-height: 1.2;
  margin: 0 !important;
}

body.mobile .report-entry-autonomy-table select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #8e7f81 50%),
    linear-gradient(135deg, #8e7f81 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% - 2px),
    calc(100% - 9px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 24px;
}

body.mobile .report-entry-autonomy-table [data-autonomy-score-cell] {
  text-align: center;
}

body.mobile .report-entry-autonomy-table .autonomy-score-pill {
  font-weight: 700;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 999px;
  height: 36px !important;
  min-height: 36px !important;
  min-width: 56px;
  padding: 0 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  line-height: 1.2;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  margin: 0 !important;
}

body.mobile .report-entry-autonomy-footer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-top: 1px solid var(--line-soft);
  font-size: 10px;
  color: var(--muted);
}

body.mobile .report-entry-autonomy-footer strong {
  color: var(--text);
  font-size: 11px;
  margin-left: auto;
}

body.mobile .report-entry-autonomy-footer [data-autonomy-add-row] {
  min-height: 28px;
  padding: 0 10px;
}

body.mobile .upload-multi-hint,
body.mobile .upload-multi-list {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.35;
}

body.mobile .upload-multi-preview {
  margin-top: 6px;
  grid-template-columns: repeat(auto-fill, 40px);
  justify-content: flex-start;
  gap: 5px;
}

body.mobile .upload-thumb-card {
  width: 40px;
}

body.mobile .upload-thumb-card img {
  width: 40px;
  height: 40px;
}

body.mobile .mobile-report-entry-form > .action-field {
  margin-top: 0;
}

body.mobile .mobile-report-entry-form > .action-field .button {
  width: 100%;
}

body.mobile .autonomy-mobile-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

body.mobile .autonomy-mobile-scroll .compact-table {
  table-layout: fixed;
}

body.mobile .autonomy-page-stack {
  gap: 6px;
}

body.mobile .autonomy-page-stack .panel {
  padding: clamp(5px, 1.8vw, 8px) clamp(6px, 2vw, 9px);
  border-radius: 10px;
}

body.mobile .autonomy-page-stack .panel-header {
  margin-bottom: clamp(3px, 1.2vw, 5px);
}

body.mobile .autonomy-page-stack .panel-header h2 {
  font-size: clamp(11px, 3vw, 13px);
  line-height: 1.2;
}

body.mobile .autonomy-page-stack .backend-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

body.mobile .autonomy-page-stack .backend-summary-chip {
  min-height: clamp(16px, 4vw, 18px);
  padding: 0 clamp(4px, 1.5vw, 6px);
  font-size: clamp(9px, 2.3vw, 10px);
}

body.mobile .autonomy-settings-input-table,
body.mobile .autonomy-settings-table,
body.mobile .autonomy-record-table {
  font-size: clamp(9px, 2.3vw, 10px);
}

body.mobile .autonomy-settings-input-table th,
body.mobile .autonomy-settings-input-table td,
body.mobile .autonomy-settings-table th,
body.mobile .autonomy-settings-table td,
body.mobile .autonomy-record-table th,
body.mobile .autonomy-record-table td {
  padding: clamp(3px, 1.2vw, 4px) clamp(4px, 1.5vw, 6px);
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  line-height: 1.15;
}

body.mobile .autonomy-settings-input-table input,
body.mobile .autonomy-settings-input-table select,
body.mobile .autonomy-settings-input-table .button {
  text-align: center;
}

body.mobile .autonomy-settings-input-table {
  min-width: 100%;
  width: 100%;
}

body.mobile .autonomy-settings-table {
  min-width: 100%;
}

body.mobile .autonomy-record-table {
  min-width: 100%;
}

body.mobile .autonomy-records-wrap {
  height: 184px;
  max-height: 184px;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.mobile .autonomy-settings-records-wrap {
  max-height: 190px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.mobile .autonomy-settings-input-wrap,
body.mobile .autonomy-records-wrap {
  overflow-x: hidden;
}

body.mobile .autonomy-record-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel-strong);
}

body.mobile .autonomy-records-wrap .autonomy-record-table thead th {
  height: 32px;
}

body.mobile .autonomy-records-wrap .autonomy-record-table tbody td {
  height: 36px;
}

body.mobile .autonomy-settings-input-table th:first-child,
body.mobile .autonomy-settings-input-table td:first-child,
body.mobile .autonomy-settings-table th:first-child,
body.mobile .autonomy-settings-table td:first-child,
body.mobile .autonomy-record-table th:first-child,
body.mobile .autonomy-record-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--panel);
  box-shadow: 1px 0 0 var(--line-soft);
}

body.mobile .autonomy-settings-input-table th:first-child,
body.mobile .autonomy-settings-input-table td:first-child {
  position: static;
  box-shadow: none;
}

body.mobile .autonomy-settings-input-table thead th:first-child,
body.mobile .autonomy-settings-table thead th:first-child,
body.mobile .autonomy-record-table thead th:first-child {
  z-index: 3;
}

body.mobile .autonomy-settings-panel .table-actions {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  justify-items: center;
}

body.mobile .autonomy-settings-panel .table-actions .button,
body.mobile .autonomy-settings-actions .button {
  width: 100%;
  min-height: clamp(26px, 7vw, 30px);
  font-size: clamp(9px, 2.5vw, 11px);
}

body.mobile .autonomy-settings-actions {
  gap: 6px;
}

body.mobile .autonomy-settings-panel {
  --autonomy-col-project: 50%;
  --autonomy-col-score: 12%;
  --autonomy-col-sort: 14%;
  --autonomy-col-action: 24%;
}

body.mobile .autonomy-settings-input-table,
body.mobile .autonomy-settings-table {
  width: 100%;
  min-width: 100%;
  table-layout: fixed;
}

body.mobile .autonomy-settings-input-wrap,
body.mobile .autonomy-settings-records-wrap {
  scrollbar-gutter: stable;
}

body.mobile .autonomy-settings-input-table col.col-project,
body.mobile .autonomy-settings-table col.col-project {
  width: var(--autonomy-col-project);
}

body.mobile .autonomy-settings-input-table col.col-score,
body.mobile .autonomy-settings-table col.col-score {
  width: var(--autonomy-col-score);
}

body.mobile .autonomy-settings-input-table col.col-sort,
body.mobile .autonomy-settings-table col.col-sort {
  width: var(--autonomy-col-sort);
}

body.mobile .autonomy-settings-input-table col.col-actions,
body.mobile .autonomy-settings-table col.col-actions {
  width: var(--autonomy-col-action);
}

body.mobile .autonomy-settings-input-table input[type='text'],
body.mobile .autonomy-settings-input-table input[type='number'] {
  min-height: 36px;
  height: 36px;
  padding: 0 clamp(4px, 1.8vw, 8px);
  font-size: clamp(9px, 2.5vw, 11px);
}

body.mobile .autonomy-settings-input-table td.cell-score input,
body.mobile .autonomy-settings-input-table td.cell-sort input {
  width: 100%;
  padding-inline: 1ch;
  text-align: center;
  min-width: 0;
  max-width: none;
}

body.mobile .autonomy-settings-input-table td.cell-actions {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  padding-inline: 6px;
  height: 36px;
}

body.mobile .autonomy-settings-input-table td.cell-actions .table-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.mobile .autonomy-settings-input-table td.cell-actions .button {
  width: auto;
  min-width: 66px;
  max-width: 100%;
  padding: 0;
  text-align: center;
  font-size: 11px;
  line-height: 1;
  min-height: 36px;
  height: 36px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

body.mobile .autonomy-settings-panel .button.button-danger {
  min-width: 66px;
  min-height: 36px;
  height: 36px;
  padding: 0 10px;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.mobile .autonomy-settings-input-table td.cell-project {
  width: var(--autonomy-col-project);
}

body.mobile .autonomy-settings-input-table td.cell-score {
  width: var(--autonomy-col-score);
}

body.mobile .autonomy-settings-input-table td.cell-sort {
  width: var(--autonomy-col-sort);
}

body.mobile .autonomy-settings-input-table td.cell-actions {
  width: var(--autonomy-col-action);
}

/* Force column alignment on mobile and override legacy nth-child widths from backend.css */
body.mobile .autonomy-settings-input-table th:nth-child(1),
body.mobile .autonomy-settings-input-table td:nth-child(1),
body.mobile .autonomy-settings-table th:nth-child(1),
body.mobile .autonomy-settings-table td:nth-child(1) {
  width: var(--autonomy-col-project) !important;
}

body.mobile .autonomy-settings-input-table th:nth-child(2),
body.mobile .autonomy-settings-input-table td:nth-child(2),
body.mobile .autonomy-settings-table th:nth-child(2),
body.mobile .autonomy-settings-table td:nth-child(2) {
  width: var(--autonomy-col-score) !important;
}

body.mobile .autonomy-settings-input-table th:nth-child(3),
body.mobile .autonomy-settings-input-table td:nth-child(3),
body.mobile .autonomy-settings-table th:nth-child(3),
body.mobile .autonomy-settings-table td:nth-child(3) {
  width: var(--autonomy-col-sort) !important;
}

body.mobile .autonomy-settings-input-table th:nth-child(4),
body.mobile .autonomy-settings-input-table td:nth-child(4),
body.mobile .autonomy-settings-table th:nth-child(4),
body.mobile .autonomy-settings-table td:nth-child(4) {
  width: var(--autonomy-col-action) !important;
}

body.mobile .autonomy-settings-confirm-row {
  margin-top: 6px;
}

body.mobile .autonomy-settings-confirm-row .button {
  width: 100%;
  min-height: 34px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

body.mobile .autonomy-record-table {
  table-layout: fixed;
}

body.mobile .autonomy-record-table th,
body.mobile .autonomy-record-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}

body.mobile .autonomy-record-table th:nth-child(1),
body.mobile .autonomy-record-table td:nth-child(1) {
  width: 30%;
}

body.mobile .autonomy-record-table th:nth-child(2),
body.mobile .autonomy-record-table td:nth-child(2) {
  width: 20%;
}

body.mobile .autonomy-record-table th:nth-child(3),
body.mobile .autonomy-record-table td:nth-child(3) {
  width: 32%;
}

body.mobile .autonomy-record-table th:nth-child(4),
body.mobile .autonomy-record-table td:nth-child(4) {
  width: 18%;
}

@media (max-width: 390px) {
  body.mobile .autonomy-page-stack {
    gap: 4px;
  }

  body.mobile .autonomy-page-stack .panel {
    border-radius: 8px;
  }

  body.mobile .autonomy-settings-records-wrap,
  body.mobile .autonomy-records-wrap {
    height: 184px;
    max-height: 184px;
  }

  body.mobile .autonomy-settings-panel {
    --autonomy-col-project: 48%;
    --autonomy-col-score: 12%;
    --autonomy-col-sort: 14%;
    --autonomy-col-action: 26%;
  }
}


@media (max-width: 720px) {
  body.mobile .report-entry-section-grid-basic,
  body.mobile .report-entry-section-grid-attachments {
    grid-template-columns: 1fr;
  }

  body.mobile .sales-entry-grid.is-mobile {
    grid-template-columns: 1fr;
  }

  body.mobile .sales-entry-grid.is-mobile .sales-field-date,
  body.mobile .sales-entry-grid.is-mobile .sales-field-amount,
  body.mobile .sales-entry-grid.is-mobile .sales-field-remark,
  body.mobile .sales-entry-grid.is-mobile .sales-action-field {
    grid-column: auto;
    grid-row: auto;
  }

  body.mobile .mobile-sales-edit-form,
  body.mobile .mobile-sales-edit-actions {
    grid-template-columns: 1fr;
  }
}