@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

/* ==========================================================================
   BITBEE - tenant theme
   Loaded by App.razor only on bitbee hosts (TenantHelper.StylesheetPath)
   and scoped through the theme-bitbee class on <body> (TenantHelper.ThemeClass).

   Taken from bitbee.ch: #202020 surfaces, white Lato Light, everything tracked
   out at 1.5px, uppercase, ghost buttons with very wide padding, and the amber
   used the way the site uses it - as one solid block, not as trim.
   ========================================================================== */

.theme-bitbee {
    --bb-ink: #202020; /* .site background on bitbee.ch */
    --bb-ink-2: #171717;
    --bb-line: #3A3A3A;
    --bb-amber: #FAB400;
    --bb-amber-deep: #E0A100;
    --bb-muted: rgba(255, 255, 255, 0.62);
    --bb-track: 1.5px; /* the site tracks out everything, body copy included */
    --loader-accent: var(--bb-amber); /* consumed by Loader.razor */
    --navbar-accent: var(--bb-amber); /* consumed by NavMenu.razor (E-Learning label) */
}

/* The mark is nothing but straight diagonals - no rounding anywhere */
.theme-bitbee .navbar,
.theme-bitbee .login-card,
.theme-bitbee .login-card .form-control,
.theme-bitbee .login-card .btn,
.theme-bitbee #blazor-loader .progress,
.theme-bitbee #blazor-loader .progress-bar {
    border-radius: 0;
}

/* ---------- Navbar ---------- */
.theme-bitbee .navbar.bg-dark {
    background-color: var(--bb-ink) !important; /* bg-dark itself is !important */
}

/* The wordmark is 5.8:1, so NavMenu's height="40" makes it 230px wide and it shouts */
.theme-bitbee .navbar .navbar-brand-logo {
    height: 22px !important;
}

.theme-bitbee .navbar .navbar-brand-title,
.theme-bitbee .navbar .navbar-app-label {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2.5px; /* the site's menu tracking */
}

.theme-bitbee .navbar .navbar-app-label {
    font-size: 1.05rem;
}

.theme-bitbee .navbar .nav-link,
.theme-bitbee .navbar .navbar-text {
    color: var(--bb-muted);
    text-transform: uppercase;
    letter-spacing: var(--bb-track);
    font-size: 0.85rem;
}

.theme-bitbee .navbar .nav-link:hover,
.theme-bitbee .navbar .nav-link:focus,
.theme-bitbee .navbar .nav-link.active {
    color: var(--bb-amber);
}

.theme-bitbee .navbar .border-secondary {
    border-color: var(--bb-line) !important;
}

.theme-bitbee .navbar .dropdown-menu {
    background-color: var(--bb-ink-2);
    border: 1px solid var(--bb-line);
    border-radius: 0;
}

.theme-bitbee .navbar .dropdown-item,
.theme-bitbee .navbar .dropdown-header {
    color: #fff;
    letter-spacing: var(--bb-track);
}

.theme-bitbee .navbar .dropdown-item:hover,
.theme-bitbee .navbar .dropdown-item:focus {
    background-color: rgba(250, 180, 0, 0.18);
    color: #fff;
}

/* ---------- #202020 backdrop ----------
   Painted whenever a boot/login surface is on show:
   1. the login screen is rendered (prerendered or interactive - same DOM)
   2. authenticated boot: the loader is the first element in <body> */
body.theme-bitbee:has(.login-page),
body.theme-bitbee:has(> #blazor-loader:first-child) {
    background: var(--bb-ink);
    background-attachment: fixed;
}

/* ---------- Boot loader ---------- */
body.theme-bitbee:has(> #blazor-loader:first-child) #blazor-loader {
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    letter-spacing: var(--bb-track);
}

.theme-bitbee #blazor-loader .progress {
    background-color: var(--bb-ink-2);
    border: 1px solid var(--bb-line);
}

/* ---------- Login ----------
   bitbee.ch has no cards - content sits straight on the dark. The "card" is
   just a hairline, so the login reads as a section of the site. */
.theme-bitbee .login-page {
    padding-top: 8vh;
}

.theme-bitbee .login-card {
    background: transparent;
    border: 1px solid var(--bb-line);
    padding: 3rem 2.5rem 3.25rem;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    letter-spacing: var(--bb-track);
}

/* The Wabe, quietly, as the only ornament */
.theme-bitbee .login-accent {
    height: 34px;
    margin-bottom: 2rem;
    background: url('/brandings/bitbee/bitbee_wabe_white.svg') left center / auto 100% no-repeat;
}

/* Big, thin, tracked out - the site's whole typographic voice in one line */
.theme-bitbee .login-title {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 2.6rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: var(--bb-track);
    color: #fff;
    margin-bottom: 2rem;
}

.theme-bitbee .login-card .form-label {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--bb-track);
    font-size: 0.78rem;
    color: var(--bb-muted);
}

.theme-bitbee .login-card .form-control {
    background-color: transparent;
    border: 1px solid var(--bb-line);
    color: #fff;
    letter-spacing: var(--bb-track);
}

.theme-bitbee .login-card .form-control:focus {
    background-color: transparent;
    color: #fff;
    border-color: var(--bb-amber);
    box-shadow: none;
}

.theme-bitbee .login-card .form-control:disabled {
    background-color: var(--bb-ink-2);
    opacity: 0.65;
}

/* The site's CTA: transparent, hairline border, uppercase, very wide padding */
.theme-bitbee .login-card .btn-primary,
.theme-bitbee .login-card .btn-primary:disabled {
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--bb-track);
    font-size: 0.95rem;
    padding: 10.5px 42px;
}

/* Amber arrives as a full block, the way the site's footer does */
.theme-bitbee .login-card .btn-primary:hover,
.theme-bitbee .login-card .btn-primary:focus,
.theme-bitbee .login-card .btn-primary:active {
    background-color: var(--bb-amber);
    border-color: var(--bb-amber);
    color: var(--bb-ink);
}

.theme-bitbee .login-card .btn-outline-secondary {
    border: 1px solid var(--bb-line);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: var(--bb-track);
    font-weight: 400;
    font-size: 0.85rem;
}

.theme-bitbee .login-card .btn-outline-secondary:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--bb-ink);
}

.theme-bitbee .login-card hr {
    border-color: var(--bb-line);
}

.theme-bitbee .login-card .text-muted {
    color: var(--bb-muted) !important;
    letter-spacing: var(--bb-track);
}