/* Rent calendar (assets/js/rent_calendar.js) on the public calendar page and in the console's rent form,
   plus the bike header of the public page and the rent form itself. Uses the palette of common.css. */

/* ==========================================================================
   Calendar
   ========================================================================== */

.rc {
    --rc-hour: 3rem;                 /* height of an hour */
    --rc-times: 3.25rem;             /* width of the hours column */
    --rc-line: var(--rv-line, #e3e6ea);
    --rc-line-strong: var(--rv-line, #cfd4da);
    --rc-busy: var(--rv-danger);
    --rc-busy-past: var(--rv-line, #e3e6ea);
    --rc-free-bg: #fff;
    --rc-closed: repeating-linear-gradient(-45deg, #f3f4f6 0 6px, #eceef1 6px 12px);
    --rc-past: rgba(255, 255, 255, .55);
    --rc-radius: .375rem;

    color: var(--rv-text);
}

.rc-day { --rc-hour: 3.5rem; }
/* The console's form is above its calendar on a phone: a more compact day */
.rc-admin.rc-day { --rc-hour: 2.75rem; }

/* ---------- toolbar ---------- */

.rc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: .75rem;
}

.rc-nav {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.rc-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 500;
    min-width: 0;
}

.rc-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.rc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 .85rem;
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-radius);
    background: var(--rv-card-bg);
    color: var(--rv-text);
    font-size: .9rem;
    cursor: pointer;
    transition: border-color .15s, color .15s, background-color .15s;
}

.rc-btn:hover, .rc-btn:focus-visible {
    border-color: var(--rv-accent);
    color: var(--rv-accent-text);
}

.rc-btn:focus-visible, .rc-pick:focus-within {
    outline: 2px solid var(--rv-accent-tint-strong);
    outline-offset: 1px;
}

.rc-prev, .rc-next { padding: 0; }

/* One day on a phone: everything in one row, the title takes what is left */
.rc-day .rc-toolbar { flex-wrap: nowrap; gap: .35rem; }
.rc-day .rc-nav { flex: 1 1 auto; gap: .35rem; }
.rc-day .rc-title {
    flex: 1 1 auto;
    font-size: 1rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rc-day .rc-actions { gap: .35rem; }
.rc-day .rc-btn.rc-today { padding: 0 .6rem; }

/* The native date picker sits on top of the icon, so a tap anywhere on it opens the picker */
.rc-pick {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-radius);
    color: var(--rv-text);
    cursor: pointer;
}

.rc-pick:hover { border-color: var(--rv-accent); color: var(--rv-accent-text); }

.rc-date {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.rc-date::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* ---------- days of the week on a phone ---------- */

.rc-strip { display: none; }

.rc-day .rc-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .25rem;
    margin-bottom: .75rem;
}

.rc-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    padding: .4rem 0 .35rem;
    border: 1px solid transparent;
    border-radius: var(--rv-radius);
    background: var(--rv-subtle-bg, #f5f6f8);
    color: var(--rv-text);
    line-height: 1.1;
    cursor: pointer;
}

.rc-chip-wd { font-size: .7rem; color: var(--rv-text-muted); text-transform: uppercase; }
.rc-chip-d { font-size: 1.05rem; font-weight: 500; }

.rc-chip-dot {
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: transparent;
}

.rc-chip-dot.busy { background: var(--rv-danger); }
.rc-chip.today { border-color: var(--rv-accent); }
.rc-chip.active { background: var(--rv-accent); color: #fff; border-color: var(--rv-accent); }
.rc-chip.active .rc-chip-wd { color: #fff; }
.rc-chip.active .rc-chip-dot.busy { background: var(--rv-card-bg); }

/* ---------- grid ---------- */

.rc-scroll {
    border: 1px solid var(--rc-line-strong);
    border-radius: var(--rv-radius);
    overflow: hidden;
    background: var(--rc-free-bg);
}

.rc-grid { position: relative; }

.rc-loading .rc-grid { opacity: .55; transition: opacity .2s .15s; }

.rc-head, .rc-body {
    display: grid;
    grid-template-columns: var(--rc-times) repeat(var(--rc-days, 7), minmax(0, 1fr));
}

.rc-head {
    border-bottom: 1px solid var(--rc-line-strong);
    background: var(--rv-subtle-bg, #fafbfc);
}

.rc-day .rc-head { display: none; }

.rc-day-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    padding: .5rem .25rem;
    border-left: 1px solid var(--rc-line);
    line-height: 1.15;
    text-align: center;
}

.rc-wd { font-size: .75rem; color: var(--rv-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.rc-d { font-size: 1.35rem; font-weight: 500; }
.rc-mon { font-size: .75rem; color: var(--rv-text-muted); }

.rc-day-head.today .rc-d {
    min-width: 2.2rem;
    border-radius: 1.1rem;
    background: var(--rv-accent);
    color: #fff;
}

.rc-day-head.past .rc-d { color: var(--rv-text-muted); }
.rc-day-head.selected { background: var(--rv-accent-tint); }

.rc-status {
    margin-top: .2rem;
    padding: .05rem .45rem;
    border-radius: 1rem;
    font-size: .7rem;
    white-space: nowrap;
}

.rc-status-free { background: var(--rv-ok-bg, #e8f5e9); color: var(--rv-ok-fg, #1b5e20); }
.rc-status-part { background: var(--rv-danger-tint); color: var(--rv-danger-text-active); }
.rc-status-busy { background: var(--rv-danger); color: #fff; }
.rc-status-past { color: var(--rv-text-muted); }

.rc-times { position: relative; }

.rc-time {
    position: relative;
    height: var(--rc-hour);
}

.rc-time span {
    position: absolute;
    top: -.55rem;
    right: .4rem;
    font-size: .72rem;
    color: var(--rv-text-muted);
    font-variant-numeric: tabular-nums;
    background: var(--rc-free-bg);
    padding: 0 .1rem;
}

.rc-time:first-child span { top: .2rem; }

.rc-col {
    position: relative;
    height: calc(var(--rc-hours) * var(--rc-hour));
    border-left: 1px solid var(--rc-line);
    /* hour lines, and a fainter half-hour line */
    background:
        repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rc-hour) - 1px), var(--rc-line) calc(var(--rc-hour) - 1px), var(--rc-line) var(--rc-hour)),
        repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rc-hour) / 2 - 1px), var(--rv-subtle-bg, #f1f3f5) calc(var(--rc-hour) / 2 - 1px), var(--rv-subtle-bg, #f1f3f5) calc(var(--rc-hour) / 2), transparent calc(var(--rc-hour) / 2), transparent var(--rc-hour));
}

.rc-pickable { cursor: copy; }
.rc-pickable:hover { background-color: var(--rv-subtle-bg, #fcfcfd); }

.rc-closed {
    position: absolute;
    left: 0;
    right: 0;
    background: var(--rc-closed);
    pointer-events: none;
}

.rc-past {
    position: absolute;
    left: 0;
    right: 0;
    background: var(--rc-past);
    z-index: 2;
    pointer-events: none;
}

.rc-now {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px solid var(--rv-accent);
    z-index: 4;
    pointer-events: none;
}

.rc-now::before {
    content: "";
    position: absolute;
    left: -.3rem;
    top: -.35rem;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--rv-accent);
}

.rc-now span {
    position: absolute;
    right: .2rem;
    top: -1.05rem;
    font-size: .65rem;
    font-weight: 600;
    color: var(--rv-accent-text);
    background: color-mix(in srgb, var(--rv-card-bg) 85%, transparent);
    padding: 0 .2rem;
    border-radius: .2rem;
}

/* ---------- rents ---------- */

.rc-event {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: .05rem;
    padding: .25rem .4rem;
    border: 2px solid #fff;
    border-radius: var(--rc-radius);
    background: var(--rc-busy);
    color: #fff;
    overflow: hidden;
    font-size: .78rem;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.rc-event-title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-event-note {
    font-variant-numeric: tabular-nums;
    opacity: .92;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A rent shorter than ~45 minutes: one line */
.rc-short { flex-direction: row; align-items: center; gap: .35rem; padding-top: 0; padding-bottom: 0; }
.rc-short .rc-event-note { white-space: nowrap; }

/* Continues from the day before / into the next day: square edges */
.rc-from-prev { border-top-left-radius: 0; border-top-right-radius: 0; border-top-style: dashed; }
.rc-to-next { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-style: dashed; }

.rc-past-event { background: var(--rc-busy-past); color: var(--rv-text-2, #3a3f45); }

/* The rent being filled in the console's form */
.rc-draft {
    z-index: 5;
    background: repeating-linear-gradient(-45deg, var(--rv-card-bg) 0 8px, var(--rv-accent-tint) 8px 16px), var(--rv-card-bg);
    border: 2px dashed var(--rv-accent);
    color: var(--rv-accent-text-active);
    box-shadow: 0 2px 8px rgba(var(--rv-accent-rgb), .25);
}

.rc-conflict {
    border-style: solid;
    border-color: #8e1515;
    background: repeating-linear-gradient(-45deg, var(--rv-danger-bg, #fff3f3) 0 8px, var(--rv-danger-tint-strong) 8px 16px), var(--rv-card-bg);
}

/* Other rents in the console: dark, so that the red rent being added stands out */
.rc-admin .rc-event:not(.rc-draft) { background: var(--rv-other-bg, #3a3f45); }
.rc-admin .rc-event.rc-past-event:not(.rc-draft) { background: var(--rc-busy-past); color: var(--rv-text-2, #3a3f45); }

/* ---------- legend, free time, errors ---------- */

.rc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    margin-top: .6rem;
    font-size: .8rem;
    color: var(--rv-text-muted);
}

.rc-legend span { display: inline-flex; align-items: center; gap: .35rem; }

.rc-swatch {
    display: inline-block;
    width: .95rem;
    height: .95rem;
    border-radius: .2rem;
    border: 1px solid var(--rc-line-strong);
}

.rc-swatch-busy { background: var(--rc-busy); border-color: var(--rc-busy); }
.rc-admin .rc-swatch-busy { background: var(--rv-other-bg, #3a3f45); border-color: var(--rv-other-bg, #3a3f45); }
.rc-swatch-free { background: var(--rv-card-bg); }
.rc-swatch-draft { background: repeating-linear-gradient(-45deg, var(--rv-card-bg) 0 3px, var(--rv-accent-tint-strong) 3px 6px); border: 1px dashed var(--rv-accent); }
.rc-swatch-closed { background: var(--rc-closed); }

.rc-free {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: var(--rv-radius);
    background: var(--rv-subtle-bg, #f7f8f9);
}

.rc-free-title {
    margin: 0 0 .5rem;
    font-size: 1rem;
    font-weight: 600;
}

.rc-free-title small { font-weight: 400; color: var(--rv-text-muted); }

.rc-free ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .3rem;
}

.rc-free li {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: .75rem;
    font-size: .95rem;
}

.rc-free-day { color: var(--rv-text-muted); }
.rc-free-none { color: var(--rv-text-muted); }
.rc-free b { font-weight: 600; font-variant-numeric: tabular-nums; }

.rc-error { margin: 0; padding: 2rem 1rem; text-align: center; color: var(--rv-text-muted); }

@media (max-width: 575.98px) {
    .rc-title { font-size: 1rem; }
    .rc-free { padding: .85rem 1rem; }
    .rc-free li { grid-template-columns: 1fr; gap: 0; }
}

/* ==========================================================================
   Public calendar page: the bike
   ========================================================================== */

.rent-bike {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-radius);
}

.rent-bike-image {
    width: 11rem;
    max-height: 8rem;
    object-fit: contain;
    border-radius: var(--rv-radius);
}

.rent-bike-title { margin: 0 0 .35rem; font-size: 1.5rem; }
.rent-bike-description { margin: 0 0 .5rem; color: var(--rv-text-muted); }
.rent-bike-price { margin: 0; font-size: 1.05rem; }

.rent-bike-book {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 14rem;
}

.rent-bike-book-title {
    margin: 0;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rv-text-muted);
}

.rent-bike-messengers { display: flex; gap: .5rem; }
.rent-bike-messengers .btn { flex: 1; }

.rent-calendar-intro { margin-bottom: 1rem; color: var(--rv-text-muted); }

@media (max-width: 767.98px) {
    .rent-bike { grid-template-columns: 1fr; gap: 1rem; padding: 1rem; }
    .rent-bike-image { width: 100%; max-height: 12rem; }
    .rent-bike-book { min-width: 0; }
}

/* ==========================================================================
   Console: the rent form next to the calendar of its bike.
   Compact, so that on a desktop the form and the calendar fit on the screen without scrolling.
   ========================================================================== */

/* The page itself is .compact-page (common.css) */

.rent-editor {
    display: grid;
    grid-template-columns: minmax(0, 29rem) minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
}

@media (max-width: 991.98px) {
    .rent-editor { grid-template-columns: minmax(0, 1fr); }
}

.rent-form {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.rent-form .form-control, .rent-form .form-select { padding-top: .3rem; padding-bottom: .3rem; }

.rent-field-label {
    display: block;
    margin-bottom: .2rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rv-text-muted);
}

.rent-field-hint {
    margin: .25rem 0 0;
    font-size: .8rem;
    color: var(--rv-text-muted);
}

/* The label of a field with its quick buttons or a help link on the right */
.rent-label-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .2rem;
}

.rent-label-row .rent-field-label { margin-bottom: 0; }

.rent-help {
    font-size: .75rem;
    color: var(--rv-text-muted);
    text-decoration: underline dotted;
}

.rent-help:hover { color: var(--rv-accent-text); }

/* Price and comment in one line */
.rent-text-row {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: .5rem;
}

.rent-field-comment textarea {
    min-height: calc(1.5em + .6rem + 2px);
    max-height: 8rem;
    resize: vertical;
}

.rent-time {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.4rem auto 4.4rem;
    align-items: center;
    gap: .3rem;
}

.rent-time-colon { font-weight: 600; color: var(--rv-text-muted); }

.rent-time .form-select { padding-right: 1.6rem; font-variant-numeric: tabular-nums; }

.rent-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.rent-chip {
    padding: .15rem .55rem;
    border: 1px solid var(--rv-border);
    border-radius: 2rem;
    background: var(--rv-card-bg);
    color: var(--rv-text);
    font-size: .78rem;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s;
}

.rent-chip:hover, .rent-chip:focus-visible { border-color: var(--rv-accent); color: var(--rv-accent-text); }
.rent-chip.active { background: var(--rv-accent); border-color: var(--rv-accent); color: #fff; }

/* Length of a rent: the days stepper and the hours list (1-10) in one row; days or hours, not both */
.rent-duration {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
}

.rent-days, .rent-hours {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.rent-hours { margin: 0; }
.rent-hours-select {
    width: 4.75rem;
    padding-top: .2rem;
    padding-bottom: .2rem;
    font-variant-numeric: tabular-nums;
}
.rent-hours-select:disabled { background-color: var(--rv-subtle-bg, #f1f3f5); color: var(--rv-text-muted); }
.rent-hours-hint { font-size: .75rem; color: var(--rv-text-muted); }

.rent-days-label {
    margin-right: .15rem;
    font-size: .78rem;
    color: var(--rv-text-muted);
}

.rent-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--rv-border);
    border-radius: 50%;
    background: var(--rv-card-bg);
    color: var(--rv-text);
    font-size: .75rem;
    cursor: pointer;
}

.rent-step:hover:not(:disabled), .rent-step:focus-visible { border-color: var(--rv-accent); color: var(--rv-accent-text); }
.rent-step:disabled { opacity: .4; cursor: default; }

.rent-days-value {
    min-width: 1.4rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}


/* On a phone the quick buttons are finger-sized: the form scrolls there anyway */
@media (max-width: 575.98px) {
    .rent-chip { min-height: 2rem; padding-top: .3rem; padding-bottom: .3rem; }
    .rent-hours-select { min-height: 2rem; }
    .rent-step { width: 2rem; height: 2rem; }
}

/* .rent-summary (what will be saved) is in common.css: the price list editor uses it too */

.rent-split {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .8rem;
    color: var(--rv-text-muted);
    font-variant-numeric: tabular-nums;
}

.rent-split b { color: var(--rv-text); font-weight: 600; }

.rent-conflicts {
    margin: .3rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .8rem;
}

.rent-conflicts li + li { margin-top: .15rem; }
.rent-conflicts i { color: var(--rv-accent-text); margin-right: .3rem; }

.rent-form .form-error:empty { display: none; }

.rent-form-buttons { display: flex; gap: .5rem; }

.rent-side-hint { margin: .4rem 0 0; font-size: .78rem; color: var(--rv-text-muted); }

.rent-side-empty {
    padding: 3rem 1rem;
    border: 1px dashed var(--rv-border);
    border-radius: var(--rv-radius);
    text-align: center;
    color: var(--rv-text-muted);
}

/* ---------- compact calendar of the rent form ---------- */

.rc-compact { --rc-hour: 1.6rem; --rc-times: 2.9rem; }
.rc-compact.rc-day { --rc-hour: 2.25rem; }
.rc-compact .rc-toolbar { margin-bottom: .4rem; }
.rc-compact .rc-btn { min-width: 2rem; height: 2rem; padding: 0 .6rem; font-size: .8rem; }
.rc-compact .rc-prev, .rc-compact .rc-next { padding: 0; }
.rc-compact .rc-pick { width: 2rem; height: 2rem; }
.rc-compact .rc-title { font-size: .95rem; }
.rc-compact .rc-day-head { flex-direction: row; justify-content: center; align-items: baseline; gap: .3rem; padding: .3rem .25rem; }
.rc-compact .rc-d { font-size: 1rem; }
.rc-compact .rc-day-head.today .rc-d { min-width: 1.6rem; }
.rc-compact .rc-status { margin-top: 0; }
.rc-compact .rc-time span { font-size: .65rem; top: -.45rem; }
.rc-compact .rc-time:first-child span { display: none; }   /* the first hour is the top edge; its label crowded the next one */
.rc-compact .rc-event { padding: .1rem .3rem; font-size: .7rem; line-height: 1.15; border-width: 1px; }
.rc-compact .rc-legend { display: none; }
.rc-compact .rc-strip { margin-bottom: .4rem; }
.rc-compact .rc-chip { padding: .25rem 0; }

/* ---------- «Подобрать время» of the public rent page (rent.html, rent.js) ---------- */

.rent-finder { margin-bottom: 1.25rem; }

.rent-finder-chevron { transition: transform .25s ease; }
.rent-finder-toggle[aria-expanded="true"] .rent-finder-chevron { transform: rotate(180deg); }

/* Slides open and shut: the row grows from 0 to the panel's height */
.rent-finder-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease;
}
.rent-finder.open .rent-finder-panel { grid-template-rows: 1fr; }

.rent-finder-inner {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;   /* folded fields can't be reached with Tab */
    transition: visibility 0s linear .25s;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.rent-finder.open .rent-finder-inner { visibility: visible; transition-delay: 0s; }

/* a margin, not a padding: the folded box (overflow hidden) clips it */
.rent-finder-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: .6rem 1.5rem;
    margin-top: .75rem;
    max-width: 44rem;
}
.rent-finder .rent-summary { max-width: 44rem; }

/* A day and an hour, no minutes: a rent is ordered to the hour */
.rent-finder-start { grid-template-columns: minmax(0, 1fr) 6rem; }

@media (prefers-reduced-motion: reduce) {
    .rent-finder-panel, .rent-finder-inner, .rent-finder-chevron { transition: none; }
}