/* Agent licensing — app-wide link locks.  See docs/AGENT_LICENSING.md
 *
 * Paired with /js/agent-locks.js, which adds `.feature-locked` and appends the
 * `.feature-lock-icon` padlock to any anchor pointing at a route the account
 * has no licence for. Both are loaded from `partials/dashboard-footer.hbs`, so
 * these rules are live on every page — the sidebar's own padlocks live in
 * dashboard-avatar.css and stay there, scoped to `#userMenuOffcanvas`.
 *
 * The treatment matches the sidebar deliberately: DIMMED, not hidden, and still
 * clickable. A locked link is an offer, not a dead end — it goes to the licence
 * page that explains the price. Anything that reads as "broken" here is a bug.
 */

/* ── Generic locked link ──────────────────────────────────────────────────
   Bottom of the specificity pile on purpose: a page that wants its own locked
   treatment (the tiles below, the sidebar) simply says so and wins. */
a.feature-locked {
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

a.feature-locked:hover {
    opacity: 0.85;
}

/* Inline padlock, for links that read as a line of text. Rides just after the
   label rather than at the far edge — a text link has no far edge to line up
   against, unlike the sidebar rows. */
.feature-lock-icon {
    margin-left: 6px;
    font-size: 0.72em;
    opacity: 0.7;
    flex-shrink: 0;
    vertical-align: baseline;
}

/* ── Dashboard quick-link tiles ───────────────────────────────────────────
   A tile is an icon over a name over a state line, so an inline padlock would
   land in the middle of the copy and stretch the row. It goes in a corner
   instead — the one spot every tile has spare — and the whole tile dims.

   The tile's own feature icon carries `.qa-ico` rather than being styled off a
   bare `i` selector, precisely so the padlock this file appends is never caught
   by it and rendered as a second, equally loud icon. Pills are handled
   separately below: they have no corner to put it in. */
/* 0.55 / 0.85 are the sidebar's numbers (dashboard-avatar.css), on purpose: the
   same page must not read as two different degrees of unavailable depending on
   which half of the screen you found it in. */
.quick-action-btn.feature-locked {
    opacity: 0.55;
    filter: saturate(0.7);
}

.quick-action-btn.feature-locked:hover {
    /* The hover LIFT promises the page opens. It doesn't — drop the motion but
       keep the brightening, which still reads as "this is clickable". */
    opacity: 0.85;
    transform: none;
    box-shadow: none;
    background: var(--glass-strong);
    border-color: var(--line-strong);
}

/* TOP-LEFT, not top-right: `.qa-go` (the tile's hover arrow) already owns the
   top-right corner at 11px/11px, and a locked tile still gets one. The two
   would sit on top of each other. */
.quick-action-btn.feature-locked .feature-lock-icon {
    position: absolute;
    top: 7px;
    left: 8px;
    margin: 0;
    font-size: 0.68rem;
    color: var(--ink);
    opacity: 0.85;
    z-index: 2;
}

/* A PILL has no spare corner: it is one short row of icon + label, and an
   absolutely positioned padlock would land on top of the label. It rides
   inline at the end instead, which is where the generic text-link treatment
   above already puts it — this rule only has to out-specify the tile rule. */
.quick-action-btn.qa-pill.feature-locked .feature-lock-icon {
    position: static;
    top: auto;
    left: auto;
    margin-left: 2px;
    font-size: 0.66rem;
}

/* Section price badge — the same pill the sidebar puts on a locked section
   heading (`.sidebar-lock-badge`), for the dashboard's section headers. The
   offer reads once per section instead of once per tile. */
.qa-lock-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink);
    background: var(--scrim-soft);
    border: 1px solid rgba(111, 111, 111, 0.35);
    white-space: nowrap;
    /* The badge is a link to /dashboard/licenses now — a plan name, not a price. */
    text-decoration: none;
}

/* ── Anything laid out as a row (list items, nav links, cards) ─────────────
   A flex row has a far edge, so the padlock lines up on it exactly as it does
   in the sidebar: a straight column of locks reads as a state, a ragged one
   reads as clutter. */
a.feature-locked.list-group-item .feature-lock-icon,
a.feature-locked.nav-link .feature-lock-icon,
a.feature-locked.menu-item .feature-lock-icon {
    margin-left: auto;
    padding-left: 8px;
    font-size: 0.66rem;
}