:root {
    --background-image:
        url("/static/img/backgrounds/bg-01.jpg");

    --glass:
        rgba(38, 57, 82, 0.48);

    --glass-strong:
        rgba(30, 46, 69, 0.72);

    --glass-dark:
        rgba(7, 15, 29, 0.72);

    --glass-input:
        rgba(13, 27, 45, 0.42);

    --glass-border:
        rgba(255, 255, 255, 0.18);

    --glass-border-soft:
        rgba(255, 255, 255, 0.11);

    --text:
        #f8fafc;

    --text-soft:
        #dbe5f0;

    --text-muted:
        #aebed0;

    --primary:
        #5d91c9;

    --primary-strong:
        #3977b6;

    --success:
        #35d07f;

    --danger:
        #ff7f8e;

    --warning:
        #f7c45b;

    --shadow:
        0 25px 75px rgba(0, 0, 0, 0.42);

    --radius-large:
        23px;

    --radius-medium:
        14px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: #0b1828;
}

body {
    position: relative;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;

    color: var(--text) !important;

    background-color: #0b1828 !important;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

/*
 * Dve vrstvy umožňujú plynulé prelínanie pozadia.
 */
body::before,
body::after {
    position: fixed;
    inset: 0;
    z-index: -4;

    display: block;
    content: "";

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    transform: scale(1.025);

    transition:
        opacity 1.4s ease,
        background-image 0s linear 1.4s;

    pointer-events: none;
}

body::before {
    background-image: var(--background-image);
    opacity: 1;
}

body::after {
    z-index: -3;
    background-image: var(--next-background-image);
    opacity: 0;
}

body.background-transition::after {
    opacity: 1;
}

/*
 * Tmavá vrstva podobná Repository Webu.
 */
.background-overlay {
    position: fixed;
    inset: 0;
    z-index: -2;

    background:
        linear-gradient(
            180deg,
            rgba(5, 16, 29, 0.35) 0%,
            rgba(5, 15, 28, 0.48) 48%,
            rgba(3, 10, 20, 0.64) 100%
        );

    pointer-events: none;
}

/*
 * Jemná modrá atmosféra nad fotografiou.
 */
.background-overlay::after {
    position: absolute;
    inset: 0;

    content: "";

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(93, 145, 201, 0.08),
            transparent 48%
        );

    pointer-events: none;
}

a {
    color: #c5e1ff;
    text-decoration: none;
}

a:hover {
    color: #ffffff;
}

/* =========================
   NAVIGÁCIA
   ========================= */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1040;

    min-height: 66px;
    padding: 9px 0 !important;

    background:
        rgba(12, 27, 45, 0.52) !important;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.13);

    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.24);

    backdrop-filter:
        blur(22px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(135%);
}

.navbar-brand {
    display: inline-flex;
    gap: 11px;
    align-items: center;

    color: #ffffff !important;

    font-size: 1.02rem;
    font-weight: 780;
    letter-spacing: -0.02em;
}

.navbar-brand::before {
    display: inline-flex;

    width: 40px;
    height: 40px;

    align-items: center;
    justify-content: center;

    content: "HB";

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            rgba(105, 151, 199, 0.78),
            rgba(64, 101, 145, 0.78)
        );

    border:
        1px solid rgba(255, 255, 255, 0.23);

    border-radius: 50%;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 10px 28px rgba(0, 0, 0, 0.20);

    font-size: 0.77rem;
    font-weight: 800;
}

/* =========================
   HLAVNÝ OBSAH
   ========================= */

.container,
.container.py-4 {
    width:
        min(
            1480px,
            calc(100% - 30px)
        );

    max-width: 1480px;
}

.container.py-4 {
    padding-top: 27px !important;
    padding-bottom: 48px !important;
}

/* =========================
   GLASS KARTY
   ========================= */

.card,
.modal-content,
.dropdown-menu {
    color: var(--text) !important;

    background:
        linear-gradient(
            145deg,
            rgba(66, 88, 115, 0.49),
            rgba(31, 49, 72, 0.52)
        ) !important;

    border:
        1px solid var(--glass-border) !important;

    border-radius:
        var(--radius-large) !important;

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(24px)
        saturate(130%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(130%);
}

.card {
    overflow: hidden;
}

.card-header {
    padding:
        15px 19px !important;

    color:
        #f8fafc !important;

    background:
        rgba(20, 37, 58, 0.36) !important;

    border-bottom:
        1px solid var(--glass-border-soft) !important;

    font-weight:
        760;
}

.card-body,
.card.p-4 {
    padding:
        21px !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color:
        #ffffff !important;

    font-weight:
        780;

    letter-spacing:
        -0.025em;
}

p {
    color:
        var(--text-soft);
}

/* =========================
   LOGIN
   ========================= */

.row.justify-content-center {
    min-height:
        calc(100vh - 125px);

    align-items:
        center;

    padding:
        30px 0;
}

.row.justify-content-center > [class*="col-"] {
    width:
        min(100%, 410px);

    max-width:
        410px;
}

.row.justify-content-center .card {
    position:
        relative;

    padding:
        28px !important;

    background:
        linear-gradient(
            145deg,
            rgba(69, 91, 119, 0.53),
            rgba(38, 57, 82, 0.56)
        ) !important;

    border:
        1px solid rgba(255, 255, 255, 0.20) !important;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    backdrop-filter:
        blur(26px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(26px)
        saturate(125%);
}

.row.justify-content-center .card::before {
    display:
        flex;

    width:
        55px;

    height:
        55px;

    margin:
        0 auto 17px;

    align-items:
        center;

    justify-content:
        center;

    content:
        "HB";

    color:
        #ffffff;

    background:
        linear-gradient(
            145deg,
            rgba(101, 143, 185, 0.72),
            rgba(57, 91, 128, 0.68)
        );

    border:
        1px solid rgba(255, 255, 255, 0.24);

    border-radius:
        50%;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.23),
        0 10px 30px rgba(0, 0, 0, 0.22);

    font-size:
        0.88rem;

    font-weight:
        820;
}

.row.justify-content-center .card h3,
.row.justify-content-center .card h4 {
    margin-bottom:
        22px;

    text-align:
        center;

    font-size:
        1.26rem;

    font-weight:
        780;
}

/* =========================
   FORMULÁRE
   ========================= */

.form-label {
    margin-bottom:
        7px;

    color:
        #edf4fb !important;

    font-size:
        0.77rem;

    font-weight:
        720;
}

.form-control,
.form-select,
textarea.form-control {
    min-height:
        43px;

    padding:
        9px 12px;

    color:
        #ffffff !important;

    background:
        rgba(12, 29, 49, 0.39) !important;

    border:
        1px solid rgba(255, 255, 255, 0.18) !important;

    border-radius:
        12px !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.form-control::placeholder {
    color:
        rgba(224, 235, 246, 0.53) !important;
}

.form-control:focus,
.form-select:focus {
    color:
        #ffffff !important;

    background:
        rgba(10, 25, 44, 0.58) !important;

    border-color:
        rgba(174, 212, 248, 0.60) !important;

    box-shadow:
        0 0 0 3px rgba(111, 165, 216, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* =========================
   TLAČIDLÁ
   ========================= */

.btn {
    min-height:
        39px;

    padding:
        8px 14px;

    border-radius:
        11px !important;

    font-size:
        0.82rem;

    font-weight:
        730;

    transition:
        transform 0.16s ease,
        background 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}

.btn:hover {
    transform:
        translateY(-1px);
}

.btn-primary {
    color:
        #ffffff !important;

    background:
        linear-gradient(
            180deg,
            rgba(116, 147, 180, 0.63),
            rgba(76, 106, 139, 0.65)
        ) !important;

    border:
        1px solid rgba(255, 255, 255, 0.23) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 8px 22px rgba(0, 0, 0, 0.16);
}

.btn-primary:hover {
    background:
        linear-gradient(
            180deg,
            rgba(136, 169, 204, 0.74),
            rgba(81, 118, 157, 0.75)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 11px 25px rgba(0, 0, 0, 0.22);
}

.btn-outline-light {
    color:
        #f3f8fd !important;

    background:
        rgba(255, 255, 255, 0.06) !important;

    border:
        1px solid rgba(255, 255, 255, 0.19) !important;
}

.btn-outline-light:hover {
    color:
        #ffffff !important;

    background:
        rgba(255, 255, 255, 0.15) !important;

    border-color:
        rgba(255, 255, 255, 0.34) !important;
}

.btn-outline-danger {
    color:
        #ffd6db !important;

    background:
        rgba(151, 44, 58, 0.17) !important;

    border-color:
        rgba(255, 145, 157, 0.39) !important;
}

.btn-outline-danger:hover {
    color:
        #ffffff !important;

    background:
        rgba(209, 67, 84, 0.72) !important;

    border-color:
        rgba(255, 155, 166, 0.75) !important;
}

/* =========================
   TABUĽKY
   ========================= */

.table-responsive {
    overflow:
        hidden;

    border-radius:
        0 0 var(--radius-large) var(--radius-large);
}

.table {
    --bs-table-bg:
        transparent;

    --bs-table-accent-bg:
        transparent;

    --bs-table-striped-bg:
        rgba(255, 255, 255, 0.025);

    --bs-table-hover-bg:
        rgba(182, 216, 247, 0.075);

    --bs-table-color:
        var(--text-soft);

    --bs-table-border-color:
        rgba(255, 255, 255, 0.09);

    margin-bottom:
        0 !important;

    color:
        var(--text-soft) !important;
}

.table > :not(caption) > * > * {
    padding:
        12px 14px !important;

    color:
        inherit !important;

    background:
        transparent !important;

    border-bottom-color:
        rgba(255, 255, 255, 0.09) !important;

    box-shadow:
        none !important;

    vertical-align:
        middle;
}

.table thead th {
    color:
        #e6f2ff !important;

    background:
        rgba(14, 31, 51, 0.31) !important;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.15) !important;

    font-size:
        0.69rem;

    font-weight:
        780;

    letter-spacing:
        0.055em;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}

.table tbody tr:hover {
    background:
        rgba(190, 222, 250, 0.065) !important;
}

/* =========================
   HLÁSENIA
   ========================= */

.alert {
    color:
        #f8fafc !important;

    background:
        rgba(34, 55, 80, 0.67) !important;

    border:
        1px solid rgba(255, 255, 255, 0.15) !important;

    border-radius:
        12px !important;

    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.23);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}

.alert-danger {
    color:
        #672b32 !important;

    background:
        rgba(255, 206, 212, 0.93) !important;

    border-color:
        rgba(255, 222, 226, 0.92) !important;
}

.alert-success {
    background:
        rgba(24, 104, 68, 0.63) !important;

    border-color:
        rgba(94, 223, 156, 0.38) !important;
}

.alert-warning {
    background:
        rgba(121, 82, 22, 0.65) !important;

    border-color:
        rgba(246, 198, 102, 0.40) !important;
}

.badge {
    padding:
        6px 9px;

    border-radius:
        999px !important;

    font-size:
        0.7rem;

    font-weight:
        730;
}

.text-muted,
.text-secondary,
small,
.small {
    color:
        var(--text-muted) !important;
}

/* =========================
   POZADIE – OVLÁDANIE
   ========================= */

.background-controls {
    position:
        fixed;

    right:
        17px;

    bottom:
        17px;

    z-index:
        1050;

    display:
        flex;

    gap:
        8px;

    align-items:
        center;
}

.background-button {
    display:
        inline-flex;

    width:
        42px;

    height:
        42px;

    align-items:
        center;

    justify-content:
        center;

    color:
        #ffffff;

    background:
        rgba(23, 43, 67, 0.51);

    border:
        1px solid rgba(255, 255, 255, 0.19);

    border-radius:
        50%;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.25);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    cursor:
        pointer;

    transition:
        transform 0.17s ease,
        background 0.17s ease;
}

.background-button:hover {
    background:
        rgba(65, 91, 120, 0.70);

    transform:
        translateY(-2px);
}

.background-counter {
    display:
        inline-flex;

    height:
        35px;

    padding:
        0 11px;

    align-items:
        center;

    color:
        #e7f1fb;

    background:
        rgba(23, 43, 67, 0.47);

    border:
        1px solid rgba(255, 255, 255, 0.15);

    border-radius:
        999px;

    font-size:
        0.72rem;

    font-weight:
        700;

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}

/* =========================
   MODAL
   ========================= */

.modal-backdrop {
    background:
        #07101d !important;
}

.modal-backdrop.show {
    opacity:
        0.76 !important;
}

.modal-header,
.modal-footer {
    border-color:
        rgba(255, 255, 255, 0.12) !important;
}

.btn-close {
    filter:
        invert(1)
        grayscale(100%)
        brightness(190%);
}

/* =========================
   SCROLLBAR
   ========================= */

::-webkit-scrollbar {
    width:
        10px;

    height:
        10px;
}

::-webkit-scrollbar-track {
    background:
        rgba(4, 13, 25, 0.45);
}

::-webkit-scrollbar-thumb {
    background:
        rgba(170, 194, 217, 0.45);

    border:
        2px solid rgba(4, 13, 25, 0.48);

    border-radius:
        999px;
}

::-webkit-scrollbar-thumb:hover {
    background:
        rgba(193, 214, 233, 0.64);
}

@media (max-width: 768px) {
    .container,
    .container.py-4 {
        width:
            calc(100% - 18px);
    }

    .navbar {
        position:
            relative;
    }

    .navbar .container-fluid {
        gap:
            9px;

        flex-wrap:
            wrap;
    }

    .row.justify-content-center .card {
        padding:
            23px !important;
    }

    .background-controls {
        right:
            11px;

        bottom:
            11px;
    }
}

/* ==================================================
   HBLink – spoľahlivé denné Unsplash pozadie V2
   ================================================== */

body::before,
body::after {
    display: none !important;
    content: none !important;
}

#hblink-daily-background {
    position: fixed;
    inset: 0;
    z-index: -20;

    background-color: #071426;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    opacity: 0;
    transform: scale(1.025);

    transition:
        opacity 1.2s ease,
        background-image 0.3s ease;

    pointer-events: none;
}

#hblink-daily-background.is-visible {
    opacity: 1;
}

#hblink-background-overlay {
    position: fixed;
    inset: 0;
    z-index: -19;

    background:
        linear-gradient(
            180deg,
            rgba(5, 15, 29, 0.48) 0%,
            rgba(5, 15, 29, 0.56) 48%,
            rgba(3, 10, 20, 0.68) 100%
        );

    pointer-events: none;
}

/* Login presne ako Repository – bez hornej lišty. */
body.hblink-login-page .navbar {
    display: none !important;
}

body.hblink-login-page .container,
body.hblink-login-page .container.py-4 {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}

body.hblink-login-page .row.justify-content-center {
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 24px !important;

    align-items: center !important;
    justify-content: center !important;
}

body.hblink-login-page .row.justify-content-center > [class*="col-"] {
    width: min(100%, 390px) !important;
    max-width: 390px !important;
    padding: 0 !important;
}

body.hblink-login-page .row.justify-content-center .card {
    padding: 28px !important;

    background:
        linear-gradient(
            145deg,
            rgba(73, 94, 120, 0.52),
            rgba(35, 54, 78, 0.58)
        ) !important;

    border:
        1px solid rgba(255, 255, 255, 0.22) !important;

    border-radius: 22px !important;

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;

    backdrop-filter:
        blur(25px)
        saturate(130%) !important;

    -webkit-backdrop-filter:
        blur(25px)
        saturate(130%) !important;
}

body.hblink-login-page .background-controls {
    display: none !important;
}

/* =========================================================
   HBLink – definitívna oprava vrstvenia Unsplash pozadia
   ========================================================= */

html {
    min-height: 100%;
    background: #071426 !important;
}

body {
    position: relative !important;
    z-index: 0 !important;

    min-height: 100vh !important;

    /*
     * Body nesmie mať vlastný nepriehľadný gradient,
     * pretože by zakryl fotografiu.
     */
    background: transparent !important;
    background-image: none !important;

    isolation: isolate;
}

/*
 * Skutočná fotografia.
 */
#hblink-daily-background {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;

    display: block !important;

    width: 100vw !important;
    height: 100vh !important;

    background-color: #071426 !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;

    opacity: 0;
    transform: scale(1.02);

    transition: opacity 1.2s ease !important;

    pointer-events: none !important;
}

#hblink-daily-background.is-visible {
    opacity: 1 !important;
}

/*
 * Tmavý filter nad fotografiou.
 */
#hblink-background-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1 !important;

    display: block !important;

    width: 100vw !important;
    height: 100vh !important;

    background:
        linear-gradient(
            180deg,
            rgba(4, 13, 25, 0.42) 0%,
            rgba(4, 14, 27, 0.50) 48%,
            rgba(2, 9, 19, 0.64) 100%
        ) !important;

    pointer-events: none !important;
}

/*
 * Všetok obsah aplikácie musí byť nad fotografiou a overlayom.
 */
body > nav,
body > main,
body > .navbar,
body > .container,
body > .background-controls,
body > script {
    position: relative;
    z-index: 2;
}

/*
 * Inline základná šablóna používa priamo .container.
 */
body.hblink-login-page > .container,
body.hblink-login-page > main {
    position: relative !important;
    z-index: 2 !important;
}

/*
 * Staré pseudo-elementy musia zostať vypnuté.
 */
body::before,
body::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* =========================================================
   HBLink – neutrálne sklo bez modrého nádychu
   ========================================================= */

:root {
    --neutral-glass:
        rgba(18, 21, 27, 0.44);

    --neutral-glass-strong:
        rgba(17, 20, 26, 0.62);

    --neutral-glass-soft:
        rgba(255, 255, 255, 0.055);

    --neutral-border:
        rgba(255, 255, 255, 0.16);

    --neutral-border-soft:
        rgba(255, 255, 255, 0.085);

    --neutral-text:
        #f5f5f4;

    --neutral-muted:
        rgba(231, 229, 228, 0.67);
}

/*
 * Menej farebný overlay, aby fotografia zostala prirodzená.
 */
#hblink-background-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.30) 0%,
            rgba(0, 0, 0, 0.39) 48%,
            rgba(0, 0, 0, 0.53) 100%
        ) !important;
}

/*
 * Navigácia – čisté tmavé sklo.
 */
.navbar {
    background:
        rgba(12, 14, 18, 0.48) !important;

    border-bottom:
        1px solid var(--neutral-border-soft) !important;

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.28) !important;

    backdrop-filter:
        blur(24px)
        saturate(112%) !important;

    -webkit-backdrop-filter:
        blur(24px)
        saturate(112%) !important;
}

/*
 * Hlavné karty, formuláre a modaly.
 */
.card,
.modal-content,
.dropdown-menu {
    color:
        var(--neutral-text) !important;

    background:
        linear-gradient(
            145deg,
            rgba(28, 30, 34, 0.48),
            rgba(13, 15, 19, 0.42)
        ) !important;

    border:
        1px solid var(--neutral-border) !important;

    box-shadow:
        0 26px 75px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;

    backdrop-filter:
        blur(26px)
        saturate(108%) !important;

    -webkit-backdrop-filter:
        blur(26px)
        saturate(108%) !important;
}

.card-header {
    background:
        rgba(10, 11, 14, 0.22) !important;

    border-bottom:
        1px solid var(--neutral-border-soft) !important;
}

/*
 * Login panel.
 */
body.hblink-login-page .row.justify-content-center .card {
    background:
        linear-gradient(
            145deg,
            rgba(31, 33, 37, 0.48),
            rgba(12, 14, 17, 0.44)
        ) !important;

    border:
        1px solid rgba(255, 255, 255, 0.18) !important;

    box-shadow:
        0 30px 85px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;

    backdrop-filter:
        blur(28px)
        saturate(108%) !important;

    -webkit-backdrop-filter:
        blur(28px)
        saturate(108%) !important;
}

/*
 * HB logo bez modrej – neutrálne sklo.
 */
.navbar-brand::before,
.row.justify-content-center .card::before {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.055)
        ) !important;

    border:
        1px solid rgba(255, 255, 255, 0.20) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 12px 30px rgba(0, 0, 0, 0.28) !important;
}

/*
 * Formuláre – sklenené, nie modré.
 */
.form-control,
.form-select,
textarea.form-control {
    color:
        #ffffff !important;

    background:
        rgba(0, 0, 0, 0.20) !important;

    border:
        1px solid rgba(255, 255, 255, 0.15) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.form-control:focus,
.form-select:focus {
    background:
        rgba(0, 0, 0, 0.28) !important;

    border-color:
        rgba(255, 255, 255, 0.38) !important;

    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/*
 * Tlačidlá bez modrého gradientu.
 */
.btn-primary {
    color:
        #ffffff !important;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0.075)
        ) !important;

    border:
        1px solid rgba(255, 255, 255, 0.22) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 9px 24px rgba(0, 0, 0, 0.22) !important;
}

.btn-primary:hover {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.24),
            rgba(255, 255, 255, 0.12)
        ) !important;

    border-color:
        rgba(255, 255, 255, 0.34) !important;
}

/*
 * Tabuľky.
 */
.table thead th {
    color:
        rgba(255, 255, 255, 0.82) !important;

    background:
        rgba(0, 0, 0, 0.17) !important;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.13) !important;
}

.table tbody tr:hover {
    background:
        rgba(255, 255, 255, 0.045) !important;
}

.text-muted,
.text-secondary,
small,
.small {
    color:
        var(--neutral-muted) !important;
}

/* =========================================================
   HBLink – extra glass efekt
   ========================================================= */

.card,
.modal-content,
.dropdown-menu {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(7, 9, 12, 0.20)
        ) !important;

    border:
        1px solid rgba(255, 255, 255, 0.20) !important;

    box-shadow:
        0 28px 85px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        inset 0 -1px 0 rgba(255, 255, 255, 0.025) !important;

    backdrop-filter:
        blur(34px)
        saturate(118%)
        contrast(102%) !important;

    -webkit-backdrop-filter:
        blur(34px)
        saturate(118%)
        contrast(102%) !important;
}

.card::after,
.modal-content::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    border-radius: inherit;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 255, 255, 0.025) 28%,
            transparent 55%
        );
}

.card {
    position: relative;
}

.card-header {
    background:
        rgba(255, 255, 255, 0.022) !important;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.10) !important;
}

body.hblink-login-page .row.justify-content-center .card {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.085),
            rgba(6, 8, 11, 0.20)
        ) !important;

    border:
        1px solid rgba(255, 255, 255, 0.22) !important;

    box-shadow:
        0 32px 95px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;

    backdrop-filter:
        blur(36px)
        saturate(120%) !important;

    -webkit-backdrop-filter:
        blur(36px)
        saturate(120%) !important;
}

.form-control,
.form-select,
textarea.form-control {
    background:
        rgba(255, 255, 255, 0.045) !important;

    border:
        1px solid rgba(255, 255, 255, 0.16) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;

    backdrop-filter:
        blur(16px) !important;

    -webkit-backdrop-filter:
        blur(16px) !important;
}

.form-control:focus,
.form-select:focus {
    background:
        rgba(255, 255, 255, 0.075) !important;

    border-color:
        rgba(255, 255, 255, 0.38) !important;

    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.065) !important;
}

.navbar {
    background:
        rgba(7, 9, 12, 0.28) !important;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.12) !important;

    backdrop-filter:
        blur(30px)
        saturate(115%) !important;

    -webkit-backdrop-filter:
        blur(30px)
        saturate(115%) !important;
}

.btn-primary,
.btn-outline-light,
.btn-secondary {
    backdrop-filter:
        blur(14px) !important;

    -webkit-backdrop-filter:
        blur(14px) !important;
}

/* =========================================================
   HBLink – finálne doladenie glass vzhľadu
   ========================================================= */

/* Prirodzenejšie tmavé prekrytie fotografie. */
#hblink-background-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(4, 8, 14, 0.42) 0%,
            rgba(4, 9, 16, 0.50) 48%,
            rgba(2, 6, 12, 0.62) 100%
        ) !important;
}

/* Veľmi pomalý Ken Burns pohyb fotografie. */
#hblink-daily-background {
    transform: scale(1.055);
    animation: hblinkBackgroundZoom 55s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes hblinkBackgroundZoom {
    from {
        transform: scale(1.055) translate3d(0, 0, 0);
    }

    to {
        transform: scale(1.095) translate3d(-0.7%, -0.5%, 0);
    }
}

/* Tmavšie a čistejšie sklo. */
.card,
.modal-content,
.dropdown-menu {
    position: relative;

    background:
        linear-gradient(
            145deg,
            rgba(23, 27, 34, 0.30),
            rgba(7, 10, 15, 0.25)
        ) !important;

    border:
        1px solid rgba(255, 255, 255, 0.17) !important;

    box-shadow:
        0 24px 68px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        inset 0 -1px 0 rgba(255, 255, 255, 0.025) !important;

    backdrop-filter:
        blur(30px)
        saturate(142%)
        contrast(103%) !important;

    -webkit-backdrop-filter:
        blur(30px)
        saturate(142%)
        contrast(103%) !important;
}

/* Jemný odlesk na skle. */
.card::before,
.modal-content::before {
    position: absolute;
    inset: 0;
    z-index: 0;

    content: "";

    border-radius: inherit;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.11) 0%,
            rgba(255, 255, 255, 0.035) 25%,
            transparent 51%
        );

    pointer-events: none;
}

/* Obsah musí byť nad odleskom. */
.card > *,
.modal-content > * {
    position: relative;
    z-index: 1;
}

.card-header {
    background: rgba(0, 0, 0, 0.10) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
}

/* Glass formuláre. */
.form-control,
.form-select,
textarea.form-control {
    background: rgba(0, 0, 0, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;

    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
}

.form-control:focus,
.form-select:focus {
    background: rgba(0, 0, 0, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;

    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

/* Jemný hover kariet mimo dashboardu. */
.card {
    transition:
        transform 0.24s ease,
        box-shadow 0.24s ease,
        border-color 0.24s ease;
}

.card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(255, 255, 255, 0.23) !important;

    box-shadow:
        0 31px 78px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}


/* =========================================================
   HBLink tematické Unsplash pozadie – FINAL
   Hlavná fotografia bez cropu a bez zoomu
   ========================================================= */

html {
    min-height: 100%;
    background: #071018 !important;
}

body,
.dashboard-v2-page,
.current-calls-page,
.last-heard-page,
.peers-v2-page,
.users-v2-page {
    min-height: 100vh;
    background: transparent !important;
}

/*
 * Rozmazaná kópia iba vypĺňa voľné okraje.
 * Táto vrstva môže používať cover, pretože nie je hlavnou
 * fotografiou a je rozostrená.
 */
#hblink-daily-background-blur {
    position: fixed !important;
    inset: -45px !important;
    z-index: -4 !important;

    display: block !important;

    width: calc(100vw + 90px) !important;
    height: calc(100vh + 90px) !important;

    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;

    filter:
        blur(30px)
        brightness(0.43)
        saturate(0.78) !important;

    transform: scale(1.02) !important;
    transform-origin: center center !important;

    opacity: 1 !important;

    animation: none !important;
    transition: opacity 500ms ease !important;

    pointer-events: none !important;
}

/*
 * Hlavný obrázok je vždy zobrazený celý.
 *
 * contain:
 * - neoreže fotografiu,
 * - neodreže vrch stožiara,
 * - nezväčší fotografiu nad dostupnú plochu.
 */
#hblink-daily-background {
    position: fixed !important;
    inset: 0 !important;
    z-index: -3 !important;

    display: block !important;

    width: 100vw !important;
    height: 100vh !important;

    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-attachment: fixed !important;

    filter:
        brightness(0.72)
        contrast(1.03)
        saturate(0.92) !important;

    transform: none !important;
    transform-origin: center center !important;

    opacity: 1 !important;

    animation: none !important;
    transition: opacity 500ms ease !important;

    pointer-events: none !important;
}

/*
 * Prebije staré .is-visible pravidlá.
 */
#hblink-daily-background.is-visible,
#hblink-daily-background-blur.is-visible {
    opacity: 1 !important;
    transform: none !important;
}

/*
 * Neutrálny overlay bez modrého a fialového nádychu.
 */
#hblink-background-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: -2 !important;

    width: 100vw !important;
    height: 100vh !important;

    background:
        linear-gradient(
            180deg,
            rgba(3, 7, 10, 0.10) 0%,
            rgba(3, 7, 10, 0.17) 45%,
            rgba(3, 7, 10, 0.29) 100%
        ) !important;

    opacity: 1 !important;

    animation: none !important;
    transform: none !important;

    pointer-events: none !important;
}

/*
 * Odstránenie starých farebných pseudo-vrstiev.
 */
body::before,
body::after,
.dashboard-v2-page::before,
.dashboard-v2-page::after {
    background-image: none !important;
    animation: none !important;
}

#hblink-daily-background,
#hblink-daily-background-blur{
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    background-attachment:fixed!important;
    transform:none!important;
    animation:none!important;
}


/* =========================================================
   Login – pozadie vysielačov bez hornej lišty
   ========================================================= */

body.login-page,
body:has(.login-card),
body:has(.login-panel) {
    min-height: 100vh !important;
    margin: 0 !important;
    overflow: hidden;
    background: #071018 !important;
}

body:has(.login-card) #hblink-daily-background,
body:has(.login-panel) #hblink-daily-background,
body.login-page #hblink-daily-background {
    position: fixed !important;
    inset: 0 !important;
    z-index: -3 !important;

    width: 100vw !important;
    height: 100vh !important;

    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;

    animation: none !important;
    transform: none !important;
}

body:has(.login-card) #hblink-daily-background-blur,
body:has(.login-panel) #hblink-daily-background-blur,
body.login-page #hblink-daily-background-blur {
    display: none !important;
}

body:has(.login-card) #hblink-background-overlay,
body:has(.login-panel) #hblink-background-overlay,
body.login-page #hblink-background-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: -2 !important;

    background:
        linear-gradient(
            135deg,
            rgba(3, 7, 11, 0.36) 0%,
            rgba(3, 7, 11, 0.50) 48%,
            rgba(3, 7, 11, 0.68) 100%
        ) !important;

    pointer-events: none !important;
}

body:has(.login-card) .login-shell,
body:has(.login-panel) .login-shell,
body.login-page .login-shell {
    min-height: 100vh !important;
    padding: 24px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* =========================================================
   Login – plné Wikimedia pozadie bez hornej lišty
   ========================================================= */

html,
body {
    min-height: 100% !important;
}

body {
    margin: 0 !important;
}

#hblink-daily-background {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;

    display: block !important;
    width: 100vw !important;
    height: 100vh !important;

    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
    animation: none !important;
    pointer-events: none !important;
}

#hblink-background-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1 !important;

    display: block !important;

    background:
        linear-gradient(
            135deg,
            rgba(3, 7, 11, 0.24) 0%,
            rgba(3, 7, 11, 0.42) 52%,
            rgba(3, 7, 11, 0.62) 100%
        ) !important;

    pointer-events: none !important;
}

body > *:not(
    #hblink-daily-background
):not(
    #hblink-background-overlay
) {
    position: relative;
    z-index: 2;
}

/* Odstránenie prípadnej zostávajúcej login hornej lišty. */
.login-topbar,
.login-header,
.login-navbar,
.app-topbar,
.topbar:has(.brand),
header:has(.login-brand) {
    display: none !important;
}


/* Login – skryť kruhové logo HB */

body:has(form[action*="login"]) .dashboard-brand-logo,
body:has(form[action*="login"]) .login-logo,
body:has(form[action*="login"]) .brand-logo,
body:has(form[action*="login"]) .login-brand-mark {
    display: none !important;
}


body:has(form[action*="login"]) .login-brand,
body:has(form[action*="login"]) .login-header-brand {
    gap: 0 !important;
}


/* ==========================================
   Login Subtitle
   ========================================== */

.hblink-login-subtitle{
    margin: 10px 0 22px;

    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .28rem;
    text-transform: uppercase;

    color: rgba(255,255,255,.96);

    text-shadow:
        0 2px 10px rgba(0,0,0,.45),
        0 0 25px rgba(67,145,255,.35);

    text-align:center;
}


.hblink-login-title{
    text-align:center;
    margin:12px 0 24px;
}

.hblink-login-subtitle{
    margin:0;

    color:#fff;

    font-size:1.45rem;
    font-weight:900;
    letter-spacing:.35rem;
    text-transform:uppercase;

    text-shadow:
        0 0 12px rgba(0,0,0,.55),
        0 0 24px rgba(54,137,255,.45);
}


/* Login branding */

.hblink-login-title{
    margin: 0 0 34px !important;
    text-align: center;
}

.hblink-login-subtitle{
    display:block;

    margin:0;

    color:#ffffff;

    font-size:1.8rem;
    font-weight:900;

    letter-spacing:.42rem;
    text-transform:uppercase;

    line-height:1.15;

    text-shadow:
        0 2px 8px rgba(0,0,0,.55),
        0 0 18px rgba(78,161,255,.40);

    opacity:.98;
}


/* ===== Login Branding ===== */

.hblink-login-brand{
    margin: 0 0 34px;
    text-align:center;
}

.hblink-login-name{
    color:#fff;

    font-size:2.2rem;
    font-weight:900;
    line-height:1;

    letter-spacing:.30rem;
    text-transform:uppercase;

    text-shadow:
        0 2px 10px rgba(0,0,0,.55),
        0 0 24px rgba(55,145,255,.35);
}

.hblink-login-desc{
    margin-top:10px;

    color:rgba(255,255,255,.82);

    font-size:.90rem;
    font-weight:700;

    letter-spacing:.42rem;
    text-transform:uppercase;
}


/* HBLink logo na login stránke */

.hblink-login-logo-image {
    display: block;
    width: 190px !important;
    max-width: 82% !important;
    height: auto !important;
    margin: 0 auto 12px !important;

    border-radius: 18px;
    filter:
        drop-shadow(0 8px 20px rgba(0, 0, 0, 0.40));
}

.hblink-login-desc {
    margin-top: 8px !important;
    text-align: center !important;

    color: rgba(255, 255, 255, 0.86) !important;

    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.28rem !important;
    text-transform: uppercase !important;
}


/* Skrytie bieleho pozadia loga */

.hblink-login-logo-image{
    width:190px !important;
    height:auto !important;

    mix-blend-mode: multiply;
    background: transparent !important;

    filter:
        drop-shadow(0 4px 16px rgba(0,0,0,.45));
}


.hblink-login-logo-image{
    width:190px !important;
    height:190px !important;
    object-fit:cover;

    border-radius:50%;
    overflow:hidden;

    background:transparent !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.45);

    filter:none !important;
}


/* ==========================================
   HBLink Login Logo
   ========================================== */

.hblink-login-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin:0 0 24px;
}

.hblink-login-logo-image{
    width:280px;
    max-width:90%;
    height:auto;
    display:block;
    margin:0 auto;

    filter:
        drop-shadow(0 8px 24px rgba(0,0,0,.45));
}

.hblink-login-desc{
    margin-top:12px;

    color:rgba(255,255,255,.82);

    font-size:.78rem;
    font-weight:800;
    letter-spacing:.35rem;
    text-transform:uppercase;
    text-align:center;
}


/* =========================================================
   Login – finálne rozloženie
   ========================================================= */

.hblink-login-card {
    width: min(430px, calc(100vw - 32px)) !important;
    padding: 30px 30px 28px !important;
    display: block !important;
    border-radius: 22px !important;
}

.hblink-login-header {
    display: block !important;
    width: 100% !important;
    margin: 0 0 26px !important;
    padding: 0 !important;
    text-align: center !important;
}

.hblink-login-title,
.hblink-login-brand {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

.hblink-login-logo-image {
    display: block !important;
    width: 250px !important;
    max-width: 90% !important;
    height: auto !important;
    margin: 0 auto 14px !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

.hblink-login-brand::before,
.hblink-login-brand::after {
    display: none !important;
    content: none !important;
}

.hblink-login-desc {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.84) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.30rem !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

.hblink-login-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 18px !important;
}

.hblink-login-field {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hblink-login-field label {
    display: block !important;
    width: 100% !important;
    margin: 0 0 7px !important;
    text-align: left !important;
}

.hblink-login-field .form-control {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
}

.hblink-login-submit {
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    margin: 2px 0 0 !important;
}


/* Login – jeden stĺpec */

.hblink-login-card {
    display: block !important;
    width: min(430px, calc(100vw - 32px)) !important;
    padding: 30px !important;
}

.hblink-login-header {
    display: block !important;
    width: 100% !important;
    margin: 0 0 26px !important;
}

.hblink-login-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 18px !important;
}

.hblink-login-logo-image {
    display: block !important;
    width: 250px !important;
    max-width: 90% !important;
    height: auto !important;
    margin: 0 auto 14px !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}

.hblink-login-desc {
    margin: 0 !important;
    text-align: center !important;
}


/* Login – jeden stĺpec */

.hblink-login-card {
    display: block !important;
    width: min(430px, calc(100vw - 32px)) !important;
    padding: 30px !important;
}

.hblink-login-header {
    display: block !important;
    width: 100% !important;
    margin: 0 0 26px !important;
}

.hblink-login-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 18px !important;
}

.hblink-login-logo-image {
    display: block !important;
    width: 250px !important;
    max-width: 90% !important;
    height: auto !important;
    margin: 0 auto 14px !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}

.hblink-login-desc {
    margin: 0 !important;
    text-align: center !important;
}


/* Logo + DMR SERVER MANAGEMENT úplne pri sebe */

.hblink-login-brand{
    gap:0 !important;
}

.hblink-login-logo-image{
    display:block !important;
    margin:0 auto -28px !important;
    padding:0 !important;
}

.hblink-login-desc{
    display:block !important;

    margin:-22px 0 8px !important;
    padding:0 !important;

    line-height:1 !important;
    font-size:1rem !important;
    font-weight:900 !important;
    letter-spacing:.22rem !important;
}


/* DMR SERVER MANAGEMENT bližšie k logu */

.hblink-login-logo-image{
    margin-bottom:-8px !important;
}

.hblink-login-desc{
    margin-top:-6px !important;
    margin-bottom:12px !important;

    font-size:1rem !important;
    font-weight:900 !important;
    letter-spacing:.22rem !important;
}


/* DMR SERVER MANAGEMENT nižšie pod logom */

.hblink-login-logo-image{
    margin-bottom:0 !important;
}

.hblink-login-desc{
    display:block !important;

    margin-top:22px !important;
    margin-bottom:12px !important;

    font-size:1rem !important;
    font-weight:900 !important;
    letter-spacing:.22rem !important;

    text-align:center !important;
}


/* =========================================================
   Login – menšie medzery okolo loga
   ========================================================= */

.hblink-login-card {
    padding-top: 20px !important;
    padding-bottom: 28px !important;
}

.hblink-login-header {
    margin: 0 0 18px !important;
}

.hblink-login-brand {
    margin: 0 !important;
}

.hblink-login-logo-image {
    width: 245px !important;
    margin: 0 auto 4px !important;
}

.hblink-login-desc {
    margin-top: 0 !important;
    margin-bottom: 18px !important;

    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.28rem !important;
}

.hblink-login-form {
    margin-top: 0 !important;
    gap: 16px !important;
}


/* Logo ešte vyššie */

.hblink-login-card{
    padding-top:10px !important;
}

.hblink-login-header{
    margin-top:-10px !important;
    margin-bottom:10px !important;
}

.hblink-login-brand{
    margin-top:-8px !important;
}

.hblink-login-logo-image{
    margin-top:-6px !important;
    margin-bottom:2px !important;
}


/* Menšia medzera pod logom */

.hblink-login-logo-image{
    margin-bottom:-8px !important;
}

.hblink-login-desc{
    margin-top:0 !important;
    margin-bottom:10px !important;
    padding-top:0 !important;
}

.hblink-login-header{
    margin-bottom:6px !important;
}

.hblink-login-form{
    margin-top:0 !important;
}


/* Logo úplne hore */

.hblink-login-card{
    padding-top:4px !important;
}

.hblink-login-header{
    margin-top:-20px !important;
    padding-top:0 !important;
}

.hblink-login-brand{
    margin-top:-18px !important;
    padding-top:0 !important;
}

.hblink-login-logo-image{
    margin-top:-16px !important;
}


/* Posun loga ešte vyššie */

.hblink-login-card{
    padding-top:0 !important;
}

.hblink-login-header{
    margin-top:-40px !important;
    margin-bottom:0 !important;
    padding-top:0 !important;
}

.hblink-login-brand{
    margin-top:-35px !important;
    margin-bottom:0 !important;
    padding-top:0 !important;
}

.hblink-login-logo-image{
    margin-top:-30px !important;
    margin-bottom:-10px !important;
}


/* DMR SERVER MANAGEMENT – väčší text vo farbách loga */

.hblink-login-desc {
    display: inline-block !important;

    margin-top: 8px !important;
    margin-bottom: 8px !important;
    padding: 0 !important;

    font-size: 0.92rem !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.22rem !important;

    text-align: center !important;
    text-transform: uppercase !important;

    background:
        linear-gradient(
            90deg,
            #37a63f 0%,
            #37a63f 46%,
            #f28a22 54%,
            #f28a22 100%
        ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;
    color: transparent !important;

    text-shadow: none !important;
}

/* Trochu väčší odstup medzi logom a textom */

.hblink-login-logo-image {
    margin-bottom: 0 !important;
}


/* DMR SERVER MANAGEMENT nižšie pod logom */

.hblink-login-logo-image{
    margin-bottom:0 !important;
}

.hblink-login-desc{
    display:block !important;

    margin-top:22px !important;
    margin-bottom:12px !important;

    font-size:1rem !important;
    font-weight:900 !important;
    letter-spacing:.22rem !important;

    text-align:center !important;
}


/* DMR SERVER MANAGEMENT bližšie k logu */

.hblink-login-logo-image{
    margin-bottom:-8px !important;
}

.hblink-login-desc{
    margin-top:-6px !important;
    margin-bottom:12px !important;

    font-size:1rem !important;
    font-weight:900 !important;
    letter-spacing:.22rem !important;
}


/* Logo + DMR SERVER MANAGEMENT úplne pri sebe */

.hblink-login-brand{
    gap:0 !important;
}

.hblink-login-logo-image{
    display:block !important;
    margin:0 auto -28px !important;
    padding:0 !important;
}

.hblink-login-desc{
    display:block !important;

    margin:-22px 0 8px !important;
    padding:0 !important;

    line-height:1 !important;
    font-size:1rem !important;
    font-weight:900 !important;
    letter-spacing:.22rem !important;
}


/* Login formulár */

.hblink-login-form{
    margin-top:18px !important;
}

.hblink-login-field{
    margin-bottom:14px !important;
}

.hblink-login-field label{
    display:none !important;
}

.hblink-login-field .form-control{
    height:48px !important;
    padding:0 16px !important;
    font-size:.95rem !important;
}

.hblink-login-field .form-control::placeholder{
    color:rgba(255,255,255,.55) !important;
}


/* ===================================================
   Kompaktnejší login
   =================================================== */

.hblink-login-card{
    width:360px !important;
    max-width:calc(100vw - 40px) !important;

    padding:18px 24px 22px !important;

    border-radius:20px !important;
}

.hblink-login-logo-image{
    width:180px !important;
    height:auto !important;
}

.hblink-login-desc{
    font-size:.88rem !important;
    letter-spacing:.20rem !important;
    margin:0 0 14px !important;
}

.hblink-login-form{
    gap:14px !important;
}

.hblink-login-field .form-control{
    height:44px !important;
    font-size:.92rem !important;
    border-radius:12px !important;
}

.hblink-login-submit{
    height:44px !important;
    font-size:1rem !important;
    border-radius:12px !important;
}


/* =====================================================
   Login tlačidlo – bez akéhokoľvek zosvetlenia
   ===================================================== */

button.hblink-login-submit,
button.hblink-login-submit:hover,
button.hblink-login-submit:focus,
button.hblink-login-submit:focus-visible,
button.hblink-login-submit:active,
button.hblink-login-submit.btn-primary,
button.hblink-login-submit.btn-primary:hover,
button.hblink-login-submit.btn-primary:focus,
button.hblink-login-submit.btn-primary:active,
button.hblink-login-submit.btn:first-child:active,
button.hblink-login-submit:not(.btn-check) + .btn:active {
    width: 86% !important;
    height: 40px !important;
    min-height: 40px !important;

    margin: 4px auto 0 !important;
    padding: 0 14px !important;

    color: #ff9800 !important;
    -webkit-text-fill-color: #ff9800 !important;

    background: #11181f !important;
    background-color: #11181f !important;
    background-image: none !important;

    border: 1px solid rgba(10, 165, 93, 0.45) !important;
    border-radius: 11px !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 5px 14px rgba(0, 0, 0, 0.28) !important;

    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;

    font-size: 0.82rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04rem !important;

    outline: none !important;
}

button.hblink-login-submit:hover {
    color: #ff9800 !important;
    -webkit-text-fill-color: #ff9800 !important;

    background: #11181f !important;
    background-color: #11181f !important;

    border-color: rgba(10, 165, 93, 0.45) !important;

    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

/* Zelené prihlasovacie tlačidlo */

button.hblink-login-submit,
button.hblink-login-submit:hover,
button.hblink-login-submit:focus,
button.hblink-login-submit:active {

    width: 86% !important;
    height: 40px !important;
    margin: 4px auto 0 !important;

    background: linear-gradient(180deg,#16a34a,#15803d) !important;
    background-color: #15803d !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    border: 1px solid #1db954 !important;
    border-radius: 11px !important;

    font-size: .85rem !important;
    font-weight: 800 !important;

    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 6px 16px rgba(0,0,0,.30) !important;
}


/* Zelené prihlasovacie tlačidlo */

button.hblink-login-submit,
button.hblink-login-submit:hover,
button.hblink-login-submit:focus,
button.hblink-login-submit:active {

    width: 86% !important;
    height: 40px !important;
    margin: 4px auto 0 !important;

    background: linear-gradient(180deg,#16a34a,#15803d) !important;
    background-color: #15803d !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    border: 1px solid #1db954 !important;
    border-radius: 11px !important;

    font-size: .85rem !important;
    font-weight: 800 !important;

    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 6px 16px rgba(0,0,0,.30) !important;
}


/* ==========================================
   HBLink zelené prihlasovacie tlačidlo
   ========================================== */

button.hblink-login-submit,
button.hblink-login-submit.btn-primary{

    width:86% !important;
    height:40px !important;
    margin:4px auto 0 !important;

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    background:linear-gradient(
        180deg,
        #29c458 0%,
        #21b34b 55%,
        #1b9b40 100%
    ) !important;

    border:1px solid #34d66a !important;
    border-radius:11px !important;

    font-size:.84rem !important;
    font-weight:800 !important;
    letter-spacing:.04rem !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 6px 18px rgba(0,0,0,.28) !important;

    transition:background .15s ease !important;
}

/* Hover bez vyblednutia */

button.hblink-login-submit:hover,
button.hblink-login-submit:focus,
button.hblink-login-submit:active{

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    background:linear-gradient(
        180deg,
        #25b952 0%,
        #1fa847 55%,
        #18893a 100%
    ) !important;

    border-color:#34d66a !important;

    opacity:1 !important;
    filter:none !important;
    transform:none !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 6px 18px rgba(0,0,0,.28) !important;
}


/* =====================================================
   HBLink zelené tlačidlo - tmavší odtieň loga
   ===================================================== */

button.hblink-login-submit,
button.hblink-login-submit:hover,
button.hblink-login-submit:focus,
button.hblink-login-submit:active{

    background: linear-gradient(
        180deg,
        #009b55 0%,
        #008647 45%,
        #00753d 100%
    ) !important;

    background-color:#008647 !important;

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    border:1px solid #00b060 !important;

    opacity:1 !important;
    filter:none !important;
    transform:none !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 8px 18px rgba(0,0,0,.35) !important;
}

button.hblink-login-submit:hover{
    background: linear-gradient(
        180deg,
        #008f4a 0%,
        #007d41 45%,
        #006c37 100%
    ) !important;

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
}


/* Jemne tmavšia HBLink zelená */

button.hblink-login-submit,
button.hblink-login-submit:hover,
button.hblink-login-submit:focus,
button.hblink-login-submit:active{

    background:linear-gradient(
        180deg,
        #16b84a 0%,
        #10953d 55%,
        #0c7b33 100%
    ) !important;

    background-color:#10953d !important;
    border:1px solid #1fc65a !important;

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;

    filter:none !important;
    opacity:1 !important;
    transform:none !important;
}