/* 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, .workspace, .content, .panel, .staff-panel) {
    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
  ) {
    min-height: 44px;
    min-width: 44px;
  }

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

  :is(header, .title-row, .panel-head, .employee-history-heading, .leave-score-head) {
    max-width: 100%;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  :is(
    .approval-actions,
    .modal-actions,
    .report-filters,
    .my-leave-filters,
    .data-error,
    .selected-file
  ) {
    max-width: 100%;
    flex-wrap: wrap !important;
  }

  :is(
    .form-row,
    .employee-meta,
    .employee-balance-grid,
    .report-stats,
    .settings-overview,
    .leave-score-kpis,
    .leave-owner-kpis,
    .leave-frequency-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :is(
    .leave-score-table-wrap,
    .full-calendar,
    .calendar,
    .report-table,
    .staff-panel,
    .approval-list,
    .employee-history,
    .table-wrap,
    .table-container
  ) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  :is(.modal-bg, .confirm-layer, .modal-backdrop) {
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
  }

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

@media (max-width: 420px) {
  :is(.modal-actions, .approval-actions) > button {
    flex: 1 1 100%;
  }
}

/* Selector-specific readability floors. Keep this final for cascade priority. */
:root {
  --muted: #5f6b7a;
}

:is(
  .company strong,
  .mini p,
  .legend,
  .ios-install-guide,
  .notification-list em,
  .medical-notice p,
  .avatar,
  .staff-head,
  .employee-active,
  .employee-inactive,
  .employee-meta > span,
  .employee-balance-card span,
  .employee-history-heading span,
  .approval-head,
  .month-leaves .panel-head > span,
  .report-stats span,
  .report-head,
  .settings-overview p,
  .holiday-panel-count,
  .holiday-table-head,
  .holiday-footnote,
  .leave-score-head label span,
  .leave-score-kpis span,
  .leave-score-note,
  .leave-owner-heading p,
  .leave-owner-kpis span,
  .leave-decision,
  .leave-frequency-head p
) {
  font-size: 14px !important;
  line-height: 1.55;
}

:is(
  .sidebar nav button b,
  .bell b,
  .pending,
  .approved,
  .rejected,
  .full-calendar .week .holiday-label,
  .approval-tabs button b,
  .waiting-age,
  .month-holiday-heading span
) {
  font-size: 13px !important;
  line-height: 1.4;
}

.pending {
  color: #8a4b00 !important;
}

.approved {
  color: #116b43 !important;
}

.rejected {
  color: #8f2f3b !important;
}

.bell b {
  color: #fff !important;
  background: #c81e3a !important;
}

.week .outside {
  color: #667085 !important;
}

.leave-frequency-rank {
  color: #fff !important;
  background: #526b89 !important;
}

.leave-frequency-card.rank-1 .leave-frequency-rank {
  color: #573800 !important;
  background: linear-gradient(145deg, #ffd95a, #e3a914) !important;
}

.leave-frequency-card.rank-2 .leave-frequency-rank {
  color: #334155 !important;
}

.leave-frequency-card.rank-3 .leave-frequency-rank {
  color: #fff !important;
  background: linear-gradient(145deg, #9a5c36, #713b22) !important;
}

.employee-active {
  color: #116b43 !important;
}

:is(
  .brand small,
  .title-row p,
  .staff-head,
  .approval-head,
  .report-head,
  .holiday-table-head,
  .leave-score-head label span,
  .leave-score-kpis span,
  .leave-score-note,
  .leave-score-table th,
  .leave-score-table small,
  .leave-score-loading,
  .leave-owner-heading p,
  .leave-owner-kpis span,
  .leave-empty,
  .leave-frequency-head p,
  .leave-frequency-head small,
  .leave-frequency-card small,
  .full-calendar .week .sunday
) {
  color: #5f6b7a !important;
}

.holiday-row.inactive {
  opacity: 1 !important;
  background: #f7f7f7 !important;
}