/* Shared "note/alert callout" treatment: light-tint background + 4px colored left border + 6px border-radius,
   in the four colors used throughout the app (info/blue, danger/red, warning/amber, success/green). Every one
   of these ~52 rules across ~36 files independently defined the exact same background/border-left/border-radius/
   text-color combination for their color family; consolidated here so future callouts join one of these four
   rules instead of re-declaring the same four values under a new page-specific class name.

   font-size (flat 13px) and line-height (flat 1.6) are also included here -- the vast majority of instances
   already used these exact values; the handful that didn't (12px/14px font-size, or no explicit line-height)
   were intentionally normalized too for consistency (a deliberate design choice, not just a refactor).

   Deliberately NOT included here (left in each page's own stylesheet because the values genuinely differ per
   instance): padding, margin, max-width, and border: none (present in most but not universally, harmless to
   repeat locally since a <div> has no border by default anyway). */

/* vertical-align: middle aligns an image to text metrics (x-height), not the full line box, so with this page's
   generous line-height it can still read as sitting low next to the text. Flexing the whole .alert would be
   simpler, but layouts/_errors.rhtml's alert-dismissible variant has a .close button that relies on float: right
   for its position -- flex would break that. Instead wrap just the icon + its adjacent text (redError12x12.gif/
   greenInfo12x12.png in layouts/_errors.rhtml and Alternate Picks) so only that piece gets true flex centering.

   align-items is flex-start, not center: the icon and the (possibly multi-line, e.g. the "Invalid user ID or
   password..." flash message) text are separate flex items in the same row, so center would center the icon
   against the full height of a wrapped multi-line message -- it ends up stranded in the vertical middle of the
   paragraph instead of sitting next to the first line. flex-start anchors it to the top, alongside line one,
   for both single- and multi-line messages. */
.alertIconText {
  display: flex;
  align-items: flex-start;
  gap: 3px;
}

/* inline-flex sized to its content's natural (unwrapped) width and overflowed the alert box on narrow
   viewports instead of wrapping like plain inline text used to. display: flex (block-level, fills the alert's
   width) plus min-width: 0 on the text span lets the message wrap normally again while keeping the icon fixed
   size. */
.alertIconText img {
  flex-shrink: 0;
  margin-top: 0.35em;
}

.alertIconText > span {
  min-width: 0;
}

.modernAdminSegmentsPage .alert-info,
.modernAutoSubPage .autoSubNote,
.modernClaimPrizePage .claimPrizeNote,
.modernClubhousePage .smackTip,
.modernDuplicateUsersReportPage .alert-success,
.modernEmailAddressesReportPage .alert-info,
.modernCommishHomePage .alert-success,
.modernLeaguePaymentPage .leaguePaymentBreakdownNote,
.modernCommishUsersPage .alert-info,
.modernGolfersPickedPage .alert.alert-info,
.modernLeagueSettingsPage .leagueSettingsNote,
.modernScorecardPage .scorecardEmptyState,
.modernSignupPage .signupCompleteNote,
.modernPrivateSignupPage .signupCompleteNote,
.modernPrivateSignupPage .privateSignupNote,
.modernStandingsPage .standingsHallOfFameInfo,
.modernWeeklyLineupAllTournamentsPage .alert.alert-info,
.modernWeeklyLineupPage .alert.alert-info,
.modernWhatsNewPage .whatsNewLegend {
  background: #eaf2fc;
  border-left: 4px solid var(--ptfg-info);
  border-radius: 6px;
  color: var(--ptfg-info-text);
  font-size: 13px;
  line-height: 1.6;
}

.modernAdminGolferFormPage #errorExplanation,
.modernAdminSeasonFormPage #errorExplanation,
.modernAdminTournamentFormPage #errorExplanation,
.modernAlternatePicksPage .alternatePicksMsg .alert.alert-danger,
.modernClaimPrizePage .claimPrizeDisabledWarning,
.modernEntryFeesPage .entryFeesWarning,
.modernCommishHomePage .alert-danger,
.modernLeaguePaymentPage .leaguePaymentImportantNote,
.modernCommishTeamDeletePage .teamDeleteWarning,
.modernCommishTeamFormPage #errorExplanation,
.modernCommishUserFormPage #errorExplanation,
.modernCommishUsersPage .alert-danger,
.modernGolferEarningsPage .alert.alert-danger.chartDataUnavailable,
.modernGolfersPickedPage .alert.alert-danger.chartDataUnavailable,
.modernProjectedResultsPage .alert.alert-danger.ptfgAlert,
.modernWebsiteEmailsPage .websiteEmailsWarning {
  background: var(--ptfg-bg-red-tint);
  border-left: 4px solid var(--ptfg-red);
  border-radius: 6px;
  color: var(--ptfg-red-text);
  font-size: 13px;
  line-height: 1.6;
}

.modernAutoSubPage .alert.alert-warning,
.modernChangePasswordPage .alert-warning,
.modernClaimPrizePage .claimPrizeAddressCallout,
.modernCommissionersMessagePage .commissionersMessageWarningNote,
.modernEmailAddressesReportPage .emailAddressesUnsubscribedNote,
.modernLeagueEmailPage .leagueEmailUnsubscribedNote,
.modernPrizesOtherPage .alert-warning,
.modernPrizesSeasonPage .alert-warning,
.modernSignupAttemptsPage .signupAttemptsNote,
.modernCommishTeamsPage .alert-warning,
.modernCommishUsersPage .alert-warning,
.modernContactUsPage .alert-warning,
.modernGolfersUsedComparePage .alert-warning,
.modernHomePage .homeNoteCallout,
.modernUserProfilePage .card-footer,
.modernStandingsPage .alert.alert-warning,
.modernWeeklyLineupPage .alert.alert-warning {
  background: #fff8e8;
  border-left: 4px solid #e8a83c;
  border-radius: 6px;
  color: #6b4d10;
  font-size: 13px;
  line-height: 1.6;
}

.modernAlternatePicksPage .alternatePicksMsg .alert.alert-success,
.modernGolfersPickedPage .alert.alert-success,
.modernWeeklyLineupPage .alert.alert-success {
  background: var(--ptfg-bg-green-tint);
  border-left: 4px solid var(--ptfg-green);
  border-radius: 6px;
  color: #1a4d24;
  font-size: 13px;
  line-height: 1.6;
}