.digital-id-directory-page,
.digital-id-batch-page { max-width: 1240px; margin: 0 auto; padding-bottom: 48px; }
.digital-id-directory-heading { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin-bottom:18px; }
.digital-id-directory-heading h1,.digital-id-batch-toolbar h1 { margin:2px 0 6px; }
.digital-id-directory-heading p,.digital-id-batch-toolbar p { margin:0; max-width:760px; }
.digital-id-filter-card { margin-bottom:18px; }
.digital-id-filter-grid { display:grid; grid-template-columns:minmax(260px,1.6fr) repeat(3,minmax(145px,.65fr)) auto; gap:12px; align-items:end; }
.digital-id-filter-grid label { display:grid; gap:6px; }
.digital-id-filter-grid label > span { color:var(--brand-muted); font-size:.68rem; font-weight:850; text-transform:uppercase; letter-spacing:.04em; }
.digital-id-filter-grid input,.digital-id-filter-grid select { width:100%; min-height:42px; }
.digital-id-filter-actions,.digital-id-selection-actions { display:flex; gap:8px; flex-wrap:wrap; }
.digital-id-selection-toolbar { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:16px; }
.digital-id-selection-toolbar > div:first-child { display:grid; gap:3px; }
.digital-id-selection-toolbar span { color:var(--brand-muted); font-size:.78rem; }
.digital-id-student-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.digital-id-student-card { position:relative; display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; align-items:center; padding:12px; border:1px solid var(--brand-border-soft); border-radius:14px; background:#fff; cursor:pointer; box-shadow:0 3px 12px rgba(42,26,35,.05); }
.digital-id-student-card:hover { border-color:#c9a99c; box-shadow:0 6px 16px rgba(42,26,35,.08); }
.digital-id-student-card > input { position:absolute; opacity:0; pointer-events:none; }
.digital-id-student-card:has(input:checked) { border-color:var(--brand-coral); box-shadow:0 0 0 2px rgba(200,91,75,.11); }
.digital-id-student-check { position:absolute; top:8px; right:8px; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--brand-border); background:#fff; color:transparent; font-size:.72rem; font-weight:900; }
.digital-id-student-card:has(input:checked) .digital-id-student-check { background:var(--brand-coral); border-color:var(--brand-coral); color:#fff; }
.digital-id-student-photo { width:64px; height:78px; border-radius:10px; overflow:hidden; background:#f2ece8; display:grid; place-items:center; color:var(--brand-plum-dark); font-size:1.6rem; font-weight:900; }
.digital-id-student-photo img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.digital-id-student-copy { min-width:0; display:grid; gap:3px; }
.digital-id-student-copy strong { color:var(--brand-plum-dark); overflow-wrap:anywhere; }
.digital-id-student-copy small { color:var(--brand-muted); line-height:1.3; }
.digital-id-batch-toolbar { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; margin-bottom:20px; }
.portrait-id-sheet { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:start; }
.portrait-id-card { position:relative; overflow:hidden; aspect-ratio:2.125 / 3.375; padding:14px; border:1px solid #d9dde5; border-radius:18px; background:linear-gradient(180deg,#fff 0 62%,#f7f9fc 100%); color:#172033; box-shadow:0 8px 24px rgba(15,23,42,.10); display:flex; flex-direction:column; }
.portrait-id-header { display:flex; align-items:center; gap:8px; min-height:36px; }
.portrait-id-logo { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto; background:#1d4ed8; color:#fff; font-size:.78rem; font-weight:900; }
.portrait-id-school { min-width:0; display:grid; line-height:1.1; }
.portrait-id-school strong { font-size:.68rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.portrait-id-school small { margin-top:3px; color:#64748b; font-size:.48rem; font-weight:850; letter-spacing:.06em; }
.portrait-id-photo { width:78%; aspect-ratio:4/5; margin:10px auto 8px; overflow:hidden; border-radius:12px; background:#e7ebf1; display:grid; place-items:center; color:#334155; font-size:2.8rem; font-weight:900; box-shadow:0 4px 12px rgba(15,23,42,.12); }
.portrait-id-photo img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.portrait-id-name { text-align:center; font-size:.88rem; font-weight:900; line-height:1.05; min-height:1.9em; display:grid; place-items:center; }
.portrait-id-meta { display:grid; grid-template-columns:.7fr 1.3fr; gap:8px; margin-top:8px; padding:7px 0; border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb; }
.portrait-id-meta span { display:grid; gap:1px; min-width:0; }
.portrait-id-meta small { color:#64748b; font-size:.46rem; font-weight:850; letter-spacing:.05em; }
.portrait-id-meta strong { font-size:.68rem; overflow-wrap:anywhere; }
.portrait-id-route { margin-top:6px; min-height:1.8em; text-align:center; color:#475569; font-size:.54rem; line-height:1.25; }
.portrait-id-barcode { height:26px; margin:7px 7px 2px; background:repeating-linear-gradient(90deg,#111827 0 1px,transparent 1px 3px,#111827 3px 5px,transparent 5px 7px,#111827 7px 8px,transparent 8px 11px); }
.portrait-id-number { text-align:center; font-size:.52rem; font-weight:800; letter-spacing:.06em; }
.portrait-id-card footer { margin-top:auto; padding-top:5px; display:flex; justify-content:space-between; align-items:center; color:#64748b; font-size:.48rem; }
.portrait-id-card footer strong { color:#9a3412; letter-spacing:.08em; }
@media (max-width:1100px) { .digital-id-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .digital-id-filter-actions { grid-column:1/-1; } .digital-id-student-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .portrait-id-sheet { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px) { .digital-id-directory-heading,.digital-id-selection-toolbar,.digital-id-batch-toolbar { flex-direction:column; align-items:stretch; } .digital-id-filter-grid,.digital-id-student-grid,.portrait-id-sheet { grid-template-columns:1fr; } .digital-id-selection-actions .button-link { flex:1 1 auto; justify-content:center; } }
@media print {
  @page { size: letter portrait; margin: .42in; }
  body { background:#fff !important; }
  .demo-environment-banner,.app-accent-line,.district-header,.app-drawer,.drawer-backdrop,.no-print { display:none !important; }
  .digital-id-batch-page { max-width:none; margin:0; padding:0; }
  .portrait-id-sheet { display:grid; grid-template-columns:repeat(3,2.125in); gap:.16in .18in; justify-content:center; }
  .portrait-id-card { width:2.125in; height:3.375in; aspect-ratio:auto; box-sizing:border-box; padding:.12in; border-radius:.12in; box-shadow:none; break-inside:avoid; page-break-inside:avoid; }
}


/* UNIFIED PORTRAIT ID */

.portrait-id-school {
  flex: 1;
}

.portrait-id-school strong {
  display: block;
  font-size: .72rem;
  line-height: 1.15;
}

.portrait-id-name {
  margin-top: 2px;
  min-height: auto;
  font-size: .94rem;
}

.portrait-id-school-year {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}

.portrait-id-school-year small {
  color: #64748b;
  font-size: .48rem;
  font-weight: 850;
  letter-spacing: .07em;
}

.portrait-id-school-year strong {
  color: #172033;
  font-size: .82rem;
  font-weight: 900;
}

.portrait-id-barcode {
  margin-top: 5px;
}

.portrait-id-footer {
  display: flex;
  justify-content: flex-end !important;
}

.portrait-id-footer strong {
  margin-left: auto;
}


/* PORTRAIT ID FINAL REFINEMENTS */

.portrait-id-photo {
  width: 68% !important;
  max-width: 205px;
  margin-left: auto;
  margin-right: auto;
}

.portrait-id-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  justify-items: center;
  gap: 24px;
  width: 100%;
  margin-top: 10px;
  text-align: center;
}

.portrait-id-meta > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  text-align: center;
}

.portrait-id-meta small {
  display: block;
  margin-bottom: 4px;
  font-size: .50rem;
  font-weight: 850;
  letter-spacing: .09em;
  color: #64748b;
}

.portrait-id-meta strong {
  display: block;
  font-size: .76rem;
  line-height: 1.2;
  color: #172033;
  text-align: center;
}

.portrait-id-school-year {
  margin-top: 13px;
  padding-top: 10px;
}

.portrait-id-school-year small {
  font-size: .48rem;
}

.portrait-id-school-year strong {
  font-size: 1.12rem !important;
  line-height: 1;
  letter-spacing: .025em;
}

.portrait-id-barcode {
  height: 54px !important;
  margin-top: 9px;
  background-size: auto 100%;
}

.portrait-id-number {
  margin-top: 4px;
  text-align: center;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .08em;
}



/* ID BATCH MESSAGE + FINAL YEAR/BARCODE CLEANUP */

.digital-id-selection-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 13px 16px;
  border: 1px solid #f0b7a3;
  border-radius: 12px;
  background: #fff7f3;
  color: #9f351d;
}

.digital-id-selection-warning strong {
  font-weight: 850;
}

.digital-id-selection-warning span {
  color: #7c3a2b;
}

.portrait-id-school-year {
  display: block !important;
  border-top: 0 !important;
  margin-top: 13px !important;
  padding-top: 0 !important;
  text-align: center !important;
}

.portrait-id-school-year strong {
  display: block;
  font-size: 1.28rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .035em;
  color: #172033;
}

.portrait-id-barcode {
  height: 58px !important;
  margin-top: 10px !important;
}



/* LOGO + SCHOOL + NAME + GRADE ID REFINEMENT */

.portrait-id-header-stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.portrait-id-logo {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  font-size: .82rem !important;
}

.portrait-id-school-stacked {
  display: block;
  width: 100%;
  text-align: left;
}

.portrait-id-school-stacked strong {
  display: block;
  font-size: 1rem !important;
  line-height: 1.15;
  font-weight: 900;
  color: #172033;
}

.portrait-id-photo {
  width: 62% !important;
  max-width: 170px !important;
  margin: 14px auto 0 !important;
}

.portrait-id-name-block {
  margin-top: 10px;
  text-align: center;
}

.portrait-id-name {
  margin-top: 0 !important;
  min-height: auto !important;
  font-size: 1rem !important;
}

.portrait-id-grade-line {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

.portrait-id-grade-line small {
  color: #64748b;
  font-size: .56rem;
  font-weight: 850;
  letter-spacing: .08em;
}

.portrait-id-grade-line strong {
  color: #172033;
  font-size: .86rem;
  font-weight: 900;
  line-height: 1;
}

.portrait-id-meta,
.portrait-id-route,
.portrait-id-school-year,
.portrait-id-number {
  display: none !important;
}

.portrait-id-year-only {
  margin-top: 16px;
  text-align: center;
}

.portrait-id-year-only strong {
  display: block;
  color: #172033;
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .03em;
}

.portrait-id-barcode {
  height: 58px !important;
  margin-top: 10px !important;
}

.portrait-id-footer {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end !important;
}

.portrait-id-footer strong {
  margin-left: auto;
}