/* Split-view layout used in scan entry (nav cao 56px) */
.split-view { display: flex; height: calc(100vh - 56px); height: calc(100dvh - 56px); overflow: hidden; }
.split-left  { flex: 0 0 50%; overflow: auto; background: #1a1a1a; position: relative; }
.split-right { flex: 0 0 50%; overflow-y: hidden; padding: 20px; }
@media (min-width: 768px) { #data-pane, #action-bar, #ai-chat-bar { padding-right: 3rem; } }

/* Scan image zoom/pan — touch-action: none để tự xử lý kéo & pinch-zoom trên điện thoại */
#scan-img-wrap { overflow: hidden; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#scan-img-wrap.grabbing { cursor: grabbing; }
#scan-img { transform-origin: 0 0; transition: none; display: block; max-width: none; user-select: none; -webkit-user-drag: none; }

/* <select> tự rộng theo tuỳ chọn dài nhất → không cho tràn khung trên màn hình hẹp */
select { max-width: 100%; text-overflow: ellipsis; }

/* Flash messages */
.flash-success { background:#d1fae5; border-left:4px solid #10b981; padding:.75rem 1rem; margin-bottom:1rem; border-radius:4px; }
.flash-warning { background:#fef3c7; border-left:4px solid #f59e0b; padding:.75rem 1rem; margin-bottom:1rem; border-radius:4px; }
.flash-error   { background:#fee2e2; border-left:4px solid #ef4444; padding:.75rem 1rem; margin-bottom:1rem; border-radius:4px; }

/* Tab chuyển Ảnh / Dữ liệu — chỉ hiện trên điện thoại */
.review-tabs { display: none; }

@media (max-width: 767px) {
  /* Màn duyệt trang: mỗi lúc hiện 1 phần (ảnh hoặc dữ liệu), chuyển bằng tab */
  .review-tabs { display: flex; height: 44px; flex-shrink: 0; }
  .split-view.review { flex-direction: column; height: calc(100vh - 56px); height: calc(100dvh - 56px); }
  .split-view.review .split-left,
  .split-view.review .split-right { flex: 1 1 auto !important; min-height: 0; width: 100%; }
  .split-view.review[data-tab="data"] .split-left  { display: none !important; }
  .split-view.review[data-tab="img"]  .split-right { display: none !important; }

  /* Bảng dữ liệu dạng thẻ: mỗi học sinh một thẻ, mỗi ô có nhãn */
  #rows-table thead { display: none; }
  #rows-table, #rows-table tbody { display: block; background: transparent; box-shadow: none; }
  #rows-table tr[data-row] {
    display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .5rem;
    background: #fff; border-radius: .5rem; padding: .6rem .6rem .5rem; margin-top: .6rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
  }
  #rows-table tr[data-row] > td { display: block; padding: 0 !important; text-align: left !important; }
  #rows-table tr[data-row] > td[data-label]::before {
    content: attr(data-label); display: block; font-size: 10px; color: #6b7280; margin-bottom: 1px;
  }
  #rows-table tr[data-row] > td.col-name,
  #rows-table tr[data-row] > td.col-place,
  #rows-table tr[data-row] > td.col-note { grid-column: 1 / -1; }
  #rows-table tr[data-row] > td.col-tt  { grid-row: 1; grid-column: 1 / 2; font-weight: 600; color: #374151; }
  #rows-table tr[data-row] > td.col-act { grid-row: 1; grid-column: 2 / 3; justify-self: end; font-size: 1.15rem; }
  #rows-table tr[data-row] > td.col-act a, #rows-table tr[data-row] > td.col-act button { padding: .15rem .45rem; }
  #rows-table tr[data-row] .cell { font-size: 16px; padding: .35rem .5rem; border-color: #e5e7eb; }
  #rows-table tr[data-flags] { display: block; background: #fff; border-radius: 0 0 .5rem .5rem; margin-top: -.4rem; padding: 0 .6rem .5rem; }
  #rows-table tr[data-flags] > td { display: block; padding: 0 !important; }
  #rows-table tr[data-flags] > td:first-child { display: none; }
  #rows-table tr:not([data-row]):not([data-flags]) { display: block; }
  #rows-table tr:not([data-row]):not([data-flags]) > td { display: block; }

  /* Ô nhập trên iOS: tối thiểu 16px để Safari không tự phóng to khi chạm vào */
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"],
  input[type="date"], select, textarea { font-size: 16px; }
}