/* Board columns must follow available width, not the intrinsic width of a card. */
#viewBoard .board {
  grid-template-columns:minmax(0,1.2fr) minmax(0,.95fr) minmax(0,1.05fr);
  width:100%; min-width:0;
}
#viewBoard .board .col { grid-template-columns:minmax(0,1fr); min-width:0; }
#viewBoard .board .col > * { min-width:0; max-width:100%; }
#viewBoard .board .card,
#viewBoard .board .empty,
#viewBoard .board .fut-toggle { width:100%; min-width:0; max-width:100%; overflow-wrap:anywhere; }
#viewBoard .board .card > *,
#viewBoard .board .l1 > *,
#viewBoard .board .flags > *,
#viewBoard .board .fut-toggle > * { min-width:0; max-width:100%; }
#viewBoard .board .col > header { flex-wrap:wrap; align-content:start; }
#viewBoard .board .col > header > * { min-width:0; max-width:100%; overflow-wrap:anywhere; }
#viewBoard #newCall { white-space:normal; }
#viewBoard #queueInfo { font-size:12px; }
#viewBoard .board .fut-toggle h2 { flex:1 1 140px; }
#viewBoard .board .fut-arrow { flex:0 0 14px; }

/* Keep each brigade's state in the same right-hand column at every text scale. */
#viewBoard .board .crew-card-top {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,42%); gap:10px; align-items:start;
}
#viewBoard .board .crew-card-identity { min-width:0; overflow-wrap:anywhere; }
#viewBoard .board .crew-card-staff {
  display:block; margin-top:7px; font-size:13px; font-weight:400; line-height:1.4;
}
#viewBoard .board .crew-card-member { display:block; }

#viewBoard .board .crew-card-state {
  display:flex; flex-direction:column; align-items:flex-end; gap:3px;
  min-width:0; width:100%; text-align:right;
}
#viewBoard .board .crew-card-state > * {
  min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere;
}
#viewBoard .board .crew-card-state .timer { display:block; text-align:right; }

/* The same crew rows become cards without duplicating controls or changing access. */
#viewCrews { width:100%; min-width:0; }
#viewCrews .crew-table { width:100%; table-layout:fixed; white-space:normal; }
#viewCrews .crew-table th,
#viewCrews .crew-table td { min-width:0; white-space:normal; overflow-wrap:anywhere; }
#viewCrews .crew-table th:nth-child(1) { width:14%; }
#viewCrews .crew-table th:nth-child(2) { width:33%; }
#viewCrews .crew-table th:nth-child(3) { width:18%; }
#viewCrews .crew-table th:nth-child(4) { width:13%; }
#viewCrews .crew-table th:nth-child(5) { width:22%; }
#viewCrews .crew-table .btn { max-width:100%; min-height:40px; white-space:normal; overflow-wrap:anywhere; }
#viewCrews .crew-shift-info { margin:6px 0; display:grid; grid-template-columns:max-content minmax(0,1fr); gap:3px 8px; font-size:13px; }
#viewCrews .crew-shift-info dt { color:var(--muted); }
#viewCrews .crew-shift-info dd { margin:0; min-width:0; overflow-wrap:anywhere; }
#viewCrews .crew-connect-help { overflow-wrap:anywhere; }

@media (min-width:701px) and (max-width:1100px) {
  #viewBoard #queueInfo { flex-basis:100%; }
  #viewBoard .board { gap:10px; padding:10px; }
  #viewBoard .board > .col > header { min-height:48px; }
  #viewBoard .board .card { padding:9px 10px; }
  #viewCrews .crew-table th,#viewCrews .crew-table td { padding:8px 5px; }
  #viewCrews .crew-shift-info { grid-template-columns:minmax(0,1fr); gap:1px; }
  #viewCrews .crew-shift-info dd { margin-bottom:4px; }
  #viewCrews .crew-table .actions { flex-direction:column; align-items:stretch; }
  #viewCrews .crew-table .btn { padding:7px 5px; }
}
@media (max-width:700px) {
  #viewBoard .board { grid-template-columns:minmax(0,1fr); }
  #viewCrews .panel { background:transparent; border:0; padding:0; }
  #viewCrews .crew-table { display:block; overflow:visible; max-width:100%; }
  #viewCrews .crew-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  #viewCrews .crew-table tbody { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
  #viewCrews .crew-table tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"name name" "state phone" "shift shift" "actions actions";
    gap:12px; padding:14px; min-width:0; border:1px solid var(--line); border-radius:14px; background:var(--surface); cursor:default; }
  #viewCrews .crew-table tr:hover { background:var(--surface); }
  #viewCrews .crew-table td { display:block; border:0; padding:0; }
  #viewCrews .crew-table td[data-label]::before { content:attr(data-label); display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
  #viewCrews .crew-name { grid-area:name; font-size:18px; }
  #viewCrews .crew-state { grid-area:state; }
  #viewCrews .crew-phone { grid-area:phone; }
  #viewCrews .crew-shift { grid-area:shift; padding-top:10px!important; border-top:1px solid var(--line)!important; }
  #viewCrews .crew-actions { grid-area:actions; }
  #viewCrews .crew-actions:empty { display:none; }
  #viewCrews .crew-table .actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  #viewCrews .crew-table .btn { min-height:44px; padding:8px; }
  #viewCrews .crew-table [data-shiftedit] { min-height:40px; padding:6px 10px!important; font-size:13px!important; }
}