/* app/styles/pages.css
   Page-specific layout. Components live in components.css. */

.stat-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--sp-5); }
@media (max-width: 767px) { .stat-grid { grid-template-columns: minmax(0, 1fr); } }

.due-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-3) 0; border: 0; border-top: 1px solid var(--border); background: transparent; color: inherit; text-align: left; text-decoration: none; }
.due-row:first-child { border-top: 0; }
.due-row:hover { text-decoration: none; }
.due-row:hover .row-title { text-decoration: underline; }
.due-row .meta { flex: 1; min-width: 0; }
.section-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); margin: var(--sp-4) 0 var(--sp-1); }
.section-label:first-child { margin-top: 0; }

.quick-actions { display: grid; gap: var(--sp-2); }
.quick-actions .btn { justify-content: flex-start; }

.hw-card-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.submission-list { max-height: 300px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.submission-list label { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--border); cursor: pointer; }
.submission-list label:first-child { border-top: 0; }
.submission-list label:hover { background: var(--surface-3); }
.submission-list input { accent-color: var(--brand); width: 18px; height: 18px; flex: none; }
.submission-list .who { flex: 1; min-width: 0; }

.empty-note { padding: var(--sp-3); }
.sub-cell { min-width: 96px; }
.sub-cell .progress { margin-top: 4px; }

.push-preview { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-4); }
.push-preview .bubble { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06); }
.push-preview .bubble strong { display: block; }
.push-preview .app-name { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-3); margin-bottom: var(--sp-2); }

.log-q { font-weight: 500; }
.log-a { color: var(--text-2); }
.kb-meta { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.kb-thumb { width: 56px; height: 56px; border-radius: var(--radius); object-fit: cover; background: var(--surface-3); border: 1px solid var(--border); }

.order-card { max-width: 640px; }
.token-reveal { display: flex; gap: var(--sp-2); align-items: center; }
.token-reveal code { flex: 1; word-break: break-all; padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }

.tool-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.tool-row:first-child { border-top: 0; padding-top: 0; }
.tool-row .meta { flex: 1 1 320px; min-width: 0; }
.tool-row .meta p { color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; }

.form-section { padding-top: var(--sp-4); margin-top: var(--sp-4); border-top: 1px solid var(--border); }
.form-section:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.form-section > h3 { margin-bottom: var(--sp-3); }

details.card > summary { cursor: pointer; }
details.card[open] > summary { margin-bottom: var(--sp-4); }
details.card > .stack { margin-top: 0; }

.filter-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: end; margin-bottom: var(--sp-4); }
.load-more { display: flex; justify-content: center; padding: var(--sp-4); }
.json-pair { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .json-pair { grid-template-columns: minmax(0, 1fr); } }