/*
 * BIT BRAND — Bookitier's own product colors
 * ==========================================
 * The palette the PRODUCT owns, as opposed to the per-org --bit-* theme vars.
 *
 * WHY THESE ARE NOT THEMED
 * --bit-primary / --bit-success are org-configurable, and the Color slots are
 * routinely filled with pale badge tints (one org runs Primary #e0ebf2 /
 * Success #def2e6). Anything that must stay legible — the primary button, a
 * success panel, a money figure — cannot be hostage to that value, so it reads
 * the brand vars below instead. checkout-button.css and the .btn-danger rule in
 * frosted-modal.css already took this stance; this file makes it the rule.
 *
 * Orgs still theme the soft surfaces: --bit-badge-* keeps driving the pills, and
 * the --bit-brand-* vars can be overridden on :root to re-skin the product.
 */

:root {
    /* Primary button — the brand gradient (mockup .btn-grad). Previously
       duplicated, hardcoded, in frosted-modal.css and frosted-listing.css, which
       is why it reached employee modals and listings but never the cart. */
    --bit-brand-primary-from: #2674a6;
    --bit-brand-primary-to: #112a54;
    --bit-brand-primary-fg: #ffffff;
    --bit-brand-primary-shadow-rgb: 38, 116, 166;

    /* Success — panels, money, anything that means "paid / done". */
    --bit-brand-success: #055932;
    --bit-brand-success-fg: #ffffff;

    /* Danger — destructive actions (Cancel Booking) and urgent status text.
       PINNED, never org-themed: .btn-outline-danger/.text-danger read the
       themeable --bit-danger/--bs-danger, which an org can set pale enough to
       vanish on a light card (customer dashboard bug, 2026-07). Anything that
       MUST stay legible reads the brand token below instead. */
    --bit-brand-danger: #c1121f;
    --bit-brand-danger-fg: #ffffff;
}

/* ===== pinned semantic helpers =====
 * Product-branded, non-themeable versions of the semantic colors, for text and
 * outline buttons that must stay readable on light frosted surfaces regardless
 * of the org's theme. Use these instead of .text-danger / .btn-outline-danger /
 * .btn-outline-success when legibility cannot depend on the org palette. */
.text-brand-danger {
    color: var(--bit-brand-danger) !important;
}

.text-brand-success {
    color: var(--bit-brand-success) !important;
}

.btn-brand-outline-danger,
.btn-brand-outline-success,
.btn-brand-outline-primary {
    background-color: transparent !important;
    font-weight: 600;
}

/* The neutral row action — View / Print / Re-upload in a listing row. Same
   reason as the danger/success pair: .btn-outline-primary and
   .btn-outline-secondary read the org-themeable --bit-* tokens, so a pale
   palette leaves a near-white button on a white card (customer document
   pages, 2026-07). */
.btn-brand-outline-primary {
    color: var(--bit-brand-primary-to) !important;
    border: 1px solid var(--bit-brand-primary-to) !important;
}

.btn-brand-outline-primary:hover,
.btn-brand-outline-primary:focus {
    background-color: var(--bit-brand-primary-to) !important;
    color: var(--bit-brand-primary-fg) !important;
}

/* ===== customer document row action =====
 * The three customer document pages (Upload Files, Download Forms, Sign
 * Documents) share one row-action size so View / Print / Continue / Upload
 * line up in a column down the list instead of each row measuring its own
 * label. Lives here, not in the pages' own <style> blocks, so the three
 * pages cannot drift apart again. Overrides .btn-sm's padding/size, so it
 * has to be applied alongside it. */
.btn-doc-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 8rem;
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
    white-space: nowrap;
}

/* Consistent gap between stacked row actions. The Sign Documents page gets this
   from its flex .document-actions; the two table pages relied on collapsed HTML
   whitespace, which reads too tight now the actions are solid brand buttons. */
.btn-doc-action + .btn-doc-action {
    margin-left: 0.4rem;
}

/* Row actions are the brand button (.btn-primary) on every customer document
   page, but at row scale its full-size lift/glow is too heavy — a list of eight
   documents becomes eight drop shadows. Same gradient, dialled-down elevation. */
.btn-doc-action.btn-primary {
    border-radius: 8px !important;
    box-shadow: 0 3px 8px rgba(var(--bit-brand-primary-shadow-rgb), .28) !important;
}

.btn-doc-action.btn-primary:hover,
.btn-doc-action.btn-primary:focus {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(var(--bit-brand-primary-shadow-rgb), .42) !important;
}

.btn-brand-outline-danger {
    color: var(--bit-brand-danger) !important;
    border: 1px solid var(--bit-brand-danger) !important;
}

.btn-brand-outline-danger:hover,
.btn-brand-outline-danger:focus {
    background-color: var(--bit-brand-danger) !important;
    color: var(--bit-brand-danger-fg) !important;
}

.btn-brand-outline-success {
    color: var(--bit-brand-success) !important;
    border: 1px solid var(--bit-brand-success) !important;
}

.btn-brand-outline-success:hover,
.btn-brand-outline-success:focus {
    background-color: var(--bit-brand-success) !important;
    color: var(--bit-brand-success-fg) !important;
}

/* ===== primary button =====
 * Global on purpose: any .btn-primary anywhere is the brand button. Scoped
 * variants that deliberately differ (soft buttons in .card-icon-header, the
 * glass chips in .frosted-listing headers) all carry higher specificity and
 * keep winning on their own.
 *
 * .btn-brand (theme_buttons.css) is the same gradient in a fully-rounded pill
 * cut and reads these same vars — reach for it when you want the pill.
 */

.btn-primary {
    background-image: linear-gradient(135deg, var(--bit-brand-primary-from), var(--bit-brand-primary-to)) !important;
    background-color: var(--bit-brand-primary-from) !important;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    color: var(--bit-brand-primary-fg) !important;
    border-radius: 11px !important;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(var(--bit-brand-primary-shadow-rgb), .38) !important;
    transition: transform .16s ease, box-shadow .16s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-image: linear-gradient(135deg, var(--bit-brand-primary-from), var(--bit-brand-primary-to)) !important;
    background-color: var(--bit-brand-primary-from) !important;
    border-color: rgba(255, 255, 255, .35) !important;
    color: var(--bit-brand-primary-fg) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(var(--bit-brand-primary-shadow-rgb), .5) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    transform: none !important;
    box-shadow: none !important;
    opacity: .65;
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary {
        transition: none;
    }

    .btn-primary:hover,
    .btn-primary:focus {
        transform: none;
    }
}