/* Action buttons (Oct 2026 button audit, agreed with Adam)
 *
 * One look for every main and secondary action button, in two sizes:
 *   main      = green pearl (a darker green pearl in dark theme)
 *   secondary = cream pearl, like the Print/Share pills (dark pearl in dark theme)
 *   standard  = 11px 20px, 1rem, 600, 12px corners (43px tall)
 *   small     = inline/toolbar/card buttons, modelled on the messages "Add link"
 * Hover/press: the same gentle lift for all, no colour change.
 *
 * Loaded LAST on every page, and everything is !important, so the many older
 * per-page button rules (and their !important ones) can't override it. Those
 * older rules still set layout (margins, display); only the look lives here.
 * Not covered on purpose: icon buttons, filters/tabs, player controls, the
 * purple Inject/Add Backing, Share/Print pills, See Pricing gold, the limit
 * pop-up's pricing buttons (Adam's 2 Aug look), cookie/install banners.
 */

/* ---- sizes ------------------------------------------------------------- */
.btn-primary:not(.btn-icon):not(#limitReachedModal *), .btn-secondary, .shared-cta-btn,
.btn-send-message, .btn-send, .btn-cancel, .btn-msg-reply, .request-notification-btn, .btn-become-contributor {
    padding: 11px 20px !important;
    line-height: 1.2 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    min-height: 0 !important;
}

.btn-msg-addlink, .btn-small.btn-secondary, .create-set-btn, .my-sets-btn, .btn-new-message,
.btn-clear-all-messages, .trending-view-btn, .view-btn, .add-chords-btn {
    padding: 4px 12px !important;
    line-height: 1.3 !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    min-height: 0 !important;
}

.btn-clear-all-messages { text-decoration: none !important; }

/* The tune page's add-chords panel: its button is the standard size */
.add-progression-hero .btn-large {
    padding: 11px 20px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
}

/* ---- light theme ------------------------------------------------------- */
.btn-primary:not(.btn-icon):not(#limitReachedModal *), .shared-cta-btn, .btn-send-message, .btn-send,
.btn-msg-reply, .trending-view-btn, .view-btn, .pricing-cta-filled, .request-notification-btn,
.btn-become-contributor, .add-chords-btn {
    background: linear-gradient(180deg, #3fb872 0%, #239a55 50%, #1d6b3e 100%) !important;
    color: #F4FAF5 !important;
    border: 1.5px solid #1d6b3e !important; /* = the gradient bottom, so no visible rim */
    box-shadow: 0 3px 8px rgba(30, 100, 60, 0.28), inset 0 -3px 6px rgba(10, 50, 25, 0.25),
        inset 0 2px 3px rgba(220, 255, 230, 0.45) !important;
}

/* That panel is green in light theme, so its button is the cream pearl there */
.btn-secondary, .btn-cancel, .btn-msg-addlink, .btn-small.btn-secondary, .btn-new-message,
.btn-clear-all-messages, .pp-free-card .pricing-cta-outline,
body:not(.dark-theme) .add-progression-hero .btn-large.btn-primary:not(#limitReachedModal *) {
    background: linear-gradient(180deg, #fffcf3 0%, #f8f1e0 50%, #e6dcc0 100%) !important;
    color: #2a5434 !important;
    border: 1.5px solid rgba(42, 84, 52, 0.4) !important; /* soft, so cream doesn't vanish on white */
    box-shadow: 0 3px 8px rgba(42, 84, 52, 0.2), inset 0 -3px 6px rgba(120, 100, 50, 0.16),
        inset 0 2px 3px rgba(255, 253, 245, 0.95) !important;
}

.pricing-cta-filled, .pp-free-card .pricing-cta-outline {
    border-radius: 12px !important;
    font-weight: 600 !important;
}

/* ---- dark theme -------------------------------------------------------- */
.dark-theme .btn-primary:not(.btn-icon):not(#limitReachedModal *), .dark-theme .shared-cta-btn,
.dark-theme .btn-send-message, .dark-theme .btn-send, .dark-theme .btn-msg-reply,
.dark-theme .trending-view-btn, .dark-theme .view-btn, .dark-theme .add-progression-hero .btn-large,
.dark-theme .pricing-cta-filled, .dark-theme .request-notification-btn, .dark-theme .btn-become-contributor,
.dark-theme .add-chords-btn {
    background: linear-gradient(180deg, #2f7a4b 0%, #1f5c37 50%, #143f26 100%) !important;
    color: #f4e4bc !important; /* cream, like the dark pearl buttons (Adam, 8 Oct: not white) */
    border: 1.5px solid #143f26 !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 -3px 6px rgba(0, 0, 0, 0.25),
        inset 0 2px 3px rgba(200, 255, 210, 0.22) !important;
}

.dark-theme .btn-secondary, .dark-theme .btn-cancel, .dark-theme .btn-msg-addlink,
.dark-theme .btn-small.btn-secondary, .dark-theme .btn-new-message, .dark-theme .btn-clear-all-messages,
.dark-theme .pp-free-card .pricing-cta-outline {
    background: linear-gradient(180deg, #6e5226 0%, #553d1b 55%, #3f2c13 100%) !important;
    color: #f4e4bc !important;
    border: 1.5px solid #3f2c13 !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 -3px 6px rgba(0, 0, 0, 0.25),
        inset 0 2px 3px rgba(255, 220, 150, 0.18) !important;
}

/* ---- hover / press: a gentle lift, same colours ------------------------ */
@media (hover: hover) and (pointer: fine) {
    .btn-primary:not(.btn-icon):not(#limitReachedModal *):hover, .shared-cta-btn:hover,
    .btn-send-message:hover, .btn-send:hover, .btn-msg-reply:hover, .pricing-cta-filled:hover,
    .btn-secondary:hover, .btn-cancel:hover, .btn-msg-addlink:hover, .btn-small.btn-secondary:hover,
    .btn-new-message:hover, .btn-clear-all-messages:hover, .add-progression-hero .btn-large:hover,
    .request-notification-btn:hover, .btn-become-contributor:hover {
        transform: translateY(-1px) !important;
        filter: none !important;
        opacity: 1 !important;
    }
    .btn-primary:not(.btn-icon):not(#limitReachedModal *):hover, .shared-cta-btn:hover,
    .btn-send-message:hover, .btn-send:hover, .btn-msg-reply:hover, .pricing-cta-filled:hover,
    .request-notification-btn:hover, .btn-become-contributor:hover {
        box-shadow: 0 6px 14px rgba(30, 100, 60, 0.38), inset 0 -3px 6px rgba(10, 50, 25, 0.25),
            inset 0 2px 3px rgba(220, 255, 230, 0.45) !important;
    }
    .btn-secondary:hover, .btn-cancel:hover, .btn-msg-addlink:hover, .btn-small.btn-secondary:hover,
    .btn-new-message:hover, .btn-clear-all-messages:hover,
    body:not(.dark-theme) .add-progression-hero .btn-large.btn-primary:not(#limitReachedModal *):hover {
        box-shadow: 0 6px 14px rgba(42, 84, 52, 0.3), inset 0 -3px 6px rgba(120, 100, 50, 0.16),
            inset 0 2px 3px rgba(255, 253, 245, 0.95) !important;
    }
    .dark-theme .btn-primary:not(.btn-icon):not(#limitReachedModal *):hover, .dark-theme .shared-cta-btn:hover,
    .dark-theme .btn-send-message:hover, .dark-theme .btn-send:hover, .dark-theme .btn-msg-reply:hover,
    .dark-theme .pricing-cta-filled:hover, .dark-theme .add-progression-hero .btn-large:hover,
    .dark-theme .request-notification-btn:hover, .dark-theme .btn-become-contributor:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), inset 0 -3px 6px rgba(0, 0, 0, 0.25),
            inset 0 2px 3px rgba(200, 255, 210, 0.22) !important;
    }
    .dark-theme .btn-secondary:hover, .dark-theme .btn-cancel:hover, .dark-theme .btn-msg-addlink:hover,
    .dark-theme .btn-small.btn-secondary:hover, .dark-theme .btn-new-message:hover,
    .dark-theme .btn-clear-all-messages:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), inset 0 -3px 6px rgba(0, 0, 0, 0.25),
            inset 0 2px 3px rgba(255, 220, 150, 0.18) !important;
    }
}

/* ---- filters and tabs (8 Oct 2026) -------------------------------------
 * The selected one is the green pearl, like the main buttons. Unselected
 * chips in dark theme contrast with what they sit on (Adam): calm dark brown
 * on the Tune Book's lighter filter panel, lifted (lighter, faint gold edge)
 * on the dark Browse page, home tabs and pop-ups.
 */
.filter-btn.active, .fakebook-filter-section .filter-btn.active, .trending-tab.active, .message-tab.active,
#messagesModalHeader .message-tab.active, .theme-choice button[aria-checked="true"] {
    background: linear-gradient(180deg, #3fb872 0%, #239a55 50%, #1d6b3e 100%) !important;
    color: #F4FAF5 !important;
    border-color: #1d6b3e !important;
    box-shadow: 0 3px 8px rgba(30, 100, 60, 0.28), inset 0 -3px 6px rgba(10, 50, 25, 0.25),
        inset 0 2px 3px rgba(220, 255, 230, 0.45) !important;
}

.dark-theme .filter-btn.active, .dark-theme .fakebook-filter-section .filter-btn.active,
.dark-theme .trending-tab.active, .dark-theme .message-tab.active,
.dark-theme #messagesModalHeader .message-tab.active, .dark-theme .theme-choice button[aria-checked="true"] {
    background: linear-gradient(180deg, #2f7a4b 0%, #1f5c37 50%, #143f26 100%) !important;
    color: #f4e4bc !important;
    border-color: #143f26 !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 -3px 6px rgba(0, 0, 0, 0.25),
        inset 0 2px 3px rgba(200, 255, 210, 0.22) !important;
}

.dark-theme .filter-btn:not(.active), .dark-theme .trending-tab:not(.active) {
    background: linear-gradient(180deg, #5c3f24 0%, #4a3019 100%) !important;
    color: #f4e4bc !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
}

.dark-theme .fakebook-filter-section .filter-btn:not(.active) {
    background: var(--bg-accent) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

/* Filter chips trimmed (Adam, 8 Oct): ~30px tall instead of 34px, so the rows
   take less room (Browse's tune types fit in fewer lines) */
.filter-btn, .fakebook-filter-section .filter-btn {
    padding: 5px 13px !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
}