/* DS 2.0 bridge: every Bootstrap button variant renders at the strict DS geometry:
   36px tall, 8px radius, Nunito medium 12px. Dropdown menus are out of scope. */

.btn {
    height: 36px;
    padding: 8px 12px;
    border-radius: 8px;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* DS content icons are 16px in every button variant. */
.btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Circular icon buttons keep their shape (equal specificity, later file wins). */
.border-round {
    border-radius: 1000px;
}

/* Square icon buttons: the 36px height + text padding above ovals them against their fixed width. */
.btn.sq-32px { width: 32px; height: 32px; padding: 0; }
.btn.sq-48px { width: 48px; height: 48px; padding: 0; }
.btn.sq-64px { width: 64px; height: 64px; padding: 0; }

.border-flat-left {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.border-flat-right {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.border-flat-top {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.border-flat-bottom {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

/* DS Secondary: .btn-light is the de-facto secondary across the app; .btn-secondary joins it.
   No !important on backgrounds so .dark-mode .btn-light overrides in dark-mode.css keep winning. */
.btn-light, .btn-secondary {
    background-color: var(--white);
    border: 1px solid var(--grey-2);
    color: #71717B;
}

.btn-light:hover, .btn-secondary:hover {
    background-color: var(--grey-4);
    border-color: var(--grey-2);
    color: #3F3F46;
}

.btn-light:focus, .btn-light.focus, .btn-secondary:focus, .btn-secondary.focus {
    border-color: var(--primary);
    box-shadow: none;
}

/* Secondary content icons are always green-600, in every state, 6px from the label. */
.btn-light, .btn-secondary {
    gap: 6px;
}

.btn-light svg, .btn-secondary svg {
    color: var(--primary) !important;
}

    .btn-light > svg, .btn-secondary > svg {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

/* Matches Bootstrap's active-state specificity so the later file wins the tie. */
.btn-light:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled):active {
    background-color: var(--grey-3);
    border-color: var(--grey-2);
    color: #3F3F46;
}

.btn-light.disabled, .btn-light:disabled, .btn-secondary.disabled, .btn-secondary:disabled {
    background-color: var(--white);
    border-color: var(--grey-2);
    color: #9F9FA9;
}

/* Ghost/outline buttons follow the DS Secondary recipe; !important ties break to this later file
   because site.css marks every .btn-outline-primary declaration !important. */
.btn-outline-primary {
    background: var(--white) !important;
    border-color: var(--grey-2) !important;
    color: #52525C !important;
}

.btn-outline-primary:hover {
    background-color: var(--grey-4) !important;
    border-color: var(--grey-2) !important;
    color: #3F3F46 !important;
}

.btn-outline-primary:active, .btn-outline-primary:focus {
    background-color: var(--grey-3) !important;
    border-color: var(--primary) !important;
    box-shadow: none !important;
    color: #3F3F46 !important;
}

.btn-outline-primary:disabled {
    background-color: var(--white) !important;
    border-color: var(--grey-2) !important;
    color: #9F9FA9 !important;
}

/* Circular icon buttons: site.css .border-round.btn-outline-primary out-specifies the recipe above. */
.border-round.btn-outline-primary {
    border-color: var(--grey-2) !important;
}

.border-round.btn-outline-primary:hover {
    background-color: var(--grey-3) !important;
}

/* Ghost-button content icons: 16px, always green-600, in both themes. */
.btn-outline-primary svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--primary) !important;
}

.btn-outline-primary i, .btn-outline-primary [class*="material-symbols"] {
    font-size: 16px;
    color: var(--primary) !important;
}

/* Dark equivalents; site.css and dark-mode.css define none, so the light rules above would leak. */
.dark-mode .btn-outline-primary {
    background: var(--grey-3) !important;
    border-color: var(--grey-1) !important;
    color: var(--text-grey-3) !important;
}

.dark-mode .btn-outline-primary:hover, .dark-mode .btn-outline-primary:active, .dark-mode .btn-outline-primary:focus {
    background: var(--grey-2) !important;
    border-color: var(--grey-1) !important;
    color: var(--text-grey-1) !important;
}

/* Open dropdown triggers keep the secondary look instead of Bootstrap's darkened active state. */
.show > .btn-light.dropdown-toggle, .show > .btn-secondary.dropdown-toggle {
    background-color: var(--grey-4);
    border-color: var(--primary);
    color: #3F3F46;
}

/* Higher specificity than .dark-mode .btn-light, so dark open-state stays dark. */
.dark-mode .show > .btn-light.dropdown-toggle, .dark-mode .show > .btn-secondary.dropdown-toggle {
    background-color: var(--grey-3);
    border-color: var(--primary);
    color: var(--text-grey-1);
}

/* dark-mode.css forces bold; DS weight is medium. */
.dark-mode .btn {
    font-weight: 500;
}

/* DS 2.0 dropdown panels: 12px corners platform-wide. */
.dropdown-menu {
    border-radius: 12px;
}

/* Native selects: 16px chevron inset 16px from the right edge, replacing the unstylable OS arrow. */
select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 4px center / 16px 16px;
    padding-right: 24px;
}

    /* site.css resets the background shorthand on focus, which erased the chevron. */
    select.form-control:focus {
        background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 4px center / 16px 16px;
    }

/* Filter pills: green-200 outline instead of the text-colour border. */
.btn.badge-primary, .btn.badge-success {
    border-color: var(--lime-2);
}

    .btn.badge-primary:hover, .btn.badge-success:hover {
        border-color: var(--primary);
    }

/* Selected pills are green-600, not black. */
.btn-pill.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--white) !important;
}

/* Date-picker fields match the 36px control height; !important beats the plugin's inline 40px. */
input.jcalendar-input.form-control {
    height: 36px !important;
}

/* Multi-select toggles read as inputs, not actions, so they take the .form-control 400px cap.
   The .btn flex above overrides the plugin's text-align, so the label is placed by justify-content. */
.btn.multiselect {
    max-width: 400px !important;
    justify-content: space-between;
}