/*
 * Text visibility hardening.
 *
 * This file is intentionally loaded last by both application shells. Keep
 * overrides scoped to affected screens so compact layouts elsewhere retain
 * their original density.
 */

/* Accessible action contrast on light backgrounds. */
.sp-feature.no {
  color: #475569 !important;
}

.sp-btn.success,
.sfm-btn.whatsapp,
.pv-btn.approve,
.ho-action.whatsapp,
.pp-btn.whatsapp {
  border-color: #047857 !important;
  background: #047857 !important;
  color: #fff !important;
}

/* Small information pills must retain 4.5:1 contrast at normal text sizes. */
.attendance-page .student-pill,
.inactive-page .name-pill,
.student-details-page .student-name-pill {
  color: #4338ca !important;
}

.attendance-page .admission-pill,
.inactive-page .admission-pill,
.fee-history-page .year-pill,
.leaderboard-page .hours-pill,
.student-details-page .student-admission-pill,
.today-fee-page .admission-pill {
  color: #0e7490 !important;
}

.attendance-page .seat-pill,
.inactive-page .date-pill {
  color: #be185d !important;
}

.attendance-page .time-pill,
.inactive-page .timing-pill,
.fee-history-page .date-pill {
  color: #c2410c !important;
}

.fee-history-page .amount-pill,
.inactive-page .fee-pill,
.leaderboard-page .days-pill,
.student-details-page .student-phone-pill {
  color: #166534 !important;
}

/* Custom cards were not included in the shared management dark theme. */
body.dark-mode .data-card,
body.dark-mode .support-card,
body.dark-mode .privacy-card,
body.dark-mode .receipt {
  border-color: #334155 !important;
  background: #111827 !important;
  color: #f8fafc !important;
}

body.dark-mode .data-card .data-muted,
body.dark-mode .support-card :is(.meta, .muted),
body.dark-mode .privacy-card :is(p, li),
body.dark-mode .receipt p,
body.dark-mode .receipt .item small {
  color: #cbd5e1 !important;
}

body.dark-mode .data-card :is(input, select, textarea),
body.dark-mode .support-card :is(input, select, textarea),
body.dark-mode .privacy-card :is(input, textarea) {
  border-color: #475569 !important;
  background: #0f172a !important;
  color: #f8fafc !important;
}

body.dark-mode .support-card .ticket {
  border-color: #334155 !important;
}

body.dark-mode .support-card .message {
  background: #0f172a !important;
  color: #e2e8f0 !important;
}

body.dark-mode .support-card .message.platform {
  background: #1e1b4b !important;
}

body.dark-mode .receipt .receipt-head,
body.dark-mode .receipt .receipt-foot {
  border-color: #475569 !important;
}

body.dark-mode .receipt .item {
  background: #0f172a !important;
}

body.dark-mode .receipt .receipt-no b {
  color: #a5b4fc !important;
}

/* Names and contact details must remain fully readable, including on phones. */
.invite-name,
.staff-name,
.staff-contact {
  max-width: none !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
}

/* Operational text in the Social Links editor was below a usable size. */
.sl-icon-choice span,
.sl-preview-copy small,
.sl-status {
  font-size: 11px !important;
}

.sl-preview-copy span,
.sl-link-url,
.sl-list-count {
  font-size: 12px !important;
}

.sl-preview-copy span,
.sl-link-url {
  max-width: 100% !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
}

/* Marketing product mockups should still be legible, even when decorative. */
.lh-mini-head span,
.lh-activity-row strong,
.lh-activity-row small,
.lh-activity-row em,
.lh-table-bar,
.lh-table-pill,
.lh-seat,
.lh-finance-summary span,
.lh-role-row small,
.lh-note-row small,
.lh-real-live,
.lh-real-module-badge,
.lh-sim-stat span,
.lh-sim-feed-avatar,
.lh-sim-feed-row small,
.lh-sim-feed-row em,
.lh-billing-save,
.lh-solver-node-copy small,
.lh-solver-core-eyebrow,
.lh-solver-core-status,
.lh-solver-core-status i,
.lh-solver-core-meta,
.lh-solver-legend {
  font-size: 10px !important;
}

@media (max-width: 768px) {
  /* Attendance: preserve complete status words and readable calendar labels. */
  body.student-role .student-attendance-page .sp-eyebrow,
  body.student-role .student-attendance-page .sp-stat-label,
  body.student-role .student-attendance-page .sp-stat-note,
  body.student-role .student-attendance-page .sp-calendar-head,
  body.student-role .student-attendance-page .sp-day .state,
  body.student-role .student-attendance-page .sp-feature,
  body.student-role .student-attendance-page .sp-table td:nth-child(n + 2)::before {
    font-size: 11px !important;
  }

  body.student-role .student-attendance-page .sp-hero p,
  body.student-role .student-attendance-page .sp-hero-btn,
  body.student-role .student-attendance-page .sp-section-title p,
  body.student-role .student-attendance-page .sp-table td {
    font-size: 12px !important;
  }

  body.student-role .student-attendance-page .sp-day .state::after {
    content: none !important;
  }

  /* Fees and payment proof: financial labels and actions are never microtext. */
  body.student-role .student-fees-page :is(
    .sp-eyebrow,
    .sp-chip,
    .sp-stat-label,
    .sp-stat-note,
    .sp-kv small
  ),
  body.student-role .pp-page :is(
    .pp-amount small,
    .pp-status
  ) {
    font-size: 11px !important;
  }

  body.student-role .student-fees-page :is(
    .sp-hero p,
    .sp-hero-btn,
    .sp-section-title p,
    .sp-btn,
    .sp-note,
    .sp-table td,
    .sp-table td:nth-child(7) a
  ),
  body.student-role .pp-page :is(
    .pp-back,
    .pp-hero p,
    .pp-title p,
    .pp-btn,
    .pp-note,
    .pp-proof p
  ) {
    font-size: 12px !important;
  }

  /* Student identity card. */
  body.student-role .student-id-portal :is(
    .sid-page-head small,
    .sid-security,
    .sid-official,
    .sid-library-name,
    .sid-label,
    .sid-card-footer
  ) {
    font-size: 10px !important;
  }

  body.student-role .student-id-portal :is(
    .sid-page-head p,
    .sid-identity p,
    .sid-sub,
    .sid-detail strong,
    .sid-action p,
    .sid-login-summary,
    .sid-btn
  ) {
    font-size: 12px !important;
  }

  /* Seat map controls, stats and feature labels. */
  body.student-role .ssm-page :is(
    .ssm-eyebrow,
    .ssm-live,
    .ssm-time-card label,
    .ssm-time-card small,
    .ssm-stats span,
    .ssm-stats small,
    .ssm-hall-head p,
    .ssm-live-badge,
    .ssm-front,
    .ssm-seat > small,
    .ssm-features em,
    .ssm-field label,
    .ssm-section-label
  ) {
    font-size: 10px !important;
  }

  body.student-role .ssm-page :is(
    .ssm-page-head p,
    .ssm-head-actions .ssm-btn,
    .ssm-command p,
    .ssm-seat > b,
    .ssm-status-grid button,
    .ssm-mini-list button
  ) {
    font-size: 12px !important;
  }

  /* Leaderboard cards. */
  body.student-role .leaderboard-page :is(
    .leaderboard-badge,
    .hours-pill,
    .days-pill,
    .progress-text
  ) {
    font-size: 11px !important;
  }

  body.student-role .leaderboard-page :is(
    .leaderboard-header p,
    td
  ) {
    font-size: 12px !important;
  }

  /* Games workspace and controls. */
  body.student-role .sg-page :is(
    .sg-eyebrow,
    .sg-hero-badges span,
    .sg-stat-cluster small,
    .sg-live-pill,
    .sg-mode-list small,
    .sg-workspace-bar span,
    .sg-player-strip small,
    .sg-status-box span,
    .sg-status-box small,
    .ludo-dice small
  ) {
    font-size: 10px !important;
  }

  body.student-role .sg-page :is(
    .sg-back,
    .sg-hero p,
    .sg-library-note,
    .sg-game-card > p,
    .sg-resume,
    .sg-player-strip b,
    .sg-control-buttons button
  ) {
    font-size: 12px !important;
  }
}

/* Registration progress keeps both its number and label on narrow screens. */
@media (max-width: 680px) {
  .ow-progress {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  .ow-progress-step {
    min-height: 52px;
    flex-direction: column !important;
    justify-content: flex-start;
    gap: 5px !important;
    font-size: 11px !important;
    line-height: 1.2;
    text-align: center;
  }

  .ow-progress-step:not(:last-child)::after {
    position: absolute;
    top: 14px;
    left: calc(50% + 20px);
    width: calc(100% - 40px);
    height: 2px;
    margin: 0 !important;
  }

  .ow-progress-step span {
    font-size: 11px !important;
  }

  /* Shared public navigation subtitles remain visible on every phone width. */
  .lh-brand-copy small,
  .saas-site-brand-copy small {
    display: block !important;
    max-width: min(34vw, 160px);
    font-size: 11px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }
}

@media (max-width: 390px) {
  .lh-brand-copy small,
  .saas-site-brand-copy small {
    display: block !important;
    max-width: 116px;
    font-size: 10px !important;
  }
}

@media (max-width: 360px) {
  body.student-role .student-app-dock :is(a, button) {
    font-size: 11px !important;
  }
}

/* Printed receipts must stay white regardless of the saved UI theme. */
@media print {
  body.dark-mode .receipt {
    border-color: #dbe3ee !important;
    background: #fff !important;
    color: #0f172a !important;
  }

  body.dark-mode .receipt p,
  body.dark-mode .receipt .item small {
    color: #475569 !important;
  }

  body.dark-mode .receipt .item {
    background: #f8fafc !important;
  }
}