/* System-wide readability floor. Loaded after the app's existing styles. */
body {
  font-size: 17px !important;
  line-height: 1.55;
}

:is(
  button,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea,
  a.button,
  a.btn,
  a[role="button"]
) {
  min-height: 40px;
  font-size: 16px !important;
}

:is(label, legend) {
  font-size: 15px !important;
}

:is(small, .muted, .helper, .help, .hint, [class$="-helper"], [class$="-help"], [class$="-hint"]) {
  font-size: 14px !important;
  line-height: 1.55;
}

:is(table, td) {
  font-size: 15px !important;
}

th {
  font-size: 14px !important;
}

:is(
  .badge,
  .pill,
  .chip,
  .tag,
  [class$="-badge"],
  [class$="-pill"],
  [class$="-chip"],
  [class$="-tag"]
) {
  font-size: 13px !important;
}

/* Mobile-only layout overlay. */
@media (max-width: 760px) {
  :is(html, body, .app-shell, .admin-dashboard, .content, .panel, .team-dashboard) {
    max-width: 100%;
    min-width: 0;
  }

  :is(img, video, canvas, iframe) {
    max-width: 100%;
    height: auto;
  }

  :is(
    button,
    [role="button"],
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea,
    a.button,
    a.btn,
    .top-actions a,
    .header-actions a
  ) {
    min-height: 44px;
    min-width: 44px;
  }

  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    font-size: 16px;
  }

  :is(.topbar, .admin-topbar, .team-header, .employee-detail-heading, .panel-title) {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  :is(
    .top-actions,
    .header-actions,
    .history-controls,
    .admin-controls,
    .item-actions,
    .review-actions,
    .admin-actions
  ) {
    max-width: 100%;
    flex-wrap: wrap !important;
  }

  :is(
    .work-grid,
    .summary-grid,
    .admin-challenge-grid,
    .employee-dashboard-grid,
    .detail-stats,
    .form-row,
    .filter-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :is(.login-card, .entry-panel, .admin-controls, .panel, .team-dashboard) {
    width: 100%;
  }

  :is(.table-wrap, .table-container, .table-scroll, .sales-table-wrap) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  :is(.modal-bg, .modal-backdrop, .dialog-backdrop, [role="dialog"]) {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  :is(dialog, .modal, .dialog, .confirmation-card) {
    width: min(100%, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: auto;
  }
}

@media (max-width: 420px) {
  :is(.top-actions, .history-controls, .admin-actions) > :is(button, a) {
    flex: 1 1 100%;
  }
}

/* Selector-specific readability floors. Keep this final for cascade priority. */
.eyebrow {
  font-size: 14px !important;
}

/* Readability for conditional dashboards and approval states. */
:is(
  .upload-box em,
  .employee-money > span,
  .employee-goal,
  .employee-statuses span,
  .history-summary span,
  .race-stage-title > span,
  .approval-shortcut span
) {
  font-size: 14px !important;
  line-height: 1.55;
}

:is(.notification-button b, .achievement-badge > b) {
  font-size: 13px !important;
  line-height: 1.4;
}

:is(.upload-box em, .employee-money > span, .history-summary span) {
  color: #59677a !important;
}

.race-stage-title > span {
  color: #174ea6 !important;
}

.notification-button b {
  color: #fff !important;
  background: #c61f36 !important;
}

.status-deleted {
  color: #4b5563 !important;
}

:is(#jump-to-pending, .employee-approval-entry, .sale-status-group.pending > summary span) {
  color: #fff !important;
  background: #c2410c !important;
}

#jump-to-pending:hover {
  background: #9a3412 !important;
}

.achievement-badge.unlocked > b {
  color: #744b00 !important;
}

.achievement-badge.locked {
  opacity: .82;
}

.achievement-badge.locked > b {
  color: #4b5563 !important;
}