/* =============================================================================
   ibinderbook-buttons.css  -  shared semantic button layer.

   Remaps Bootstrap 4 .btn-* semantic classes onto the design tokens
   (Content/design-tokens.css), so every existing Bootstrap button app-wide
   follows the brand map with NO markup changes.

   Semantic contract (design/ibinderbook_Design_Guide_Handoff.html, section 4):
     Primary    add / create / open key workflow / main page action
     Success    update / confirm / continue
     Warning    filter / search / panel reveal        (soft amber treatment)
     Info       alternate views / utilities / send    (soft blue treatment)
     Secondary  cancel / close / export / print       (white + border)
     Danger     delete / remove / destructive
     Dark       back to list / return navigation

   Must load AFTER bootstrap.css and design-tokens.css (wired in Site.Master
   head). Same selector specificity as Bootstrap; later in cascade wins.
   ========================================================================== */
@import url("design-tokens.css");

.btn {
    border-radius: var(--ibb-radius-sm);
    font-weight: 500;
    white-space: nowrap; /* keep icon+label on one line so buttons don't grow tall in narrow cells */
}

/* ---------- primary ---------- */
.btn-primary {
    color: #fff;
    background-color: var(--ibb-primary);
    border-color: var(--ibb-primary);
}

.btn-primary:hover {
    color: #fff;
    background-color: var(--ibb-primary-hover);
    border-color: var(--ibb-primary-hover);
}

.btn-primary.focus, .btn-primary:focus {
    color: #fff;
    background-color: var(--ibb-primary-hover);
    border-color: var(--ibb-primary-hover);
    box-shadow: 0 0 0 3px var(--ibb-primary-soft);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--ibb-primary-active);
    border-color: var(--ibb-primary-active);
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: var(--ibb-primary);
    border-color: var(--ibb-primary);
    opacity: .55;
}

/* ---------- secondary (white + border, per handoff) ---------- */
.btn-secondary {
    color: var(--ibb-text);
    background-color: var(--ibb-surface);
    border-color: var(--ibb-border-strong);
}

.btn-secondary:hover,
.btn-secondary.focus, .btn-secondary:focus {
    color: var(--ibb-text);
    background-color: var(--ibb-surface-alt);
    border-color: var(--ibb-border-strong);
}

.btn-secondary.focus, .btn-secondary:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ibb-border-strong) 45%, transparent);
}

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
    color: var(--ibb-text);
    background-color: var(--ibb-border);
    border-color: var(--ibb-border-strong);
}

.btn-secondary.disabled, .btn-secondary:disabled {
    color: var(--ibb-text-muted);
    background-color: var(--ibb-surface);
    border-color: var(--ibb-border-strong);
    opacity: .65;
}

/* ---------- success ---------- */
.btn-success {
    color: #fff;
    background-color: var(--ibb-success);
    border-color: var(--ibb-success);
}

.btn-success:hover,
.btn-success.focus, .btn-success:focus {
    color: #fff;
    background-color: color-mix(in srgb, var(--ibb-success) 85%, black);
    border-color: color-mix(in srgb, var(--ibb-success) 85%, black);
}

.btn-success.focus, .btn-success:focus {
    box-shadow: 0 0 0 3px var(--ibb-success-soft);
}

.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
    color: #fff;
    background-color: color-mix(in srgb, var(--ibb-success) 75%, black);
    border-color: color-mix(in srgb, var(--ibb-success) 75%, black);
}

.btn-success.disabled, .btn-success:disabled {
    color: #fff;
    background-color: var(--ibb-success);
    border-color: var(--ibb-success);
    opacity: .55;
}

/* ---------- danger ---------- */
.btn-danger {
    color: #fff;
    background-color: var(--ibb-danger);
    border-color: var(--ibb-danger);
}

.btn-danger:hover,
.btn-danger.focus, .btn-danger:focus {
    color: #fff;
    background-color: color-mix(in srgb, var(--ibb-danger) 85%, black);
    border-color: color-mix(in srgb, var(--ibb-danger) 85%, black);
}

.btn-danger.focus, .btn-danger:focus {
    box-shadow: 0 0 0 3px var(--ibb-danger-soft);
}

.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
    color: #fff;
    background-color: color-mix(in srgb, var(--ibb-danger) 75%, black);
    border-color: color-mix(in srgb, var(--ibb-danger) 75%, black);
}

.btn-danger.disabled, .btn-danger:disabled {
    color: #fff;
    background-color: var(--ibb-danger);
    border-color: var(--ibb-danger);
    opacity: .55;
}

/* ---------- warning (soft amber, per handoff: filter/search/reveal) ---------- */
.btn-warning {
    color: var(--ibb-warning-text);
    background-color: var(--ibb-warning-soft);
    border-color: var(--ibb-warning-border);
}

.btn-warning:hover,
.btn-warning.focus, .btn-warning:focus {
    color: var(--ibb-warning-text);
    background-color: color-mix(in srgb, var(--ibb-warning) 28%, white);
    border-color: var(--ibb-warning);
}

.btn-warning.focus, .btn-warning:focus {
    box-shadow: 0 0 0 3px var(--ibb-warning-soft);
}

.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
    color: var(--ibb-warning-text);
    background-color: color-mix(in srgb, var(--ibb-warning) 38%, white);
    border-color: var(--ibb-warning);
}

.btn-warning.disabled, .btn-warning:disabled {
    color: var(--ibb-warning-text);
    background-color: var(--ibb-warning-soft);
    border-color: var(--ibb-warning-border);
    opacity: .65;
}

/* ---------- info (soft blue, per handoff: alt views/utilities/send) ---------- */
.btn-info {
    color: var(--ibb-primary-active);
    background-color: var(--ibb-info-soft);
    border-color: color-mix(in srgb, var(--ibb-primary) 30%, white);
}

.btn-info:hover,
.btn-info.focus, .btn-info:focus {
    color: var(--ibb-primary-active);
    background-color: var(--ibb-primary-soft);
    border-color: color-mix(in srgb, var(--ibb-primary) 45%, white);
}

.btn-info.focus, .btn-info:focus {
    box-shadow: 0 0 0 3px var(--ibb-info-soft);
}

.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle {
    color: #fff;
    background-color: var(--ibb-primary);
    border-color: var(--ibb-primary);
}

.btn-info.disabled, .btn-info:disabled {
    color: var(--ibb-primary-active);
    background-color: var(--ibb-info-soft);
    border-color: color-mix(in srgb, var(--ibb-primary) 30%, white);
    opacity: .65;
}

/* ---------- dark (back/return navigation) ---------- */
.btn-dark {
    color: #fff;
    background-color: var(--ibb-dark);
    border-color: var(--ibb-dark);
}

.btn-dark:hover,
.btn-dark.focus, .btn-dark:focus {
    color: #fff;
    background-color: color-mix(in srgb, var(--ibb-dark) 82%, black);
    border-color: color-mix(in srgb, var(--ibb-dark) 82%, black);
}

.btn-dark.focus, .btn-dark:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ibb-dark) 25%, transparent);
}

.btn-dark:not(:disabled):not(.disabled):active,
.btn-dark:not(:disabled):not(.disabled).active,
.show > .btn-dark.dropdown-toggle {
    color: #fff;
    background-color: color-mix(in srgb, var(--ibb-dark) 70%, black);
    border-color: color-mix(in srgb, var(--ibb-dark) 70%, black);
}

.btn-dark.disabled, .btn-dark:disabled {
    color: #fff;
    background-color: var(--ibb-dark);
    border-color: var(--ibb-dark);
    opacity: .55;
}

/* ---------- outline variants in active use ---------- */
.btn-outline-primary {
    color: var(--ibb-primary);
    border-color: var(--ibb-primary);
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: var(--ibb-primary);
    border-color: var(--ibb-primary);
}

.btn-outline-primary.focus, .btn-outline-primary:focus {
    box-shadow: 0 0 0 3px var(--ibb-primary-soft);
}

.btn-outline-secondary {
    color: var(--ibb-text-secondary);
    border-color: var(--ibb-border-strong);
    background-color: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active {
    color: var(--ibb-text);
    background-color: var(--ibb-surface-alt);
    border-color: var(--ibb-border-strong);
}

.btn-outline-secondary.focus, .btn-outline-secondary:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ibb-border-strong) 45%, transparent);
}

.btn-outline-danger {
    color: var(--ibb-danger);
    border-color: var(--ibb-danger);
    background-color: transparent;
}

.btn-outline-danger:hover,
.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: var(--ibb-danger);
    border-color: var(--ibb-danger);
}

.btn-outline-danger.focus, .btn-outline-danger:focus {
    box-shadow: 0 0 0 3px var(--ibb-danger-soft);
}

/* =============================================================================
   Telerik RadButton bridge (lightweight render mode).
   Keeps RadButtons visually consistent with the .btn layer regardless of which
   Telerik skin renders them: same radius/weight, and Primary="true" buttons follow
   the brand primary tokens.

   IMPORTANT: the primary class Telerik actually emits is .rbPrimaryButton (verified
   on the rendered DOM - NOT .rbPrimary), present on both the <button> (rbButton) and
   <a> (rbLinkButton) variants. !important beats the skin's non-important
   .RadButton_Bootstrap.rbPrimaryButton fill. The radius/weight rule below covers the
   primary buttons too since they also carry .rbButton/.rbLinkButton.
   ========================================================================== */
html .RadButton.rbButton,
html .RadButton.rbLinkButton {
    box-sizing: border-box;
    height: auto;
    padding: 0.375rem 0.75rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--ibb-radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
}

/* Telerik wraps the label in an inner .rbText span that carries the skin's own
   padding / line-height / font-weight - that inner span is why RadButtons read
   BOLDER and a different height than the Bootstrap .btn layer. Neutralize it so
   the outer box (above, matching .btn) defines the size and the weight inherits. */
html .RadButton.rbButton .rbText,
html .RadButton.rbLinkButton .rbText {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-decoration: none;
}

html .RadButton.rbPrimaryButton {
    color: #fff !important;
    background-color: var(--ibb-primary) !important;
    background-image: none !important; /* flatten the skin's primary fill/gradient */
    border-color: var(--ibb-primary) !important;
}

html .RadButton.rbPrimaryButton:hover,
html .RadButton.rbPrimaryButton:focus {
    color: #fff !important;
    background-color: var(--ibb-primary-hover) !important;
    background-image: none !important;
    border-color: var(--ibb-primary-hover) !important;
}

html .RadButton.rbPrimaryButton:active {
    color: #fff !important;
    background-color: var(--ibb-primary-active) !important;
    background-image: none !important;
    border-color: var(--ibb-primary-active) !important;
}