.rental-plan [hidden] {
    display:none!important
}
.rental-plan {
    --plan-label-width:210px;
    --plan-border:#d8dfe5;
    --plan-ink:#23333d;
    color:var(--plan-ink);
    max-width:100%;
    min-width:0
}
.plan-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
    margin-bottom:1rem
}
.plan-heading h1 {
    font-size:1.8rem;
    font-weight:700;
    letter-spacing:-.025em;
    margin:0 0 .3rem
}
.plan-heading p {
    margin:0;
    color:#536570
}
.plan-tools {
    display:flex;
    align-items:end;
    flex-wrap:wrap;
    gap:.65rem;
    padding:.85rem 0;
    border-top:1px solid var(--plan-border)
}
.plan-range {
    display:flex;
    align-items:end;
    gap:.5rem;
    flex-wrap:wrap;
    margin:0
}
.plan-range label,.plan-zoom label {
    font-size:.8rem;
    font-weight:600;
    display:block;
    margin-bottom:.2rem
}
.plan-range input {
    max-width:160px
}
.plan-zoom {
    margin-left:auto
}
.plan-legend {
    display:flex;
    gap:.6rem 1.1rem;
    flex-wrap:wrap;
    font-size:.8rem;
    margin:.5rem 0 .7rem
}
.plan-legend span {
    display:inline-flex;
    align-items:center;
    gap:.35rem
}
.plan-key {
    width:18px;
    height:12px;
    display:inline-block;
    border:1px solid #b6c1c9;
    border-radius:2px;
    background:#fff
}
.plan-key.booked {
    background:#1869a4;
    border-color:#1869a4
}
.plan-key.out {
    background:#267047;
    border-color:#267047
}
.plan-key.requested {
    border:2px dashed #697987;
    background:#fff
}
.plan-key.done {
    background:#e3e8eb
}
.plan-key.buffer {
    background:repeating-linear-gradient(135deg,#fff3c4,#fff3c4 3px,#e9b94c 3px,#e9b94c 5px)
}
.plan-key.blocked {
    background:repeating-linear-gradient(135deg,#edf0f2,#edf0f2 3px,#b9c4cc 3px,#b9c4cc 5px)
}
.plan-summary {
    font-size:.85rem;
    font-weight:600;
    margin:.8rem 0
}
.plan-help {
    font-size:.8rem;
    color:#536570;
    margin:.65rem 0
}
.plan-scroll {
    position:relative;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    border:1px solid var(--plan-border);
    border-radius:6px;
    background:#fff;
    overscroll-behavior-inline:contain
}
.rental-board {
    border-spacing:0;
    border-collapse:separate;
    width:calc(var(--plan-label-width) + var(--track-width));
    table-layout:fixed;
    margin:0
}
.plan-label-col {
    width:var(--plan-label-width)
}
.plan-track-col {
    width:var(--track-width)
}
.rental-board th,.rental-board td {
    padding:0;
    border-bottom:1px solid var(--plan-border);
    vertical-align:middle
}
.plan-corner,.plan-vehicle {
    position:sticky;
    left:0;
    z-index:5;
    width:var(--plan-label-width);
    max-width:var(--plan-label-width);
    background:#fff;
    border-right:2px solid #c8d1d8;
    padding:.65rem .8rem!important;
    text-align:left
}
.plan-corner {
    z-index:10;
    top:0;
    background:#f5f7f8;
    font-size:.85rem;
    letter-spacing:.02em
}
.plan-axis {
    position:sticky;
    top:0;
    z-index:6;
    background:#f5f7f8
}
.plan-days {
    display:flex;
    height:58px
}
.plan-day {
    width:var(--day-width);
    flex:none;
    text-align:center;
    border-right:1px solid var(--plan-border);
    padding:.45rem .1rem;
    font-weight:400
}
.plan-day strong,.plan-day small {
    display:block
}
.plan-day strong {
    font-size:.85rem
}
.plan-day small {
    font-size:.73rem;
    color:#60717c
}
.plan-day.is-weekend {
    background:#e9eef2
}
.plan-day.is-today {
    background:#e4f0fa;
    box-shadow:inset 0 -3px #1869a4
}
.plan-plate {
    display:block;
    font-size:.9rem;
    color:#183f5b;
    font-weight:700;
    text-decoration:none;
    white-space:nowrap
}
.plan-plate:hover {
    text-decoration:underline
}
.plan-model {
    display:block;
    font-size:.73rem;
    font-weight:400;
    color:#60717c;
    margin-top:.2rem;
    line-height:1.25
}
.plan-track {
    position:relative;
    background-image:linear-gradient(to right,transparent calc(100% - 1px),#e3e8ec calc(100% - 1px));
    background-size:var(--day-width) 100%
}
.plan-weekend {
    position:absolute;
    top:0;
    bottom:0;
    background:#f3f6f8;
    pointer-events:none;
    border-right:1px solid #e0e6eb
}
.plan-segment {
    position:absolute;
    height:32px;
    z-index:2;
    border:1px solid transparent;
    border-radius:4px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding:0;
    text-indent:7px;
    font-size:13px;
    font-weight:600;
    line-height:30px;
    text-align:left;
    cursor:pointer;
    box-sizing:border-box;
    min-width:0;
    max-width:100%
}
.plan-segment.is-booked {
    background:#1869a4;
    color:#fff
}
.plan-segment.is-out {
    background:#267047;
    color:#fff
}
.plan-segment.is-requested {
    background:#fff;
    color:#3f5361;
    border:2px dashed #697987;
    line-height:28px
}
.plan-segment.is-done {
    background:#e3e8eb;
    color:#465c69;
    border-color:#b5c2ca
}
.plan-segment.is-buffer {
    background:repeating-linear-gradient(135deg,#fff3c4,#fff3c4 4px,#e9b94c 4px,#e9b94c 6px);
    color:#624300;
    border:0;
    box-shadow:inset 0 0 0 1px #b98918;
    padding:0;
    border-radius:0 3px 3px 0;
    font-size:0
}
.plan-segment.is-blocked {
    background:repeating-linear-gradient(135deg,#edf0f2,#edf0f2 4px,#c6d0d8 4px,#c6d0d8 6px);
    color:#304754;
    border-color:#8c9eab
}
.plan-segment.has-conflict {
    outline:2px solid #b62432;
    outline-offset:1px
}
.plan-segment.is-overdue {
    box-shadow:inset 0 4px #d63240
}
.plan-segment:hover {
    filter:brightness(.94)
}
.plan-segment:focus-visible,.plan-plate:focus-visible {
    outline:3px solid #101c25;
    outline-offset:3px;
    z-index:4
}
.plan-now {
    position:absolute;
    top:0;
    bottom:0;
    width:2px;
    background:#c43c3c;
    z-index:3;
    pointer-events:none
}
.plan-notices {
    display:flex;
    gap:.5rem;
    flex-wrap:wrap;
    margin:.65rem 0
}
.plan-notice {
    font-size:.78rem;
    color:#4a5e6b;
    border-left:3px solid #aebac3;
    padding:.3rem .55rem;
    background:#f3f6f8
}
.plan-error {
    display:flex;
    align-items:center;
    gap:.7rem;
    justify-content:space-between;
    flex-wrap:wrap
}
.plan-detail {
    border:1px solid #bac7d0;
    border-radius:8px;
    padding:1.25rem;
    max-width:600px;
    width:calc(100% - 2rem);
    max-height:85vh;
    overflow:auto;
    color:var(--plan-ink);
    box-shadow:0 18px 60px #15293840
}
.plan-detail::backdrop {
    background:#12283680
}
.plan-detail-header {
    display:flex;
    align-items:start;
    justify-content:space-between;
    gap:.75rem;
    margin-bottom:1rem
}
.plan-detail-header h2 {
    font-size:1.15rem;
    margin:0
}
.plan-detail-list {
    margin-bottom:1.25rem
}
.plan-detail-pair {
    display:grid;
    grid-template-columns:145px 1fr;
    gap:.75rem;
    padding:.45rem 0;
    border-bottom:1px solid #e2e8ec;
    font-size:.9rem
}
.plan-detail-pair dt {
    font-weight:600
}
.plan-detail-pair dd {
    margin:0;
    overflow-wrap:anywhere
}
.plan-detail-actions {
    display:flex;
    gap:.5rem;
    flex-wrap:wrap
}
@media(max-width:767px) {
    .rental-plan {
    --plan-label-width:133px
}
.plan-heading h1 {
    font-size:1.5rem
}
.plan-heading p {
    font-size:.85rem
}
.plan-tools {
    gap:.6rem
}
.plan-range input {
    max-width:145px
}
.plan-zoom {
    margin-left:0
}
.plan-corner,.plan-vehicle {
    padding:.55rem .5rem!important
}
.plan-plate {
    font-size:.8rem
}
.plan-model {
    font-size:.68rem
}
.plan-segment {
    height:32px;
    line-height:30px;
    font-size:14px
}
.plan-segment.is-requested {
    line-height:28px
}
.plan-detail-pair {
    grid-template-columns:1fr;
    gap:.15rem
}
.plan-heading .btn {
    font-size:.85rem
}

}
@media(prefers-reduced-motion:no-preference) {
    .plan-segment {
    transition:filter .12s ease
}

}


.plan-short-detail {
    position:absolute;
    box-sizing:border-box;
    width:24px;
    height:24px;
    padding:0;
    z-index:4;
    border:1px solid #778995;
    border-radius:4px;
    background:#fff;
    color:#233f52;
    font-size:16px;
    line-height:22px;
    text-align:center;
    cursor:pointer;
}
.plan-short-detail:hover { background:#edf3f7; }
.plan-short-detail:focus-visible { outline:3px solid #101c25; outline-offset:2px; }

/* Rental planning needs readable hours as well as multi-day bookings. */
.plan-day { position:relative; }
.rental-board.has-hours .plan-days { height:80px; }
.plan-hours {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:22px;
    display:flex;
    border-top:1px solid #d8dfe5;
}
.plan-hours span {
    flex:1;
    min-width:0;
    font-size:11px;
    color:#405866;
    text-align:left;
    padding-left:3px;
    border-left:1px solid #d8dfe5;
    line-height:21px;
}
.plan-track {
    background-image:linear-gradient(to right,transparent calc(100% - 1px),#cbd5dc calc(100% - 1px)),linear-gradient(to right,transparent calc(100% - 1px),#e8edf0 calc(100% - 1px));
    background-size:var(--day-width) 100%,var(--tick-width) 100%;
}
.plan-weekend { background:rgba(81,107,125,.065); }
@media(max-width:767px) {
    .plan-tools > .btn-group { flex-wrap:wrap; max-width:100%; }
    #plan-prev,#plan-next { font-size:.8rem; }
}

/* Keep vehicle labels within compact rows; full model name remains in the title. */
.plan-vehicle { padding:.25rem .8rem!important; }
.plan-plate { line-height:1.15; }
.plan-model { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; margin-top:2px; }
@media(max-width:767px) {
    .plan-vehicle { padding:.25rem .5rem!important; }
    .plan-segment.is-buffer { font-size:0; }
}

.plan-scroll-hint {
    margin:.35rem 0 .3rem;
    font-size:.8rem;
    color:#435c6a;
}
.plan-top-scroll {
    width:100%;
    max-width:100%;
    height:20px;
    overflow-x:auto;
    overflow-y:hidden;
    box-sizing:border-box;
    border-left:1px solid transparent;
    border-right:1px solid transparent;
    margin:0 0 .25rem;
    overscroll-behavior-inline:contain;
}
.plan-top-scroll:focus-visible {
    outline:2px solid #1869a4;
    outline-offset:2px;
}
.plan-top-spacer { height:1px; }

.plan-zoom-slider { display:flex; align-items:center; gap:.65rem; }
.plan-zoom-slider input[type="range"] { width:220px; min-width:140px; accent-color:#1869a4; cursor:ew-resize; }
.plan-zoom-slider button { white-space:nowrap; }
.plan-zoom output { display:block; font-size:.78rem; color:#405866; margin-top:.15rem; }
.rental-board.is-compact-scale .plan-day { padding-left:0; padding-right:0; }
.rental-board.is-compact-scale .plan-day strong { font-size:11px; min-height:1.1em; }
.rental-board.is-compact-scale .plan-day small { font-size:10px; }
@media(max-width:767px) {
    .plan-zoom { width:100%; }
    .plan-zoom-slider input[type="range"] { width:auto; flex:1; min-width:140px; }
}

.plan-zoom-caption { display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .75rem; }
.plan-visible-dates { font-size:.78rem; font-weight:600; color:#304d60; }

/* Small recognition photos do not change row or sticky-column dimensions. */
.plan-vehicle-link { display:flex; align-items:center; gap:8px; min-width:0; color:inherit; text-decoration:none; }
.plan-vehicle-text { display:block; flex:1; min-width:0; }
.plan-vehicle-link:hover .plan-plate { text-decoration:underline; }
.plan-vehicle-link:focus-visible { outline:3px solid #101c25; outline-offset:2px; }
.plan-photo-frame { display:block; flex:0 0 40px; width:40px; height:30px; box-sizing:border-box; border:1px solid #d8e1e7; border-radius:3px; background:#f3f6f8; overflow:hidden; }
.plan-vehicle-photo,.plan-photo-placeholder { display:block; width:100%; height:100%; }
.plan-vehicle-photo { object-fit:contain; }
.plan-photo-placeholder { background:#edf2f5; }
@media(max-width:767px) {
    .plan-vehicle-link { gap:5px; }
    .plan-photo-frame { flex-basis:26px; width:26px; height:26px; }
}

/* Drag the view with the mouse; booking buttons retain their normal click action. */
.plan-track,.plan-axis {
    cursor:grab;
    user-select:none;
    -webkit-user-select:none;
}
.plan-scroll.is-panning,.plan-scroll.is-panning * {
    cursor:grabbing!important;
    user-select:none;
    -webkit-user-select:none;
}