/*
 * Standard action button colours.
 *
 * Use these instead of picking a Bootstrap colour per page, so the same
 * action always looks the same across the portal:
 *
 *   Back    -> .btn-back    dark grey
 *   Save    -> .btn-save    green
 *   Add New -> .btn-add     red
 *   Export  -> .btn-export  blue
 *
 * Pair them with .btn as usual, e.g. <a class="btn btn-back">Back</a>.
 * To change a colour portal-wide, change it here only.
 *
 * Client sub-page navigation uses .btn-tab, with .active on the tab of the
 * page you are currently looking at - see partials/client-tabs.blade.php.
 */

.btn-back,
.btn-save,
.btn-add,
.btn-export {
    color: #fff;
}

.btn-back:hover,
.btn-save:hover,
.btn-add:hover,
.btn-export:hover,
.btn-back:focus,
.btn-save:focus,
.btn-add:focus,
.btn-export:focus {
    color: #fff;
}

/* Back - dark grey */
.btn-back {
    background-color: #343a40;
    border-color: #343a40;
}

.btn-back:hover {
    background-color: #23272b;
    border-color: #1d2124;
}

.btn-back:focus,
.btn-back.focus {
    box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
}

/* Save - green */
.btn-save {
    background-color: #28a745;
    border-color: #28a745;
}

.btn-save:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

.btn-save:focus,
.btn-save.focus {
    box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}

/* Add New - red */
.btn-add {
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-add:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

.btn-add:focus,
.btn-add.focus {
    box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}

/* Export - blue */
.btn-export {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-export:hover {
    background-color: #0069d9;
    border-color: #0062cc;
}

.btn-export:focus,
.btn-export.focus {
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

/*
 * Client sub-page tabs.
 *
 * Every tab is red; the tab you are on gets .active as well, which turns it
 * amber with dark text so it is obvious which sub-page is open.
 */
.btn-tab {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

.btn-tab:hover,
.btn-tab:focus {
    background-color: #c82333;
    border-color: #bd2130;
    color: #fff;
}

.btn-tab:focus,
.btn-tab.focus {
    box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}

.btn-tab.active,
.btn-tab.active:hover,
.btn-tab.active:focus {
    background-color: #ffc107;
    border-color: #d39e00;
    color: #212529;
    font-weight: 600;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}