/* Shared assumption-table controls.
 *
 * The "+ Add" purple button, the inline add-form (grey box of small
 * labelled fields) and the round red delete button — shared between the
 * LNG Outages assumptions table (Django template) and the Distributions
 * page's ranges table (Dash app). Loaded by base.html for Django pages and
 * by every Dash app via dash_registry.get_external_styles, so both render
 * identically.
 */

/* Purple action button. Single source of truth: the filter bar's inline
   shared stylesheet no longer defines it, and Dash apps only get it from
   here. Uses the site theme variables from styles.css. */
.btn-purple-sm {
    background-color: var(--button-color);
    color: var(--button-text-color);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    transition: all 0.3s ease;
}

.btn-purple-sm:hover {
    background-color: var(--button-hover-color);
    border-color: rgba(0, 0, 0, 0.2);
    color: var(--button-text-color);
}

/* Inline add-form: hidden until the "+ Add" button toggles it open. */
.add-outage-form {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px 12px;
    margin-top: 8px;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}
.add-outage-form .form-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    line-height: 28px;
}
.add-outage-form label {
    font-size: 0.8em;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    font-weight: 500;
    line-height: 28px;
    vertical-align: middle;
}
.add-outage-form input,
.add-outage-form select {
    font-size: 0.8em;
    padding: 0 6px;
    height: 28px !important;
    line-height: 26px;
    margin: 0;
    box-sizing: border-box;
    vertical-align: middle;
}
.add-outage-form .btn {
    height: 28px !important;
    line-height: 1;
    padding: 3px 10px;
    margin: 0;
    box-sizing: border-box;
}

/* Layout of a table cell hosting the delete button: no baseline leading or
   descender space, so the row height is unaffected. */
td.delete-outage-cell {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 2px 4px !important;
    line-height: 0 !important;
    white-space: nowrap;
}
td.delete-outage-cell .tt {
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
}

/* Delete button: red circle with a minus sign.
   Structured so the button's box height exactly equals the circle — no
   baseline leading, no descender space — so the row height is unaffected. */
.delete-outage-btn {
    all: unset;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #dc3545;
    vertical-align: middle;
    cursor: pointer;
    line-height: 0;
    font-size: 0;
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.delete-outage-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 2px;
    background-color: #fff;
    border-radius: 1px;
    transform: translate(-50%, -50%);
}
.delete-outage-btn:hover {
    background-color: #bb2d3b;
    transform: scale(1.1);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}
.delete-outage-btn:active {
    transform: scale(0.95);
}
.delete-outage-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Delete button inside a Dash DataTable markdown cell: the same
   .delete-outage-btn markup the outage table renders, so it is identical
   by construction. The markdown wrapper's paragraph margins are killed and
   everything centred so the 18px circle sits in the middle of the cell;
   the button itself ignores pointer events (a capture-phase listener on
   the cell drives the delete), with hover feedback keyed off the cell. */
.dash-cell[data-dash-column='delete'] {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 2px 4px !important;
}
.dash-cell[data-dash-column='delete'] .dash-cell-value {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.dash-cell[data-dash-column='delete'] .dash-cell-value p {
    margin: 0 !important;
    line-height: 0 !important;
}
.dash-cell[data-dash-column='delete'] .delete-outage-btn {
    pointer-events: none;
}
.dash-cell[data-dash-column='delete']:hover .delete-outage-btn {
    background-color: #bb2d3b;
    transform: scale(1.1);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}
.dash-cell[data-dash-column='delete']:has(.delete-outage-btn) {
    cursor: pointer !important;
}