/* === Power Pages – Mild Red Validation Summary === */
:root {
  --pp-error-bg: #FDECEA;      /* mild red background */
  --pp-error-border: #F5C2C7;  /* soft red border */
  --pp-error-text: #842029;    /* readable dark red text */
  --pp-error-link: #6a1b1b;    /* link color within errors */
}

/* Common containers used by Basic/Advanced Forms and Bootstrap alerts */
.alert.alert-danger,
.validation-summary,
.validation-summary-errors,
.notification-error,
.entityform .notification-error {
  background-color: var(--pp-error-bg) !important;
  color: var(--pp-error-text) !important;
  border: 1px solid var(--pp-error-border) !important;
  border-radius: .375rem;             /* match Bootstrap radius */
  padding: .75rem 1rem !important;
  margin: 1rem 0;
}

/* Make bullet items and inline text inherit the readable color */
.validation-summary ul,
.validation-summary-errors ul,
.notification-error ul {
  margin: 0;
  padding-left: 1.25rem;
}

.validation-summary li,
.validation-summary-errors li,
.notification-error li {
  color: var(--pp-error-text) !important;
}

/* Links inside error summaries (e.g., anchor to fields) */
.validation-summary a,
.validation-summary-errors a,
.notification-error a,
.alert-danger a {
  color: var(--pp-error-link) !important;
  text-decoration: underline;
}

/* Optional: icon color if your theme injects icons */
.validation-summary i,
.validation-summary-errors i,
.notification-error i,
.alert-danger i {
  color: var(--pp-error-text) !important;
}

/* Optional: lighten inline field error badges but keep contrast */
.field-validation-error,
.text-danger {
  color: var(--pp-error-text) !important;
}

/* === Power Pages – Invalid Field Red Border === */
:root {
  --pp-error-border: #D9534F;   /* primary error border (Bootstrap-like) */
  --pp-error-focus: rgba(217, 83, 79, 0.28); /* soft red focus ring */
  --pp-error-text: #842029;     /* readable dark red text (for hints) */
}

/* Text inputs, selects, textareas (Bootstrap 4/5 + MVC + ARIA) */
.form-control.is-invalid,
.form-select.is-invalid,
input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error,
.has-error .form-control,              /* Bootstrap 3 */
[aria-invalid="true"].form-control,
[aria-invalid="true"].form-select,
[aria-invalid="true"]:is(input, select, textarea) {
  border-color: var(--pp-error-border) !important;
  box-shadow: none;                    /* reset theme shadows */
  background-clip: padding-box;
}

/* Focus state: visible but tasteful ring */
.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
input.input-validation-error:focus,
select.input-validation-error:focus,
textarea.input-validation-error:focus,
.has-error .form-control:focus,
[aria-invalid="true"]:is(input, select, textarea):focus {
  border-color: var(--pp-error-border) !important;
  box-shadow: 0 0 0 .2rem var(--pp-error-focus) !important;  /* BS4/5-like focus ring */
  outline: 0;
}

/* Checkboxes & radios (Bootstrap 4/5 + MVC + ARIA) */
.form-check-input.is-invalid,
input[type="checkbox"].input-validation-error,
input[type="radio"].input-validation-error,
[aria-invalid="true"].form-check-input,
[aria-invalid="true"][type="checkbox"],
[aria-invalid="true"][type="radio"] {
  border-color: var(--pp-error-border) !important;
  box-shadow: 0 0 0 .2rem var(--pp-error-focus) !important;
}

/* Lookup & Select2 (common in Power Pages entity forms) */
.select2-container--default .select2-selection--single.is-invalid,
.select2-container--default .select2-selection--multiple.is-invalid,
.select2-container--default .select2-selection--single[aria-invalid="true"],
.select2-container--default .select2-selection--multiple[aria-invalid="true"],
.lookup .form-control.is-invalid,
.lookup [aria-invalid="true"].form-control {
  border-color: var(--pp-error-border) !important;
  box-shadow: none;
}

/* If your theme applies state via parent .has-error (older templates) */
.has-error .select2-selection,
.has-error .select2-selection--single,
.has-error .select2-selection--multiple {
  border-color: var(--pp-error-border) !important;
}

/* Date/Time pickers that use a text input */
.datetimepicker-input.is-invalid,
.datetimepicker-input.input-validation-error,
.datetimepicker-input[aria-invalid="true"] {
  border-color: var(--pp-error-border) !important;
  box-shadow: none;
}

/* Inline field error text (optional – match your summary color) */
.field-validation-error,
.text-danger,
.invalid-feedback,
.help-block.field-validation-error {
  color: var(--pp-error-text) !important;
}

/* Optional: labels for invalid fields (helps users identify the field) */
label[for] + .form-control.is-invalid,
label[for] + [aria-invalid="true"] {
  /* no style, but you can emphasize the label if desired
  e.g., color: var(--pp-error-text); font-weight: 600; */
}

/* ===========================================
   POWER PAGES – WIZARD PROGRESS (DROP-IN)
   - Wizard-style boxes with arrows
   - Wraps long step text (no overflow)
   - Fits within page width; responsive
   - Preserves completed/active/incomplete states
   =========================================== */

/* ----- Container safety: never overflow page ----- */
[id$="_ProgressIndicator"] {
  max-width: 100%;
  overflow: hidden; /* safety net */
}

/* The <ol> row: make it flex and full width */
[id$="_ProgressIndicator"] .progress {
  display: flex;
  flex-wrap: nowrap;           /* keep one line on desktop */
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  margin: 20px 0;
  padding: 0;
  gap: 0;                      /* arrows rely on adjacency */
}

/* ----- Step boxes (base) ----- */
[id$="_ProgressIndicator"] .list-group-item {
  position: relative;
  flex: 1 1 0;                 /* share space evenly, allow shrink */
  min-width: 0;                /* critical: allow flex shrink to avoid overflow */
  padding: 12px 20px 12px 32px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-right: none;          /* adjacent boxes touch (arrow acts as separator) */
  color: #6c757d;
  font-weight: 500;
  text-align: center;
  border-radius: 0;            /* classic wizard look */
  line-height: 1.2;

  /* Enable clean wrapping */
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  text-overflow: clip;

  /* Center labels nicely */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Restore border on the last item */
[id$="_ProgressIndicator"] .list-group-item:last-child {
  border-right: 1px solid #dee2e6;
}

/* ----- Arrow pointers (wizard chevrons) ----- */
[id$="_ProgressIndicator"] .list-group-item::after {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  width: 0;
  height: 0;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  border-left: 20px solid #f8f9fa; /* matches background by default */
  z-index: 2;
  pointer-events: none;
}

[id$="_ProgressIndicator"] .list-group-item::before {
  content: "";
  position: absolute;
  top: 0;
  right: -21px;
  width: 0;
  height: 0;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  border-left: 20px solid #dee2e6; /* divider look */
  z-index: 1;
  pointer-events: none;
}

/* Remove arrow from last step */
[id$="_ProgressIndicator"] .list-group-item:last-child::after,
[id$="_ProgressIndicator"] .list-group-item:last-child::before {
  display: none;
}

/* Hide FA check icon (visual state is handled by color) */
[id$="_ProgressIndicator"] .fa-check { display: none; }

/* ===========================================
   STATES: Completed / Active / Incomplete
   =========================================== */

/* Completed steps */
[id$="_ProgressIndicator"] .list-group-item-success {
  background-color: #ff5100;  /* Bootstrap green-600 */
  color: #ffffff;
  border-color: #ff5100;
  opacity: 0.98;
}
[id$="_ProgressIndicator"] .list-group-item-success::after {
  border-left-color: #ff5100;
}
[id$="_ProgressIndicator"] .list-group-item-success::before {
  border-left-color: #ff5100;
}

/* Active step */
[id$="_ProgressIndicator"] .list-group-item.active {
  background-color: #ffcc00;  /* Bootstrap primary-600 */
  color: #6c757d;
  font-weight: 600;
  border-color: #ffcc00;
}
[id$="_ProgressIndicator"] .list-group-item.active::after {
  border-left-color: #ffcc00;
}
[id$="_ProgressIndicator"] .list-group-item.active::before {
  border-left-color: #ffcc00;
}

/* Incomplete steps */
[id$="_ProgressIndicator"] .list-group-item.incomplete {
  background-color: #f8f9fa;
  color: #6c757d;
  border-color: #dee2e6;
  opacity: 0.98;
}

/* ===========================================
   RESPONSIVE & LONG TEXT HANDLING
   =========================================== */

/* Tighter arrows and padding on medium screens */
@media (max-width: 992px) {
  [id$="_ProgressIndicator"] .list-group-item {
    padding-left: 20px;
    padding-right: 16px;
  }
  [id$="_ProgressIndicator"] .list-group-item::after {
    right: -16px;
    border-left-width: 16px;
    border-top-width: 22px;
    border-bottom-width: 22px;
  }
  [id$="_ProgressIndicator"] .list-group-item::before {
    right: -17px;
    border-left-width: 16px;
    border-top-width: 22px;
    border-bottom-width: 22px;
  }
}

/* Stack vertically on small screens for guaranteed fit */
@media (max-width: 768px) {
  [id$="_ProgressIndicator"] .progress {
    flex-direction: column;
  }

  [id$="_ProgressIndicator"] .list-group-item {
    width: 100%;
    border-right: 1px solid #dee2e6; /* restore right border */
    margin-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    text-align: left;
    justify-content: flex-start;
  }

  /* Remove arrows when stacked */
  [id$="_ProgressIndicator"] .list-group-item::after,
  [id$="_ProgressIndicator"] .list-group-item::before {
    display: none;
  }
}

/* ===========================================
   OPTIONAL: Clamp to 2 lines to avoid tall rows
   (Uncomment to enable)
   =========================================== */
/*
[id$="_ProgressIndicator"] .list-group-item > * {
  display: -webkit-box;
  -webkit-line-clamp: 2;         // clamp to 2 lines
  -webkit-box-orient: vertical;
  overflow: hidden;
}
*/

/* Tile 

/* Accessibility: reduce motion if user prefers */
@media (prefers-reduced-motion: reduce) {
  .tile-card {
    transition: none !important;
    transform: none !important;
  }
}

/* Tile card feel (kept from your base, slightly tuned) */
.tile-card {
  transition: transform .1s ease-in-out, box-shadow .1s ease-in-out;
  border-radius: .75rem;                  /* was .75rem */
  padding: .7rem .7rem;                    /* add inner padding for breathing room */
}
.tile-card:hover,
.tile-card:focus-within {
  transform: translateY(-2px);           /* a touch more lift */
  box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.10);
}

/* Tile body layout tweaks */
.tile-card .card-body {
  padding: 1rem 1rem;                    /* increase from default */
}

/* Icon container: bigger, same look */
.tile-icon {
  width: 4rem;                           /* was 3rem */
  height: 4rem;                          /* was 3rem */
  display: grid;
  place-items: center;
  background: #f4f7fb;
  border-radius: .9rem;                  /* keep consistent with card */
  flex: 0 0 auto;                        /* prevent stretching in flex rows */
}

/* Ensure images fill the icon box nicely */
.tile-icon img {
  display: block;
  width: 72%;                            /* balanced white-space inside the rounded box */
  height: auto;
}

/* Typography: larger headings and helper text inside tiles */
.tile-card h5 {
  font-size: 1.125rem;                   /* ~18px on mobile */
  line-height: 1.25;
  margin-bottom: .25rem;
}
.tile-card .text-muted {
  font-size: .975rem;                    /* a bit larger than default */
}

/* Overview card title tweak */
.card-header h6 {
  font-size: .95rem;
}
.card-body h4 {
  font-size: 1.4rem;                     /* larger org name */
  margin-bottom: .35rem;
}

/* Badges: slightly larger for readability */
.badge.rounded-pill {
  font-size: .85rem;
  padding: .45rem .7rem;
}

/* --- Responsive scaling --- */

/* ≥576px (sm): increase icon & type a bit */
@media (min-width: 576px) {
  .tile-icon {
    width: 4.5rem;
    height: 4.5rem;
  }
  .tile-icon img {
    width: 74%;
  }
  .tile-card h5 {
    font-size: 1.2rem;
  }
  .tile-card .text-muted {
    font-size: 1rem;
  }
  .card-body h4 {
    font-size: 1.55rem;
  }
}

/* ≥768px (md): add breathing room to cards in grid */
@media (min-width: 768px) {
  .tile-card .card-body {
    padding: 1.1rem 1.15rem;
  }
}

/* ≥992px (lg): bigger icon & headings on desktop */
@media (min-width: 992px) {
  .tile-icon {
    width: 5rem;
    height: 5rem;
  }
  .tile-icon img {
    width: 76%;
  }
  .tile-card h5 {
    font-size: 1.275rem;
  }
  .tile-card .text-muted {
    font-size: 1.05rem;
  }
  .card-body h4 {
    font-size: 1.7rem;
  }
}

/* Optional: ensure the icon and text align nicely vertically */
.tile-card .card-body.d-flex {
  gap: 1rem;                              /* space between icon and text */
}


/* Emd Tile