/* PRAGMA actions. Public API: .pragma-action + data-action-variant="primary|secondary|tertiary",
   data-action-size="sm", .pragma-action-icon, aria-busy, disabled / aria-disabled.
   Legacy aliases also cover controls inserted by the dashboard's render functions.
   The layer's important declarations intentionally beat older inline and ID-based
   visual overrides. Layout visibility and business state remain owned by each view. */
@layer pragma-actions {
  :root {
    --action-height: 32px;
    --action-height-sm: 28px;
    --action-radius: 6px;
    --action-surface: #171c25;
    --action-hover: #222a35;
    --action-border: #343d49;
    --action-text: #e4e9ef;
    --action-muted: #b6c0cc;
    --action-green: #299e69;
    --action-green-hover: #32ad77;
    --action-green-text: #06170f;
    --action-focus: #77cfa4;
  }

  /* All native actions plus the existing links styled as buttons. Data rows
     retain their own multi-line geometry below. */
  :where(button, input[type="submit"], input[type="button"], .pragma-action,
    .auth-link-btn, .brand-discord-link, .brand-subscribe-link, a.tab-btn,
    .plan-ai-link, a.plan-ai-button, a.stats-btn, a.nl-btn, a.fm-btn, a.sc-btn,
    .cot-home, .cot-link-button, .earnings-link, .earnings-sector-back,
    .pragma-market-news-button, .pragma-market-news-link, .scanner-tv,
    .scanner-topbar nav a, .liquidation-heatmap-source) {
    --action-bg: var(--action-surface);
    --action-fg: var(--action-text);
    --action-line: var(--action-border);
    --action-over: var(--action-hover);
    --action-over-line: #526071;
    --action-h: var(--action-height);
    box-sizing: border-box !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: center;
    vertical-align: middle !important;
    gap: 6px !important;
    min-width: 0 !important;
    max-width: 100%;
    height: var(--action-h) !important;
    min-height: var(--action-h) !important;
    padding: 0 11px !important;
    margin-right: 0 !important;
    border: 1px solid var(--action-line) !important;
    border-radius: var(--action-radius) !important;
    background: var(--action-bg) !important;
    color: var(--action-fg) !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease !important;
  }

  /* 1 — One deliberate accent for execution, save and confirmation. */
  :where([data-action-variant="primary"], .pragma-action--primary,
    .auth-btn, .plan-ai-button.primary, .nl-btn.primary, .fm-btn.primary,
    .sc-btn.primary, .scanner-start, .scanner-alert-primary, #rewardSpinLaunchBtn) {
    --action-bg: var(--action-green);
    --action-fg: var(--action-green-text);
    --action-line: var(--action-green);
    --action-over: var(--action-green-hover);
    --action-over-line: var(--action-green-hover);
    font-weight: 700 !important;
  }

  /* 2 — Secondary is the default; it can also be requested explicitly. */
  :where([data-action-variant="secondary"], .pragma-action--secondary) {
    --action-bg: var(--action-surface);
    --action-fg: var(--action-text);
    --action-line: var(--action-border);
    --action-over: var(--action-hover);
    --action-over-line: #526071;
  }

  /* 3 — Inspection, copying, disclosure and external destinations. */
  :where([data-action-variant="tertiary"], .pragma-action--tertiary,
    .scanner-details, .scanner-tv, #scanner-clear-logs, .plan-ai-remove, .fdopt-close, .remarks-close,
    #planAiCopy, #copy-temporary-password, #macroSummaryCopy,
    .fdv5-copy, .ai-export-copy, .bonus-toggle, .bonus-catalysts-more,
    .bonus-hide-plan-btn, #bonusLoadHistoryBtn, #bonusPlanPanelToggle,
    .cot-link-button, .pragma-market-news-link, .liquidation-heatmap-source, [data-member-activity-user],
    #activityMore, #memberDetailClose, .admin-manage-menu button) {
    --action-bg: transparent;
    --action-fg: var(--action-muted);
    --action-line: transparent;
    --action-over: #1c242d;
    --action-over-line: transparent;
    padding-inline: 7px !important;
    font-weight: 600 !important;
  }

  /* Destructive actions keep the secondary geometry with a restrained warning. */
  :where(button.danger, a.danger, .remark-delete, .auth-btn[value="delete"]) {
    --action-bg: #241b20;
    --action-fg: #e0adb6;
    --action-line: #65424a;
    --action-over: #332229;
    --action-over-line: #89606a;
  }

  /* Navigation and filters use a quiet selected state, below the primary CTA. */
  :where(.pragma-nav-category, .tab-btn, .range-btn, .cot-metric-button,
    .cot-nav-button, .pragma-market-news-filter) {
    --action-bg: transparent;
    --action-line: transparent;
    --action-fg: var(--action-muted);
  }
  :where(button.active, button.is-active, button.selected, button[aria-pressed="true"],
    button[aria-selected="true"], .tab-btn[aria-current="page"],
    .pragma-market-news-filter-active, .cot-nav-button.is-active) {
    --action-bg: #172c24;
    --action-fg: #9ad9b9;
    --action-line: #39624e;
    --action-over: #203b2f;
    --action-over-line: #57846b;
  }
  :where(.pragma-nav-subscriber-icon) { color: inherit !important; text-shadow: none !important; }
  :where(.pragma-nav-subscriber)::before { background: var(--action-border) !important; }

  /* Navigation identity: standard tabs stay neutral; only member content and
     Scanner carry a section color. Keep these variables in the action layer. */
  :where(.pragma-dashboard-nav .pragma-nav-category, .pragma-dashboard-nav .tab-btn) {
    --action-bg: #121820;
    --action-fg: #bec8d3;
    --action-line: transparent;
    --action-over: #202a35;
    --action-over-line: #3a4654;
  }
  :where(.pragma-dashboard-nav .active, .pragma-dashboard-nav [aria-pressed="true"],
    .pragma-dashboard-nav [aria-current="page"]) {
    --action-bg: #26323e;
    --action-fg: #eef3f7;
    --action-line: #556575;
    --action-over: #303e4c;
    --action-over-line: #718393;
  }
  :where(.pragma-nav-subscriber) {
    --action-bg: #13222d;
    --action-fg: #9bc9da;
    --action-line: #2d5362;
    --action-over: #1a3441;
    --action-over-line: #59889a;
  }
  :where(.pragma-nav-scanner) {
    --action-bg: #14271f;
    --action-fg: #9bd4b4;
    --action-line: #315b46;
    --action-over: #1d362a;
    --action-over-line: #5b896f;
  }
  :where(.pragma-nav-subscriber.active, .pragma-nav-subscriber[aria-pressed="true"],
    .pragma-nav-subscriber[aria-current="page"]) {
    --action-bg: #1c3c4b;
    --action-fg: #c4e5f0;
    --action-line: #608d9f;
  }
  :where(.pragma-nav-scanner.active, .pragma-nav-scanner[aria-pressed="true"],
    .pragma-nav-scanner[aria-current="page"]) {
    --action-bg: #204332;
    --action-fg: #c2e8d3;
    --action-line: #669b7e;
  }
  :where(.pragma-nav-subscriber)::before { content: none !important; }

  /* Dense chart tools and inline actions share the 28px size. */
  :where([data-action-size="sm"], .scanner-row-actions > *, .bonus-chart-tf,
    .options-map-tf-btn, .etf-btn, .dex-history-range-btn, .bias-24h-range-btn,
    .bonus-chart-toolbar button, .bonus-archive-tabs button, .cot-legend-button,
    .onchain-controls button, .inflation-controls button, .flow-controls button,
    .earnings-sector-companies-sort-button) {
    --action-h: var(--action-height-sm);
    padding-inline: 8px !important;
  }

  /* Icon-only controls: square, consistent hit area, no circular chrome. */
  :where(.pragma-action-icon, .scanner-dialog-close, .header-notice-close,
    .bonus-fullscreen-close, .dex-gex-multi-close, .earnings-dialog-close,
    .earnings-sector-companies-close, .eco-info-modal-close, .event-info-dialog-close,
    .fd-support-close, .inflation-modal-close, .onchain-modal-close,
    .reward-modal-head button) {
    --action-bg: transparent;
    --action-line: transparent;
    --action-fg: var(--action-muted);
    --action-h: var(--action-height-sm);
    width: var(--action-h) !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    font-size: 18px !important;
  }
  :where(.bonus-help, .onchain-info-btn, .options-expiry-help, .inflation-help-btn,
    .eco-info-btn, .event-info-btn, .pragma-market-news-help-button, .earnings-sector-help-button) {
    --action-h: 24px;
    --action-bg: transparent;
    --action-line: transparent;
    --action-fg: var(--action-muted);
    width: var(--action-h) !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }
  :where(button, .pragma-action, .scanner-tv) > :where(svg, .action-icon) {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    color: inherit !important;
  }

  /* The data in clickable rows still needs space and its semantic colors. */
  :where(.earnings-company-row, .bonus-archive-plan-row, .max-pain-shortcut) {
    height: auto !important;
    min-height: 36px !important;
    padding: 8px 10px !important;
    white-space: normal !important;
    text-align: left !important;
  }

  /* State rules come after tiers. Disabled and loading never brighten on hover. */
  :where(button, input[type="submit"], input[type="button"], a:is(.pragma-action, .auth-link-btn, .brand-discord-link, .brand-subscribe-link,
    .tab-btn, .plan-ai-link, .plan-ai-button, .stats-btn, .nl-btn, .fm-btn, .sc-btn,
    .cot-home, .cot-link-button, .earnings-link, .earnings-sector-back,
    .pragma-market-news-button, .pragma-market-news-link, .scanner-tv,
    .liquidation-heatmap-source), .scanner-topbar nav a, .pragma-action):hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    background: var(--action-over) !important;
    border-color: var(--action-over-line) !important;
    color: var(--action-fg) !important;
    box-shadow: none !important;
    transform: none !important;
  }
  :where(button, input[type="submit"], input[type="button"], a:is(.pragma-action, .auth-link-btn, .brand-discord-link, .brand-subscribe-link,
    .tab-btn, .plan-ai-link, .plan-ai-button, .stats-btn, .nl-btn, .fm-btn, .sc-btn,
    .cot-home, .cot-link-button, .earnings-link, .earnings-sector-back,
    .pragma-market-news-button, .pragma-market-news-link, .scanner-tv,
    .liquidation-heatmap-source), .scanner-topbar nav a, .pragma-action):active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    box-shadow: inset 0 1px 2px #0003 !important;
  }
  :where(button, input[type="submit"], input[type="button"], a:is(.pragma-action, .auth-link-btn, .brand-discord-link, .brand-subscribe-link,
    .tab-btn, .plan-ai-link, .plan-ai-button, .stats-btn, .nl-btn, .fm-btn, .sc-btn,
    .cot-home, .cot-link-button, .earnings-link, .earnings-sector-back,
    .pragma-market-news-button, .pragma-market-news-link, .scanner-tv,
    .liquidation-heatmap-source), .scanner-topbar nav a, .pragma-action):focus-visible {
    outline: 2px solid var(--action-focus) !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
  }
  :where(button:disabled, input:disabled, [aria-disabled="true"]) {
    --action-bg: #141921;
    --action-fg: #788391;
    --action-line: #2a313b;
    opacity: 1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
  }
  :where(button, .pragma-action)[aria-busy="true"] {
    --action-bg: #1a2c24;
    --action-fg: #b1cbbc;
    --action-line: #385345;
    position: relative;
    padding-inline-end: 31px !important;
    cursor: wait !important;
  }
  :where(button, .pragma-action)[aria-busy="true"]::after {
    content: "";
    position: absolute;
    right: 10px;
    top: calc(50% - 6px);
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border: 1.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: pragma-action-spin .8s linear infinite;
  }
  @keyframes pragma-action-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    :where(button, a, .pragma-action) { transition: none !important; }
    :where(button, .pragma-action)[aria-busy="true"]::after { animation: none; }
  }

  /* Group spacing replaces per-button margins; widths stay content-driven. */
  :where(.pragma-action-group, .header-action-buttons, .bonus-actions, .bonus-chart-toolbar,
    .bonus-archive-tabs, .plan-ai-actions, .plan-ai-nav, .macro-summary-actions,
    .reward-modal-actions, .scanner-row-actions, .scanner-alert-actions,
    .nl-actions, .fm-actions, .sc-actions, .stats-actions, .flow-controls,
    .onchain-controls, .inflation-controls, .options-map-toolbar) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px !important;
  }
  :where(.scanner-start) { align-self: center; margin: 16px; }
  :where(#scanner-start) { min-width: 164px !important; }
  :where(#planAiSubmit) { min-width: 150px !important; }
  :where(#fdSupportBtn svg path) { fill: currentColor !important; }
  :where(.scanner-timeframes input:checked + span) {
    background: #172c24 !important;
    border-color: #39624e !important;
    color: #9ad9b9 !important;
  }
  :where(.scanner-timeframes label:hover span) { border-color: #57846b !important; }
  :where(.scanner-timeframes span) {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 8px !important;
    border-radius: var(--action-radius) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
  }
  .scanner-timeframes input:focus-visible + span {
    outline: 2px solid var(--action-focus);
    outline-offset: 3px;
  }
  :where(button[hidden], .pragma-action[hidden]) { display: none !important; }
}