.jump-context-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10999;
    background: transparent;
}

.jump-context-menu {
    position: fixed;
    z-index: 11000;
    /* The placement script derives `max-height` from the measured box, so padding and border must be inside it. */
    box-sizing: border-box;
    min-width: 220px;
    max-width: 280px;
    overflow: hidden;
    transform: translate(4px, 4px);
    border: 1px solid #dbe7f6;
    border-radius: 10px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 42px rgba(10, 26, 58, .18);
    color: #06245d;
}

/*
 * A menu stays invisible until `jumpContextMenu.position` (wwwroot/js/context-menu.js) has measured it and clamped it
 * inside the viewport. Never write `positioned` in the markup: it is the script's way of saying "this is now placed".
 */
.jump-context-menu:not(.positioned) {
    opacity: 0;
    pointer-events: none;
}

/* Set by the script when the menu fits on neither side of the cursor and has to scroll instead of flipping. */
.jump-context-menu.is-scrollable {
    overflow-y: auto;
}

.jump-context-menu-title {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-bottom: 1px solid #e8eff8;
    background: linear-gradient(180deg, #fbfdff, #f4f8ff);
}

.jump-context-menu-title strong {
    max-width: 250px;
    overflow: hidden;
    color: #06245d;
    font-size: 12px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jump-context-menu-title span,
.jump-context-menu-empty {
    color: #557097;
    font-size: 10px;
    font-weight: 750;
}

.jump-context-menu-empty {
    padding: 12px;
}

.jump-context-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-bottom: 1px solid #edf3fb;
    background: transparent;
    padding: 9px 12px;
    color: #06245d;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
}

.jump-context-menu-item:last-child {
    border-bottom: 0;
}

.jump-context-menu-item:hover,
.jump-context-menu-item:focus-visible,
.jump-context-menu-item.is-active {
    background: #eef6ff;
    color: #0057b8;
    outline: 0;
}

.jump-context-menu-item:disabled {
    color: #91a2bd;
    cursor: not-allowed;
}

.jump-context-menu-item small {
    min-width: 24px;
    padding: 2px 5px;
    border-radius: 999px;
    background: #ecfff5;
    color: #007a3d;
    font-size: 9px;
    font-weight: 900;
    text-align: center;
}

.jump-context-menu-dot {
    width: 8px;
    height: 8px;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 999px;
    flex: 0 0 auto;
}

/*
 * Conditional formatting dialog: Pages/aTab/ContextMenu_Jump (DialogCondition,
 * ComponenteCustomRule, FormatOptions).
 *
 * These rules used to live in inline <style> blocks inside the first two
 * components. That was not only a spec violation: the block in
 * ComponenteCustomRule declared a bare
 * `.form-select, .form-control { min-width: 150px; border-radius: 6px }`, so
 * while the editor was mounted every input in the app grew a 150px floor and a
 * 6px radius instead of Bootstrap's 4px (measured). Every class here is
 * prefixed `jump-format-rule-` so nothing can leak again.
 *
 * _Host.cshtml links bootstrap4.css and the DevExpress theme AFTER this file,
 * so anything that has to beat `.btn`, `.dxbl-btn` or `.form-control` names
 * that class in the selector; a single-class rule here loses to them.
 */

.jump-format-rule-container {
    max-width: 100%;
    padding: 16px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
}

.jump-format-rule-title {
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: bold;
}

.jump-format-rule-section {
    margin-bottom: 20px;
    padding: 12px;
    border: 1px solid #c0c0c0;
    background-color: #fff;
}

.jump-format-rule-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
}

.jump-format-rule-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

/*
 * `rule-combobox` was only ever a width clamp, and the app has no shared class
 * for a combobox: 25 of the 54 `DxComboBox` uses with `CssClass` pass `w-100`
 * for the same reason. It stays feature-local instead of becoming a standard.
 */
.jump-format-rule-combobox {
    min-width: 140px;
    max-width: 180px;
}

.jump-format-rule-combobox-wide {
    width: 100%;
}

.jump-format-rule-input {
    min-width: 160px;
}

.jump-format-rule-textbox {
    width: 90px;
    font-size: 0.85rem;
}

.jump-format-rule-separator {
    margin-top: 1%;
    padding: 0 .25rem;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Was a bare `.is-invalid`, which redefines the Bootstrap validation class app-wide. */
.jump-format-rule-invalid {
    border: 1px solid red !important;
    background-color: #ffe6e6 !important;
}

/* The formula editor (ComponenteCustomRule); `scroll-y` is folded in here. */
.jump-format-rule-editor {
    max-width: 100%;
    max-height: 500px;
    overflow-y: auto;
    padding: 20px;
    border-radius: 12px;
    background-color: #f5f7fa;
    font-family: 'Segoe UI', sans-serif;
}

.jump-format-rule-block {
    margin-bottom: 20px;
    padding: 16px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.jump-format-rule-block:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/*
 * The editor's own row spacing. It is not `jump-format-rule-row`: the two
 * `.rule-row` declarations differed (12/12 here, 10/8 in DialogCondition) and
 * whichever `<style>` block was mounted last decided both.
 */
.jump-format-rule-block-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

/* What the old global `.form-select, .form-control` rule was really for. */
.jump-format-rule-editor .form-control,
.form-control.jump-format-rule-condition-text {
    min-width: 150px;
    border-radius: 6px;
}

.jump-format-rule-editor .jump-format-rule-combobox-small {
    width: 120px;
    min-width: unset;
}

.btn.jump-format-rule-add-rule-button,
.btn.jump-format-rule-add-block-button {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
}

.btn.jump-format-rule-add-rule-button {
    border: 1px solid #c4dcf5;
    background-color: #eef6ff;
    color: #2563eb;
}

.btn.jump-format-rule-add-rule-button:hover {
    background-color: #dbeafe;
}

.btn.jump-format-rule-add-block-button {
    border: 1px solid #34d399;
    background-color: #d1fae5;
    color: #065f46;
}

.btn.jump-format-rule-add-block-button:hover {
    background-color: #a7f3d0;
}

.jump-format-rule-remove-block-button {
    padding: 6px 12px;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    background-color: #fee2e2;
    color: #b91c1c;
    font-size: 0.9rem;
}

.jump-format-rule-remove-button {
    border: none;
    background-color: transparent;
    color: #ef4444;
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s;
}

.jump-format-rule-remove-button:hover {
    color: #b91c1c;
}

/* `.dxbl-btn` is what DxButton renders, and its theme is linked after this file. */
.dxbl-btn.jump-format-rule-apply-button,
.btn.jump-format-rule-apply-button {
    padding: 6px 20px;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    font-weight: bold;
}

/*
 * `.preview-box`, `.preview-text` and `.preview-icon` were written inside the
 * `.btn-aplicar` block with no closing brace, so the browser parsed them as
 * `.btn-aplicar & .preview-box` and friends. No preview element is ever a
 * descendant of the apply button, so all three computed to nothing: the swatch
 * rendered as a plain full-width div with no frame.
 *
 * The frame and the text spacing are restored flat. There is deliberately no
 * `.jump-format-rule-preview-icon` rule: the markup nests the sample text
 * inside that span, so the original 18x18 circle would shrink the fill colour
 * from a highlight behind the whole sample to an 18px dot, i.e. it would break
 * the very thing the Fill tab is previewing (measured).
 */
.jump-format-rule-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 300px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.jump-format-rule-preview-text {
    margin-right: 8px;
}

/* ==========================================================================
   Grid context menu — conditional formatting popup and icon picker.
   Extracted from the inline <style> blocks of
   Pages/aTab/ContextMenu_Jump/GridContextMenuContainer.razor and IconPicker.razor.

   `_Host.cshtml` links this file BEFORE bootstrap4.css and the DevExpress theme,
   so a rule that has to win against `.form-control`, `.dxbl-btn`,
   `.dxbl-popup-header` or the theme's context-menu icon rules must name that
   class in the selector (or repeat its own) to buy the extra specificity.
   ========================================================================== */

/* --- Context menu items (classes are assigned in GridContextMenuHelper.cs) - */

/* The doubled class beats the DevExpress theme's single-class icon rules. */
.jump-grid-context-menu-icon.jump-grid-context-menu-icon {
    display: inline-flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #f2f7fd;
    color: #004987;
    font-size: 14px;
    line-height: 1;
}

.jump-grid-context-menu-selected {
    background: #eaf5ff !important;
    color: #00366a !important;
    font-weight: 800 !important;
}

.jump-grid-context-menu-selected .jump-grid-context-menu-icon.jump-grid-context-menu-icon {
    background: #004987;
    color: #ffffff;
}

/* --- Conditional formatting popup shell ---------------------------------- */

.jump-grid-context-popup .dxbl-popup-header {
    min-height: 62px;
    padding: 12px 16px;
    border-bottom: 1px solid #e5eef9;
    background: #fbfdff;
}

.jump-grid-context-popup .dxbl-popup-body {
    padding: 0;
    background: #ffffff;
}

.jump-grid-conditional-icon::before {
    content: attr(data-jump-conditional-icon);
    display: inline-block;
    margin-right: 0.4rem;
    color: var(--jump-conditional-icon-color, #244461);
    font-weight: 900;
    line-height: 1;
}

.jump-grid-context-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.jump-grid-context-header-icon {
    display: inline-flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #004987;
    color: #ffffff;
    font-size: 16px;
    line-height: 1;
}

.jump-grid-context-header-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
    color: #14385f;
}

.jump-grid-context-kicker {
    color: #0f7d68;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.jump-grid-context-header-copy strong {
    overflow: hidden;
    color: #00366a;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jump-grid-context-header-copy span:last-child:not(.jump-grid-context-kicker) {
    overflow: hidden;
    color: #5c728e;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jump-grid-context-body {
    max-height: calc(88vh / var(--jump-zoom, 1) - 72px);
    padding: 14px;
    overflow: auto;
    background: #ffffff;
}

/* --- Filter / formatting form ------------------------------------------- */

.jump-grid-context-panel {
    display: grid;
    gap: 12px;
    width: 100%;
}

/* A <label>, so Bootstrap's `margin-bottom` has to be cleared. */
.jump-grid-context-panel-title {
    display: flex;
    align-items: center;
    min-height: 34px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #dbe8f6;
    border-radius: 8px;
    background: #f8fbff;
    color: #14385f;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

.jump-grid-context-field {
    display: grid;
    gap: 6px;
}

.jump-grid-context-field-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.jump-grid-context-field.text-end {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}

.jump-grid-context-body .form-control,
.jump-grid-context-body .jump-grid-context-input,
.jump-grid-context-body .dxbl-text-edit {
    width: 100%;
    min-height: 34px;
    border-radius: 8px !important;
}

.jump-grid-context-body select.form-control {
    min-height: 34px;
    padding: 5px 32px 5px 10px;
    border: 1px solid #cfe0f2;
    background-color: #ffffff;
    color: #14385f;
    font-size: 13px;
    font-weight: 700;
}

.jump-grid-context-body select.form-control:focus {
    border-color: #8db8e8;
    box-shadow: 0 0 0 3px rgba(0, 87, 184, .12);
    outline: 0;
}

/*
 * The markup also carries Bootstrap's `d-flex`, whose `!important` wins the
 * `display` below; what this class really contributes is the boxed look.
 */
.jump-grid-context-check {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid #dbe8f6;
    border-radius: 8px;
    background: #fbfdff;
}

.jump-grid-context-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #004987;
    cursor: pointer;
}

.jump-grid-context-check label {
    margin: 0;
    color: #14385f;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    user-select: none;
}

/* `.dxbl-btn` is named so this beats the DevExpress theme linked after us. */
.jump-grid-context-btn.dxbl-btn {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #004987 !important;
    border-radius: 8px !important;
    background: #004987 !important;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(0, 73, 135, .16);
}

.jump-grid-context-btn.dxbl-btn:hover {
    border-color: #00366a !important;
    background: #00366a !important;
    color: #ffffff !important;
}

@media (max-width: 760px) {
    .jump-grid-context-field-pair {
        grid-template-columns: 1fr;
    }
}

/* --- Icon picker (IconPicker.razor) -------------------------------------- */

.jump-grid-context-icon-picker {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.jump-grid-context-icon-group {
    padding-top: 10px;
    border-top: 1px solid #ccc;
}

.jump-grid-context-icon-group-title {
    margin-bottom: 5px;
    font-weight: bold;
}

.jump-grid-context-icon-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.jump-grid-context-icon-item {
    padding: 4px;
    border: 1px solid transparent;
    cursor: pointer;
}

.jump-grid-context-icon-item:hover {
    border-color: #007bff;
    border-radius: 4px;
}

.jump-grid-context-icon-item.is-selected {
    border: 2px solid #007bff;
    border-radius: 4px;
    background-color: #e6f2ff;
}