/*
 * Edit-in-place affordance, admin-wide.
 *
 * A figure you can click and change looks no different from one you cannot
 * unless it says so. Colour alone does not carry it - admin is full of blue
 * text that opens a page or a modal - so every edit-in-place value gets a thin
 * dashed underline that firms up on hover, and the pointer cursor.
 *
 * Loaded for every admin page from mustache/header-redesign.html, so a new
 * inline editor only has to add its display class to the list below rather than
 * restate these rules in a page's own <style> block.
 *
 * Not for: links that navigate or open a modal (.edit-product-click and the
 * rest of the -click family), and not for the dotted, cursor:help underline
 * that marks a value carrying a tooltip - that one means "hover to learn", not
 * "click to change", and the two must stay apart.
 */
.edit-price,
.edit-deposit,
.edit-capacity,
.edit-description,
.edit-option-name,
.edit-price-product,
.edit-min-deposit-product,
.edit-capacity-product,
.edit-time,
.edit-address,
.inline-value-link,
.ss-inline-edit-display,
.cdb-inline-dates-display,
.cdb-inline-date-cell-display {
    cursor: pointer;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.25);
}

.edit-price:hover,
.edit-deposit:hover,
.edit-capacity:hover,
.edit-description:hover,
.edit-option-name:hover,
.edit-price-product:hover,
.edit-min-deposit-product:hover,
.edit-capacity-product:hover,
.edit-time:hover,
.edit-address:hover,
.inline-value-link:hover,
.ss-inline-edit-display:hover,
.cdb-inline-dates-display:hover,
.cdb-inline-date-cell-display:hover,
.edit-price:focus,
.edit-deposit:focus,
.edit-capacity:focus,
.edit-description:focus,
.edit-option-name:focus,
.edit-price-product:focus,
.edit-min-deposit-product:focus,
.edit-capacity-product:focus,
.edit-time:focus,
.edit-address:focus,
.inline-value-link:focus,
.ss-inline-edit-display:focus,
.cdb-inline-dates-display:focus,
.cdb-inline-date-cell-display:focus {
    text-decoration: none;
    border-bottom-color: currentColor;
}

a.inline-value-link {
    text-decoration: none;
}

/* The open editor sits inside the value link, so the dashed mark would run
   under Cancel and Save. It only belongs on the closed value. */
a.quick-view-inline-edit:has(.qv-inline-edit-wrap) {
    border-bottom: none;
}

/*
 * These cells are laid out as blocks in a few tables (the bus rider rows, and
 * anywhere the value sits alone in a <td>). A block-width underline reads as a
 * rule across the cell rather than a mark on the value, so the underline hugs
 * the text instead.
 */
.edit-price,
.edit-deposit,
.edit-capacity,
.edit-description,
.edit-option-name,
.edit-price-product,
.edit-min-deposit-product,
.edit-capacity-product,
.edit-time,
.edit-address,
.inline-value-link,
.ss-inline-edit-display,
.cdb-inline-dates-display,
.cdb-inline-date-cell-display {
    display: inline-block;
}

/* An empty value still needs something to aim at. */
.edit-time:empty,
.edit-address:empty {
    min-width: 3.5rem;
    min-height: 1.15rem;
    vertical-align: middle;
}

/*
 * Date editors (admin/js/inline-dates.js). The layout lives here rather than in
 * each page because five tables share these editors; the copies that used to sit
 * in products.html and season-setup.css had already started to drift.
 */
.cdb-inline-dates-fields {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.cdb-inline-dates-fields .cdb-inline-date,
.cdb-inline-date-cell-fields .cdb-inline-date-cell-input {
    width: 9.5rem;
    padding: 0.1rem 0.35rem;
}

/* A date and a time need the room; 9.5rem clips the time. */
.cdb-inline-dates-fields .cdb-inline-date[type="datetime-local"] {
    width: 13rem;
}

.cdb-inline-date-cell-fields,
.cdb-inline-dates-actions,
.cdb-inline-date-cell-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}