@import url('brandingPalette.css');

/* === CWH ACTION BUTTONS — PORTAL-INDEPENDENT =================================
 *
 * WHY THIS FILE EXISTS, AND WHY THESE BUTTONS DELIBERATELY DO NOT CARRY `.btn`.
 *
 * Every portal in this estate re-themes Bootstrap's `.btn` in its own
 * `custom*.css`, with `!important`, and the three do not agree on what a
 * primary action looks like:
 *
 *     secure   .btn-primary  ->  #00337e   (happens to be the brand dark blue)
 *     admin    .btn-primary  ->  #1a3a5c
 *     store    .btn-primary  ->  #014694
 *
 * secure additionally sets `.btn { border: 1px solid var(--cw-border) !important }`,
 * which paints a grey hairline over whatever background a later rule chooses.
 *
 * That is harmless for a screen living in one docroot. It is NOT harmless for a
 * screen served out of /sharedAssets/ and mounted in several of them. The
 * unified user directory is mounted in secure, store AND admin from one set of
 * files, so built on `.btn` its primary action renders in three different blues
 * and an operator trained on one portal misreads the next.
 *
 * Hence: SELF-CONTAINED. These classes never carry `.btn`, so no portal's `.btn`
 * override can reach them, and identical markup renders identically everywhere.
 * `.waves-effect`/`.waves-light` are orthogonal — the Xacton ripple binds to its
 * own class, not to `.btn` — so they may still be added for the house feel.
 *
 * DELIBERATELY NOT NAMED `.cwh-btn-*`. `https/https/portal/assets/css/custom.pharmacy.css`
 * already owns that family, and owns it as a MODIFIER of `.btn` (used in the
 * wild as `class="btn cwh-btn cwh-btn-primary"`). Re-defining those names here
 * would silently restyle portal screens this work never examined.
 *
 * Precedent for a standalone, `.btn`-free button in shared CSS: `.cwh-quick-action`
 * and `.cwh-card-action-btn` in card.css.
 * ========================================================================== */

/* Base. Carries the full button reset so nothing is inherited from `.btn`. */
.cwh-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--cwh-font-family);
    font-weight: var(--cwh-font-medium);
    font-size: 13px;
    line-height: 1.4;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
                box-shadow 0.15s ease;
}

.cwh-action:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 51, 126, 0.25);
}

.cwh-action:disabled,
.cwh-action.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Icon glyph sits optically centred against the label. */
.cwh-action > i {
    font-size: 16px;
    line-height: 1;
}

/* ── PRIMARY — the one routine action a screen most wants ────────────────── */
.cwh-action--primary {
    background: var(--cwh-dark-blue);
    border-color: var(--cwh-dark-blue);
    color: var(--cwh-white);
}

.cwh-action--primary:hover,
.cwh-action--primary:focus {
    background: var(--cwh-open-blue);
    border-color: var(--cwh-open-blue);
    color: var(--cwh-white);
}

/* ── SECONDARY — reversible, safe, still a real button ───────────────────── */
.cwh-action--secondary {
    background: var(--cwh-white);
    border-color: var(--cwh-dark-blue);
    color: var(--cwh-dark-blue);
}

.cwh-action--secondary:hover,
.cwh-action--secondary:focus {
    background: var(--cwh-dark-blue);
    color: var(--cwh-white);
}

/* ── DANGER — irreversible, or reaching beyond the screen you are on ──────
 *
 * Outlined at rest and filled only on hover, on purpose. A solid red button
 * sitting at rest beside a routine one is the thing that gets mis-clicked; an
 * outline reads as "this is the serious one" without shouting, and the fill on
 * hover confirms it at the moment of commitment. */
.cwh-action--danger {
    background: var(--cwh-white);
    border-color: var(--cwh-danger);
    color: var(--cwh-danger);
}

.cwh-action--danger:hover,
.cwh-action--danger:focus {
    background: var(--cwh-danger);
    color: var(--cwh-white);
}

.cwh-action--danger:focus-visible {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}

/* ── Size + layout modifiers ─────────────────────────────────────────────── */
.cwh-action--sm {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 8px;
}

.cwh-action--sm > i {
    font-size: 14px;
}