.reservation-list{display:grid;gap:12px}
.reservation-list[hidden]{display:none}
.reservation-list-card{display:grid;grid-template-columns:clamp(200px,28%,280px) minmax(0,1fr) 160px;border:1px solid transparent;border-radius:20px;overflow:hidden;background:var(--card,#f0f2f5);color:var(--ink);animation:card-rise 420ms var(--card-ease,ease) backwards;transition:transform 220ms var(--card-ease,ease),border-color 220ms ease,box-shadow 220ms ease}
/* Same motion as the customer cards. Stagger by position; later cards arrive together. */
.reservation-list-card:nth-child(2){animation-delay:45ms}.reservation-list-card:nth-child(3){animation-delay:90ms}.reservation-list-card:nth-child(4){animation-delay:135ms}.reservation-list-card:nth-child(5){animation-delay:180ms}.reservation-list-card:nth-child(n+6){animation-delay:225ms}
/* background restated: the card is also a .booking-row, whose shared hover would flood it pale blue */
.reservation-list-card:hover,.reservation-list-card:focus-within{background:var(--card,#f0f2f5);border-color:var(--card-hover-line);box-shadow:var(--card-hover-shadow);transform:translateY(-3px)}
/* The car eases forward as the card wakes up. */
.reservation-car-photo img{transition:transform 420ms var(--card-ease,ease)}
/* photos face left, so forward is leftward in both languages */
.reservation-list-card:is(:hover,:focus-within) .reservation-car-photo img{transform:translateX(-6px) scale(1.04)}
.reservation-car-photo{display:flex;align-items:center;justify-content:center;padding:10px;background:transparent;min-width:0}
/* Car photos ship on white; multiply lets that white take the card's grey (same treatment as the public cards). */
.reservation-car-photo img{width:100%;height:160px;object-fit:cover;object-position:center;mix-blend-mode:multiply;filter:brightness(1.04)}
.reservation-card-body{padding:14px 16px;min-width:0}
.reservation-card-body header{display:flex;justify-content:space-between;align-items:center;gap:6px 12px;flex-wrap:wrap}
.reservation-card-body header>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.reservation-card-caption,.reservation-card-body small,.reservation-card-trip span,.reservation-card-unit>span{font-size:13px;color:var(--muted)}
.reservation-list-card .booking-details-link{color:var(--blue);font-size:15px;text-decoration:none}
.reservation-card-body h3{margin:7px 0 4px;font-size:20px;line-height:1.35;overflow-wrap:anywhere}
/* Title block (car + customer) carries the status accent: short at rest, full height on hover. */
.reservation-card-title{position:relative;padding-inline-start:14px}
.reservation-card-title::before{content:"";position:absolute;inset-block:4px;inset-inline-start:0;width:4px;border-radius:4px;background:var(--blue);clip-path:inset(0 0 calc(100% - 22px) 0 round 4px);transition:clip-path 320ms var(--card-ease,ease)}
.reservation-list-card:is(:hover,:focus-within) .reservation-card-title::before{clip-path:inset(0 round 4px)}
/* The booking code is the way in: its chevron glides in along the reading direction. */
.reservation-list-card .booking-details-link{display:inline-flex;align-items:center;gap:4px}
.reservation-list-card .booking-details-link::after{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;transform:translateX(-6px);transition:opacity 220ms ease,transform 320ms var(--card-ease,ease)}
[dir="rtl"] .reservation-list-card .booking-details-link::after{transform:translateX(6px) scaleX(-1)}
.reservation-list-card:is(:hover,:focus-within) .booking-details-link::after{opacity:1;transform:none}
[dir="rtl"] .reservation-list-card:is(:hover,:focus-within) .booking-details-link::after{transform:scaleX(-1)}
@media(hover:none){.reservation-list-card .booking-details-link::after{opacity:.5;transform:none}[dir="rtl"] .reservation-list-card .booking-details-link::after{transform:scaleX(-1)}.reservation-list-card:hover{transform:none}}
.reservation-card-body .customer-cell{display:flex;gap:6px 12px;align-items:center;flex-wrap:wrap}
.reservation-card-body .customer-cell strong{font-size:14px}.reservation-card-body .customer-cell small{margin:0}
.reservation-card-trip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.reservation-card-trip>div{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:2px 8px;min-width:0}
.reservation-card-trip strong{font-size:14px;text-align:end}
.reservation-card-trip small{grid-column:1/-1;overflow-wrap:anywhere;font-size:12px}
.reservation-card-total{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:5px;padding:14px;background:transparent;border-inline-start:1px solid var(--line);text-align:center;min-width:0}
.reservation-card-total>span,.reservation-card-total>small{font-size:13px;color:var(--muted)}
.reservation-card-total>strong{font-size:24px;color:var(--blue);line-height:1.3;overflow-wrap:anywhere}
.reservation-card-total .inline-select{width:100%;min-height:44px;background:var(--white);margin-top:5px}
.reservation-card-footer{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding:8px 14px;border-top:1px solid var(--line);background:transparent}
.reservation-card-unit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.reservation-card-unit .assignment-button{min-height:44px;padding:6px 12px;font-size:14px;margin:0}
.reservation-card-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.reservation-card-actions :is(.reservation-open,.contract-link,.reservation-delete){display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;box-sizing:border-box;min-width:44px;min-height:44px;width:44px;height:44px;margin:0;padding:0;border:1px solid var(--blue-soft);border-radius:13px;background:var(--blue-soft);color:var(--blue);text-decoration:none;cursor:pointer;touch-action:manipulation;transition:background-color .15s ease,box-shadow .15s ease,transform .1s ease}
.reservation-card-actions svg{display:block;width:22px;height:22px;flex:none;pointer-events:none}
.reservation-card-actions .contract-link{background:#efedff;color:#5856c9;border-color:#e2def7}
.reservation-card-actions .reservation-delete{background:var(--red-soft);color:var(--red);border-color:var(--red-line)}
@media(hover:hover){.reservation-card-actions .reservation-open:hover{background:var(--blue-soft)}.reservation-card-actions .contract-link:hover{background:#e3dfff}.reservation-card-actions .reservation-delete:hover{background:var(--red-soft-hover)}}
.reservation-card-actions :is(a,button):not(:disabled):active{transform:scale(.94);box-shadow:inset 0 0 0 2px currentColor}
.reservation-card-actions .reservation-delete:disabled{opacity:.5;cursor:wait}
.reservation-list-card :is(a,button):focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.reservation-list-card [data-delete-message]{grid-column:1/-1;margin:0;padding:10px 14px;color:var(--red);background:var(--red-soft);overflow-wrap:anywhere}
.reservation-list-card [data-delete-message]:empty{display:none}
.reservation-search{display:grid;gap:6px;margin-bottom:18px;font-size:14px;color:var(--muted)}
.reservation-search input{width:100%;max-width:520px;min-height:44px;border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--white);font:inherit}
@media(max-width:1100px){.reservation-list-card{grid-template-columns:clamp(160px,26%,220px) minmax(0,1fr) 140px}.reservation-card-body{padding:12px}.reservation-card-total{padding:12px}.reservation-card-trip>div{grid-template-columns:minmax(0,1fr)}.reservation-card-trip strong{text-align:start}}
@media(max-width:760px){.reservation-list-card{grid-template-columns:34% minmax(0,1fr)}.reservation-car-photo{padding:6px}.reservation-car-photo img{height:110px}.reservation-card-body h3{font-size:18px}.reservation-card-total{grid-column:1/-1;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px 12px;padding:8px 12px;border-inline-start:0;border-top:1px solid var(--line)}.reservation-card-total .inline-select{width:auto;max-width:100%;margin:0;margin-inline-start:auto}.reservation-card-total>strong{font-size:22px}.reservation-card-footer{padding:8px 12px}.reservation-card-actions{margin-inline-start:auto}}
@media(max-width:440px){.reservation-list-card{grid-template-columns:34% minmax(0,1fr)}.reservation-car-photo img{height:90px}.reservation-card-body{padding:10px}.reservation-card-trip{gap:8px}.reservation-card-body header{gap:2px}.reservation-card-body header>div{gap:4px}.reservation-card-unit{width:100%;justify-content:space-between}.reservation-card-actions{gap:8px}}
@media(prefers-reduced-motion:reduce){.reservation-list-card,.reservation-card-actions :is(a,button){transition:none}.reservation-card-actions :is(a,button):active{transform:none}}
@media(prefers-contrast:more){.reservation-card-actions :is(a,button){border-color:currentColor}}