/*
 * Staff pages (templates/base.html): Bootstrap's blue replaced with the Araxi Travel colours
 * (static/css/araxi-tokens.css). Loaded after Bootstrap; the pages' own styles come later and
 * still win.
 */

a {
    color: var(--river-600);
}
a:hover {
    color: var(--navy-700);
}

.btn-primary {
    color: #fff;
    background-color: var(--river-600);
    border-color: var(--river-600);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-check:checked + .btn-primary {
    color: #fff;
    background-color: var(--navy-700);
    border-color: var(--navy-700);
}
.btn-primary:focus,
.btn-check:focus + .btn-primary {
    color: #fff;
    background-color: var(--navy-700);
    border-color: var(--navy-700);
    box-shadow: 0 0 0 .25rem rgba(21, 105, 138, .35);
}
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--river-600);
    border-color: var(--river-600);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--river-400);
    box-shadow: 0 0 0 .25rem rgba(21, 105, 138, .2);
}

.form-check-input:checked {
    background-color: var(--river-600);
    border-color: var(--river-600);
}

.text-primary {
    color: var(--river-600) !important;
}

.list-group-item.active {
    background-color: var(--river-600);
    border-color: var(--river-600);
}

/* Staff header: the product a page works on, next to "Add Price" / "Edit Price" (templates/base.html) */
.header-stuff .avatar-stuff {
    min-width: 0;
}

.header-product {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    font-size: 20px;
    color: var(--navy-900);
}

.header-product__sep {
    color: var(--ink-400);
}

.header-product__name {
    min-width: 0;
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--river-600);
}

/* undo the generic header link look (styles.css: .header-stuff a) */
.header-stuff a.header-product__name {
    float: none;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    text-align: left;
    color: var(--river-600);
}

.header-stuff a.header-product__name:hover,
.header-stuff a.header-product__name:focus-visible {
    color: var(--navy-900);
    text-decoration: underline !important;
}

@media (max-width: 768px) {
    .header-product {
        font-size: 16px;
    }

    .header-product__name {
        max-width: 30vw;
    }
}