/* Visual language adapted from pro2_summary/student-progress/dist/styles.css.
   The 402 classroom layout and this app's assignment behavior remain local to this project. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color: #183449;
  background: #f2f5f3;
}
body { min-width: 320px; }
.app-shell { max-width: none; padding: 0; min-height: 100vh; }
.app-shell > main { max-width: 1300px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 62px) 70px; }
.history-page > main { max-width: 1500px; }
.topbar {
  min-height: 82px; padding: 12px clamp(22px, 3vw, 52px); gap: 17px;
  background: #10283c; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .11);
}
.brand-mark {
  width: 38px; height: 38px; padding: 6px; display: grid;
  grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
  place-items: stretch; gap: 4px; flex: none;
  border: 1px solid #47717d; border-radius: 11px; background: #204259;
}
.brand-mark span { display: block; border-radius: 2px; background: #a2d7c3; }
.brand-mark span:nth-child(2) { opacity: .5; }
.brand-mark span:nth-child(3) { opacity: .7; }
.brand-mark span:nth-child(4) { background: #f0c27a; }
.brand-copy { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
.brand-copy .eyebrow { margin: 0; color: #8ec2bf; font-size: 11px; font-weight: 800; letter-spacing: .12em; white-space: nowrap; }
.brand-copy h1 { color: #fff; font-size: 21px; font-weight: 720; letter-spacing: .04em; white-space: nowrap; }
.topbar .button { min-height: 36px; padding: 0 12px; border-radius: 8px; font-weight: 800; }
.topbar .button-primary { background: #26765e; color: #fff; border-color: #26765e; box-shadow: none; }
.topbar .button-primary:hover { background: #1d624d; }
.topbar .button-quiet { background: transparent; color: #d6f3e9; border-color: #6e988b; }
.topbar .button-quiet:hover { background: #28584e; }
.topbar .button[aria-current="page"] { border-color: #8ec2bf; }
.intro { padding: 42px 0 27px; }
.intro .section-kicker { color: #4e7e88; font-weight: 800; letter-spacing: .17em; }
.intro h2 { color: #153346; font-size: clamp(26px, 3vw, 38px); letter-spacing: .03em; }
.intro p:last-child { color: #738b8b; font-size: 14px; }
.field-label { color: #607d7b; }
.session-tabs { background: #e9f1eb; border-color: #d4e5d9; }
.session-tab.active { color: #246c59; }
.session-tab.active small { color: #327769; }
.panel { border: 1px solid #dce7e2; border-radius: 18px; box-shadow: 0 9px 30px rgba(19, 58, 60, .04); }
.board { padding: 26px 30px 0; overflow: hidden; }
.panel-heading h2 { color: #173d4b; font-size: 22px; letter-spacing: .02em; }
.panel-heading .section-kicker { color: #4e7e88; font-weight: 800; }
.room-tag, .count-badge, .class-range { background: #e7f3ef; color: #2e7368; border-radius: 9px; font-weight: 800; }
.stats { background: #f8fcf8; border-color: #dce7e2; }
.stats > div { border-color: #e3ece7; }
.stats span { color: #78918f; }
.stats strong { color: #14394b; }
.legend { color: #748e88; }
.dot-five { background: #2d947d; }
.dot-six { background: #5b9b86; }
.dot-reserved { background: #82aa94; }
.dot-unused { background: #b1bfb6; }
.seat-layout {
  margin: 22px -30px 0; padding: 20px 34px 26px;
  background: #f5f8f5; border-top: 1px solid #e4eeea; border-bottom: 1px solid #e4eeea;
}
.front-label, .back-label { text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .2em; color: #96aaa5; }
.front-label { margin-bottom: 7px; }
.back-label { margin-top: 20px; }
.teacher-desk {
  width: 154px; height: 32px; margin: 0 auto 25px;
  background: #e3ece8; border: 1px solid #b4cac2; border-radius: 7px;
  color: #426b69; font-size: 12px; font-weight: 800;
}
.seat-map { gap: 6px; }
.seat-card, .seat-card.class-five, .seat-card.class-six {
  height: 48px; border: 1px solid #dcc47b; border-radius: 7px;
  background: #fff3be; color: #594b23; box-shadow: 0 2px 0 #e8d99c;
  font-weight: 850; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.seat-card:hover, .seat-card.class-five:hover, .seat-card.class-six:hover {
  background: #ffe692; border-color: #bd9c40;
  transform: translateY(-2px); box-shadow: 0 5px 12px rgba(114, 91, 28, .15);
}
.seat-card:focus-visible { outline: 3px solid #258a78; outline-offset: 2px; z-index: 1; }
.seat-card.selected, .seat-card.class-six.selected { outline: 3px solid #258a78; }
.seat-card.reserved, .seat-card.class-five.reserved, .seat-card.class-six.reserved {
  background: #e4efe7; border: 1px dashed #a9c9b5; color: #476d5b; box-shadow: none;
}
.seat-card.reserved:hover, .seat-card.class-five.reserved:hover, .seat-card.class-six.reserved:hover {
  background: #d7e9dd; border-color: #7eaf92; box-shadow: 0 4px 10px rgba(39, 104, 71, .12);
}
.reserved-label { font-size: 10px; font-weight: 800; color: #5b8b6d; }
.seat-card.reserved .seat-meta small { color: #779684; }
.seat-number, .seat-meta b { font-size: 15px; }
.seat-meta small, .class-six .seat-meta small { color: #8a7952; }
.seat-progress { background: #47a888; }
.class-six .seat-progress { background: #6db39d; }
.seat-card.class-unused, .seat-card.class-unused:hover {
  background: #e9efdf; border: 1px solid #dbe4d5; color: #8e9d8d;
  box-shadow: none; transform: none;
}
.board-footnote { color: #8ca29e; margin: 0 -30px; padding: 15px 30px; }
.arrival-panel { background: #fcfdfb; }
.panel-intro { color: #78908f; }
.test-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 15px; padding: 14px; background: #f6faf7; border: 1px solid #dceae2; border-radius: 11px; }
.test-actions .field-label { grid-column: 1 / -1; margin: 0 0 2px; color: #3f7466; }
.test-actions .button { width: 100%; min-height: 43px; padding: 6px 4px; white-space: normal; line-height: 1.35; font-size: 11px; background: #fff; border-color: #b8d6c8; color: #2b715d; }
.test-actions .button:hover { background: #e8f5ee; }
.test-actions p { grid-column: 1 / -1; margin: 4px 0 0; color: #78908f; font-size: 10px; line-height: 1.6; }
.attendance-summary { margin: 13px 0 0; color: #547e72; font-size: 11px; font-weight: 750; }
.search-field { border-color: #d4e2de; background: #fff; border-radius: 11px; }
.search-field:focus-within { border-color: #337f79; box-shadow: 0 0 0 3px #d9eee8; }
.student-list { display: flex; flex-direction: column; gap: 6px; padding: 4px 6px 0 0; }
.student-row { background: #fff; border: 1px solid transparent; border-radius: 11px; padding: 10px; }
.student-row:hover { background: #f0f6f3; border-color: #dceae2; }
.student-avatar { background: #eaf0ef; color: #527a7e; border-radius: 10px; }
.avatar-five, .avatar-six { background: #eaf0ef; color: #527a7e; }
.student-info strong { color: #254456; font-size: 13px; }
.student-info small { color: #7e9695; }
.student-actions { align-items: center; }
.arrive-button { background: #e7f3ef; border-color: #b9dfd0; color: #1a715f; }
.arrive-button:hover { background: #d6eee3; }
.seat-chip { background: #fff3be; border-color: #dcc47b; color: #594b23; }
.seat-chip:hover { background: #ffe692; }
.history-dialog.table-dialog {
  width: min(560px, calc(100vw - 26px)); max-height: 92vh; padding: 0;
  border: 1px solid #c8dbd4; border-radius: 18px; background: #fff;
  box-shadow: 0 25px 80px rgba(7, 32, 38, .3); overflow: hidden;
}
.history-dialog.table-dialog::backdrop { background: rgba(8, 28, 41, .64); backdrop-filter: blur(3px); }
.table-dialog .dialog-head { min-height: 62px; align-items: center; padding: 12px 18px; background: #10283c; color: #fff; }
.table-dialog .dialog-head h2 { color: #fff; font-size: 17px; font-weight: 750; }
.table-dialog .dialog-head .section-kicker { color: #90c7bd; }
.table-dialog .icon-button { width: 38px; height: 38px; border: 1px solid #5b7a7c; background: #244252; color: #e3f4f0; }
.table-dialog .icon-button:hover { background: #355967; }
#tableDialogContent { max-height: calc(92vh - 62px); overflow-y: auto; padding: 18px 24px 25px; }
.table-dialog-meta { color: #5f817b; }
.member-list li { border-color: #e0e8e4; }
.member-number { background: #e9f3f0; color: #587982; }
.history-overview { background: #f8fcf8; }
.round-summary > div { border-color: #e3ece7; }
.round-summary span { color: #78918f; }
.round-summary strong { color: #14394b; }
.sort-field { color: #607a74; }
.sort-field select { border-color: #cdded4; color: #183c43; }
.history-section { border-radius: 10px; }
.history-section-head { background: #fff; border-color: #dce7e2; }
.history-section-head h3 { color: #15394b; }
.history-table-wrap { max-height: calc(100vh - 340px); min-height: 280px; overflow: auto; border-top: 1px solid #bfcfc6; scrollbar-color: #b9cec1 #edf4ee; }
.history-table { border-collapse: separate; border-spacing: 0; color: #25424a; font-variant-numeric: tabular-nums; }
.history-table th, .history-table td { border-right: 1px solid #d2ddd6; border-bottom: 1px solid #d8e2dc; }
.history-table { min-width: 1080px; table-layout: fixed; }
.history-table thead th { position: sticky; top: 0; z-index: 3; background: #dce8df; color: #2d5a4e; font-weight: 800; text-align: center; }
.history-table .year-cell, .history-table thead th:nth-child(1),
.history-table .class-cell, .history-table thead th:nth-child(2) { width: 55px; min-width: 55px; max-width: 55px; }
.history-table .number-cell, .history-table thead th:nth-child(3) { width: 65px; min-width: 65px; max-width: 65px; }
.history-table .name-cell, .history-table thead th:nth-child(4) { width: 160px; min-width: 160px; max-width: 160px; }
.history-table .kana-cell, .history-table thead th:nth-child(5) { width: 185px; min-width: 185px; max-width: 185px; }
.history-table .year-cell, .history-table .class-cell, .history-table .number-cell { text-align: center; font-size: 12px; font-weight: 750; color: #355a60; }
.history-table .name-cell, .history-table .kana-cell { text-align: left; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-table .name-cell { font-weight: 750; color: #25424a; }
.history-table .kana-cell { color: #58716f; }
.history-table .assignment-cell { background: transparent; color: #25424a; font-size: 12px; font-weight: 700; }
.history-table tbody tr:nth-child(even) { background: #f8fbf9; }
.history-table tbody tr:hover { background: #ecf5ee; }
.unassigned { color: #9bacaa; }
footer { color: #8da39d; }
@media (min-width: 900px) {
  .history-table thead th:nth-child(1), .history-table tbody .year-cell { position: sticky; left: 0; z-index: 4; background: #fff; }
  .history-table thead th:nth-child(2), .history-table tbody .class-cell { position: sticky; left: 55px; z-index: 4; background: #fff; }
  .history-table thead th:nth-child(3), .history-table tbody .number-cell { position: sticky; left: 110px; z-index: 4; background: #fff; }
  .history-table thead th:nth-child(4), .history-table tbody .name-cell { position: sticky; left: 175px; z-index: 4; background: #fff; }
  .history-table thead th:nth-child(-n+4) { background: #dce8df; z-index: 5; }
  .history-table tbody tr:nth-child(even) .year-cell, .history-table tbody tr:nth-child(even) .class-cell,
  .history-table tbody tr:nth-child(even) .number-cell, .history-table tbody tr:nth-child(even) .name-cell { background: #f8fbf9; }
  .history-table tbody tr:hover .year-cell, .history-table tbody tr:hover .class-cell,
  .history-table tbody tr:hover .number-cell, .history-table tbody tr:hover .name-cell { background: #ecf5ee; }
}
@media (max-width: 1000px) {
  .topbar { flex-wrap: wrap; }
  .brand-copy { flex: 1 1 430px; display: block; }
  .brand-copy .eyebrow { display: none; }
  .brand-copy h1 { font-size: 18px; line-height: 1.35; white-space: normal; }
  .top-actions { margin-left: 0; }
}
@media (max-width: 650px) {
  .app-shell > main { padding: 0 14px 42px; }
  .topbar { min-height: 70px; padding: 12px 18px; }
  .brand-copy { flex: 1 1 200px; }
  .brand-copy h1 { font-size: 16px; }
  .topbar .button { flex: 1 1 auto; }
  .intro { padding-top: 26px; }
  .intro h2 { font-size: 24px; }
  .intro p:last-child { font-size: 12px; }
  .board { padding: 20px 16px 0; }
  .seat-layout { margin: 20px -16px 0; padding: 18px 12px 20px; }
  .seat-card, .seat-card.class-five, .seat-card.class-six { height: 44px; padding: 0 7px; }
  .seat-number, .seat-meta b { font-size: 13px; }
  .board-footnote { margin: 0 -16px; padding: 14px 16px; }
  .history-table-wrap { max-height: calc(100vh - 390px); }
  #tableDialogContent { padding: 16px 14px 22px; }
}
@media (max-width: 480px) {
  .top-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .topbar .button { width: 100%; min-width: 0; padding: 7px 6px; line-height: 1.25; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }