/* fallback.css - Structural fallback messaging for D7460N UI */

/* Fallback when <ul> for table/list items is not populated */
main article ul:empty::before {
  content: "No items available.";
  display: block;
  padding-block: 1rem;
  text-align: center;
  font-style: italic;
  color: gray;
}

/* Fallback when <h1> is missing or empty */
main article:has(h1:empty)::before {
  content: "[ Title failed to load ]";
  display: block;
  padding-block: 0.5rem;
  text-align: center;
  color: darkred;
  font-weight: bold;
}

/* Fallback when <p> intro is missing or empty */
main article:has(p:empty)::after {
  content: "[ Introduction missing ]";
  display: block;
  padding-block: 0.5rem;
  text-align: center;
  color: darkorange;
  font-style: italic;
}

/* Fallback when <form> has no inputs or fieldset (e.g., fetch failure) */
aside form:empty::before {
  content: "Form could not be loaded.";
  display: block;
  padding: 1rem;
  text-align: center;
  color: crimson;
  font-weight: bold;
}

/* Fallback for nav if no inputs/labels were injected */
nav details section:empty::before {
  content: "Navigation failed to load.";
  display: block;
  padding: 1rem;
  text-align: center;
  color: dimgray;
  font-style: italic;
}

/* Banner failure fallback */
app-banner p:empty::after {
  content: "[ Status unavailable ]";
  display: block;
  text-align: center;
  color: gray;
  font-size: smaller;
}

/* Logo or user info missing */
header:has(app-logo:empty)::before {
  content: "[ Logo not loaded ]";
  display: block;
  text-align: center;
  color: gray;
  font-style: italic;
}

header:has(app-user:empty)::after {
  content: "[ User not recognized ]";
  display: block;
  text-align: center;
  color: gray;
  font-style: italic;
}