/*
 * Solid filled buttons: white label + icons.
 * Outline / default / light / link are excluded.
 *
 * Organiser: #page-content-for-mini (BS5, light + dark).
 * Voyager: .app-container / .side-body / Voyager modals (BS3).
 */

#page-content-for-mini .btn-primary:not(.btn-outline-primary),
#page-content-for-mini .btn-success:not(.btn-outline-success),
#page-content-for-mini .btn-danger:not(.btn-outline-danger),
#page-content-for-mini .btn-info:not(.btn-outline-info),
#page-content-for-mini .btn-secondary:not(.btn-outline-secondary),
#page-content-for-mini .btn-warning:not(.btn-outline-warning),
.app-container .btn-primary,
.app-container .btn-success,
.app-container .btn-danger,
.app-container .btn-info,
.app-container .btn-warning,
.side-body .btn-primary,
.side-body .btn-success,
.side-body .btn-danger,
.side-body .btn-info,
.side-body .btn-warning {
    --bs-btn-color: #fff;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}

/* Secondary = Back / list nav: same filled + white-label contract as chromatic CTAs. */
#page-content-for-mini .btn-secondary:not(.btn-outline-secondary) {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

#page-content-for-mini .btn-secondary:not(.btn-outline-secondary):hover,
#page-content-for-mini .btn-secondary:not(.btn-outline-secondary):focus,
#page-content-for-mini .btn-secondary:not(.btn-outline-secondary):active {
    background-color: #5c636a !important;
    border-color: #5c636a !important;
}

/* Warning yellow + black fails the contract; darker amber keeps white readable. */
#page-content-for-mini .btn-warning:not(.btn-outline-warning),
.app-container .btn-warning,
.side-body .btn-warning {
    background-color: #c58a12 !important;
    border-color: #c58a12 !important;
}

#page-content-for-mini .btn-warning:not(.btn-outline-warning):hover,
#page-content-for-mini .btn-warning:not(.btn-outline-warning):focus,
#page-content-for-mini .btn-warning:not(.btn-outline-warning):active,
.app-container .btn-warning:hover,
.app-container .btn-warning:focus,
.app-container .btn-warning:active,
.side-body .btn-warning:hover,
.side-body .btn-warning:focus,
.side-body .btn-warning:active {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background-color: #a3720e !important;
    border-color: #a3720e !important;
}

#page-content-for-mini .btn-primary:not(.btn-outline-primary):hover,
#page-content-for-mini .btn-primary:not(.btn-outline-primary):focus,
#page-content-for-mini .btn-success:not(.btn-outline-success):hover,
#page-content-for-mini .btn-success:not(.btn-outline-success):focus,
#page-content-for-mini .btn-danger:not(.btn-outline-danger):hover,
#page-content-for-mini .btn-danger:not(.btn-outline-danger):focus,
#page-content-for-mini .btn-info:not(.btn-outline-info):hover,
#page-content-for-mini .btn-info:not(.btn-outline-info):focus,
#page-content-for-mini .btn-secondary:not(.btn-outline-secondary):hover,
#page-content-for-mini .btn-secondary:not(.btn-outline-secondary):focus,
.app-container .btn-primary:hover,
.app-container .btn-primary:focus,
.app-container .btn-success:hover,
.app-container .btn-success:focus,
.app-container .btn-danger:hover,
.app-container .btn-danger:focus,
.app-container .btn-info:hover,
.app-container .btn-info:focus,
.side-body .btn-primary:hover,
.side-body .btn-primary:focus,
.side-body .btn-success:hover,
.side-body .btn-success:focus,
.side-body .btn-danger:hover,
.side-body .btn-danger:focus,
.side-body .btn-info:hover,
.side-body .btn-info:focus {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

#page-content-for-mini .btn-primary:not(.btn-outline-primary) i,
#page-content-for-mini .btn-primary:not(.btn-outline-primary) .fas,
#page-content-for-mini .btn-primary:not(.btn-outline-primary) .far,
#page-content-for-mini .btn-primary:not(.btn-outline-primary) .fab,
#page-content-for-mini .btn-primary:not(.btn-outline-primary) span,
#page-content-for-mini .btn-primary:not(.btn-outline-primary) svg,
#page-content-for-mini .btn-success:not(.btn-outline-success) i,
#page-content-for-mini .btn-success:not(.btn-outline-success) span,
#page-content-for-mini .btn-success:not(.btn-outline-success) svg,
#page-content-for-mini .btn-danger:not(.btn-outline-danger) i,
#page-content-for-mini .btn-danger:not(.btn-outline-danger) span,
#page-content-for-mini .btn-danger:not(.btn-outline-danger) svg,
#page-content-for-mini .btn-info:not(.btn-outline-info) i,
#page-content-for-mini .btn-info:not(.btn-outline-info) span,
#page-content-for-mini .btn-info:not(.btn-outline-info) svg,
#page-content-for-mini .btn-secondary:not(.btn-outline-secondary) i,
#page-content-for-mini .btn-secondary:not(.btn-outline-secondary) span,
#page-content-for-mini .btn-warning:not(.btn-outline-warning) i,
#page-content-for-mini .btn-warning:not(.btn-outline-warning) span,
#page-content-for-mini .btn-warning:not(.btn-outline-warning) svg,
.app-container .btn-primary i,
.app-container .btn-primary span,
.app-container .btn-success i,
.app-container .btn-success span,
.app-container .btn-danger i,
.app-container .btn-danger span,
.app-container .btn-info i,
.app-container .btn-info span,
.app-container .btn-warning i,
.app-container .btn-warning span,
.side-body .btn-primary i,
.side-body .btn-primary span,
.side-body .btn-success i,
.side-body .btn-success span,
.side-body .btn-danger i,
.side-body .btn-danger span,
.side-body .btn-info i,
.side-body .btn-info span,
.side-body .btn-warning i,
.side-body .btn-warning span {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    fill: currentColor;
    opacity: 1 !important;
}

/*
 * Organiser dark theme: .card span { color: #a7a7a7 !important } greys
 * every label inside cards, including buttons.
 */
html[data-bs-theme="dark"] #page-content-for-mini .card .btn-primary:not(.btn-outline-primary),
html[data-bs-theme="dark"] #page-content-for-mini .card .btn-primary:not(.btn-outline-primary) span,
html[data-bs-theme="dark"] #page-content-for-mini .card .btn-primary:not(.btn-outline-primary) i,
html[data-bs-theme="dark"] #page-content-for-mini .card .btn-success:not(.btn-outline-success),
html[data-bs-theme="dark"] #page-content-for-mini .card .btn-success:not(.btn-outline-success) span,
html[data-bs-theme="dark"] #page-content-for-mini .card .btn-success:not(.btn-outline-success) i,
html[data-bs-theme="dark"] #page-content-for-mini .card .btn-danger:not(.btn-outline-danger),
html[data-bs-theme="dark"] #page-content-for-mini .card .btn-danger:not(.btn-outline-danger) span,
html[data-bs-theme="dark"] #page-content-for-mini .card .btn-danger:not(.btn-outline-danger) i,
html[data-bs-theme="dark"] #page-content-for-mini .card .btn-info:not(.btn-outline-info),
html[data-bs-theme="dark"] #page-content-for-mini .card .btn-info:not(.btn-outline-info) span,
html[data-bs-theme="dark"] #page-content-for-mini .card .btn-info:not(.btn-outline-info) i,
html[data-bs-theme="dark"] #page-content-for-mini .card .btn-secondary:not(.btn-outline-secondary),
html[data-bs-theme="dark"] #page-content-for-mini .card .btn-secondary:not(.btn-outline-secondary) span,
html[data-bs-theme="dark"] #page-content-for-mini .card .btn-secondary:not(.btn-outline-secondary) i,
html[data-bs-theme="dark"] #page-content-for-mini .card .btn-warning:not(.btn-outline-warning),
html[data-bs-theme="dark"] #page-content-for-mini .card .btn-warning:not(.btn-outline-warning) span,
html[data-bs-theme="dark"] #page-content-for-mini .card .btn-warning:not(.btn-outline-warning) i {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}

/* Voyager in-form Back next to a primary CTA (Bootstrap 3 has no btn-secondary). */
.app-container .invoice-lifecycle__actions > a.btn-default,
.side-body .invoice-lifecycle__actions > a.btn-default {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/*
 * Voyager theme pills chromatic buttons (14px + shadow) but left .btn-default
 * square (Bootstrap 3). Cancel/Huy next to Save must share that chrome.
 */
.app-container .btn-default,
.side-body .btn-default {
    border-radius: 14px !important;
    padding: 9px 18px;
    box-shadow: 0 5px 7px rgba(51,52,94,.12), 0 2px 4px rgba(0,0,0,.07) !important;
}

.app-container .btn-xs.btn-default,
.side-body .btn-xs.btn-default {
    padding: 1px 5px;
    border-radius: 8px !important;
    box-shadow: none !important;
}

/*
 * Icon + label on one optical midline.
 * Voyager icomoon glyphs sit high in the em-box; FA/svg follow the same flex row.
 */
.app-container .btn,
.side-body .btn,
#page-content-for-mini .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    line-height: 1.25;
}

/*
 * Author `display: inline-flex` beats the UA [hidden] rule, so Voyager
 * header CTAs (e.g. invoice batch issue) stay visible unless we force hide.
 */
.app-container .btn[hidden],
.side-body .btn[hidden],
#page-content-for-mini .btn[hidden] {
    display: none !important;
}

/*
 * Voyager header: title + toolbar CTAs share one optical midline.
 * Stock .page-title is 100px with padding-top 28px; floated .btn-add-new
 * sits at the top of .side-body and reads higher than the title.
 */
.app-container .side-body.padding-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
}

.app-container .side-body.padding-top > .page-title {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    height: auto;
    min-height: 44px;
    margin: 0 0 16px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 56px;
    line-height: 1.3;
}

.app-container .side-body.padding-top > .page-title > i {
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
}

.app-container .side-body.padding-top > .btn-add-new {
    float: none;
    margin: 0 0 16px;
}

.app-container .side-body.padding-top > :not(.page-title):not(.btn-add-new) {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/*
 * Voyager does not float .btn-add-new by default (title is inline-block).
 * Header CTAs stay right via the flex row above; keep 10px between two+.
 */
.app-container .side-body > .btn-add-new,
.side-body > .btn-add-new {
    margin-left: 0;
}

.app-container .btn i,
.app-container .btn [class^="voyager-"],
.app-container .btn [class*=" voyager-"],
.app-container .btn .fas,
.app-container .btn .far,
.app-container .btn .fab,
.app-container .btn svg,
.side-body .btn i,
.side-body .btn [class^="voyager-"],
.side-body .btn [class*=" voyager-"],
.side-body .btn .fas,
.side-body .btn .far,
.side-body .btn .fab,
.side-body .btn svg,
#page-content-for-mini .btn i,
#page-content-for-mini .btn .fas,
#page-content-for-mini .btn .far,
#page-content-for-mini .btn .fab,
#page-content-for-mini .btn svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    top: 0;
}

.app-container .btn i::before,
.app-container .btn [class^="voyager-"]::before,
.app-container .btn [class*=" voyager-"]::before,
.side-body .btn i::before,
.side-body .btn [class^="voyager-"]::before,
.side-body .btn [class*=" voyager-"]::before,
#page-content-for-mini .btn i::before,
#page-content-for-mini .btn .fas::before,
#page-content-for-mini .btn .far::before,
#page-content-for-mini .btn .fab::before {
    line-height: 1;
}

/* Icomoon (voyager-*) glyphs sit high vs the label cap-height. */
.app-container .btn [class^="voyager-"],
.app-container .btn [class*=" voyager-"],
.side-body .btn [class^="voyager-"],
.side-body .btn [class*=" voyager-"] {
    top: 0.08em;
}

.app-container .btn .caret,
.side-body .btn .caret {
    margin-top: 0;
    margin-bottom: 0;
}