/* ============================================================
trip-sheet.css — полноэкранный TRIP-SHEET (TRIP-SHEET v1)
============================================================ */
.trip-sheet-backdrop{
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
opacity:0;
pointer-events:none;
transition:opacity .18s ease;
z-index:66;
}
.trip-sheet-backdrop.show{
opacity:1;
pointer-events:auto;
}
.trip-sheet{
position:fixed;
inset:0;
z-index:67;
display:flex;
flex-direction:column;
background:var(--surface);
color:var(--text-primary);
transform:translateY(100%);
transition:transform .22s ease-out, visibility 0s linear .22s;
visibility:hidden;
overflow:hidden;
touch-action:none;
}
.trip-sheet.open{
visibility:visible;
transform:translateY(0);
}
.ts-close{
position:absolute;
top:12px;
right:12px;
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
border:none;
border-radius:8px;
background:var(--surface-control);
color:var(--text-primary);
font-size:18px;
cursor:pointer;
z-index:1;
}
.ts-close:active{
background:var(--surface-control-hover);
}
.ts-header{
position:relative;
padding:16px 56px 12px 16px;
border-bottom:1px solid var(--line);
flex-shrink:0;
}
.ts-title-row{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
/* CUSTOMER-ITER-1 (fix 1): время оранжевым, как .trip-time в Обзоре. */
.ts-time{
font-family:var(--disp);
font-size:18px;
font-weight:600;
color:var(--accent-light);
letter-spacing:.03em;
}
/* CUSTOMER-ITER-1 (fix 2): дата после времени, формат d.MM.YYYY. */
.ts-date{
font-family:var(--disp);
font-size:14px;
font-weight:600;
color:var(--accent-light);
letter-spacing:.03em;
}
.ts-sub{
margin-top:6px;
font-size:13px;
color:var(--text-muted);
line-height:1.4;
}
.ts-trip-note{
margin-top:6px;
font-size:13px;
color:var(--text-muted);
line-height:1.4;
white-space:pre-line;
}
.ts-scroll{
flex:1;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
touch-action:pan-y;
padding:12px 16px;
}
.ts-section{
margin-bottom:16px;
}
.ts-section-title{
margin:0 0 8px;
font-size:13px;
font-weight:600;
color:var(--text-muted);
text-transform:uppercase;
letter-spacing:.04em;
}
.ts-list{
display:flex;
flex-wrap:wrap;
gap:6px;
}
.ts-guide,
.ts-vehicle{
display:inline-flex;
align-items:center;
gap:4px;
padding:4px 10px;
border-radius:8px;
background:var(--surface-control);
font-size:13px;
color:var(--text-primary);
}
.ts-guide.lead{
background:var(--surface-guide);
font-weight:600;
}
.ts-vehicle.down{
color:var(--danger-text);
}
.ts-empty{
font-size:13px;
color:var(--text-faint);
}
.ts-client-card{
padding:12px;
margin-bottom:10px;
border-radius:10px;
background:var(--surface-2);
border:1px solid var(--line-card);
}
.ts-client-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
}
.ts-client-name{
font-size:16px;
font-weight:600;
}
.ts-client-links{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:6px;
}
.ts-phone,
.ts-ms{
font-size:13px;
color:var(--accent-light);
text-decoration:none;
}
.ts-phone:active,
.ts-ms:active{
opacity:.7;
}
.ts-client-meta{
margin-top:6px;
font-size:12px;
color:var(--text-muted);
}
.ts-client-comment{
margin-top:6px;
font-size:13px;
color:var(--text-muted);
line-height:1.35;
white-space:pre-line;
}
.ts-badge{
display:inline-flex;
align-items:center;
padding:2px 8px;
border-radius:6px;
font-size:11px;
font-weight:600;
white-space:nowrap;
}
.ts-badge.st-pre{
background:var(--ambient-accent);
color:var(--accent-light);
}
.ts-badge.st-deposit{
background:rgba(255,208,46,.12);
color:var(--status-deposit-text);
}
.ts-badge.st-ready{
background:rgba(63,214,143,.12);
color:var(--ok);
}
.ts-badge.st-cancel{
background:rgba(255,93,93,.10);
color:var(--danger-text);
}
.ts-badge.st-postpone{
background:var(--surface-gray);
color:var(--text-muted);
}
.ts-footer{
padding:12px 16px calc(12px + env(safe-area-inset-bottom));
border-top:1px solid var(--line);
flex-shrink:0;
}
.ts-zoom-btn{
width:100%;
padding:12px;
border:none;
border-radius:10px;
background:var(--accent);
color:var(--on-accent);
font-size:14px;
font-weight:600;
cursor:pointer;
}
.ts-zoom-btn:active{
background:var(--accent-deep);
}
/* CUSTOMER-ITER-1 (fix 5): svg-иконки как в карточке Обзора (15px, muted). */
.ts-sub .pic,
.ts-client-meta .pic{
width:15px;
height:15px;
color:var(--text-muted);
flex:none;
vertical-align:-3px;
margin-right:2px;
}/* E1-TRIPEDIT-FRONT: карандаш правки времени/даты в шапке шита. */
.ts-edit-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
margin-left:2px;
border:none;
border-radius:8px;
background:var(--surface-control);
color:var(--text-muted);
font-size:14px;
cursor:pointer;
flex:none;
}
.ts-edit-btn:active{
background:var(--surface-control-hover);
color:var(--text-primary);
}