/* One trip DOM: desktop route columns remain resizable, mobile uses cards. */ #tripsPanel .surface, #tripsPanel .command-row, #tripsPanel .section-head, #tripsPanel .trip-finance-grid > *, #tripsPanel .trip-item-field, #tripsPanel .section-field { min-width: 0; } #tripDetail { display: grid; gap: 16px; } #tripTitle { overflow-wrap: anywhere; white-space: normal; } #tripsPanel .section-head .actions, #tripsPanel .form-actions, #tripsPanel .trip-preview-actions, #tripsPanel .trip-client-result-actions { display: flex; flex-wrap: wrap; gap: 8px; } #tripsPanel .section-field { display: grid; gap: 6px; color: var(--muted); font-size: 13px; } #tripsPanel .section-field > span { line-height: 1.3; } #tripForm { gap: 12px; } #tripForm .section-field input, #tripForm .section-field select, #tripForm .section-field textarea { color: var(--ink); } #tripItemForm, #expenseForm { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; } #tripItemForm > *, #expenseForm > * { min-width: 0; max-width: 100%; } #tripSearchForm { grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; } #tripClientSearchForm { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } #tripsPanel .trip-client-picker { padding: 12px; gap: 12px; } #tripsPanel .trip-client-result { gap: 12px; padding: 12px; } #tripsPanel .trip-client-result > div:first-child span { white-space: normal; overflow-wrap: anywhere; } #tripsPanel .trip-manual-add { padding: 12px; } #tripsPanel .trip-manual-add summary { min-height: 36px; display: flex; align-items: center; } #tripsPanel .trip-expense-add { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); } #tripsPanel .trip-expense-add > summary { min-height: 44px; padding-block: 10px; cursor: pointer; } #tripsPanel .trip-expense-add[open] > summary { margin-bottom: 12px; } #tripsPanel .trip-list-row { border-radius: 12px; gap: 8px; background: var(--panel); } #tripsPanel .trip-list-row.selected-row { border-color: var(--accent); background: var(--hover); } #tripsPanel .trip-list-main { min-height: 68px; padding: 12px 14px; gap: 12px; } #tripsPanel .trip-list-copy { display: grid; gap: 3px; overflow: visible; } #tripsPanel .trip-list-copy strong, #tripsPanel .trip-list-copy span { white-space: normal; overflow-wrap: anywhere; overflow: visible; } #tripsPanel .trip-list-copy strong { font-size: 15px; } #tripsPanel .trip-list-copy span { font-size: 13px; line-height: 1.4; } #tripsPanel .trip-list-status { padding: 5px 8px; border-radius: 8px; background: var(--panel-2); font-size: 12px; } #tripsPanel .trip-list-actions { padding: 8px 10px 8px 0; gap: 8px; } #tripsPanel .trip-items-list { gap: 10px; } #tripsPanel .trip-items-header { font-size: 12px; } #tripsPanel .trip-item-card { padding: 8px; border-radius: 10px; } #tripsPanel .trip-item-field input, #tripsPanel .trip-item-field select { min-height: 36px; height: 36px; font-size: 13px; } #tripsPanel .trip-status-note { font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; } #tripsPanel .trip-item-field:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; } #tripsPanel .trip-finance-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 16px; } #tripsPanel .trip-finance-table-wrap { border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; } #tripsPanel .trip-finance-table { min-width: 0; font-size: 14px; } #tripsPanel .trip-finance-table th, #tripsPanel .trip-finance-table td { padding: 10px 12px; } #tripsPanel .trip-finance-table th { font-size: 12px; white-space: normal; } #tripsPanel .finance-total-row, #tripsPanel .finance-net-row, #tripsPanel .finance-company-row { background: var(--accent-soft); } #tripsPanel .trip-finance-cards { gap: 12px; } #tripsPanel .trip-finance-cards > div { padding: 16px; gap: 8px; border-radius: 10px; } #tripsPanel .trip-finance-cards > div:last-child { grid-column: 1 / -1; } #tripsPanel .trip-finance-cards b { font-size: 21px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } #tripsPanel .trip-expense-summary { min-height: 48px; padding: 12px; flex-wrap: wrap; } #tripsPanel .trip-expense-pill { min-height: 36px; padding-left: 12px; border-radius: 10px; } #tripsPanel .trip-expense-pill > span { white-space: normal; overflow-wrap: anywhere; } @media (max-width: 900px) { #tripsPanel .command-row, #tripForm .trip-date-grid, #tripItemForm, #expenseForm, #tripsPanel .trip-finance-grid { grid-template-columns: minmax(0, 1fr); } #tripsPanel .command-row { gap: 12px; } #tripSearchForm, #tripClientSearchForm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #tripSearchForm > input, #tripSearchForm > .section-field, #tripClientSearchForm > input, #tripClientSearchForm > .section-field { grid-column: 1 / -1; } #tripsPanel input:not([type="checkbox"]):not([type="radio"]), #tripsPanel select { min-width: 0; max-width: 100%; min-height: 44px; font-size: 16px; } #tripsPanel button, #tripsPanel .button { min-height: 44px; } #tripsPanel textarea { min-height: 110px; font-size: 16px; } #tripForm .check { min-height: 44px; align-items: flex-start; white-space: normal; } #tripForm .check input { flex: 0 0 18px; margin-top: 3px; } #tripsPanel .region-choice-grid { grid-template-columns: minmax(0, 1fr); } #tripsPanel .region-choice-grid .check { min-height: 44px; white-space: normal; } #tripsPanel .trip-manual-add summary { min-height: 44px; } #tripsPanel .section-head { align-items: flex-start; } #tripsPanel .section-head .actions { width: 100%; } #tripsPanel .section-head .actions > * { flex: 1 1 auto; white-space: normal; } #tripsPanel .trip-client-result { grid-template-columns: minmax(0, 1fr); } #tripsPanel .trip-client-result-actions { justify-content: flex-end; } #tripsPanel .trip-list-row { grid-template-columns: minmax(0, 1fr); gap: 0; } #tripsPanel .trip-list-main { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; } #tripsPanel .trip-list-status { justify-self: start; } #tripsPanel .trip-list-actions { justify-content: flex-end; padding: 0 14px 12px; } #tripsPanel .trip-list-actions .square-icon-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; } #tripsPanel .trip-status-legend { gap: 8px; margin: 0; } #tripsPanel button.trip-status-chip { min-height: 44px; padding: 8px 12px; white-space: normal; } #tripsPanel .trip-items-list { min-width: 0; width: 100%; overflow: visible; gap: 16px; } #tripsPanel .trip-items-header, #tripsPanel .trip-col-resizer { display: none; } #tripsPanel .trip-item-card { position: relative; min-width: 0; max-width: 100%; padding: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "status status" "name name" "phone phone" "auto city" "comment comment" "price share" "payment payment" "actions actions" "preview preview"; gap: 12px; overflow: visible; border-radius: 12px; } #tripsPanel .trip-item-card > .trip-item-field { grid-column: auto; grid-row: auto; gap: 6px; } #tripsPanel .trip-item-field::before { content: attr(data-trip-column); display: block; margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; } #tripsPanel .trip-item-field[data-trip-column="Статус"] { grid-area: status; padding-right: 56px; } #tripsPanel .trip-item-field[data-trip-column="Имя"] { grid-area: name; } #tripsPanel .trip-item-field[data-trip-column="Телефон"] { grid-area: phone; } #tripsPanel .trip-item-field[data-trip-column="Авто"] { grid-area: auto; } #tripsPanel .trip-item-field[data-trip-column="Город"] { grid-area: city; } #tripsPanel .trip-item-field[data-trip-column="Комментарий"] { grid-area: comment; } #tripsPanel .trip-item-field[data-trip-column="Цена"] { grid-area: price; } #tripsPanel .trip-item-field[data-trip-column="Моя доля"] { grid-area: share; } #tripsPanel .trip-item-field[data-trip-column="Оплата"] { grid-area: payment; } #tripsPanel .trip-item-field input, #tripsPanel .trip-item-field select { min-height: 44px; height: 44px; padding: 8px; font-size: 16px; } #tripsPanel .trip-item-status-field .trip-status-control { min-width: 0; padding: 4px; } #tripsPanel .trip-drag-handle { position: absolute; top: 38px; right: 14px; bottom: auto; left: auto; width: 44px; height: 44px; min-height: 44px; grid-column: auto; grid-row: auto; } #tripsPanel .trip-new-badge { font-size: 9px; } #tripsPanel .trip-item-actions { display: flex; grid-area: actions; justify-content: flex-end; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); } #tripsPanel .trip-item-actions button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; } #tripsPanel .trip-save-state { width: 24px; height: 24px; font-size: 14px; } #tripsPanel .trip-item-preview { grid-area: preview; grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere; } #tripsPanel .trip-preview-actions { flex-wrap: wrap; justify-content: flex-start; } #tripsPanel .trip-preview-actions > * { flex: 1 1 140px; } #tripsPanel .trip-finance-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } #tripsPanel .trip-finance-table th, #tripsPanel .trip-finance-table td { padding: 9px 7px; } #tripsPanel .trip-finance-table td:first-child { overflow-wrap: anywhere; } #tripsPanel .finance-share-control { grid-template-columns: minmax(0, 1fr); } #tripsPanel .finance-share-control input, #tripsPanel .finance-share-control button { min-height: 44px; } #tripsPanel .trip-expense-pills { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; } #tripsPanel .trip-expense-pill { width: 100%; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 12px; font-size: 14px; } #tripsPanel .trip-expense-pill button { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; } #tripsPanel .trip-expense-summary > span { min-width: 0; white-space: normal; overflow-wrap: anywhere; } } @media (max-width: 390px) { #tripsPanel .trip-item-card { grid-template-areas: "status status" "name name" "phone phone" "auto auto" "city city" "comment comment" "price price" "share share" "payment payment" "actions actions" "preview preview"; } }