/* Representatives only. Load after styles.css and responsive.css. */
#repsPanel .surface,
#repsPanel .rep-card,
#repsPanel .rep-preview-row > td,
#repsPanel .section-field { min-width: 0; }

#repsPanel .section-head { align-items: start; gap: 12px; }
#repsPanel .section-head .actions { display: flex; flex-wrap: wrap; gap: 8px; }
#repsPanel .command-row { align-items: end; margin-block: 14px; }
#repsPanel #repSearchForm { grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; }
#repsPanel .rep-quick-list { margin-bottom: 14px; }
#repsPanel .rep-quick-list > summary { padding-block: 10px; cursor: pointer; color: var(--muted); }
#repsPanel .rep-quick-list[open] > summary { margin-bottom: 8px; }
#repsPanel .section-field { display: grid; align-content: start; gap: 6px; }
#repsPanel .section-field > span { color: var(--muted); font-size: 13px; line-height: 1.4; }
#repsPanel .section-field > :is(input, select, textarea) { width: 100%; min-width: 0; }
#repsPanel input:not([type="checkbox"]):not([type="radio"]),
#repsPanel select { min-height: 40px; }
#repsPanel button,
#repsPanel .button { min-height: 38px; }
#repsPanel :is(#repForm, .rep-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#repsPanel :is(#repForm, .rep-card) > :is(.section-head, .form-grid, .representative-messenger-options, .form-actions, .rep-assignments, textarea),
#repsPanel .section-field-wide,
#repsPanel .section-field:has(textarea) { grid-column: 1 / -1; }
#repsPanel .form-grid { gap: 14px; }
#repsPanel .form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#repsPanel textarea { min-height: 96px; resize: vertical; }
#repsPanel .representative-messenger-options { gap: 8px 16px; }
#repsPanel .representative-messenger-options > .field-label { flex-basis: 100%; }
#repsPanel .check { margin: 0; min-height: 36px; }
#repsPanel .rep-import-form { grid-template-columns: minmax(180px, 1fr) minmax(210px, 1.2fr) auto auto; gap: 12px; }
#repsPanel .rep-import-copy { grid-column: 1 / -1; }
#repsPanel .rep-import-result { overflow-wrap: anywhere; }
#repsPanel .rep-import-sample { align-items: start; }
#repsPanel .reps-table { min-width: 920px; font-size: 14px; }
#repsPanel .reps-table th,
#repsPanel .reps-table td { padding: 10px 8px; line-height: 1.45; }
#repsPanel .rep-name-cell { gap: 6px; font-weight: 600; }
#repsPanel .representative-table-contact { gap: 4px; font-variant-numeric: tabular-nums; }
#repsPanel .representative-table-contact small { font-size: 12px; }
#repsPanel .rep-cell-actions { min-width: 40px; }
#repsPanel .rep-open-label { display: none; }
#repsPanel .rep-stats { gap: 8px; line-height: 1.4; }
#repsPanel .rep-stats-details > summary { min-height: 36px; padding-block: 8px; cursor: pointer; }
#repsPanel .inline-rep-card { padding: 16px; gap: 14px; }
#repsPanel .inline-rep-card .inline-client-field { min-width: 0; overflow-wrap: anywhere; }
#repsPanel .rep-assignments { gap: 12px; margin-top: 8px; padding-top: 16px; }
#repsPanel .rep-assignments-head h3 { font-size: 16px; }
#repsPanel .rep-assignments-table td { padding: 10px; overflow-wrap: anywhere; }
#repsPanel .rep-client-status { gap: 6px; }

@media (max-width: 900px) {
  #repsPanel .section-head { flex-wrap: wrap; }
  #repsPanel .section-head .actions { width: 100%; }
  #repsPanel .command-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #repsPanel #repSearchForm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #repsPanel #repSearchForm > .section-field { grid-column: 1 / -1; }
  #repsPanel #showRepFormBtn { justify-self: start; }
  #repsPanel :is(button, .button, summary) { min-height: 44px; }
  #repsPanel :is(input, select, textarea) { font-size: 16px; }
  #repsPanel input:not([type="checkbox"]):not([type="radio"]),
  #repsPanel select { min-height: 44px; }
  #repsPanel .check { min-height: 44px; padding-block: 6px; line-height: 1.4; }
  #repsPanel .check input { flex: 0 0 20px; width: 20px; height: 20px; }
  #repsPanel :is(#repForm, .rep-card, .form-grid) { grid-template-columns: minmax(0, 1fr); }
  #repsPanel .rep-import-form { grid-template-columns: minmax(0, 1fr); }
  #repsPanel .rep-import-form > * { min-width: 0; }
  #repsPanel .rep-import-sample { grid-template-columns: 52px minmax(0, 1fr); }
  #repsPanel .rep-import-sample > :nth-child(n + 3) { grid-column: 2; }
  #repsPanel .top-reps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #repsPanel .table-wrap:has(> .reps-table) { overflow: visible; border: 0; background: transparent; }
  #repsPanel .reps-table,
  #repsPanel .reps-table > tbody#repsTable { display: grid; width: 100% !important; min-width: 0 !important; gap: 12px; }
  #repsPanel .reps-table > thead,
  #repsPanel .reps-table > colgroup { display: none; }
  #repsPanel .reps-table > tbody > .rep-list-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "name city" "contact personal" "address address" "hours hours" "comment comment" "actions actions";
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    overflow: hidden;
  }
  #repsPanel .reps-table > tbody > .rep-list-row.selected-row { border-color: var(--accent); background: var(--accent-soft); }
  #repsPanel .rep-list-row > td { display: grid; align-content: start; gap: 5px; width: auto; min-width: 0; max-width: none; padding: 0; border: 0; overflow-wrap: anywhere; }
  #repsPanel .rep-list-row > td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 400; }
  #repsPanel .rep-list-row .rep-cell-name { grid-area: name; font-size: 17px; font-weight: 650; }
  #repsPanel .rep-list-row .rep-cell-city { grid-area: city; }
  #repsPanel .rep-list-row .rep-cell-contact { grid-area: contact; }
  #repsPanel .rep-list-row .rep-cell-personal { grid-area: personal; }
  #repsPanel .rep-list-row .rep-cell-address { grid-area: address; }
  #repsPanel .rep-list-row .rep-cell-hours { grid-area: hours; }
  #repsPanel .rep-list-row .rep-cell-comment { grid-area: comment; white-space: normal !important; }
  #repsPanel .rep-list-row .rep-cell-actions { grid-area: actions; justify-items: end; padding-top: 10px; border-top: 1px solid var(--line); }
  #repsPanel .rep-list-row .rep-cell-name::before,
  #repsPanel .rep-list-row .rep-cell-actions::before { display: none; }
  #repsPanel .rep-name-cell { display: grid; gap: 8px; }
  #repsPanel .representative-table-contact > :is(span, small) { overflow: visible; white-space: normal; text-overflow: clip; }
  #repsPanel .rep-cell-contact,
  #repsPanel .rep-cell-personal { font-variant-numeric: tabular-nums; }
  #repsPanel .rep-assignment-badge { min-height: 26px; padding: 4px 7px; font-size: 11px; }
  #repsPanel .rep-list-row .square-icon-button { width: 44px; height: 44px; }
  #repsPanel .rep-open-label { display: inline; }
  #repsPanel .rep-cell-actions button:has(.rep-open-label) { display: inline-flex; width: auto; min-width: 120px; gap: 8px; padding-inline: 12px; }
  #repsPanel .reps-table .rep-preview-row,
  #repsPanel .reps-table .rep-preview-row > td { display: block; width: 100%; min-width: 0; padding: 0; border: 0; }
  #repsPanel .rep-preview-row .inline-rep-card { border: 1px solid var(--line); border-radius: 12px; }
  #repsPanel .inline-rep-card .inline-client-card__head { flex-direction: column; align-items: start; gap: 6px; }
  #repsPanel .inline-rep-card .inline-client-fields { grid-template-columns: minmax(0, 1fr); }
  #repsPanel .rep-assignments-table-wrap { overflow: visible; border: 0; }
  #repsPanel .rep-assignments-table,
  #repsPanel .rep-assignments-table > tbody { display: grid; width: 100%; min-width: 0; gap: 10px; }
  #repsPanel .rep-assignments-table thead { display: none; }
  #repsPanel .rep-assignments-table tbody > tr { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
  #repsPanel .rep-assignments-table td { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; width: auto; padding: 0; border: 0; }
  #repsPanel .rep-assignments-table td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 12px; }
  #repsPanel .rep-assignments-table td:last-child { display: block; padding-top: 6px; }
  #repsPanel .rep-assignments-table td:nth-child(2) > small { grid-column: 2; font-size: 13px; white-space: normal; font-variant-numeric: tabular-nums; }
  #repsPanel .rep-client-open { width: 100%; }
}

@media (max-width: 420px) {
  #repsPanel .reps-table > tbody > .rep-list-row { grid-template-areas: "name name" "city city" "contact personal" "address address" "hours hours" "comment comment" "actions actions"; }
  #repsPanel .rep-cell-contact,
  #repsPanel .rep-cell-personal { font-size: 13px; }
  #repsPanel .rep-assignments-table td { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  #repsPanel .rep-assignments-table td:nth-child(2) > small { grid-column: auto; }
  #repsPanel .form-actions > button { flex: 1 1 140px; }
}