@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Barlow:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Bezpečná práce JP - tenant theme
   Loaded by App.razor only on *.bpjp.cz hosts (TenantHelper.StylesheetPath)
   and scoped through the theme-bpjp class on <body> (TenantHelper.ThemeClass).

   Styles the login screen (Login.razor - prerendered for anonymous visitors
   and hydrated in place, same DOM both times) and the boot loader. The rest
   of the app keeps the default look.
   ========================================================================== */

.theme-bpjp {
    --bpjp-yellow: #FFD500;
    --bpjp-yellow-deep: #F2B705;
    --bpjp-ink: #0C0D10;
    --bpjp-ink-2: #14161B;
    --bpjp-line-dark: #262932;
    --bpjp-muted-light: #A9ADB8;
    --loader-accent: var(--bpjp-yellow); /* consumed by Loader.razor */
    --navbar-accent: var(--bpjp-yellow); /* consumed by NavMenu.razor (E-Learning label) */
}

/* ---------- Navbar (same look as the BPJP showcase website header) ---------- */
.theme-bpjp .navbar.bg-dark {
    background-color: rgba(12, 13, 16, 0.92) !important; /* bg-dark itself is !important */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Hazard stripe along the bottom edge of the fixed navbar */
.theme-bpjp .navbar.bg-dark::after {
    content: "";
    position: absolute;
    inset: 100% 0 auto 0;
    height: 6px;
    background: repeating-linear-gradient(
        -45deg,
        var(--bpjp-yellow) 0 14px,
        var(--bpjp-ink) 14px 28px
    );
}

/* app.css clears the fixed navbar with 80px, which is short here: the logo plate below adds 8px of
   padding and the hazard stripe hangs 6px past the navbar's own edge. Other tenants have neither. */
body.theme-bpjp {
    margin-top: 85px;
}

/* Logo on a white plate with a yellow glow so its black parts stay visible */
.theme-bpjp .navbar .navbar-brand-logo {
    background: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    box-shadow:
        0 0 0 1px rgba(255, 213, 0, 0.4),
        0 6px 20px -4px rgba(255, 213, 0, 0.45);
}

.theme-bpjp .navbar .navbar-app-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 1.15rem;
}

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

.theme-bpjp .navbar .nav-link {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.82);
}

.theme-bpjp .navbar .nav-link:hover,
.theme-bpjp .navbar .nav-link:focus,
.theme-bpjp .navbar .nav-link.active {
    color: var(--bpjp-yellow);
}

.theme-bpjp .navbar .navbar-text {
    color: var(--bpjp-muted-light) !important; /* text-secondary utility is !important */
}

.theme-bpjp .navbar .dropdown-menu {
    background-color: var(--bpjp-ink-2);
    border: 1px solid var(--bpjp-line-dark);
}

.theme-bpjp .navbar .dropdown-header {
    color: var(--bpjp-muted-light);
}

.theme-bpjp .navbar .dropdown-item {
    color: #fff;
}

.theme-bpjp .navbar .dropdown-item:hover,
.theme-bpjp .navbar .dropdown-item:focus {
    background-color: rgba(255, 213, 0, 0.15);
    color: #fff;
}

/* ---------- Dark "hazard" 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-bpjp:has(.login-page),
body.theme-bpjp:has(> #blazor-loader:first-child) {
    background:
        radial-gradient(700px 400px at 50% -10%, rgba(255, 213, 0, 0.12), transparent 60%),
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        var(--bpjp-ink);
    background-size: auto, 44px 44px, 44px 44px, auto;
    background-attachment: fixed;
}

/* ---------- Boot loader (authenticated visitors) ---------- */
body.theme-bpjp:has(> #blazor-loader:first-child) #blazor-loader {
    color: #fff;
    font-family: 'Barlow', sans-serif;
}

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

/* ---------- Login card (interactive + static twin) ---------- */
.theme-bpjp .login-page {
    padding-top: 5vh;
}

.theme-bpjp .login-card {
    position: relative;
    overflow: hidden;
    background: var(--bpjp-ink-2);
    border: 1px solid var(--bpjp-line-dark);
    border-radius: 10px;
    padding: 1.75rem 1.75rem 2rem;
    color: #fff;
    font-family: 'Barlow', sans-serif;
    box-shadow:
        0 0 0 1px rgba(255, 213, 0, 0.25),
        0 12px 28px -6px rgba(255, 213, 0, 0.18),
        0 24px 48px -16px rgba(0, 0, 0, 0.55);
}

/* Hazard tape across the top edge of the card */
.theme-bpjp .login-accent {
    height: 8px;
    margin: -1.75rem -1.75rem 1.4rem;
    background: repeating-linear-gradient(
        -45deg,
        var(--bpjp-yellow) 0 14px,
        var(--bpjp-ink) 14px 28px
    );
}

.theme-bpjp .login-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    margin-bottom: 1.1rem;
}

.theme-bpjp .login-card .form-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    color: var(--bpjp-muted-light);
}

.theme-bpjp .login-card .form-control {
    background-color: var(--bpjp-ink);
    border: 1px solid var(--bpjp-line-dark);
    color: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.theme-bpjp .login-card .form-control:focus {
    background-color: var(--bpjp-ink);
    color: #fff;
    border-color: var(--bpjp-yellow);
    box-shadow: 0 0 0 0.2rem rgba(255, 213, 0, 0.2);
}

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

/* Primary button -> safety yellow (Bootstrap 5.0: direct overrides, no --bs-btn vars yet) */
.theme-bpjp .login-card .btn-primary,
.theme-bpjp .login-card .btn-primary:disabled {
    background-color: var(--bpjp-yellow);
    border-color: var(--bpjp-yellow);
    color: var(--bpjp-ink);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 1.15rem;
}

.theme-bpjp .login-card .btn-primary:hover,
.theme-bpjp .login-card .btn-primary:focus,
.theme-bpjp .login-card .btn-primary:active {
    background-color: var(--bpjp-yellow-deep);
    border-color: var(--bpjp-yellow-deep);
    color: var(--bpjp-ink);
}

.theme-bpjp .login-card .btn-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 213, 0, 0.35);
}

/* Microsoft button: outline-dark is invisible on the dark card -> light outline */
.theme-bpjp .login-card .btn-outline-secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}

.theme-bpjp .login-card .btn-outline-secondary:hover,
.theme-bpjp .login-card .btn-outline-secondary:focus {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--bpjp-yellow);
    color: #fff;
}

.theme-bpjp .login-card .btn-outline-secondary.disabled,
.theme-bpjp .login-card .btn-outline-secondary:disabled,
.theme-bpjp .login-card fieldset:disabled .btn-outline-secondary {
    color: var(--bpjp-muted-light);
    border-color: var(--bpjp-line-dark);
}

.theme-bpjp .login-card hr {
    border-color: var(--bpjp-line-dark);
    background-color: var(--bpjp-line-dark);
    opacity: 1;
}

.theme-bpjp .login-card .text-muted {
    color: var(--bpjp-muted-light) !important;
}

.theme-bpjp .login-card a {
    color: var(--bpjp-yellow);
}