/* BioFiles theme — MDL blue-grey + red */
:root {
    --bf-primary: #607D8B;
    /* blue-grey 500 */
    --bf-primary-dark: #455A64;
    /* blue-grey 700 */
    --bf-accent: #FF5252;
    /* red A200 */
    --bf-text-on-dark: #FFFFFF;
    --bf-text-dim: #CFD8DC;
}

/* Use Roboto across the app */
html,
body {
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Calibri, Arial, sans-serif;
}

/* Top navbar */
.navbar.biofiles-navbar {
    background-color: var(--bf-primary);
}

.navbar.biofiles-navbar .navbar-brand,
.navbar.biofiles-navbar .nav-link,
.navbar.biofiles-navbar .navbar-text {
    color: var(--bf-text-on-dark);
}

.navbar.biofiles-navbar .nav-link:hover,
.navbar.biofiles-navbar .nav-link:focus {
    color: #ffffff;
    opacity: .9;
}

/* Right-side search */
.biofiles-search .form-control {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
    color: var(--bf-text-on-dark);
}

.biofiles-search .form-control::placeholder {
    color: var(--bf-text-dim);
}

.biofiles-search .form-control:focus {
    background: rgba(255, 255, 255, .18);
    border-color: #ffffff;
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .15);
}

/* Tab bar under the navbar */
.biofiles-tabbar {
    background-color: var(--bf-primary-dark);
    border-top: 1px solid rgba(0, 0, 0, .08);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.biofiles-tabbar .nav-link {
    color: var(--bf-text-dim);
    padding: .6rem .9rem;
}

.biofiles-tabbar .nav-link:hover {
    color: #fff;
}

.biofiles-tabbar .nav-link.active {
    color: #fff;
    border-bottom: .2rem solid var(--bf-accent);
}

/* easyAutocomplete dropdown over dark header */
.easy-autocomplete-container ul {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    z-index: 2000;
}

.easy-autocomplete-container li div {
    font-family: "Roboto", Calibri, Arial, sans-serif;
}

/* Optional: brand subtitle tone-down */
.biofiles-brand-sub {
    opacity: .85;
    font-weight: 400;
}

/* Make media images behave nicely on record pages */
.biofilesImage {
    max-width: 100%;
    height: auto;
    max-height: 800px;
}