/* Puppy Portal - frontend */
.pp-wrap{max-width:1100px;margin:0 auto;display:grid;gap:16px}
.pp-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.pp-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 16px}
.pp-table{width:100%;border-collapse:collapse}
.pp-table th,.pp-table td{padding:10px;border-bottom:1px solid rgba(0,0,0,.08);vertical-align:top}
.pp-table th{text-align:left}
.pp-btn{display:inline-block;padding:8px 12px;border-radius:10px;border:1px solid rgba(0,0,0,.12);background:#f7f7f7;cursor:pointer}
.pp-btn-link{display:inline-block;padding:6px 10px;border-radius:10px;border:1px solid rgba(0,0,0,.12);text-decoration:none;background:#f7f7f7}
.pp-help{margin:6px 0 10px 0;color:#555}
.pp-litters{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px 14px;margin:10px 0 12px 0}
.pp-check{display:flex;gap:10px;align-items:flex-start}
.pp-check input{margin-top:3px}
.pp-check-label small{color:#666}
.pp-swatch{display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid rgba(0,0,0,.2);margin-left:6px;vertical-align:middle}
.pp-chart{width:100%;height:auto;margin:8px 0 8px 0;color:#111}

/* Mobile: show puppy table as cards */
@media (max-width: 768px){
  .pp-table-puppies,
  .pp-table-puppies thead,
  .pp-table-puppies tbody,
  .pp-table-puppies th,
  .pp-table-puppies td,
  .pp-table-puppies tr{
    display:block;
  }
  .pp-table-puppies thead{display:none;}
  .pp-table-puppies tr{
    border:1px solid rgba(0,0,0,.12);
    border-radius:14px;
    padding:12px;
    margin:0 0 12px 0;
    background:#fff;
  }
  .pp-table-puppies td{
    border:0;
    padding:6px 0;
  }
  .pp-table-puppies td::before{
    content:attr(data-label);
    font-weight:600;
    display:inline-block;
    min-width:110px;
    margin-right:8px;
    color:#111;
  }
  .pp-table-puppies td[data-label=""]::before{content:"";min-width:0;margin-right:0;}
  .pp-table-puppies .pp-btn-link{padding:10px 14px;}
}

.pp-color-name{
  display:inline-block;
  margin-right:6px;
  font-weight:600;
}
.pp-card h2 .pp-swatch{
  vertical-align:middle;
  margin-right:8px;
}
.pp-card h2 .pp-color-name{
  vertical-align:middle;
  margin-right:8px;
}
.pp-table-puppies .pp-swatch{
  margin-right:6px;
}


.pp-two-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}