/*
 * Front-office XLSX calculator (_sections/calculator.latte).
 * Class names follow the BEM convention used elsewhere in this codebase.
 *
 * `[x-cloak]` is an Alpine-wide concern but lives here because the calculator
 * is currently the only Alpine component. Promote to a shared file once
 * other Alpine components appear.
 */

[x-cloak] {
    display: none !important;
}

.xlsx-calculator__title {
    margin-top: 0;
}

.xlsx-calculator__scroll {
    overflow-x: auto;
}

.xlsx-calculator__table {
    border-collapse: collapse;
    width: auto;
    margin-bottom: 0;
}

.xlsx-calculator__table th,
.xlsx-calculator__table td {
    border: 1px solid #d9d9d9;
    padding: 0;
}

.xlsx-calculator__col-header,
.xlsx-calculator__row-header,
.xlsx-calculator__corner {
    background: #f3f4f6;
    color: #6b7280;
    font-weight: 600;
    padding: 4px 8px;
    text-align: center;
}

.xlsx-calculator__cell {
    min-width: 96px;
}

.xlsx-calculator__input {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 4px 6px;
    font-size: 12px;
    color: inherit;
    box-sizing: border-box;
}

.xlsx-calculator__input--formula {
    background: #f9fafb;
    color: #374151;
}

.xlsx-calculator__input--locked {
    background: #f3f4f6;
}

.xlsx-calculator__input:focus {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

.xlsx-calculator__input.uk-disabled {
    cursor: not-allowed;
}

.xlsx-calculator__banner {
    padding: 12px 16px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 4px;
}

.xlsx-calculator__banner p {
    margin: 0 0 8px;
}

.xlsx-calculator__banner .button + .button {
    margin-left: 8px;
}

.xlsx-calculator__status {
    padding-left: 12px;
}