/* Simple styling for the HOTEL hat collection assignment. */
body { background: #fff; color: #222; font-family: Arial, sans-serif; }
.container { max-width: 950px; }
.site-header { background: #f3f3f3; border-bottom: 1px solid #ddd; }
.brand, .repo-link { color: #222; text-decoration: none; }
.brand { font-size: 1.1rem; font-weight: bold; }
.repo-link { font-size: .9rem; }
h1 { font-size: 2rem; font-weight: bold; }
.eyebrow { font-size: .8rem; color: #666; }
.panel { border: 1px solid #ddd; border-radius: 4px; background: #fff; }
.form-label { font-weight: 600; }
.form-control { border: 1px solid #aaa; border-radius: 4px; }
.form-control:focus { border-color: #555; box-shadow: none; }
.btn { border-radius: 4px; }
.btn-primary { --bs-btn-bg: #444; --bs-btn-border-color: #444; --bs-btn-hover-bg: #222; --bs-btn-hover-border-color: #222; }
.btn-outline-primary { --bs-btn-color: #444; --bs-btn-border-color: #444; --bs-btn-hover-bg: #444; --bs-btn-hover-border-color: #444; }
.connection-status { font-size: .85rem; color: #555; }
.connection-status.connected { color: #276738; }
.connection-status.disconnected { color: #a22; }
.count-badge, .major-badge { background: #eee; color: #333; }
.major-badge { padding: 4px 8px; border-radius: 3px; }
.student-list { display: grid; gap: 10px; }
.student-card { padding: 12px; border: 1px solid #ddd; border-radius: 4px; }
.student-card h3 { font-size: 1rem; font-weight: bold; overflow-wrap: anywhere; }
.student-id { font-size: .7rem; color: #777; overflow-wrap: anywhere; }
.student-notes, dd { overflow-wrap: anywhere; white-space: pre-wrap; }
pre { padding: 12px; background: #f5f5f5; overflow: auto; max-height: 250px; }
summary { cursor: pointer; }
@media (max-width: 575px) { footer span { float: none !important; display: block; } }