@import url("autopet.css");

/* Full-width, click-safe, container-aware Autopet Index. */
.fgia-index{position:relative!important;z-index:2147482990!important;isolation:isolate;container:autopet-index / inline-size;display:block!important;width:100%!important;max-width:100%!important;margin-inline:0!important;padding-inline:clamp(10px,2vw,28px)!important;overflow-x:clip!important;box-sizing:border-box!important;pointer-events:auto!important;transform:translateZ(0)}
.fgia-index.fgia-body-mounted{clear:both;width:100%!important;max-width:100vw!important;margin-inline:0!important;overflow-x:clip!important;box-sizing:border-box!important;pointer-events:auto!important}
body.fgia-index-page{overflow-x:clip!important}
.fgia-index:not(.fgia-body-mounted){width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}
body.fgia-index-page>.fgia-index.fgia-body-mounted{width:100%!important;max-width:none!important;margin:0!important}
.fgia-index,.fgia-index *{min-width:0}.fgia-index>.fgia-hero,.fgia-index>.fgia-stats-board,.fgia-index>.fgia-tools,.fgia-index>.fgia-count,.fgia-index>.fgia-group,.fgia-index>.fgia-empty,.fgia-grid,.fgia-card,.fgia-card-button,.fgia-panel{width:100%;max-width:100%;box-sizing:border-box}
.fgia-grid{grid-template-columns:1fr}.fgia-tools{grid-template-columns:1fr}.fgia-card-button{grid-template-columns:70px minmax(0,1fr) 28px;gap:9px}.fgia-image{width:70px;max-width:100%}.fgia-tag{grid-column:2;justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis}.fgia-plus{grid-column:3;grid-row:1/3}.fgia-card.is-open{grid-column:1/-1}.fgia-panel{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
@container autopet-index (min-width:720px){.fgia-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fgia-card-button{grid-template-columns:78px minmax(0,1fr) auto 28px}.fgia-image{width:78px}.fgia-tag{grid-column:3}.fgia-plus{grid-column:4;grid-row:1}}
@container autopet-index (min-width:1140px){.fgia-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.fgia-card-button{grid-template-columns:84px minmax(0,1fr) auto 30px}.fgia-image{width:84px}}
.fgia-hero,.fgia-stats-board,.fgia-tools,.fgia-count,.fgia-group,.fgia-grid,.fgia-card,.fgia-card-button,.fgia-panel,.fgia-tools label,.fgia-tools input,.fgia-tools select,.fgia-profile-link{position:relative;pointer-events:auto!important}.fgia-hero,.fgia-stats-board,.fgia-tools,.fgia-count,.fgia-group,.fgia-grid{z-index:10}.fgia-card{z-index:20}.fgia-card-button,.fgia-panel,.fgia-tools label,.fgia-tools input,.fgia-tools select,.fgia-profile-link{z-index:30;touch-action:manipulation}.fgia-card-button>*{pointer-events:none}.fgia-card-button:before{content:none!important;display:none!important;pointer-events:none!important}

.fgia-stats-board {
  margin: 16px 0;
  padding: clamp(14px, 2.5vw, 24px);
  border: 1px solid var(--line);
  border-radius: 15px;
  background: linear-gradient(145deg, #102a33, #091920);
}
.fgia-stats-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.fgia-stats-heading h2 { margin: 0; color: #fff; font-size: clamp(22px, 4vw, 30px); }
.fgia-stats-heading > span {
  padding: 7px 10px;
  border: 1px solid #386c68;
  border-radius: 99px;
  color: var(--aqua);
  font: 800 9px/1 ui-monospace, monospace;
  white-space: nowrap;
}
.fgia-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.fgia-stat-grid article {
  min-width: 0;
  padding: 14px;
  border: 1px solid #2d515a;
  border-radius: 10px;
  background: #081a21;
  box-shadow: inset 0 3px var(--aqua);
}
.fgia-stat-grid span { display: block; color: #82a7af; font: 800 9px/1.2 ui-monospace, monospace; text-transform: uppercase; }
.fgia-stat-grid strong { display: block; margin-top: 8px; color: #fff; font-size: clamp(15px, 2vw, 20px); overflow-wrap: anywhere; }
.fgia-stat-grid small { display: block; margin-top: 6px; color: #9bb5bc; font-size: 10px; line-height: 1.4; }
.fgia-system-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
.fgia-system-notes p { margin: 0; padding: 10px 12px; border: 1px solid #284850; border-radius: 8px; color: #aac1c7; font-size: 11px; line-height: 1.5; }
.fgia-system-notes b { color: var(--gold); }
.fgia-tools { grid-template-columns: 1fr; }
@media (max-width: 760px) { .fgia-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .fgia-stats-heading { align-items: flex-start; flex-direction: column; }
  .fgia-stat-grid, .fgia-system-notes { grid-template-columns: 1fr; }
}

.fgia-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: min(1200px, 100%);
  margin: 0 auto 12px;
  padding: 8px;
  border: 1px solid #2b4e58;
  border-radius: 11px;
  background: #091920;
  color: #f3fcff;
  font-family: Inter, system-ui, sans-serif;
}
.fgia-nav div { display: flex; gap: 7px; }
.fgia-nav a, .fgia-nav button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid #37645f;
  border-radius: 8px;
  background: #0d252c;
  color: #5df3df !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
}
.fgia-nav a:hover, .fgia-nav button:hover { border-color: #5df3df; background: #12353b; }
@media (max-width: 480px) {
  .fgia-nav { align-items: stretch; flex-direction: column; }
  .fgia-nav div { display: grid; grid-template-columns: 1fr 1fr; }
  .fgia-nav button { width: 100%; }
}