/* Shared screen layout for both the staff cabinet and the brigade application. */
@media screen {
  /* A label has one background, even when the surrounding text wraps. */
  .kind-tag, .rf-tag {
    display:inline-block; vertical-align:baseline; flex-shrink:0;
    white-space:nowrap; word-break:normal; overflow-wrap:normal; hyphens:none;
  }
  .st, .flag, .card-badge, .qa-tag, .veh-badge, .hr-pill, .chat-readonly, .lr-at {
    display:inline-block; max-width:100%; vertical-align:baseline;
    white-space:normal; word-break:normal; overflow-wrap:normal; hyphens:none;
  }
  .badge, .layout-attention-badge { flex-shrink:0; white-space:nowrap; }

  /* Buttons may use another line at a space; navigation tabs stay whole. */
  .btn { max-width:100%; white-space:normal; word-break:normal; overflow-wrap:normal; }
  .tabs button { flex-shrink:0; white-space:nowrap; }
  .subtabs button { max-width:100%; white-space:normal; word-break:normal; }
  .row > *, .actions > *, .modal > *, .grid > *, .rf > *, .rf-sec > * { min-width:0; }
  .row > *, .actions > * { max-width:100%; }
  .panel, .modal, .crew, .rf, .rf-sec, .ct-section, .ct-editor, .ct-downloads {
    min-width:0; overflow-wrap:break-word;
  }
  .modal, .crew, .rf, .rf-sec { grid-template-columns:minmax(0,1fr); }
  .modal > header h2 { min-width:0; overflow-wrap:break-word; }
  .modal > header .x { flex-shrink:0; }
  .field input, .field select, .field textarea, .rf-input { min-width:0; max-width:100%; }
  .tscroll { min-width:0; }
  .tscroll table { white-space:normal; }
  .ct-search { min-width:min(210px,100%); }

  /* Reserve enough space for a complete word in the brigade's right column. */
  #viewBoard .board .crew-card-top {
    grid-template-columns:minmax(0,1fr) minmax(min-content,42%);
  }
  #viewBoard .board .crew-card-state > * {
    white-space:normal; word-break:normal; overflow-wrap:normal;
  }
  #viewCrews .crew-table .btn { word-break:normal; overflow-wrap:normal; }

  /* Brigade screens must not inherit a wide button's minimum content width. */
  .crew .grid2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .crew .tel { min-width:0; max-width:100%; flex-wrap:wrap; }
  .crew .tel > span:first-child { flex:1 1 150px; min-width:0; overflow-wrap:break-word; }
  .crew .big-btn { min-width:0; max-width:100%; white-space:normal; word-break:normal; }
  .veh-card { min-width:0; flex-wrap:wrap; }
  .veh-card > span:first-child { min-width:0; flex:1 1 150px; overflow-wrap:break-word; }
  .rf-grid, .rf-pay { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rf-check { grid-template-columns:24px minmax(0,1fr) auto; }
  .rf-check.big { grid-template-columns:24px minmax(0,1fr); }
  .rf-total { flex-wrap:wrap; gap:4px 12px; }
  .rf-mixrow { grid-template-columns:120px minmax(0,1fr) auto; }
  .rf-extra { grid-template-columns:minmax(0,1fr) 110px 44px; }
  .rf-actions { flex-wrap:wrap; }
  .rf-actions .btn { flex:1 1 150px; }
  .ct-calculation > div, .ct-item > *, .chat-settings-controls > *, .hr-form > * { min-width:0; }
}

@media screen and (max-width:700px) {
  .row > .field[style*="min-width"] { min-width:min(220px,100%)!important; }
  .notify-row > div, .chat-send > *, .crew .head > * { min-width:0; }
  .crew .head { flex-wrap:wrap; }
  .chat-send { flex-wrap:wrap; }
}
@media screen and (max-width:600px) {
  #callForm .grid[style*="grid-template-columns"] { grid-template-columns:minmax(0,1fr)!important; }
  .phones .prow { grid-template-columns:minmax(0,1fr) auto; }
  .phones .prow [data-ph="number"] { grid-column:1; grid-row:1; }
  .phones .prow [data-ph="label"] { grid-column:1; grid-row:2; }
  .phones .prow [data-delphone] { grid-column:2; grid-row:1/3; }
  .rf-grid { grid-template-columns:minmax(0,1fr); }
  .rf-check:not(.big) { grid-template-columns:24px minmax(0,1fr); }
  .rf-check:not(.big) > :nth-child(n+3) { grid-column:2; justify-self:start; white-space:normal; }
}
@media screen and (max-width:380px) {
  .crew .grid2, .rf-pay { grid-template-columns:minmax(0,1fr); }
  .rf-mixrow { grid-template-columns:minmax(0,1fr) auto; }
  .rf-mixname { grid-column:1/-1; }
  .rf-extra { grid-template-columns:minmax(0,1fr) 44px; }
  .rf-extra > :first-child { grid-column:1/-1; }
}