/* ===========================================
   TOPBAR-ACTIONS.CSS — Prescribing action cluster (≥900px)
   ===========================================

   Slot + button styles for Copy / Preview / Travel letter
   in the topbar right slot on DMARD, Biologics, Prednisolone,
   Monitoring. Mounted by js/ui/topbar-actions.js.

   Order in markup is Copy then Preview (Copy's "copied" label swap
   expands rightward into Preview, not into the theme toggle).
   =========================================== */

@media (min-width: 900px) {
    .topbar-prescribing-actions {
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    .topbar-prescribing-actions[hidden] {
        display: none;
    }

    /* Secondary (default) — outlined, matches .topbar-score-clear DNA.
       Light mode uses a white chip fill + darker edge so the button lifts off
       the #F0F2F5 topbar bg; dark mode reverts to transparent (see override
       below) since the default border already reads clearly there. */
    .topbar-action-btn {
        appearance: none;
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        height: 32px;
        padding: 0 0.75rem;
        border-radius: var(--radius-md);
        background: var(--bg-secondary);
        border: 1px solid #D1D5DB;
        color: var(--text-primary);
        font-family: var(--font-sans);
        font-size: 0.8125rem;
        font-weight: var(--font-semibold);
        line-height: 1;
        cursor: pointer;
        white-space: nowrap;
        transform-origin: center;
        transition:
            background var(--transition-fast),
            border-color var(--transition-fast),
            color var(--transition-fast),
            opacity 220ms ease,
            transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Dark mode: keep the pre-existing transparent chip — the default
       --border-color (#3D454C) already has enough contrast on #1A1F23.
       Excludes --primary so the Preview button keeps its solid themed fill. */
    [data-theme="dark"] .topbar-action-btn:not(.topbar-action-btn--primary) {
        background: transparent;
        border-color: var(--border-color);
    }

    /* Pre-QR state: buttons fade out and drop slightly, non-interactive.
       The slot still reserves layout space so revealing doesn't shift the topbar.
       Reveal is staggered per-button via --topbar-action-index (set in JS).
       Transition is narrowed to opacity/transform only — when a module's
       --active-color drops on reset (e.g. drug deselected → NHS blue fallback),
       the background swap happens instantly, hidden by the fade-out. */
    .topbar-prescribing-actions[data-qr-ready="false"] .topbar-action-btn {
        opacity: 0;
        transform: translateY(-4px) scale(0.94);
        pointer-events: none;
        transition:
            opacity 220ms ease,
            transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .topbar-prescribing-actions[data-qr-ready="true"] .topbar-action-btn {
        transition-delay: calc(var(--topbar-action-index, 0) * 40ms);
    }

    .topbar-action-btn[disabled] {
        cursor: default;
    }

    .topbar-action-btn[hidden] {
        display: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .topbar-action-btn {
            transition: opacity 120ms linear;
        }
        .topbar-prescribing-actions[data-qr-ready="false"] .topbar-action-btn {
            transform: none;
        }
        .topbar-prescribing-actions[data-qr-ready="true"] .topbar-action-btn {
            transition-delay: 0ms;
        }
    }

    @media (hover: hover) {
        .topbar-action-btn:hover {
            border-color: var(--theme-primary);
            color: var(--theme-primary);
            background: var(--bg-surface, var(--bg-primary));
        }
    }

    .hover-capable .topbar-action-btn:hover {
        border-color: var(--theme-primary);
        color: var(--theme-primary);
        background: var(--bg-surface, var(--bg-primary));
    }

    .topbar-action-btn:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring-nhs-green);
    }

    .topbar-action-btn svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    /* Primary — solid themed block with white icon + label (matches .topbar-score-copy DNA).
       Picks up drug colour on DMARD/Biologics via --active-color, falls back to the
       module theme on Prednisolone/Monitoring. */
    .topbar-action-btn--primary {
        background: var(--active-color, var(--theme-primary));
        border-color: var(--active-color, var(--theme-primary));
        color: var(--text-on-theme);
    }

    @media (hover: hover) {
        .topbar-action-btn--primary:hover {
            background: var(--active-dark, var(--theme-dark));
            border-color: var(--active-dark, var(--theme-dark));
            color: var(--text-on-theme);
        }
    }

    .hover-capable .topbar-action-btn--primary:hover {
        background: var(--active-dark, var(--theme-dark));
        border-color: var(--active-dark, var(--theme-dark));
        color: var(--text-on-theme);
    }

    /* Hidden on patient mode (topbar itself already hides). */
    body.patient-mode .topbar-prescribing-actions {
        display: none;
    }
}