/*
 * RD-2565 — Styles for the shared "selection as a markdown list" tools
 * (js/utils/md-list.js): the copy/paste icon pair and the paste dialog it builds.
 *
 * Loaded globally and inert until the util renders something — every selector is
 * scoped to `.lm-mdlist-*`. Same visual language as the rest of the product
 * (edit-tables.css / dashboard-filters-modal.css): Metronic light surfaces, slate
 * neutrals, celeste accent (--lm-primary-light #419FFF), 12px radii, ultra-diffuse
 * shadows.
 */

.lm-mdlist-tools {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lm-mdlist-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #e0e3e8;
    border-radius: 8px;
    background: #fff;
    color: #8a92a6;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 160ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .lm-mdlist-iconbtn:hover {
        background: #f7f9fc;
        border-color: #cfd5de;
        color: #0f1320;
    }
}

.lm-mdlist-iconbtn:active { transform: scale(0.97); }

.lm-mdlist-iconbtn:focus-visible {
    outline: 2px solid var(--lm-primary-light, #419FFF);
    outline-offset: 1px;
}

/* ─────────────────────────── Paste dialog ─────────────────────────── */

/* Full-viewport overlay so it reads as its own modal, even though the node lives
   inside the owning modal's .modal-content (see md-list.js: focus trap). Above a
   Bootstrap modal (1055) and its stacked children; toasts stay on top at 1080. */
.lm-mdlist-overlay {
    position: fixed;
    inset: 0;
    z-index: 1070;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    pointer-events: auto;
    background: rgba(15, 19, 32, .45);
}

.lm-mdlist-card {
    width: 100%;
    max-width: 560px;
    padding: 20px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(15, 19, 32, .22);
}

.lm-mdlist-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.lm-mdlist-title {
    margin-bottom: 4px;
    color: #0f1320;
    font-size: 14px;
    font-weight: 700;
}

.lm-mdlist-help {
    margin: 0 0 10px;
    max-width: 62ch;
    color: #8a92a6;
    font-size: 12px;
}

.lm-mdlist-input {
    width: 100%;
    min-height: 180px;
    padding: 10px 12px;
    border: 1px solid #e0e3e8;
    border-radius: 8px;
    background: #fff;
    color: #0f1320;
    font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace;
    font-size: 12.5px;
    line-height: 1.6;
    resize: vertical;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.lm-mdlist-input:focus {
    border-color: var(--lm-primary-light, #419FFF);
    box-shadow: 0 0 0 3px #eaf3ff;
    outline: none;
}

.lm-mdlist-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.lm-mdlist-btn {
    height: 34px;
    padding: 0 12px;
    border: 1px solid #e0e3e8;
    border-radius: 8px;
    background: #fff;
    color: #0f1320;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, transform 160ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .lm-mdlist-btn:hover {
        background: #f7f9fc;
        border-color: #cfd5de;
    }
}

.lm-mdlist-btn:active { transform: scale(0.97); }

.lm-mdlist-btn:focus-visible {
    outline: 2px solid var(--lm-primary-light, #419FFF);
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .lm-mdlist-iconbtn,
    .lm-mdlist-btn,
    .lm-mdlist-input {
        transition-duration: 0ms;
    }

    .lm-mdlist-iconbtn:active,
    .lm-mdlist-btn:active {
        transform: none;
    }
}

/* Rule-driven team source (RD-2603): badge on the locked select's label. */
.lm-team-rule-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 6px;
    background: #419FFF;
    color: #fff;
    vertical-align: middle;
}