/*
 * assets/plan_gate.css
 * The paid plan's locked view (components/plan_gate.py) and the nav's lock
 * badge (app.py create_nav_link). Tokens only: every colour is a --vm-*
 * variable from utils_design_tokens.css_variables (design_system.md §2.0).
 * Nothing here matches an element while FREE_TIER_ENFORCED is off.
 */

/* A locked page's body: kept mounted (its callbacks are refused server-side)
 * and taken out of the layout, so the preview stands in its place. */
.plan-gate-body.is-locked {
    display: none;
}

.plan-locked {
    position: relative;
    padding: 24px 0;
}

.plan-locked__card {
    background: var(--vm-surface);
    border-color: var(--vm-border);
    color: var(--vm-text-primary);
    max-width: 480px;
    margin: 0 auto;
}

/* Over a preview the card floats near the top, centred, with the preview
 * greyed beneath it. */
.plan-locked.has-preview .plan-locked__card {
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    width: calc(100% - 32px);
    z-index: 2;
    box-shadow: var(--vm-shadow-elevated);
}

.plan-locked__icon {
    color: var(--vm-text-secondary);
    flex: none;
}

/* Inert: no pointer, no selection, greyed. aria-hidden is set on the element. */
.plan-locked__preview {
    pointer-events: none;
    user-select: none;
    filter: grayscale(1);
    opacity: 0.45;
}

/* The nav's lock badge: a quiet glyph in the row's right section. */
.nav-lock-badge {
    display: inline-flex;
    align-items: center;
    color: var(--vm-text-tertiary);
}

/* The collapsed 70px rail shows icons only, centred (sidebar_collapse.css,
 * same breakpoint): a badge beside the icon would push it off-centre, so the
 * rail drops it. The row's tooltip still names the page. No NavLink had a
 * right section before the badge, so this hides nothing else. */
@media (min-width: 768px) {
    body.sidebar-collapsed .mantine-AppShell-navbar.nav-collapsible .mantine-NavLink-section[data-position="right"] {
        display: none !important;
    }
}

/* Locks inside free pages (freemium slice 6). An AG Grid column whose edit is
 * on the paid plan (Instruments: Sector, Region): the header label and each
 * cell that would otherwise be editable carry the mdi:lock-outline glyph, as
 * a mask filled with a token colour, so no colour lives in the SVG. */
.plan-locked-header .ag-header-cell-text::after,
.ag-cell.plan-locked-cell::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    vertical-align: -1px;
    background-color: var(--vm-text-tertiary);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12,17C10.89,17 10,16.1 10,15C10,13.89 10.89,13 12,13A2,2 0 0,1 14,15A2,2 0 0,1 12,17M18,20V10H6V20H18M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10C4,8.89 4.89,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12,17C10.89,17 10,16.1 10,15C10,13.89 10.89,13 12,13A2,2 0 0,1 14,15A2,2 0 0,1 12,17M18,20V10H6V20H18M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10C4,8.89 4.89,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z'/></svg>") center / contain no-repeat;
}

/* A locked cell reads as read-only: no edit cursor, secondary ink. */
.ag-cell.plan-locked-cell {
    color: var(--vm-text-secondary);
    cursor: default;
}